: Mixing the classic type size scale, grid systems and modular scales I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing

@BetL875

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.

Vote Up Vote Down

@Sims5801359

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)

Vote Up Vote Down