Web typography for non-designers

http://www.presslabs.com/blog/web-typography-for-non-designers/

by bubblyboo • 11 years ago

215 50 11 years ago

ertdfgcb• 11 years ago

This was a great article, but the "This site uses cookies" warning struck me as a little disingenuous. It seems like there's a choice to not accept cookies, but if you click "Decline" it just kicks you out to Google. It's nice that they ask but the options really should be "Accept" or "Leave". Maybe this is standard, I usually just ignore those things.

jib• 11 years ago

It is a stupid EU law: http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm

mike-cardwell• 11 years ago

There's an ad-block filter specifically for removing these things:

https://github.com/r4vi/block-the-eu-cookie-shit-list

Just add this to your filter list:

https://raw.github.com/r4vi/block-the-eu-cookie-shit-list/ma...

kuschku• 11 years ago

Which is not stupid in theory, but all websites implement it wrong.

It was intended to forbid using tracking cookies without user approval, and this is the intent of the law. Nothing more.

unabridged• 11 years ago

Session cookies require no notice. Only persistent cookies and 3rd party cookies require notice, and there are no features on this site that should require them (besides remembering an affirmative response to the cookie warning). In fact there are no features that should require any cookies, save them for logged in users.

hackuser3• 11 years ago

the "This site uses cookies" warning struck me as a little disingenuous. It seems like there's a choice to not accept cookies, but if you click "Decline" it just kicks you out to Google.

With JavaScript and cookies blocked, the site worked fine. I never saw a warning.

leereeves• 11 years ago

Script and Novelty fonts shouldn’t really be used on the web as they do not emphasize readability.

Yet this article is full of novelty fonts.

Perhaps the author meant to say that script and novelty fonts shouldn't be used for body text.

arxpoetica• 11 years ago

Web tpyorpahpy wtih slplenig eorrrs. http://www.mrc-cbu.cam.ac.uk/people/matt-davis/cmabridge/

meesterdude2• 11 years ago

This was a good read - i struggle with fonts, and found it insightful. I'm always big on usability but its interesting to think that in the end they're often readers above all else, and to optimize around that.

But I do not agree with paying for a webfont library - Not that its a bad idea, but its likely not appropriate for most people.

Google fonts is good - if you stick to the popular ones its hard to go wrong.

I also use this to get some ideas for combinations, all from google-fonts: http://femmebot.github.io/google-type/ if you suck at typography but want your site to look nice, this is a great way to clean things up without much thought.

For me, I've tried to focus on the tone, feeling and readability when looking at fonts. You have to really trace over the letters and feel everything out - or compare how different fonts portray a given letter and which style you want. Also, what font weights are available? if you want bolder or thinner text you'll need a font that has several weights - not all do.

jimwalsh• 11 years ago

I feel that it can be argued that paying for a font library is a good idea. It is far cheaper than buying individual fonts, which can get expensive quickly. I feel that the Typekit library is ahead of the Google library. The Google library always has felt very stale and bland to me. The Typekit library has a better variety if they dont have as many available fonts as the Google library.

Also their systems to include the fonts into your pages also eliminates the headache for many people of how to include the various font files for a particular family, as well as by which method to include them.

That github link is very useful for people getting their feet wet in typography and seeing how things work together.

meesterdude2• 11 years ago

You're not wrong - its just that most people aren't THAT serious about it. People that pay for it, or even think about paying for it, give more focus to that area. But for many devs that's simply not going to happen. They'll just go with whatever is free, and to be honest thats perfectly fine.

I would say, if you want to take your sites typography to the next level... pay for a font library. But if you just want it to be better than defaults, plenty to be had for free.

blackobelisk• 11 years ago

Whenever I give web typography advice to people, I tell them they should listen to me because I'm a huge type nerd, but I also tell them that they shouldn't listen to me because I'm a huge type nerd.

For me, Typekit is a godsend, but the fact is that for most people it's not necessary.

jwmerrill• 11 years ago

The picture in the "measure" section has a red "x" over 99 characters per line and suggests 45 to 75 characters per line. But the article's paragraphs have about 95 characters per line.

Do as I say, not as I do.

michaelchisari• 11 years ago

Do as I say, not as I do.

This is a beginner's guide. You need to learn the rules before you can break them.

Case in point:

http://mesosyn.com/pp-e1.jpg Early Picasso

getup8• 11 years ago

Ha I was about to make the same comment. For a blog though I'd much prefer 100 to 45 but I think his recommended 75 might be the sweet spot.

Silhouette7• 11 years ago

Do as I say, not as I do.

Or not. Such experimental evidence as we have on this point -- which isn't much for a sensible scientific/evidence-based debate -- doesn't necessarily support a claim that wider line widths will objectively reduce reading speed or comprehension/retention, at least not until you get a lot wider. There may be an argument that readers subjectively prefer mid-width lines, though.

In any case, it may be that the optimal comfort width is dictated by more physically-based factors, such as the angle we can comfortably scan moving only our eyes and not also turning our heads, and that letter counts are just a proxy for this based on typical text sizes and reading distances (meaning that it may or may not be a good proxy since the recent shift to much larger web fonts).

TheOtherHobbes• 11 years ago

It's almost impossible to say anything definitive about line width on web pages because the experience depends so much on viewport aspect ratio, device rotation, and surrounding content.

The x-words-per-line standard derives from print, which has different traditions. Calling them rules is probably unwise. (See e.g. small column widths in newspaper and magazine layouts, vs paperback novel layouts, vs etc.)

Blog pages seem to have standardised on a single central column between a half and two thirds of the viewport width. Text sizing covers a huge range from ~12pt up to 16pt or even 18pt.

Modern product pages seem to have standardised on a selection of standard Bootstrap layouts, but with a lot of holdouts - e.g. Amazon - who do their own thing.

I'm not aware of any hard evidence about comprehension/retention metrics for these layouts. But they're very popular, and visitors don't seem to hate them.

There's actually more evidence for unexpected conversion rate increases from apparently insignificant changes to button positioning, icon colours, and such.

Much as I love beautiful typography, I think it's only a deal-breaker when it goes horribly wrong. For many sites, other design elements are likely more important.

pbhjpbhj• 11 years ago

Depends on viewport and text-zoom though - at 600x1280 [UW-SXGA in portrait mode, normal zoom] he has ~75 characters per line!

psp• 11 years ago

Realising that different font sizes need to be in proportion to each other (e.g 3:4 or golden ratio) made the cake for me when I briefly studied typography a while back. This article touches it as well.

Silhouette7• 11 years ago

Although the article immediately loses points for proposing an absurdly precise ratio for font sizes based on a mathematical constant whose interesting properties are utterly irrelevant here.

What matters is that your range of sizes are visually equivalent or clearly distinct when you need them to be, and that the text looks good at each size in your chosen fonts. Generating a geometric scale of 7 or 8 different sizes by just multiplying some base value by a random ratio will not achieve those goals with any screen fonts I have ever worked with.

coldpie• 11 years ago

I might write an article about this, but in the meantime I'll ask for any thoughts here. I've noticed text size on the web has gotten enormous. I very often scale down websites I find on here to 50 or 60% zoom to get the article text size to be reasonable. Has anyone else noticed this? Is there some reason for this? Was there some design convention I missed where headline text size is appropriate for article text?

DanBC• 11 years ago

Web designers realised they were excluding very large numbers of people by using tiny fonts. They decided to be more inclusive. The old cry "Just zoom in" excludes a bunch of people.

The new cry "Just zoom out" is less discriminatory.

In general I prefer big fonts with a 1.5 line spacing.

Silhouette7• 11 years ago

I suspect it's a reaction to three main factors:

1. For far too long, many web sites used sizes that were too small. Body text at 12px or 14px just isn't easy for a lot of people to read in most fonts, even if a 21-year-old designer with perfect eyesight and a good quality monitor has no trouble. But the trend-obsessed design profession tended to stick with what it knew, even when sensible people were objectively pointing out how bad the common practice was at the time. Now everyone got the memo, but the same trend-obsessed industry is fixated on giant text because it's what "everyone" else is doing.

2. On current high-resolution mobile displays, the physical size of text for a given CSS size is often smaller than on a desktop or laptop screen. Lots of people are advocating so-called "mobile first" design, and so larger font sizes follow to improve readability at the default size on mobile devices.

3. Web fonts are all the rage, but many of them just don't look very good, even the ones you get charged to use. Often this is because are trying to emulate print fonts that were never designed with a relatively course pixel grid in mind, unlike classics like Verdana and Georgia, the newer Microsoft C-fonts, and analogous native/UI fonts on other platforms that were very much designed with on-screen use in mind. That makes it hard for a lot of web fonts to look good at small sizes even under ideal conditions. And conditions usually aren't ideal, because often these fonts (again, even the commercial ones) are hinted in ways that lead to a poor appearance on-screen for at least some users. This is not helped by the very different renderings that the "same" font can wind up with on different platforms. These fonts don't look so bad on high-resolution screens like newer smartphones and tablets or Apple's Retina laptops, but to look even acceptably good and moderately distinctive on the lower-resolution screens of desktops and laptops they need to be scaled up to see more of their details.

On top of those factors, probably most users now understand and routinely use zooming and it's supported in every major browser, so setting a font too large isn't a huge risk to usability the way setting a font too small used to be. So we have a correction to a long-term trend of using fonts too small, a trendy industry that has overshot the mark, and no immediate compulsion to fix it because users just zoom out exactly as you described.

munificent4• 11 years ago

Is there some reason for this?

Pixel density of desktop displays has been increasing pretty much forever, but web standards don't take that into account. A 16px font today subtends about the same angle of your eyeball as 12px text did ten years ago once you take typical displays sizes and resolutions into account.

Retina mobile displays further this, though there the browser does apply some scaling to take the greater pixel density into account.

quinndupont3• 11 years ago

I applaud the effort and share the sentiment that typography is important for the web, but there seems to be quite a bit of problematic advice given. E.g.,

1) the author suggests a range of 120-150% of leading; the upwards bounds of this is far too much (too much leading causes the eye to skip down a line). Bringhurst's suggestion is much lower---around 12/14pt (Bringhurst is referencing print, not online, so an argument could be made for slightly more leading, but not 150%).

2) The discussion of kerning doesn't mention kerning tables that are built into the font: one doesn't manually kern body text.

3) Tracking, aka, "letterspacing". There's some debate about it, but one doesn't typically letterspace lowercase (body) text (the exception may be very small text). F. Goudy may have said that "anyone who letterspaces lowercase would shag sheep" http://practicaltypography.com/letterspacing.html

Silhouette7• 11 years ago

It's difficult to make generalisations about line spacing, because so much depends on the typeface you're using. On the web, we normally specify a line-height relative to the font's size, but factors like x-height (or, if you prefer, how prominent ascenders and descenders are) and the line length are also important.

As for tracking, not letterspacing lowercase is a reasonable rule of thumb, but a lot of rules need to be bent when you're setting small text. A lot of the same arguments for bending the rules also make sense if you're displaying text on low resolution media like computer screens (less so on modern high-dpi technologies like Apple's Retina products) and sometimes also if you're setting inverted text (light against a dark background). As always, you have to take the whole picture into account and adjust your typography to your content and your medium.

hackuser3• 11 years ago

Thanks. With due respect, what level of expertise is this advice coming from? (It's also not clear what expertise the author of the Pressla article has.)

By the way, your website is beautiful!

Kronopath2• 11 years ago

The link he gives there isn't his own site, it's an online typography ebook by Matthew Butterick, a professional typographer. I expect most of the knowledge in his comment comes from there as well.

It's worth a read: http://practicaltypography.com/

quinndupont3• 11 years ago

An enthusiast and avid reader, at best (although I do teach a university graduate course on User Experience...)

grey-area• 11 years ago

While this article is a bit of a mess in many ways (structure, content, design), and I wouldn't take it seriously as a guide to design, you can use leading to give emphasis to things like an intro paragraph or pull quote, in which case 150% is totally fine and you might even go over that. They should probably have mentioned the context in which their advice might have been used, and given examples of different usage. 150% on main copy would usually be way too much of course. Even for main text, personally I find 12/14 to be pretty tight - Indesign for example chooses 12/14.4 as a default, and how tight it feels depends on a lot of factors (face, line-length, weight, density of text (is it head, pull-quote, long body?)). There's a lot of variables there and I'd be careful about making sweeping statements about leading.

I agree the kerning examples are pretty absurd, if anything automatic kerning usually gives you too much space - I've never seen automatic kerning make such a mess of spacing as in their example, and as you say it's something you'd only do manually on heads (and even then rarely in web typography as the tools just are not there to do it well, unless you want to litter your code with manual spans).

The practical typography link you gave is great - that's a much better resource for online typography, and beautifully done:

http://practicaltypography.com/

PS Gill tried to shag sheep and his typography was really rather good.

munificent4• 11 years ago

150% on main copy would usually be way too much of course.

I think this is true in general, but fonts that are typically used in web design tend to have pretty tall x-heights (designed that way to compensate for low monitor pixel density). As the x-height goes up, I find the leading can too.

I like the rule of thumb that the line spacing (i.e. distance between baselines of successive lines) should be about 3x the x-height.

But I also do tend to like my lines a bit more spaced out than most. Some sort of weird compensation for suffering through years of painful single-spaced Word documents and old web pages.

quinndupont3• 11 years ago

Excellent contextualization of the issue: there's a lot of factors that go into.

And Gill's my favourite BECAUSE of his antics! What a weird guy, and so supremely capable of creating beauty.

sago• 11 years ago

The comedy 1.5 line gap between paragraphs was what defeated me. I was distracted by the sound of Tschichold turning in his grave.

1. "too much leading causes the eye to skip down a line" usually considered to be the opposite. Small leading causes skips. Which is why many copy editors prefer to work with texts at 200% line-height.

3. Goudy was talking about blackletter. But that is sheep-shaggingly bad for the same reason as lowercase, so it fits, I think. Tschichold (again) said that, conversely, nothing should be set in all caps or small caps without at least a little letterspacing.

munificent4• 11 years ago

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.

larrymcp• 11 years ago

Lots and lots of typos in this article. I eventually clicked off because it was getting too distracting. I would suggest to the author that proper grammar and punctuation is even more important than typography.

radicalbyte• 11 years ago

I'm not a designer, but I notice something strange in the size section. At lower sizes, the numbers are lower than the letters.

Is that an error, or is that "by design"? It looks really ugly to me.

I'm using an rMBP with the latest Chrome and Mavericks.

philo23• 11 years ago

I believe that's just how the font is stylised.

capex• 11 years ago

Some fonts like the Alegreya Sans have numbers with varying heights, it is just a matter of style.

illicium• 11 years ago

https://en.wikipedia.org/wiki/Text_figures

paulmckeever• 11 years ago

This article is a badly assembled collection of other people's ideas. Taking most out of the content out of its original context is why it doesn't make much sense.

lelandbatey• 11 years ago

I agree. It seems very heavy on pictures, and light on explanations or reasoning for the rules given.

I find a much better resource is "Butterrick's Practical Typography"[0], which is a very accessible. If you want just the absolute bare essentials, the first section of the book/site "Typography in 10 Minutes"[1] is fantastic.

[0] http://practicaltypography.com/

[1] http://practicaltypography.com/typography-in-ten-minutes.htm...

antidaily• 11 years ago

"Web Design is 95% typography" is depressing.

larzang• 11 years ago

This article falls for one of my major designer pet peeves: using heading tags as style tags.

Having a fixed relative ratio of font sizes for h1-h6 makes no sense because heading tags (as all html) are structure, not style. They are used to indicate the relative importance of heading text within a page and/or section, and should have a semantic css class appropriate to their role applied.

Depending on how a page is structured, a h2 may be a section heading, or an article heading, or a page sub-heading, or many other things, and each of those roles may call for very different styling relative to a h1 page heading.

noisepunk• 11 years ago

But if you think about it, this consumer is a very specific type–he’s a reader. The number one reason he’s visiting that web page is to read the text on that page, irrespective of the device he’s reading it on.

The consumer is also apparently a male.

Web typography for non-designers

Related Stories