Comments on Setting Type on the Web to a Baseline Grid

51 Reader Comments

Back to the Article
  1. Great article, Wilson. Love it.

    I will add one point: if you take the time to get all this working one, you should be able to reuse it over and over again. Yes, getting the baseline grid right on the web is a bit tricker than it should be, but once you’d done it, it’s pretty easy to maintain.

    Consider building a CSS typography framework that you can reuse from project to project. We’ve recently done this at my day job, and it’s been really, really handy. Every project overrides certain aspects of the framework, but having a great starting point that already establishes a nice baseline grid is a huge time saver.

    Great work, my friend.

    Copy & paste the code below to embed this comment.
  2. Thank you for another few reasons to use pixels instead of EMs or percents. It is very interesting question: should we use pixels or not.

    My opinion: using EM - it is not so complicated as it seems. You can compose vertical rythm with assimetric margins (real beaty!) and it will work even in IE6 (with JS of course). Calculating - it is not real problem for real typography fanatic :-)
    Please check this test page:
    But one BIG PROBLEM: round-up errors in… Opera. Even in the last version. Test pages for Opera:
    So, this is the only reason why I think about using pixels in the future works.

    Copy & paste the code below to embed this comment.
  3. I have used EMs on my site and it can get quite complicated; however, if you do most of the maths before hand it doesn’t have to be. I.e. know your base font size, margins and padding with borders and without, etc.

    Copy & paste the code below to embed this comment.
  4. On some project, it might a good thing not to clear out the grid. Meaning, keep—some of—it visible.

    Having a thin, barely visible but there, line under each line of a long and complex text help some people to read it, and to do so faster and more easily. It might even be an Accessibility improvement.

    Copy & paste the code below to embed this comment.
  5. Steve Marshall has used the idea of a baseline grid to good effect on a “recent redesign of his site”: which also includes optional visible baseline and layout grids.

    Copy & paste the code below to embed this comment.
  6. Sidebars shouldn’t really be set on the same line height as body text. They should be set with the same ‘color’, that is their line height should be calculated using the same multiplier as body text. Then the first line of the sidebar should be aligned to the baseline grid with the rest hanging. How easy this is to do in html I’m not sure.

    Copy & paste the code below to embed this comment.
  7. Perfect example of poor supporting of CSS by IE6. There is no vertical rythm in IE6!

    Of course, we can “fix it”: by JS. But there still problem with Opera and round-up errors.

    I don’t want to use em, but I have to, if I think about IE6 and IE7

    Copy & paste the code below to embed this comment.
  8. Speaking of EM, great little site for pixel to em sizes. Really handy if you know your base font size.

    Copy & paste the code below to embed this comment.
  9. Peter is totally right saying the sidebar does not have to be vertical aligned to the main text. If you do so you are implementing a connection that is not there. Things are different htough in a multi column layout with equal columns, e.g. the main text is in columns (not readable in the web, but it’s just an example). There between equals the alignment is good, as you will also have everything else the same (text height and so on). But a sidebar can have different text shapes and therefore should be unaligned.

    Copy & paste the code below to embed this comment.
  10. Peter and Handy Andy have a point, but it’s not always the case.

    If the copy in a sidebar is disconnected from the flow of text, then there is good reason, if the type was smaller, then you probably shouldn’t align it to the baseline grid. However, if the copy in the sidebar were a caption to an image which is in the main content area, then aligning to the baseline grid is probably the way to go in order for that copy to feel like it belongs to the main content. It depends on the implementation of columns within the grid.

    You both have a good point, but it’s not quite as cut and dry as you suggest.

    Copy & paste the code below to embed this comment.
  11. bq. One final note on font sizing: I’m using pixels instead of ems in this example for one reason: it makes everything simpler.

    True, but—you knew it was coming—where does that leave Internet Explorer?

    Copy & paste the code below to embed this comment.
  12. Great article,

    but I like to use the reset.css distributed by Yahoo! to handle fonts and default values for certain html tags.

    Copy & paste the code below to embed this comment.
  13. It leaves the miniscule percentage of IE6 users who really need to resezie their text to either upgrade to IE7 or turn on the “Ignore font sizes…” option in their browser so IE6 will resize text sized in pixels. That IE6 can’t resize text set in pixels is a myth. I can, it jus requires you to change a setting in the options. Personally, I think if you have this unique need to resize text, then it’s your responsibility to either use a browser that supports it by default or take the time to set your up to deal with it.

    Copy & paste the code below to embed this comment.
  14. Come on now, Jeff. That’s the idealist in you speaking :D

    Unfortunately, most of web design needs to accommodate realists. We comprise not only people who use the web, but people who “get” the web. Screwing with our settings is easy and commonplace for us. The staunch majority of web users likely don’t know about settings like that, or can’t find them (due to awesome MS UI design). The plain fact remains that we are designing for realistic scenarios and not always ideal ones. We can’t always take the stance of withholding information or capabilities until users meet our requirements. Remember the days of separate site versions for IE and Netscape? We now have many capabilities to make these decisions seamless, or completely agnostic, for our visitors. Let’s make a kinder, gentler web! Wanna hold hands?

    Copy & paste the code below to embed this comment.
  15. Let’s talk about the real world for a second.

    I have neck and back problems, myself. Because of that, I have to buy a decent chair and take the time to configure it for the optimal support. If I don’t, I’ll end up in pain when I’m reading a book at my desk. If I choose to sit in a crappy chair, or I choose not to configure my chair the way that is best for me, or I simply don’t learn how my chair works — whose fault is that?

    I’d say it’s my fault. You can maybe make an argument that it’s the chair manufacturer’s fault, because they didn’t make it easy enough for me to use my chair properly. But I don’t see any way in hell you can blame it on the book I’m reading. Do you?

    But anyone who says the web designer is at fault for a user not being able to resize text set in pixels in Internet Explorer is basically blaming the book, rather than the chair or the person sitting in it.

    The web designer has some degree of responsibility to ensure their site is accessible to the greatest amount of people possible. But, so does the browser maker and the hardware maker. And, most importantly, so does the user bear some responsibility for understanding how to use their tools.

    I’m sort of playing devil’s advocate here, and not necessarily saying I believe all of this explicitly—but it’s worth talking about. Doesn’t the user, especially one with unique needs, bear some responsibility for knowing how to use their tools?

    Copy & paste the code below to embed this comment.
  16. Sorry man, still not sold. We aren’t necessarily even talking about dire needs here, like pain. There is something still inherently technical for people about the internet, or computers, that they will not or choose not to overcome. I often think of some of my professors at school in this position; crazy smart people that are just set in their ways. There are tons of people, not even among the disabled or special needs areas, that use the internet we thrust upon them. It’s just not a fair comparison to make (chair-to-internet) because the barrier to entry is considerably more technical.

    Copy & paste the code below to embed this comment.
  17. “It’s just not a fair comparison to make (chair-to-internet) because the barrier to entry is considerably more technical.”

    Apparently you haven’t seen all the levers and dials on my Aeron chair. :)

    Copy & paste the code below to embed this comment.
  18. Great article,

    encouraged by reading this and some other sources related to web typography in the last few weeks I created a little tool to calculate ems, px and the margins.

    It isn´t finally ready, but it works well if you already selected your set of font sizes—just give it a try.

    Copy & paste the code below to embed this comment.
  19. The author justifying pixels instead of ems seems to be unaware of the “unitless line heights possibility”:

    Copy & paste the code below to embed this comment.
  20. Having worked with Wilson for the better part of a year, and as someone who has to maintain a lot of the CSS he wrote, I can assure you he knows about unitless line lengths.

    Copy & paste the code below to embed this comment.
  21. I wrote a javascript-powered baseline calculator that uses ems and does the math for you:

    In use here:

    Copy & paste the code below to embed this comment.
  22. Mandy, the history of the “origin of the baseline”: is interesting but it does not account for its importance in modern graphic design. Just like the convention of paragraph indentation survives the practice of hand-painting initials (or printing red pilcrows, depending who you ask), the baseline grid found a use as a structuring device, even for cases when paper transparency is not an issue.

    Copy & paste the code below to embed this comment.
  23. Nothing to add except to comment that I really loved the article (and many of the comments. Loved the history of the baseline). Got me thinking about typography in a new way, which I always appreciate. Thanks.

    Copy & paste the code below to embed this comment.
  24. I do not know if it is just me(Firefox2@Ubuntu), but the lines in the callout does not line up with the basegrid. Should there not be the following in the embedded CSS:

    .callout img {

    Nice article though!

    Copy & paste the code below to embed this comment.
  25. When speaking of “average users”? using IE as is, IE’s inability to scale pixels is not akin to our sites being the book and the browser an uncomfortable chair that the user deliberately chose and choses to leave as is. Metaphorically, I think it’s more like we’re building drive-through windows that can only accommodate the shortest, most-eco-friendly cars, even though most of the public drives gas-guzzling SUVs that cannot match up to the drive-through window. Sure, they’re not responsible in their actions; but they don’t care (or more-likely aren’t aware) and will pass right by our (to them) ugly, inaccessible window.

    If we want to make a difference or a paycheck or otherwise be heard, we should make things pleasant to that majority as well. This includes drawing them in and telling them to trade in their “SUVs.”?

    Copy & paste the code below to embed this comment.
  26. So you’re saying that “most of the public” needs to resize their text in IE6 and can’t? I disagree. Yes, a lot of people still use IE6 (about 35%, according to the stats of our newspaper sites), but very, very few of those actually need to resize text.

    Copy & paste the code below to embed this comment.
  27. First of all, I apologize for turning this into a “how should I size text?” thread. While it’s related to the article, it’s not really the main premise. That being said, I think there is definitely a great discussion happening.


    bq. Every project has different requirements and different constraints. Ems are a great tool for dealing with relative sizing, but I honestly don’t think it’s sustainable to use them as a universal measure.

    Right on. I agree that sizing text in pixels _should_ be the way to go. However, the web is about the people that use it. Although it _is_ the responsibility of the browser makers, the fact is that we should accomodate the browsers’ shortcomings for the greater good of making web sites as usable as they can be to people of various capacities.

    All that isn’t to say that I disagree with you; I totally support your point and think that it can’t be emphasized enough.

    bq. Incidentally Dan, I like your technique of using pixels for browsers that can handle them responsibly, and giving IE a relative font size so users can still resize the text.

    Aw, shucks.

    bq. I just wish it didn’t have to come to maintaining two separate type scales, especially when the main benefit I get out of using pixels in the first place is simplicity.

    Too true. However, until a version of IE supports scaling pixels (and not this wannabe page zoom thing), it’s a fallback method that will have to stay.


    bq. Yes, a lot of people still use IE6”¦ but very, very few of those actually need to resize text.

    Really? I’d love to see some stats on that”¦ :)

    Copy & paste the code below to embed this comment.
  28. I certainly don’t have the luxury of IE<7 users representing anything less than the majority of users for my employer’s site. Even if it was only 35%, that could be an awful lot of users to turn away just because they are unable to easily customize the display.

    I hear what you’re saying though when it comes to most of them not wanting or needing to change the font-size. You’re absolutely right there. To back you up even further: for those that do want to scale using IE 6 or below, odds say that the majority of them have no clue how to do that. Even when the font is scalable (with ems and the like), many aren’t aware that changing “View > Text Size” will have any effect (especially if they’ve tried it on the average site that uses pixels).

    So you’re right in that there’s less need than usually stated to support text scalability in IE<7—but I still find it lazy (personally) to not put forth a little effort that could benefit those users and earn their undying affection and loyalty.

    Disclaimer: My views are for commercial or public-need sites. For personal sites, I’m getting more and more of the view that I want to be deliberately exclusive of IE including 7. I agree that browser-makers own some of the responsibility and IE 7 with it’s hasLayout component is still doing things that are holding back the status quo of the Web.

    Copy & paste the code below to embed this comment.
  29. bq. Really? I’d love to see some stats on that”¦ :)

    Heh. I wish. I admit that I’m just making an edcated guess. We have no way of now how many of those IE6 users actually need to resize their text. But, it’s safe to assume it’s a pretty small number, isn’t it? If we, as good designers, are choosing reasonable font sizes to begin with, then it ought to only be people with low vision and no glasses to accomodate for it that really *need* to resize text, right?

    I have no supporting stats, but I can’t see how this could possibly be a very big number.

    Copy & paste the code below to embed this comment.
  30. John, I basically agree with everything yo’ve said. The bototm line on text resizing is that it boils down to the same thing every design decision does: know your audience, know your product, and know it’s goals. Not every site *needs* perfect text resizing. Not every site has only about 35% of it’s users on IE6 (although, our newspaper sites serve a very general audience, so I’d expect that’s a typical-ish number). And so forth.

    To prove that I believe that it depends on the siuation, i’d point to, a site I recently designed using all ems (both for type and layout) to ensure great text resizability. Why? Because that site is aimed at an older user, who is more likely to have low vision.

    “Lazy” is a pretty touchy word to use, though. It’s not about personal work eithic, it’s about business decisions. If I decide that text resizability it’s a priority, it’s because the extra time put into making it happen doesn’t warrant the benefit. There are only so many resources to go around, and if it’s determined by the project manager than there’s a minimal need for text resizing, and a very large need for some whizzy flash widget that is going to directly bring in dollars, then the flash widget will oten win. This is pure business. It’s not personal, it’s not lazy, it’s not insensitive. It’s just about business. For that reason, I’d avoid calling any web designer “lazy” when you don’t know what the limitations and demands they were working under was.

    But, overall, I agree with you. :)

    Copy & paste the code below to embed this comment.
  31. Kevin’s illustration for this piece is freaking awesome. Great work, Cornell.

    Copy & paste the code below to embed this comment.
  32. I sort of hate to admit it, but I like the way IE handles text sizing. Since IE will resize text set in EMs and not in PX, it allows the savvy designer to make some text on the page resizable by the user, and force other text to remain fixed.

    This allows you to let the user scale up the body copy to a more readable size without blowing out your navigation or causing fragile UI elements to look broken. If a user absolutely has to resize all the text on the screen they can do that (as mentioned in comment #14).

    Because it is much easier to set fonts in pixels, it would be ideal if IE would allow fonts set in pixels to be resized AND there were also a CSS property that would dis-allow font resizing when and where the designer desires it.

    Copy & paste the code below to embed this comment.
  33. Great article. It helped me a lot. Designing in pixels helps maintain the baseline grid. As a matter of which measuring unit to use for font-size, it is what works well for the design. Accessibility can be achieved in many ways. Every project does not have to be px the same goes for ems. I agree with Jeff Croft. Good lesson Wilson, Thanks.

    Copy & paste the code below to embed this comment.
  34. I think giving the text sizes in pixels is just OK. Anyway when designing a layout for the web i design in pixels (photoshop, fireworks), i set up rules in pixels.

    Unless i design something really basic that does not get messed up when scaling, i think using pixels for text sizing is just better (and easier) to get closer to that layout i designed in photoshop. If you don’t use stylsheets you don’t use font sizes, so it doesn’t matter if you gave them in ems or pxs.

    I think in some way a layout is about pixelperfection, when designing you have to make decisions, it is all about decisions. You put down exact sizes, spaces etc. and you design to see exactly the same - as much as possible -  result in the browser. So why not use pixels?

    But maybe i am not right.

    Copy & paste the code below to embed this comment.
  35. Hey, thanks for the great article. It inspired me to write “TypoGridder”, it’s a little javascript you can use on your sites to display a grid overlay.

    Have a look on:

    Also note that I wrote a bookmarklet version (see link above).

    Hope it helps the one or the other of you.


    Copy & paste the code below to embed this comment.
  36. Is it fair to suggest that for some sites its reasonable that anything less than modern will not have the same quality of typographical rhythms as those that are modern? At what point does settiing our type to the grid become a point of usability (readability) that might appeal to accessability (I’m going bility bility bility crazy!). Progressive enhancement right? I’m still working out where to draw the line on these things - which of course is always dependent on a myriad of other factors, but nonetheless, what thinks you folks?

    Copy & paste the code below to embed this comment.
  37. Matthew, I think your question is a good one. For those that are in IE-mac or IE-5.5 or lower, I think they are used to a less than stellar experience online (not that they are necessarily even aware of it). The extra mile of adjusting the baseline can be appreciated by those with more modern browsers, and for the time-being also for the 800-pound (but shrinking) gorilla, IE6. For older browser users, I think they’re happy if a site doesn’t have a broken layout; but they’re certainly used to many visual quirks and shortcoming in their browsers. A baseline grid is probably the last thing to worry about in those browsers to get perfect.

    Copy & paste the code below to embed this comment.
  38. I find that typographers look at me with a certain kind of hatred.

    I annoy them be telling them they can’t use the Font they want to and that because of flexible font sizes the can’t position every word exactly where they want it. I now _finally_ have something I can offer them as a token of peace :)

    Thanks for a good read Wilson, and an eminently useful technique. Good stuff.

    Copy & paste the code below to embed this comment.
  39. I’ve been out of the web design loop for a while, having been mired in programming work, but I’m surprised how much debate can flare up over the simple use of @px@ units.  Wilson predicted it and took measures to head it off right in the article, but still people obsess over it.

    I’ll be honest here.  I use px quite a bit.  I’m lazy, I admit it.  There are a lot of CSS techniques I want to develop and work with, but in the world of client work most of these ideas go on the extremely long list of nice-to-haves.  Even clueful clients are not likely to be impressed by immaculate code.  They would rather have their project done a week sooner and $1000 cheaper.

    So even though @em@ over a bit clearer advantage than other types of pedantry (think @b@ vs @strong@), I’m not interested in using it as some kind of litmus test.  This article was interesting to me because it’s a novel idea (on the web anyway).  I welcome discussion of the merits of the article, but I could do without the endless debates over a tangential issue.

    Copy & paste the code below to embed this comment.
  40. I’m a very occasional css user (thank God) and tried to use this design for a banal little site I’m working on. I have a list that wraps round a callout box and it won’t align in IE. If anybody’s got a solution to this I’d be pleased to hear it, but meanwhile can someone tell my why CSS has to be so hard? Every time I come back to it I seem to waste a day trying to do something that any reasonable person would consider trivial…

    Copy & paste the code below to embed this comment.
  41. 1. That person you’re shutting out of your site is one of the biggest taggers on, and their personal blog has a high Google page rank.  Wouldn’t you like a link from them?
    2. Your competition doesn’t use px on their site.

    Actually, I note the example page in this article with the grid showing doesn’t line up on the grid once you get a certain part of the way down the page.  Firefox, default font Verdana 16, minimum font Verdana 14.

    Copy & paste the code below to embed this comment.
  42. I wrote some “Javascript”: to auto-adjust image padding to fit the image to the grid. Adding some background and border; viola. (No example though; that blog is to new..)

    Copy & paste the code below to embed this comment.
  43. I have been working with a baseline grid ever since I read this article. I have found a few things I don’t care about, and have had some problems finding a work-a-round, but all that aside, I like the way it looks on a page, and have kept it.

    I’m still new to the EM world, so I have been using pixels for a long time now. 

    One question… why can’t font sizes in px be resized? And why can’t the line-height be adjusted upon resizing on of the text?

    I don’t have IE6 installed these days, so I have no idea of the problems px fonts cause. I guess I should up my reading knowledge!

    Anyways, great work. It was a good read!

    Copy & paste the code below to embed this comment.
  44. Nice article, but thought I’d mention that there’s a small but almost humorous spelling error in the title tag for the link to “Compose to a Vertical Rhythm”. The title tag says “Compost to a Vertical Rhythm”. I hope the author of that article is not offended. :o)

    Copy & paste the code below to embed this comment.
  45. i am trying to set up a baseline grid for myself. i have to say it’s pretty easy if you take only block elements like headings and paragraphs into account, and if you don’t care if at some font-size/font-family combinations you won’t get a pixel-precise baseline grid. what really gives me headaches are forms and tables. is there any example of anybody doing this pixel-perfect?

    Copy & paste the code below to embed this comment.
  46. I do agree with Mandy, the sidebar type should be set to a leading that is appropriate to it’s size and face and this can vary on each page, not the size and face of the paragraph it sits next to. This is a common mistake I have seen.

    Copy & paste the code below to embed this comment.
  47. You could add the gridbg.gif to all your pages, or make custom ones if your baseline is not always 18px—OR you could try this handy JavaScript bookmark link (follow url below to find it) and have it dynamically overlay grids for you on top of any page you visit:

    Enjoy! :)

    Copy & paste the code below to embed this comment.
  48. As much as the choice of type is important, the appropriate use of typographic measurements and white-space is an important tool of the trade when “setting type for the web”:

    Copy & paste the code below to embed this comment.
  49. Thanks for bringing a favorite print topic of mine to the web design table!

    To help with the calculation of baselines, and picture heights, I use InDesign to do my early mockups. It might seem unheard of in the web world, but I have found that it helps me test the look and feel of my grids in advance before committing to a single grid, and the time and investment needed to calculate each individual piece of the site.

    And once I’m in the implementation phase, I always keep a post-it note full of grid multiples (18, 36, 54, ... and way up) on my screen for resizing pictures, and setting CSS info on the fly.

    Copy & paste the code below to embed this comment.
  50. Sorry, commenting is closed on this article.