Man, I can't believe I'm feeling this cranky on Friday but this is just rubbing me all sorts of wrong ways. I really like the author's intent here. Getting more people to care about type is great and can make a real difference in the usability of the world. But, as with type itself, the devil is in the details. And in the details, this post really falls short.

This is a common problem with designers. They are a lot of people who are good designers, but few are articulate about how they do design. For most, they have just internalized it and go by intuition. They can do, but can't verbalize how they do.

There's nothing wrong with that, but if you're writing about typography, it's not enough to be a good designer. You must also be a good communicator about design.

> Now since the chief design language of the web is text,
> every web designer should first and foremost comprehend
> the art of typography.

The title of the article is "for non-designers", yet it seems to assume the reader is a designer.

> So, why should one design a web page with a particular
> device range in mind when he can better target what’s
> really important for his user? Design for the reader
> not the device.

I do a decent amount of responsive design and spend a lot of time thinking about the device. That's because the device is my design's window to the reader. The most readable type on a 30-inch 96-ppi display on your desk is very different than on a 4-inch retina screen held in your hand.

You have to think about how the reader will see your design on their device. You need to consider the entire path from CSS to neurons firing in eyeballs.

> mcuh

This is just the editor in me, but it drives me crazy when posts about quality design are riddled with typos. Quality is a key component of good design.

> Use a leading that’s too small, and the paragraph is
> hard to read. Make it too large, and your reader will
> have a hard time jumping to the next time.

Narrow leading is hard to read because it makes it harder to scan to the next line. When lines are near each other, it's easy to skip too far down or not far enough while your eye is scanning to the left.

Too large leading doesn't have that problem at all. It's just that when your leading is too large, you waste a lot of space and it can make the paragraph not feel like a single conceptual entity relative to other things on the page.

Also, "time" should be "line".

> Like in the case of the leading, measure, which is the
> length of one line, also has a soft spot. This soft
> spot means 45-75 characters per line, value which helps
> the reader keep a pleasant and natural pace while
> reading without being interrupted too often by line
> breaks or getting impatient to reach to reach the end
> of the line because of its length.

The author means "sweet spot". "Soft spot" means something else. Again, the explanation here doesn't make much sense.

Long lines don't cause "impatience". It's just that, like narrow leading, they make it harder to scan to the next line. If your eye has to move farther to reach the beginning of the next line, there's a greater chance of miscounting.

The problem with short lines isn't really that they interrupt—we're pretty used to scanning lines. When you have short lines, a break before a long word is likely to be a larger fraction of the overall line length. With a narrow column, breaking on a long word can leave a big chunk of whitespace on the previous line.

That will either cause a really ragged right edge if the column isn't justified or blobs of distracting whitespace and rivers in the middle of the column if it is. Look at how distracting the wide variation in line length is in the narrow column example compared to the wide one.

> Kerning solves this problem by manually adjusting the
> space between such pairs in order not to convey the
> right meaning.

This is true, but you generally should not be manually kerning fonts in web design. The font itself contains kerning pair information. All you need to do is pick a font where the typographer did a good job with this. (This is one of the things that really sets great fonts apart from mediocre ones.)

> it’s another area where you can vastly improve
> legibility in some particular cases.

Tracking can be used for nice effect for things like headers and navigation, but you generally should not mess with it for body text. If you can make the text more legible by changing the default tracking, that font already has bigger problems. The type designer likely put more thought into the tracking than you did.

Where tracking is useful is changing the color—relative lightness or darkness of a blob of text—for things like subheadings, asides, etc. It gives you a way to control emphasis of text separate from changing its literal color (RGB values) or weight (line thickness).

It was really overused in the 90s so these days, most designers are more conservative about it. (Remember when every design l o o k e d l i k e t h i s ?)

> Almost every modern web page uses at least two or three
> to enhance it’s structure. For example, you can align a
> big heading to the right, grid-based text should be
> centered, and usual paragraphs can be left-aligned or
> justified.

Please don't do that. I don't even know what the author means by centering "grid-based text", but if you mix alignments like this, your reader will likely hate you. You can occasionally do something nice with right-aligned headers. But left-justification is the right answer almost all of the time.

The author also confuses alignment and justification, which are separate things. (Though CSS does sort of confound them.) Justification just generally doesn't look good in browsers and requires a more sophisticated line-breaking algorithm than the web supports. Look at all of the knobs something like InDesign gives you to justify text.

On the web, just align left (i.e. ragged right) and that will be the most readable solution almost every time.

> Getting these values to work well together is not an
> easy thing, but an idea might be to use the golden ratio
> between consecutive sizes with manual adjustment where
> necessary.

There's absolutely nothing magical about the golden ratio. Using any consistent ratio (i.e. making each size a constant multiple of the previous size) will pretty much get the job done. I aim for somewhere between 1.5x to 2x.

> A natural and pleasing size variation will make a web
> page beautiful on its own while keeping everything nice
> and legible.

Well, sure, but that's a tautology. That doesn't tell the designer (or non-designer) what to do. A couple of tangible guidelines:

1. Don't use more than a couple of sizes.

2. Use size to indicate structure.

Readers will automatically associate size with hierarchy so do that deliberately. Headers are bigger than subheaders are bigger than body is bigger than asides. Make the most important stuff (either content or for understanding the structure of the writing) biggest.

> Capital sins of type setting
> - Text sizes
> - Lazy handling of titles and subtitles
> - Text blocks that are not split up into enough small,
> scannable, digestible parts
> - Indiscernible links
> - Text is not treated as an interface but as decoration
> - Fancy navigation drawing the attention from the actual
> content
> - Lack of active white space

Wait "text sizes" are a sin? Should you just have unsized text?

Use of whitespace is the key to great design, but the author doesn't provide any guidance on how to use it.

> Rely on quality fonts
>
> Prepare some text and read it–do you like what you see?

How do I know what a quality font is? If I can trust my own judgement, I don't need this article, do I?

> When it comes to fonts, workhorses are all the rage.
> They’re like the AK47s of typefaces.

The author doesn't define what a workhorse is, and then uses a metaphor that is both mixed and wrong (though I do like the image of a machine-gun toting horse). AK47s are popular because of their uniformity. But a workhorse type family—assuming the author means one with a variety of styles and weights—is useful specifically because of its variety.

> They’re great also because they come in a huge variety
> of weights and styles (bold, italic etc.)

Well, that's the definition of a workhorse typeface, isn't it? If it didn't come in that variety, it wouldn't be a workhorse to begin with.