
Web typography for non-designers - bubblyboo
http://www.presslabs.com/blog/web-typography-for-non-designers/
======
quinndupont
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](http://practicaltypography.com/letterspacing.html)

~~~
grey-area
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/](http://practicaltypography.com/)

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

~~~
munificent
> 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.

------
jwmerrill
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.

~~~
Silhouette
_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
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.

~~~
Silhouette
_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._

I agree. We know that margin width seems to make a difference in other
contexts, so it seems likely that on small mobile devices where there is very
little margin the other characteristics for optimum readability might need to
be adjusted to take that into account. Clearly there is an inherent limit on
the physical width of lines we can show on such devices anyway.

 _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._

It would be nice to see some real evidence about the effectiveness of single-
column blog layouts, but first we'd have to choose some plausible alternatives
to compare them with. There don't seem to be many "standardised" ones today,
as other heavily text-based sites that use things like multi-column layouts
tend to be in fields like news or e-commerce, where they aren't trying to
present a single piece.

It would also be interesting to see a proper study about the effectiveness or
otherwise of very large fonts and of thin/light fonts, as widely used on
trendy blogs today. I suspect they would not be a resounding success, but I
have nothing beyond anecdotal evidence to back that up.

 _Much as I love beautiful typography, I think it 's only a deal-breaker when
it goes horribly wrong._

Sadly, that is true of much design work. When you get it right, your site
works well and no-one notices. When you get it wrong, it can be disastrous.
Such is life. :-)

------
leereeves
> 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.

------
paulmckeever
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
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/](http://practicaltypography.com/)

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

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

------
larzang
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.

------
larrymcp
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.

------
psp
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.

~~~
Silhouette
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.

------
meesterdude
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/](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
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.

~~~
meesterdude
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.

~~~
Silhouette
_I would say, if you want to take your sites typography to the next level...
pay for a font library._

That was the theory, but I'm still waiting to be convinced about it in
practice. I check in on all of the major rent-a-font services from time to
time, and I'm rarely impressed by their results.

Consider TypeKit's home page. Personally I would not consider some of the
fonts and typography they use themselves to be acceptable for professional
work.

For example, they're currently using Adobe Clean for a lot of the text, but it
has more hinting glitches than an excited child the week before their
birthday. They get away with it -- up to a point -- because many visitors
probably still have a default browser font size of 16px, but if your default
is a bit larger or you zoom the page, the text rendering is _awful_.
(Actually, their whole layout breaks if you set your default font size a bit
larger, but that's a separate problem.)

Notice how in the font showcase section, under "THE BEST ARE ON TYPEKIT", all
the examples are actually screenshots and almost exclusively of very large
text? What happens if you actually look at the samples of a popular Adobe
font, say Minion Pro, which they feature there? Well, in tests based on
TypeKit's own specimen screen, 3 out of 3 main Windows browsers render it with
nasty weighting issues, and even significant gaps in the letter forms in
narrow areas. This isn't a problem with either Minion Pro or the hardware I'm
using to display it; it renders just fine at the same physical size in
InDesign or Adobe Reader. It's a problem with Minion Pro served as a web font
by TypeKit.

The quality of web fonts from Cloud.Typography generally seems to be better,
but again, even their own home page shows plenty of fonts that either appear
blurry or have hinting problems and appear with uneven line weights, uneven
spacing, counters closing up, etc. The blurring might be acceptable to Apple
users who are used to that style of rendering, but unless your target audience
doesn't include anyone who uses other platforms, it's going to look very odd
to a lot of people. The other hinting glitches might be unavoidable results of
trying to render fonts designed for print faithfully on screen, but they are
glitches all the same.

I just don't understand why anyone who cares about the quality of their work
would voluntarily choose these options, and pay for them, when you can have
similar or better looking rendering for free with native system fonts on most
platforms these days and with several of the standards from Google Fonts if
you want a change.

------
munificent
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.

------
coldpie
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
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.

------
ertdfgcb
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
It is a stupid EU law:
[http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm](http://ec.europa.eu/ipg/basics/legal/cookies/index_en.htm)

~~~
unabridged
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.

~~~
Silhouette
_Session cookies require no notice._

It's mostly an academic issue at this point -- European governments seem to
have realised that this law is very poorly written and even the governments
seem to have little interest in either following it themselves or having the
relevant authorities enforce it.

That said, I think you're mischaracterising what the letter of the law says.
It's not session cookies that are exempt, it's (paraphrased, read at your own
risk) cookies that are essential for the normal operation of the site. In
practice this probably means session cookies for things like logging in or
shopping basket contents, but that's coincidental.

------
radicalbyte
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.

~~~
illicium
[https://en.wikipedia.org/wiki/Text_figures](https://en.wikipedia.org/wiki/Text_figures)

------
antidaily
"Web Design is 95% typography" is depressing.

------
noisepunk
> 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.

