One is all you need

Feb 27, 03:49 AM - and

I like to edit the CSS of sites to improve readability, and sometimes just because I’m bored, and one thing that never fails to frustrate me are those who insist on putting the font styles in every property.

It’s not like that’s a bad thing, if the font size is different for each property. What’s with all this body {font-size:9px; font-family:arial;} p {font-size:9px; font-family:arial;} div.blog {font-size:9px; font-family:arial;} crap? Once you stick it in the body it is repeated throughout the page (with the exception of forms, no?).

body {font:76%/140% Verdana, sans-serif;} is all you need (excuse me, relative font sizes FTW!), use em’s for everything else and only if you need to change the font size in a certain area. Otherwise, bite me.

Edit You will need to specify font settings for tables as well as forms. Instead of repeating code, you can simply use font:inherit; and be done with it.

If you liked this article then why not subscribe to the feed?

Tags: css, web-design

On older posts comments are usually closed, so if you'd like to discuss this topic with me then please contact me.

#1

Right, which is why when I have a website I pay others to do my css and whatnot, because I have no idea what I’m doing. LOL. Do they know you do that? Rofl.

Mandy. Feb 27, 07:50 AM Permalink

#2

Sometimes since I like to either email the website creator, review them or stick the edited stylesheet up on my site for download (to use with Stylish

Becky Feb 27, 07:56 AM Permalink

#3

Thanks for the link, I totally needed that em thing. :( I used to use em all the time.. and then I forgot about it. Completely. & still.. have/am/do? .. cough

Jenny Feb 27, 10:46 AM Permalink

#4

Ooh, thanks for the Em Calculator, I always have problem with em’s, somehow the pixels seems more… understandable…

Malin Feb 27, 04:20 PM Permalink

#5

I’m having a really hard time getting used to using .em. I’ve been using .pt for years, but I guess I’ll have to get used to it!

What’s your opinion on Selection styles ? In case you don’t have inspiration for the blogathon ;)

Nienke Feb 28, 04:20 PM Permalink

#6

The redundant styles are not only unnecessary, they increase the size of the stylesheet and therefore the page loading time.

And umm… I actually specify font sizes using pixels in my stylesheets. There are disadvantages to using pixels, yes, but there are also advantages. ems also have their advantages and disadvantages. It really depends on the site you are styling, but using points is just impractical (unless it’s for a print stylesheet) because points were created for use with print materials.

Dorie Mar 1, 01:21 PM Permalink

#7

Agreed. People just don’t know about ems and percentages, I guess o.O

I was also wondering why you use double percentages. I tried using Google, but couldn’t find much info. I’d appreciate it very much if you could explain :)

Sumaiya Mar 2, 03:55 PM Permalink

#8

You also need to specify things for tables as well ;)
My personal CSS related annoyances are generally with people who have font-weight: normal, font-family: default… and for what? They could just have skipped things and thus have a smaller CSS file.

Vera Mar 3, 12:31 AM Permalink

#9

Vera, ah thanks I didn’t know you had to specify for tables as well (try to stay as far away from ‘em as I can).

Sumaiya, you can use it with other units as well, it doesn’t just have to be percentages ;) But, the second percentage [sic] is the line-height. So if my font-size were 11px and my line-height 24px (using pixels to make it easier to understand… for me) I would put 11px/24px. You can read more about it here

Nienke, I’ve never really paid any attention to selection styles, but I’ll poke around and then give my opinion :) Thanks for the topic idea.

Becky Mar 3, 07:09 AM Permalink

#10

Ah, thanks, Becky :) Useful page, that.

Sumaiya Mar 3, 12:35 PM Permalink

#11

Vera is right, for table cells (and input fields, textareas etc) you need to re-specify fonts/sizes/etc. However, there’s no reason why you can’t simply use font: inherit; instead of redefining CSS again and again.

Jem Mar 3, 06:18 PM Permalink

#12

I thought font:inherit; didn’t work in IE, or at least IE6?

Becky Mar 4, 10:05 AM Permalink

|