style_system | "span" HTML/CSS tag?

So I heard that the font tag and associated tags are being deprecated? (I'm not sure? This also includes center?) So I started using span when needed in my entries. The problem is that the text isn't displaying accurately anymore.

In the layout I'm using, italicized text displays as Old Standard TT or Georgia, and bolded text is displayed as Lato or Calibri. If I just use b or i, the text displays correctly. But if I use span (like, < span style="font: italic;" >*text*< /span >, the different fonts are gone.

This is the layout CSS I'm using:

/* background images */

#secondary /*sidebar image */ {
background-image:url(http://i.minus.com/ibaAdGcgfjaqAM.jpg); 
}

body /* background image */ {
background-image: url(http://i.minus.com/ib1WRvDxtrnsAG.gif);
}

/* remote fonts */

@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 300;
src: local('Lato Light'), local('Lato-Light'), url

(http://themes.googleusercontent.com/static/fonts/lato/v5/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype');
}

@font-face {
font-family: 'Lato';
font-style: italic;
font-weight: 300;
src: local('Lato Light Italic'), local('Lato-LightItalic'), url

(http://themes.googleusercontent.com/static/fonts/lato/v5/2HG_tEPiQ4Z6795cGfdivKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

@font-face {
font-family: 'Old Standard TT';
font-style: italic;
font-weight: normal;
src: local('Old Standard TT Italic'), local('OldStandardTT-Italic'), url

('http://themes.googleusercontent.com/static/fonts/oldstandardtt/v4/QQT_AUSp4AV4dpJfIN7U5NqjIJxvUPK7zqL_omZtgx8.woff') format('woff');
}

@font-face {
font-family: 'Old Standard TT';
font-style: normal;
font-weight: normal;
src: local('Old Standard TT Regular'), local('OldStandardTT-Regular'), url

('http://themes.googleusercontent.com/static/fonts/oldstandardtt/v4/n6RTCDcIPWSE8UNBa4k-DOeKpinAksS0bOq9o5QARNc.woff') format('woff');
}

body {
padding: 0;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 12px;
color: #58594f;
line-height: 1.5em;
}

html body {
margin-left: 0em;
margin-right: 0em;
}

img { border: none; }

strong, b {
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
font-weight: 300;
letter-spacing: 1px;
color: #7a7c6e;
}

em, i {
font-family: "Old Standard TT", Georgia, serif;
font-style: italic;
color: #919383;
}

a { text-decoration: none; }
a, a:link, a:visited { color: #df1b1c;   }
a:hover { color: #ba1415; }

q { font-style: italic; }

#canvas {
margin: 0;
margin-left: 160px;
padding: 15px 0;
padding-left:0;
text-align: justify;
width: 960px;
}

#primary {
width: 700px;
text-align: left;
margin: 0;
float: left;
   }

#secondary {
width: 250px;
background-repeat: no-repeat;
padding: 160px 0 0 0;
margin: 1px 0 0 10px;
position: fixed;
left: 910px;
float: left;
}

#tertiary {
clear: both;
background: #fff;
color: #3f4036;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
margin: 0;
width: 550px;
    }

#tertiary > .inner:first-child { }

#tertiary .separator-after { clear: both; }

/*--- header + footer ---*/

#header { display: none; }
#footer {
background: #ffffff;
text-transform: lowercase;
clear: both;
margin-top: 10px;
width: 550px;
font-family: "Old Standard TT", Gerogia, serif;
}

#footer a, #footer a:link, #footer a:active, #footer a:visited { color: #7a7c6e; }
#footer a:hover { color: #54554d; }

#footer .inner { padding: 10px; }

/*--- prev/next navigation ---*/

li.page-back, li.page-forward {
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
    }

li.page-separator { display: none; }

.navigation ul {
    display: inline;
    padding: 0;
    margin: 0;
    }

/*--- entry ---*/

.entry {
background: #fff;
color: #3f4036;
position: relative;
padding: 15px;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.entry a, #tertiary a {
 color: #df1b1c;
 }

.entry a:visited, #tertiary a:visited {
 color: #df1b1c;
 }

.entry a:hover, #tertiary a:hover {
 color: #ba1415;
    }

.entry-content { margin: 10px 0 0 0; }

.entry .header {
padding: 0;
margin: 0 0 10px 0;
border-bottom: 1px solid #eef3e4;
}

h3.entry-title {
margin: 0;
font-family: "Old Standard TT", Georgia, sans-serif;
font-size: 30px;
font-weight: 400;
color: #000;
text-align: left;
display: inline-block;
padding: 7px 5px;
}

h3.entry-title a{
color: #000;
}

h3.entry-title a:visited{
color: #000;
}

h3.entry-title a:hover {
color: #df1b1c;
}

.datetime, .comment .poster {
font-family: Lato, Helvetica, sans-serif;
font-size: 10px;
display: block;
text-transform: uppercase;
color: #ccc;
}

.datetime a {
color: #ccc;
}

.datetime a:visited {
color: #ccc;
}

.datetime a:hover {
color: #ba1415;
}

.entry .userpic {
display: block;
margin: 0;
position: absolute;
top: 0;
left: -110px;
width: 100px;
text-align: right;
padding-bottom: 1px;
}

.entry .userpic img {
border: 0px;
border-bottom: 10px solid #fff;
padding-bottom: 2px;
}

.poster {
font-family: Helvetica, Georgia, sans-serif;
text-transform: uppercase;
}

.metadata {
margin: 15px 0 15px 0; 
}

.metadata ul {
padding: 0;
margin: 0;
}

.metadata ul li {
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #54554d;
padding: 2px 0;
font-family: Arial, Helvetica, sans-serif;
}
	
.metadata-label {
color: #000;
text-transform: uppercase;
font-family: Lato, Verdana, sans-serif;
font-weight: 300;
letter-spacing: 1px;
}

.tag-text {
text-transform: uppercase;
font-family: "Old Standard TT", serif;
font-size: 12px;
background-image:url(http://i.minus.com/iJMACTOWxThm2.png);
background-position: center left;
background-repeat:no-repeat;
padding-left: 12px;
}
	
.tag-text b {
letter-spacing: 0;
}

.tag ul {
padding: 0 0 0 2px;
margin: 0;
display: inline;
}

.tag ul li {
display: inline;
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #939393;
font-family: "Old Standard TT", serif;
font-style: italic;
letter-spacing: 0;
padding: 0;
}

ul.entry-management-links {
padding: 0;
margin: 10px 0 0 0;
}

ul.entry-management-links li {
display: inline;
list-style: none;
font-weight: normal;
text-transform: lowercase;
color: #939393;
letter-spacing: 0;
padding: 0 5px 0 0;
}

ul.entry-interaction-links {
padding: 0 0 5px 0;
margin: 10px 0 0 0;
text-align: center;
}

ul.entry-interaction-links li {
display: inline;
list-style: none;
text-transform: uppercase;
padding: 0 5px 0 0;
font-weight: normal;
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
font-weight: 300;
font-size: 12px;
letter-spacing: 1px;
}

.entry ul {
list-style-type: circle;
}

.entry ol {
list-style-type: lower-roman;
}

/*-- archive --*/

li.active {
list-style: none;
display: inline;
padding: 0;
margin: 10px;
}

.month {
background-color: #ffffff;
color: #7a7a7a;
padding: 20px;
margin: 0;
}

.month h3 {
font-family: "Old Standard TT", Georgia, sans-serif; 
font-size: 14px;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
padding: 0;
margin: 0;
text-align: right;
}

.month a {
color: #df1b1c;
}

.month a:visited {
color: #df1b1c;
}

.month a:hover {
color: #ba1415;
}

.navigation ul { display: inline; }
.navigation li { display: inline; list-style: none; }

table.month { border: 0; }
.month caption { display: none; }
.month th {
text-align: center;
margin: 0 2px;
text-transform: lowercase;
font-weight: normal;
}

.month td.day {
font-weight: normal;
color: #939393;
}

.month td.day-has-entries {
font-weight: normal;
color: #939393;
}

.month td.day-has-entries p {
padding: 0 0 0 5px;
margin: 0;
display: inline;
}

.month table {
width: 100%;
border: 0;
margin: auto;
}

td.day {
padding: 10px;
border: 0;
text-align: center;
}

/*-- tags --*/

.page-tags .tags-container {
background-color: #ffffff;
color: #7a7a7a;
padding: 10px;
margin: 0 0 10px 0;
}

.page-tags .tags-container h2 {
margin: 0 0 10px 0;
padding: 0;
border-width: 0 0 1px 0;
border-style: solid;
border-color: #d4d4d4;
font-weight: normal;
text-transform: lowercase;
letter-spacing: 1px;
color: #939393;
}

.page-tags .ljtaglist { margin: 0; padding: 0; }
.page-tags .ljtaglist li {
padding: 0 0 0 10px;
margin: 0;
text-transform: lowercase;
letter-spacing: 0;
list-style: none;
}

.page-tags .tags-container a {
color: #df1b1c;
}

.page-tags .tags-container a:visited {
color: #df1b1c;
}

.page-tags .tags-container a:hover {
color: #ba1415;
}

.page-tags .tags_cloud { text-align: center; }

/*-- icons page --*/

.icons-container {
background-color: #ffffff;
color: #7a7a7a;
padding: 10px;
margin: 0 0 10px;
}

.icons-container h2 {
border-color: #d4d4d4;
border-style: solid;
border-width: 0 0 1px 0;
color: #939393;
font-weight: normal;
letter-spacing: 1px;
margin: 0 0 10px 0;
padding: 0;
text-transform: lowercase;
}

.icons-container a {
color: #df1b1c;
}

.icons-container a:visited {
color: #df1b1c;
}

.icons-container a:hover {
color: #ba1415;
}

.sorting-options ul {
padding-left: 0;
}

.sorting-options ul li {
display: inline;
list-style: none;
margin: 0;
}

.page-icons .comment {
margin: 0;
padding: 0;
}

.page-icons .icon {
margin: 1em 0;
}

.icon-image {
float: left;
clear: left;
margin-bottom: .25em;
min-width: 100px;
padding-right: 1em;
}

.icon-info {
min-height: 100px;
}

.icon-info span {
font-weight: bold;
}

.icon-info .default {
text-decoration: underline;
}

.icon-info .keywords ul {
display: inline;
padding: 0 0 0 13px;
}

.icon-info ul li {
display: inline;
list-style-type: none;
padding: 0 .25em 0 0;
}

/*--- comments ---*/

#comments {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

.comment-title {
text-align: left;
}

.comment-title h4 {
font-size: 14px;
font-weight: normal;
display: inline-block;
color: #fff;
margin: 0;
font-family: "Old Standard TT", Georgia, serif;
}

.comment-title h4 a {
color: #fff;
padding: 1px 4px;
background: #000 !important;
}

.comment-pages {
font-family: "Old Standard TT", Georgia, serif;
margin: 15px 0;
}

.comment-pages a {
color: #7a7c6e;
}

.comment-pages a:hover {
color: #54554d;
}

hr.above-entry-interaction-links, hr.below-reply-container { display: none; }

input, textarea {
background-color: white;
padding: 3px;
border: 1px solid #eef3e4;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}

textarea.textbox  { width: 90%!important; }

.poster-ip {
font-family: Helvetica, Georgia, sans-serif;
text-transform: uppercase;
color: #939393;
display: block;
text-align: left;
}

.comment .userpic {
width: 100px;
position: absolute;
top: 0;
left: -110px;
text-align: right;
}

.comment .userpic img {
padding-bottom: 2px;
border-bottom: 10px solid #fff;
}

.comment {
background: #fff;
position: relative;
color: #3f4036;
padding: 15px;
margin: 0 0 10px 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
    }

.comment-wrapper { margin: 20px 0; padding: 0; }
.comment-content { margin: 10px 0; }

.bottomcomment, .comments-message {
background: #ffffff;
color: #7a7a7a;
padding: 20px;
margin: 0;
}

.comment a,
.bottomcomment a {
color: #df1b1c;
}

.comment a:visited,
.bottomcomment a:visited {
color: #df1b1c;
}

.comment a:hover,
.bottomcomment a:hover {
color: #ba1415;
}

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

#qrform table { border: 0!important; }

.comment-poster {
font-family: Helvetica, Georgia, sans-serif; font-size: 0.6em;
text-transform: uppercase;
color: #939393;
}

.comment-management-links ul, .comment-interaction-links ul { margin: 0; padding: 0; list-style: none; }
.comment-management-links li, .comment-interaction-links li { display: inline; }

table.talkform {
background: #ffffff;
font-size: 12px;
padding: 10px;
margin: 0 0 10px 0;
}

table.talkform b {
color: #7a7a7a;
}

table.talkform a {
color: #df1b1c;
}

table.talkform a:visited {
color: #df1b1c;
}

table.talkform a:hover {
color: #ba1415;
}

/*-- modules --*/

#secondary .module {
font-family: "Old Standard TT", Georgia, sans-serif;
font-size: 12px;
}

#tertiary .module {
float: left;
width: 255px;
padding: 10px;
}

#tertiary .module-navlinks {
margin: 0;
padding: 1em 5%;
width: 90%;
}

.module-navlinks {
padding: 10px;
margin: 0;
}

#secondary .module-typelist, #secondary .module-navlinks {
margin: 0;
background-color: #fff;
text-transform: uppercase;
}

#secondary .module-typelist, #secondary .module-navlinks {
font-family: Lato, sans-serif;
font-weight: 300;
}

#secondary .module-typelist a, #secondary .module-navlinks a{
color: #000;
}

#secondary .module-typelist a:hover, #secondary .module-navlinks a:hover{
color: #df1b1c;
}

#secondary .module-typelist .module-header {
display: none;
}

.module-navlinks ul.module-list {
padding: 0;
margin: 0;
list-style: none;
}

.module-navlinks ul.module-list li {
padding: 0;
margin: 0;
list-style: none;
}

.module-navlinks ul.module-list li a, .module-navlinks ul.module-list li a:link { color: #ba1415; }
.module-navlinks ul.module-list li a:visited { color: #ba1415; }
.module-navlinks ul.module-list li a:hover { color: #cbdadc; }

.module-calendar { text-align: center; }
.module-customtext {
padding: 0;
margin: 20px 0 0 0;
}

.module-typelist .module-list-item {
margin-left:-2.5em;
}

.module-list-item {
border-bottom: 1px solid #eef3e4;
list-style: none;
}

.module-header {
font-family: "Old Standard TT", sans-serif; 
font-size: 14px;
color: #fff;
background: #000;
display: inline-block;
font-weight: 300;
text-align: left;
padding: 1px 3px;
margin: 5px 0;
}

#tertiary .module-header a,
#tertiary .module-header a:link,
#tertiary .module-header a:visited,
#tertiary .module-header a:hover
    { color: #fff;  }

.module-userprofile .journal-name,
.module-userprofile .userpic
    { text-align: center; }

.module-userprofile .userpic img { border:7px solid #000; padding: 1px; }

.module-credit {display: none;}

ul.userlite-interaction-links.icon-links {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-left: 0;
padding-left: 0;
text-align: center;
}

ul.userlite-interaction-links.icon-links li {
display: inline;
padding: 0 0.2em;
}

.module-tags_cloud, .module-time, .module-powered { width: 90%; }

.tags_cloud li, .module-tags_cloud li { display: inline;
list-style-type: none; }

.manage-link {
font-size: smaller;
text-align: right;
text-transform: uppercase;
}

.module-time, .module-powered {
border-style:solid;
border-width: 0 0 1px 0;
border-color: #d4d4d4;
letter-spacing: 1px;
text-align: center;
padding-top: 1em;
}

.module-search .search-form { margin: .2em auto; }
.module-search .search-box { margin: .2em; }

#tertiary .module-content ul {
list-style-type: none;
font-weight: 300;
margin: 0;
padding: 0;
}

#tertiary .module-content li {
margin: 0.5em 0;
text-align: center;
}
	
#tertiary .module-content li a {
font-family: Lato, Verdana, Geneva, sans-serif;
text-transform: uppercase;
color: #000;
}
	
#tertiary .module-content li a:hover {
color: #df1b1c;
}
	
#tertiary  .module-customtext {
padding: 5px 10px;
font-family: "Old Standard TT", Georgia, serif;
font-size: 12px;
line-height: 200%;
width: 530px;
text-align: left;
}

/*-- extras --*/

div.ContextualPopup {
position: relative;
margin: 0;
text-align: justify;
font-weight: normal;
font-family: Helvetica, Georgia, sans-serif; 
font-size: 50%;
color: #939393;
line-height: 1.8em;
}

div.ContextualPopup div.Inner {
color: #939393 !important;
border: 1px solid #d4d4d4;
background: #ffffff !important;
padding: 10px;
}

div.ContextualPopup div.Inner a {
color: #df1b1c;
}

div.ContextualPopup div.Inner a:visited {
color: #df1b1c;
}

div.ContextualPopup div.Inner a:hover {
color: #ba1415;
}

div.ContextualPopup div.Inner a:active {
color: ;
}

div.ContextualPopup .Userpic {
margin: 5px;
border: 1px solid #d4d4d4;
background: #ffffff !important;
padding: 5px;
}

blockquote {
background: whiteSmoke;
border: 0;
font-size: 14px;
font-style: italic;
padding: 20px;
margin: 20px;
color:#666;
font-family: "Old Standard TT", Georgia, serif;
}

hr {
color: transparent;
height: 1px;
border-style: none;
border-bottom: 3px double #e6e6e6;
    }

#lj_controlstrip {
background-color: #fff;
background-image: none;
height: 53px;
}

#lj_controlstrip_userpic {
padding-top: 5px;
padding-left: 5px;
width: 43px;
}

#lj_controlstrip td {
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 17.5px;
letter-spacing: normal;
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
color: #3a3b35;
}

#lj_controlstrip_statustext {
color: #7a7c6e;
font-weight: normal;
font-family: "Old Standard TT", Georgia, serif;
font-size: 14px;
margin-bottom: 5px;
}

#lj_controlstrip input {
font-family: Arial, sans-serif;
font-size: 11px;
line-height: 16.5px;
background-color: #fff;
color: #999;
padding: 1px 3px;
margin: 0;
width: auto;
text-transform: none;
}

#lj_controlstrip a {
font-family: "Lato", Calibri, Tahoma, Geneva, sans-serif;
color: #3a3b35;
}

#lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_loggedout_userpic, #lj_controlstrip_actionlinks {
border-right: 1px solid #eef3e4;
}

.ljuser b { font-family: Arial, Helvetica, sans-serif; font-weight: bold; letter-spacing: 0px; color: #000; }
.ljuser a {color: #000 !important;}
	
#canvas img[src*="user.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/i1bo4JTvGQygv.png) no-repeat; padding: 10px 2px 0 6px !important; }
#canvas img[src*="community.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/iltHnCHychfRl.png) no-repeat; padding: 10px 2px 0 8px !important; }
#canvas img[src*="feed.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/ibyVh8y0BE8oOi.png) no-repeat; padding: 12px 0 0 15px !important;

}

#canvas img[src*="locked.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/iEuXkZcmNZwUu.png) no-repeat; padding: 16px 0 0 18px !

important; }

#canvas img[src*="filtered.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/ibib7u76UD2NpE.png) no-repeat; padding: 16px 0 0 16px !

important; }

#canvas img[src*="private.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/ishet4cUxcwCU.png) no-repeat; padding: 16px 0 0 18px !

important; }
#canvas img[src*="user_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/iJn4pDj4cAxr4.png) no-repeat; padding: 12px 0 0 12px !important; }
#canvas img[src*="comm_staff.png"] {width: 0 !important; vertical-align: middle !important; margin: 0 auto; height: 0 !important;
background: transparent url(http://i.minus.com/i5B3xsqkQT36Z.png) no-repeat; padding: 12px 0 0 15px !important; }

img[src*="collapse.gif"] { 
width: 0; 
height: 0; 
padding: 0px 0px 8px 10px !important; 
background: transparent url(http://i.minus.com/iCha47dJYmABh.png) no-repeat scroll 0 0; 
}

img[src*="expand.gif"] { 
width: 0; 
height: 0; 
padding: 0px 0px 8px 10px !important; 
background: transparent url(http://i.minus.com/ibzsjFWQXthnEj.png) no-repeat scroll 0 0; 
}

img[src*="collapse-end.gif"] { 
width: 0; 
height: 0; 
padding: 0px 0px 8px 10px !important; 
background: transparent url(http://i.minus.com/i6jUTJEPw0uDR.png) no-repeat scroll 0 0; 
}

Alternately, if I'm wrong about font being deprecated, feel free to tell me I'm an idiot so I can just go back to my old ways.

Flat | Top-Level Comments Only

From:

zooey_glass

Just an addendum - my understanding is that it's actually bad to use span styles where the text styling has semantic meaning. That is, if you want it to display in italics because you're emphasising it, you should use [em] rather than a span, because that way screen readers will also know to emphasise it. When they hit spans, they just go 'ho hum, some visual styling' and ignore that.

For the same reason, it's better to use h1, h2 etc for headers (rather than styling big, bold text or whatever) since those will actually allow a screenreader user to scan through just the headings in the same way as a visual user can.

Dreamwidth style system discussion

"span" HTML/CSS tag?

"span" HTML/CSS tag?

no subject

Profile

October 2025

Links

Most Popular Tags

Page Summary

Style Credit

Expand Cut Tags