I'm coming from a programmers background and just trying to understand how sizes should relate.

I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

6pt: nonpareil
7pt: minion
8pt: brevier or small text
9pt: bourgeois or galliard
10pt: long primer or garamond
11pt: small pica or philosophy
12pt: pica
14pt: english or augustin
18pt: great primer
21pt: double small pica or double pica
24pt: double pica or two—line pica
36pt: double great primer or 2—line great primer

I also learnt about modular scales here and I've of course work with grid systems.

My question is if I work from this classic type scale should the sizes affect the size of other elements on the page? Is there relationships here that I can use to help with the sizing of other elements like my gutters and column widths?

Also can I create a whole new type scale based on a modular scale and expect as good results?

2 Answers 2


I assume you're talking about the Mark Boulton book. No disrespect to Mark, who does fine work, but it isn't a practical text for someone just getting into design. And typographic niceties, frankly, are not a starting point for learning design, especially for the web. (A clear case in point: as e100 indicates, it's not the nominal point size of the type, but the leading, that determines a grid relationship, and the scale of traditional type sizes is pretty much irrelevant when talking about the web -- how big is a pixel, after all? That whole discussion about type sizes led you in the wrong direction.)

You can maintain proportional relationships very simply by using ems instead of pixels in CSS, but that's not always practical and it's not always what a design requires.

I often say it's a mistake to over-think design. Clients do it all the time. Designers do it far too often. And, unfortunately, many design texts absolutely insist on it. Rules are great, provided they don't get in the way of what you're trying to say. But if you know only the rule, and not the WHY behind the rule, you won't know how to use it nor when to break it. Harmonic relationship is a good case in point.

There's nothing wrong with harmony in design, architecture, music or personal relationships. But the perfection of harmony in a Bach cantata isn't necessarily a better model than the magnificent dissonances of a Mahler symphony, especially if you're scoring the sound track for "Furious Five Meets Godzilla." Form follows function, not the other way around.

Harmonic relationships and grid systems are terrific if a design calls for them. If you stick strictly to a grid, and all your type sizes are carefully chosen harmonic ratios, you will end up with a design that is in repose -- serene, calm, conservative, possibly very beautiful if all the other important elements are right, but almost never exciting. Some projects call for that. Many don't. As a beginner, you can sweat bullets building a mathematically perfect grid, fret over exact type size ratios, but you will have lost sight of the purpose of the design.

We used to joke that IBM always got every little detail right while sweeping on to the grand fallacy. That's what happens when you start from the details of a design instead of its purpose.

The Non-Designer's Web Book, by John Tollet and Robin Williams, will give you the stuff you really need to know to get started on web design. Highly recommended.


Your baseline grid (line height or "leading" for your body text) is the normal base unit for a complete grid-based overall layout, not font-size which is a somewhat arbitrary measurement.

I don't think this complete scale of type sizes is very relevant in any case - you wouldn't normally use more than a few in any design. However, note that sizes at the larger end of the scale are in simple ratio.

So say you have a 12 unit (pt or px) baseline grid, 9 unit body text.

You'd base your overall layout on multiples of 12 units, but your heading font sizes might be simple ratios (1, 1.5, 2) of 9 units.

Does "designing for the web" really say that "text set in these size should look better if typeset correctly"? Seems an odd thing to say.

(See What does the size of the font translate to exactly? for more on why font-size isn't a consistent measure between different fonts)

  • Great answer. ++1 for pointing out the irrelevance of the scale of type sizes. Nov 25, 2011 at 19:21
  • If type sizes are irrelevant, then why do CSS Frameworks like Foundation use rem to create their grid? Jan 27, 2015 at 0:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.