*I'm moving over to Lunarpages hosting so until further notice all comments have been disabled. If you need to get into contact with me, please email me at rileyhater2003@gmail.com and I'll respond as soon as possible. Until everything is done I'll be posting updates on my tumblr: babblative.tumblr.com.

Easily Resizable Text Jun 23, 18:28

and

Whatever your font size, big or small, it should always be easily resizable. Always. Because shockingly enough disabled people browse the internet and sight is relative depending on a persons vision, computer monitor, video card and resolution. To someone with 20/20 vision running 800×600 a 7pt font size will look fairly good, but to someone with bad vision running a 1280×1024 resolution (referring to myself here, folks) that 7pt text will look completely different. Middle ground must be reached, the font size can’t be too big and it can’t be too small. If it’s too big then Person 1 will probably dislike the extra large font and Person 2 will be happy.

Most people choose to use the 11px rule of thumb, it falls nicely in between the large and small fonts, it’s easily readable and for people using a good web browser it’s always resizable. But this is where IE rears its ugly head, you cannot resize absolute units in IE. Firefox, Opera and Safari users are sitting pretty, but IE users (whether willing or not) have no other options, either they can attempt to read your piddly little font size or they can find their information elsewhere. Considering that IE hogs most of the market share you’d do well to cater to its users, at least a little bit.

The best solution is to use percentages and ems instead. Use a percentage base with everything else (headers, sidebars, etc.) sized using ems. Here is how I go about doing it: body {font:76%/200% Verdana, sans-serif;} h1 {font-size:1em;}

According to what you set the percentage base to, the ems will resize accordingly. The second percentage in the body controls the line-height. In my case I opted for a 23px-24px line-height with a 12px font-size.

Speaking of which, font-size isn’t the only thing you should worry about. If you use an absolute unit for your line-height then any attemptes to resize the text on the viewers part will only end in frustration. The more you increase the more the lines overlap, use a percentage unit, even if you’re dead set on blinding your visitors.

Percentages and ems make my insides feel fuzzy and not only that but you may gain more visitors. Word of mouth travels fast and if you come across as being dismissive to your visitors needs (and cater only to your own without considering others) then you will get a reputation based around that. That’s not exactly something you want, now is it?

You might think this is aimed solely towards Erin, it’s not. It’s aimed at every webmaster who uses absolute font sizes and moreso at webmasters who refuse to convert. On that note though: You shouldn’t have to use a theme switcher or Javascript if you have relative text sizes. Plenty of people browse with Javascript disabled and it doesn’t work for them. Also, reloading a theme when the site is bloated already (aimed at the weborexics) may not be the best idea. Put the power in the visitors hands and let them have at it, you might be surprised at the results. Of course, you’ll still lose those precious few first-time visitors who aren’t looking to cackle at you, if you use a miniscule font size. There I’m done.

css, font-size, tutorial

|