How to Size Text in CSS

by Richard Rutter

96 Reader Comments

Back to the Article
  1. Being that I don’t have the grasp of CSS that the author surely does, i’m sure my comments might not be appreciated…..  I am of the opinion that it is best to set the pixel size absolutely as most sites (should) have a significant amount of content.  As a designer, I prefer knowing exactly where every letter is going to appear in relation to every graphic.  It helps me to visualize where images should or shouldn’t go and more.  Of course, I am a bit old school in my methodology, but it is still my preference :)

    Copy & paste the code below to embed this comment.
  2. I liked the effort that was put into this article. That was a whole lot of screen captures and thought.
    Thank you!

    I came to this site as a whole, looking for the answer to a question:

    How can I/we create documents, that might be one or more pages and be shown one any platform (I use Ubuntu) or browser, print correctly onto pages (at the right DPI for images for example, over 72dpi), scale to work for those with vision needs/screen resolution/device…

    and

    not have to rewrite/change/tweak/etc the content?

    And be hyper linked together so one document can be related to another. 

    I have found that using table-less valid strict XHTML code and CSS for style while basing most (if not all) things on em makes the cross platform – cross browser challenge fairly do-able.

    I was inspired towards this back in the CSSzenGARDEN days.
    Thanks to all you designers that made that site rock!

    But then there is printing and portable devices and better accessibility.

    One only lives so long. How many times do we really want to recreate the same document/content for a new device, browser, printer, email or software just because a decade has passed
    or MS has some new notion of how to keep people locked into THEIR closed source
    ?
    As artists, do you not want to create new art instead dredging through old documents and recreating old documents to work with current technology?

    A paper page is the size a paper page which is fixed and yet not as and now we have many countries and thus pages sizes.

    What is the best approach for the long run?

    There is much ado about creating web page/site that work for what ever is current and happening in the now like a fluid 3 column lay-out but
    I am asking/questioning/yearning about content.

    NOTE:
    Even the content I write at this moment is UNUSABLE again with out tweaking because it is coded to Textile which seems to only be some what working and is not XHTML

    Copy & paste the code below to embed this comment.
  3. Seems like the CSSzenGARDEN site slowed way down for a while and they look like they are going strong. : )

    The A List apart is an A list site for sure. Thanks again…

    Copy & paste the code below to embed this comment.
  4. Table cells with multiple lines break the rhythm of the complex example. I checked it using the “background image”:/d/settingtypeontheweb/images/gridbg.gif

    Copy & paste the code below to embed this comment.
  5. There’s also a easy trick for this one:

    An em is 16px.
    10px equals 62.5% of 16px, or an em.
    So if you put the font-size for the body element to 62.5%, it’s easy to calculate the other ones.
    E.g. if you want 12px font-size, you just put in 1.2em. Because 1.2 * 10 = 12.

    Regards,
    Pieter

    Copy & paste the code below to embed this comment.
  6. Generally, I love ALA’s typesetting, and this article was good. However, when I went to the complex example, I noted something that from the standpoint of readability is just plain wrong: The same amount of vertical space before and after heads, esp. subheads. As a reader, you need visual cues to connect a [sub]head to the text it is heading; therefore, there should be visibly more space ABOVE the head than below it. Not to pick specifically on this writer—I see this all over the web.

    Copy & paste the code below to embed this comment.
  7. A very informative article, however…
    When it comes to CSS, positioning containers is the real pain. Choosing some lovely font sizes and colours is a nice gentle way to finish off an otherwise stressfull afternoon of building a CSS website.

    Copy & paste the code below to embed this comment.
  8. There are two properties that allow you to automatically set the capitalisation of your text. First, font-variant allows you to set all your characters in small versions of capital letters.

    p {font-variant: small-caps; }

    That would create text like this. It looks cool, and works well for acronyms, like NATO. The second property is text-transform.

    div {text-transform: uppercase; }

    Copy & paste the code below to embed this comment.
  9. Can someone please explain why, in the “complex example”, the multiplier is usually 16, 14, or 12, and in one instance it is 18?

    e.g.,
    font-size: 1.125em; /* 16×1.125=18px */

    margin: 1.286em 0; /* 14×1.286=18px */

    border-bottom:0.083em solid #ccc; /* 12×0.083=1px */

    margin:1em 0; /* 18×1=18px */

    ??

    Thank you

    Copy & paste the code below to embed this comment.
  10. I’ve used the principles in this article as my best-practices for years. However, my company just stopped supporting IE6 last year and we are now revisiting our best practices for sizing text. Since most browsers now use page zooming, we’ve considered switching to pixels to size our text, but our new concern is mobile browsers. How well do mobile browsers handle different units? Which unit is best to use with mobile browsers in mind? I’ve heard many say that Ems are still the best practice for mobile devices, but I’ve noticed that iPhone 4 doesn’t seem to size the complex example http://www.alistapart.com/d/howtosizetextincss/complexexample.html from this article correctly. Is it better to use pixels for mobile?

    Copy & paste the code below to embed this comment.
  11. 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.

    Copy & paste the code below to embed this comment.
  12. 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.

    Copy & paste the code below to embed this comment.
  13. 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?

    Copy & paste the code below to embed this comment.
  14. 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?

    Copy & paste the code below to embed this comment.
  15. 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.

    Copy & paste the code below to embed this comment.
  16. Richard thank you for presenting this info so clearly. This is another element in a developer’s bag of tricks to help create responsive web design.

    Copy & paste the code below to embed this comment.