21 Keyword Method

Like Derek, I’m also curious why there is no mention of the keyword method. It provides consistent, resizable text, and at the time of this writing, it has been tested in a wider array of browsers and platforms than the method suggested in this article. See the Yahoo! UI Library for a detailed description: http://developer.yahoo.com/yui/fonts/

posted at 08:02 pm on November 20, 2007 by Michael Christopherson

22 Excellent Article

Thanks for this. I have been looking for a good introduction to the best way of using em’s for a while now. I am now ready to go an apply these techniques to my websites.

Thanks again,

posted at 08:33 pm on November 20, 2007 by Daniel Skinner

24 Next thing is to make boxes fit the text

Thanks for drawing attention to this issue. As one with imperfect vision, I have my browser set to 24 points default. I constantly run into problems where text is poured into boxes that are sized in pixels, and it just does not fit. Go to slate.com and hit CTRL + several times (in Firefox) to see what I mean.

Even worse are sites that open up text in a fixed size popup window, with the Submit button at the bottom and no scroll bar. It might work at the default font size, but not with anything bigger.

posted at 10:04 pm on November 20, 2007 by Mark Dionne

25 Next thing is to make boxes fit the text

Thanks for drawing attention to this issue. As one with imperfect vision, I have my browser set to 24 points default. I constantly run into problems where text is poured into boxes that are sized in pixels, and it just does not fit. Go to slate.com and hit CTRL + several times (in Firefox) to see what I mean.

Even worse are sites that open up text in a fixed size popup window, with the Submit button at the bottom and no scroll bar. It might work at the default font size, but not with anything bigger.

posted at 10:04 pm on November 20, 2007 by Mark Dionne

26 Untitled

The point about setting line-height with units to keep it consistent is very interesting and useful; but I can’t believe we’re still seeing people advocate setting a default text size less than 100%. The reason browsers have such a large default text size in the first place is to compensate for clueless web designers scaling down the text; carry on scaling down the text, and the browsers will just keep increasing the text size so that people can actually read the damn page.

The number one complaint I hear about web pages, by quite some distance, is that the text is too small. It’s nice that you put in some effort to allow people to scale the text if they need to; why not just leave the text at the user’s default size? If the user really hates 16px text, they can find out how to change it but, I suspect, most users are much less bothered by text that’s bigger than needed, than by text that’s unreadably small.

posted at 10:09 pm on November 20, 2007 by Voyou Desoeuvre

27 What about percentages?

Please forgive a beginner if this question is off-base, but I was wondering why percentages can’t be used? Once the body is set to 100%, why can’t all other font-size declarations use percentages? Aren’t ems just relative to the parent element anyway?

And, on a somewhat related note, is the use of points necessary for print style sheets? Or does the author’s method print as consistently as it displays without a separate font-size declaration?

posted at 10:13 pm on November 20, 2007 by Jake Grinsted

28 re: What about the keyword method

@Jeffrey

Sorry for the confusion. The method I’m referring to, which I inappropriately called The Keyword Method, is a bit different than Todd Fahrner’s original method. I’m not sure if it has a name, but it involves a combination of keywords and percentages to achieve consistency across browsers. Yahoo!‘s version of it contains a nice pixels-to-percentages conversion chart.

posted at 11:34 pm on November 20, 2007 by Michael Christopherson

29 Heading margins and vertical rhythm

The idea of pixel perfect vertical rhythm is not what the vertical rhythm is about. And it is the same with font sizes — as monitors have more (and different) number of pixels per inch (especially on laptops) it becomes unnecessary to have equal and pixel perfect font sizes among all browsers, displays, monitors and devices.

Vertical rhythm is about contrast, points of reference and flow of the elements. There are many layout examples where text doesn’t look harmonic (or could be improved) although their heading and text spacing follows certain logic of math.

Web designers should forget about the absolute values and start to think in relative terms (which makes the web design different from the print). Design and composition in general is about the harmony and relationship of different elements of information.

Therefore, it would be very useful to look at the text sizing from the perspective where element weight, line spacing and margins are more important than the ability to convert between pixels, ems and percentages.

I have made a collection of Konstruktors CSS snippets which include styles for basic typography and fluid grid/column based layouts. The typography part is based mainly on visually sound element contrasts — view an example . Another good example is Tripoli

At the same time there is no such thing as the perfect font, heading or line-height size. The designer has to decide with her own set of reasoning, which might even be unknown to the regular “viewer”. And this is exactly why design is so interesting and exciting.

posted at 12:38 am on November 21, 2007 by Kaspars Dambis

30 Untitled

Personally, my impression is that text sizing in CSS is a bit of a mess.

Sizing in ems seems silly, because ems are a measure of horizontal distance, not vertical distance, and for different fonts the horizontal-to-vertical ratio can vary.

Pixel sizing might make sense when trying to match text size to a fixed-size image, but really nowhere else.

Ideally, I think we’d all size our text in points, then any browser at default font size would take screen resolution into consideration and display the text perfectly just as it would appear on paper at the same point size.

posted at 12:48 am on November 21, 2007 by Ben preece

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)