Some CSS edits
Over the weekend I started editing the style sheet for TXP Tips. One of the main changes was the header fonts, which are now Georgia instead of Helvetica Neue.
Also changed is the body font, now Verdana instead of Helvetica Neue.
Hopefully the site remains readable for all of you. If not, please let me know.
Still have some style changes to make, mainly cleaning up the bloated style sheet, which was created in a bit of a rush ;-)
Question for the very talented designers out there – what do you consider to be the best font size for the <body> or <html> tags? I followed the A List Apart font size article recommendations for my CSS styles:
body {font: 100%/1.250em Verdana, Helvetica, san-serif; color: #343434; background: #fff; border-top: 15px solid #FFCC33;}
p {font-size: 0.8125em; line-height: 1.6em; text-align: left; margin: 0.5em 0;}
#sidebar p {line-height: 2em; font-size: 0.6875em; text-align: left; padding: 0.5em;}
#footer p {line-height: 0.75em; font-size: 0.625em; text-align: left; padding: 0.5em;}
h1 {font-weight: normal; font-size: 2em; line-height: 1.4em; margin-bottom: 0.5em;}
h2 {font-weight: bold; font-size: 1.4em; margin-bottom: 0.5em;}
h3 {font-weight: bold; font-size: 1em; line-height: 1.5em; margin-top: 0.5em; margin-bottom: 0.5em;}
Here is the font sizes as I worked them out:
100% == 16 px
16 x 1.250 = 20
16 × 1.125 = 18
16 × 1 = 16
16 × 0.875 = 14
16 x 0.8125 = 13
16 × 0.75 = 12
16 x 0.6875 = 11
16 × 0.625 = 10
Comments on best practice or your own methods?
5 Comments - Comments RSS Feed
Jonathan Stubbs
# 13 October 2008
Hi Marty, I also used the 62.5% hack on the first version of this site, then changed to the new method outlined by Richard Rutter. He wrote both methods, and appears to believe that the new method is better. See his complex example from the A List Apart article.
Jonathan Stubbs
# 1 November 2008
Hey Adi, The container div is 960px wide, so you should theoretically have enough padding….
Added 5px padding on the left/right side of the container, see if that works for you..
Marty Walker
# 12 October 2008
I’ve used a couple of methods in the past but recently I started using Richard Rutter’s 62.5 percent hack which equates an em to 10 pixels. Makes the math easier for me to work out. 1em = 10px, 1.8em = 18px and so on.