We're running into issues with how we specify font sizes. If we specify the font sizes using pt, they don't always look the same across browsers/platforms. If we specify font sizes using px, IE6 users can't resize the text.
views:
694answers:
5
+1
A:
You should always use relative units for font sizes, such as em.
John Topley
2008-10-17 17:48:34
+1
A:
http://developer.yahoo.com/yui/fonts/#fontsize (edit: I believe this assumes their base CSS, but it is assuming a base size of 13px; I believe even IE properly resizes percent-sized text where the percents are measured against a px size.)
That said, you are never going to get pixel-perfect font sizing, especially if you are trying to match a graphical mockup, but even just browser to browser, things will differ in text rendering.
eyelidlessness
2008-10-17 17:50:10
+2
A:
An article on A List Apart (November 2007) explored this in depth in various browsers and concluded:
Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
They provided screen shots of how this technique looks in most popular browsers. Here is the code they used:
<style type="text/css">`
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
Nathan Long
2008-10-17 18:52:45
Values for the 'line-height' property do not need a unit specified. Line-height is already relative to the font-size, so a unitless line-height is the same as one specified in ems. So 'line-height:1.125em;' is the same as 'line-height:1.125;'
Andy Ford
2009-02-27 17:55:43
+1
A:
You're always going to have trouble matching mockups unless you use px.
http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
I don't feel there's anything particularly wrong with using px for your web pages. Especially since almost all the modern browsers--save for webkit--use zooming as opposed to text-resizing by default.
I still might stick to what Nathan suggests as it allows you more design agility, as you can quickly scale the whole site's font sizes by changing only one of them. But if you're lazy or want it really spot-on, then you don't have to be afraid of px.
Jethro Larson
2008-10-17 22:52:31
+2
A:
contrary to what others have answered, you should never ever use pixels for font sizes. internet explorer 6 still has a large piece of the browser market pie and it absolutely will not resize text that is specified with a pixel size (as mentioned in the question). you should always strive to use "em"s.
i use a technique similar to what others have suggested here whereby i "reset" the css styles across the board to remove any browser inconsistencies with font sizing and positioning. i like eric meyer's reset reloaded styles as a base. you could also use the yahoo reset css method if you wanted to dig into that whole library.
next, i use owen briggs' sane css typography template. you may notice that it hasn't been updated since 2003 but is still absolutely solid with today's browsers.
once you get this base, it's a simple matter of changing the font percentage on the <body> tag that will easily scale all the fonts across your website in the same manner.
for the impatient, here's eric meyer's reset css and owen briggs' typography css mashed together (parsed through this excellent css formatter):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
cowgod
2008-10-18 08:41:48