Web technology has come a long way in a few short years. I’ve been surfing the wave of these new developments as they have come along.
To see just how far we’ve come online, check-out the Internet Archive for a history lesson.
In the 90s, not much was possible unless you used a lot of imagery to make a page look ‘designed’. Today with the use of CSS, pages have finally begun to shape-up and mirror their paper-clad cousins in print media. You can add fonts, colors, graphics, positioning to page elements, and if done well, they will look pretty much the same on any browser (yes even IE).
Over the past few years, I’ve preferred to build my pages using ‘pixels‘ versus ‘points‘ or ‘%’. Why? For me, it was due to consistency. I could define an <h1> tag for a page headline as “16pt” and it might look fine for me, but on a Windows computer, the page might get horsey (and huge!).
On the other hand, if I said that an <h1> tag should be “16px“, I could almost always guarantee that regardless of computer or platform, the font and page would be pretty consistent.
Over the past few years using “em” has been the size designation of choice.
Web developers know that an “em” is a percentage of the body font size. So if you have a headline (<h1>) defined as “2.5em” that means the headline will be 250% larger than your body copy. Or if you have a caption and you want it to be tiny, you might define it as “.3em” (or 30% of the body size). So if you had body copy defined as “12px” as a rule, your caption would be just “4px” tall, and your headlines would be “30px” tall. Make sense?
But like all good things, there are potential problems. I recently noted that if I define my browser font settings so that all my fonts use a specific font and size in Firefox (which I tend to do), pages that show content based on a combination of “em” and “%” without a fixed “px” size, can really get small.
The CSS for BINGenuity.com uses “76%” as the designated size for body copy. For most folks this works fine. But for me, since I have designated specific fonts sizes for my page, this CSS style takes my 12pt font size, and then takes it down to 76% through the page’s cascading style sheet (CSS). So I get a rather small standard body copy size of about 8px.
Thankfully my eyes are pretty good (for now) and I can read things much smaller, but it is tough.
The point being made is that we need to consider users, like me, who like to define their own fonts and sizes. If we are using CSS that is based on “em” and “%” for fonts without a defacto size in pixels, we might end up with some strained user eyes.
But we can’t always be safe defining a page based on pixels either. If a user has a screen resolution set very high, a base font of “12px” might still be tiny.
So test and compare before deciding on what works best for you.
