Discuss: How to Size Text in CSS
by Richard Rutter
- Editorial Comments
92 acrobatics
Thank you for the article and your effort.
I just thought I would offer comments now that it is almost 4 years old, and surely out of date. It seems like this article advocates acrobatics of web design with ems, percentages etc, when, to me, if you can’t read something you magnify it with glasses or the equivalent, zoom, on your browser. Magnifying the text and images (line height etc) keeps their context and their visual relationship constant – a good thing. advocating the ability to resize the text while keeping other things like images constant is a misguided idea because when increasing text size eventually the relationship of text to images gets uglier and nonsensical. If there is a need to magnify text, wouldn’t it also help a visually impaired type to magnify the images, too – bring them into focus?
In addition, I agree with the unpopular Brad Kemper – good typographic practice is to add less than a line between paragraphs – I prefer 1/2 a line. I am not a coder giving my typographic opinion, but someone who has lived and breathed typography for many years and has been recognized for skill in typography. I am not too familiar with the author’s concept of vertical rhythm, but vertical rhythm should not be slavishly adhering to a baseline grid – that would be a monotonous rhythm – not to interesting and rather mechanical.
posted at 06:50 pm on March 31, 2011 by Seang
93 How to size text for mobile?
I’m with Josiah in that I too, am curious which unit is best to use with mobile browsers in mind?
http://www.alistapart.com/comments/howtosizetextincss/P80/#90
It would be nice to get an update to this article with mobile devices in mind. I’d be curious if EMs are still the best solution, or if something like REMs with an appropriate fallback or pixels is preferred now. Pixels seemed to have gain a lot of popularity for sizing fonts.
I know in jQuery Mobile they use pixels for font sizes and also in the HTML5 Mobile Boilerplate:
body { margin: 0; font-size: 13px; line-height: 1.231; }
Yet knowing a pixel is no longer a pixel on some new devices like the iPhone4, it makes me think pixels aren’t the correct solution to sizing fonts on these newer mobile devices where the pixel ratio isn’t 1:1. I havn’t done any testing on font-sizing on mobiles yet but I would think EMs or REMs with an appropriate fallback will be the best solution for mobile?
posted at 01:38 pm on January 3, 2012 by Brett Jankord
94 Using Keywords
Just picked up an old book of mine called Bulletproof Web Design. It suggests setting the body font size as a Keyword…. small… and percentages to stray form the base. eg h1, 150%
This seems rather a good idea than having all that crazy em mathematics. What do you guys think?
posted at 11:09 am on March 12, 2012 by John Amy
95 More calculation examples please
If this is ever updated please include more sample calculations. Font size ems seems to be easy to figure out, but the line heights – especially when the font is larger than 18 pixels is giving me a headache LOL. Similar to @lauras2009 question above.
It’s also not clear to me why this was updated away from the 62.5% rule, when that kicked out such lovely round numbers and made the maths so much easier.
posted at 09:07 pm on April 16, 2012 by violetk
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.
Subscribe to this article's comments: RSS (what’s this?)




91 Wordpress CSS and Text Size
Most of the wordpress themes that I have encountered do have a widget or plugin to allow visitors to change the text size, as it is sometimes too small from default, and messing with the CSS can be a pain at times.
posted at 08:36 pm on October 19, 2010 by Holistic Practitioner