Table Of ContentWeb
Typography
A handbook for designing beautiful and
effective responsive typography
Richard Rutter
Web
Typography
A handbook for designing beautiful and
effective responsive typography
by Richard Rutter
Ampersand Type
Brighton, UK
2017
ii
Web Typography
by Richard Rutter
Published in 2017 by Ampersand Type, Brighton, UK
http://book.webtypography.net
Please send errors to [email protected]
Editor: Owen Gregory
Design: Richard Rutter & David Rutter
Compositor: David Rutter
Headlines set in Ingeborg by Michael Hochleitner
Body text set in Premiéra by Thomas Gabriel
Captions set in Skolar Sans by David Březina
Printed by Generation Press, Poynings, UK
on Munken Polar Smooth.
Copyright © 2017 Richard Rutter. All rights reserved.
ISBN: 978-0-9956642-0-3
A catalogue record of this book is available from the British Library.
Foreword iii
Foreword
by Mark Boulton
What can I possibly say about typography that hasn’t been said
before? I could tell you that there is probably no design element
more important. Or that mastery of typographic design should
be first and foremost in a designer’s endeavours. I could tell you
that controlling how language is displayed controls how it is read
and perceived. Typography is really important.
But all that has been said before. The difference, of course, is that was
mostly said about typography in printed form, not of web typography.
No, web typography requires a slightly different outlook. Sure, typogra-
phy on the web requires the same attention to detail, and we employ a
similar arsenal of guidelines and principles to our print-based cousins.
But we do it on a different foundation: the web. An ever-changing, fluid,
dynamic system where users consume words on a plethora of devices and
web browsers. We must not just be comfortable with this chaos and lack
of control – we must embrace it. As you will read in this book, typography
on the web is familiar but subtly different. Our typography can never be
as exacting and precise as print, but using the teachings in this book, we
can create just as delightful reading experiences on the web.
In 2007, Richard and I stood on a stage at South by Southwest Interac-
tive in Austin. A few months earlier, we had proposed a talk provocatively
titled ‘Web Typography Sucks’ with the hope of maybe being accepted
to speak to a few dozen typography nerds in one of the small rooms in
the enormous convention centre. To our great surprise, not only were we
to present in the largest hall at SXSW that year, but it was also packed.
Typography, it seemed, was as cool as Web 2.0. Now, a decade later, we
have almost as much typographic freedom and control on the web as we
do in other media. So much has changed. But does web typography still
suck? I’ll leave you to answer that, once you’ve read this book.
iv How to use this book
How to use
this book
This book was written as a practical guide and companion ref-
erence for designers, developers and anyone else involved in the
process of creating a website.
Typography touches, and can be affected by, all people involved in the chain
of events that leads to a website being conceived, designed, written, built
and published. This means that if you’re an information architect, user
experience designer, author, editor, project manager or client, this book
is for you too.
To get the most from this book you will benefit from some familiarity
with the basics of HTML and CSS, but you will need no advanced knowl-
edge of type and typography, so if you’re new to the field you’ll find this
book accessible. A wise person once said that the best experts are keen on
sharpening old saws and learning new tricks. This book provides enough
in-depth detail that a seasonal professional will also find it useful.
You can read this book from cover to cover as a complete guide to best
practices in designing and implementing the typography of a website. You
can also use this book as a reference to be dipped into for technical and
aesthetic guidance, as and when the need arises.
The book is divided into three parts: ‘Setting Type to be Read’, ‘Typo-
graphic Detail’ and ‘Choosing and Using Fonts’. Each section is written as
a series of guidelines. Take these not as rules but as guidance for making
good decisions. Some lucky people have immaculate technique in their
veins. The rest of us need instructional books like this to provide best prac-
tices for us to follow as we hone our craft and develop our own instincts.
The section on choosing typefaces is deliberately the final part of
the book. Choosing a typeface is not typography. Before the advent of
web fonts, typographic discipline online was scant. The source of this
neglect was largely due to a resentment of the paucity of fonts available.
How to use this book v
This frustration was both unwarranted and misdirected. A typographer’s
focus should be to make the very best of what is available. There will be
times when, for whatever reason, the typefaces you have at your disposal
are not what you would ideally wish to use. Do not be disheartened by this
– treat it as a call to arms, a challenge to rise above what the typeface offers.
This book should show you that even very ordinary faces can be crafted
into an engaging, absorbing typographic experience for your reader.
During your process of designing a website you can follow the guide-
lines in this book in order – it would certainly be a suitable way to learn
the craft. This would leave the act of choosing a typeface until after you
have designed all the essentials of a website. It is certainly possible to do
that, but as with all design you should accept that a process of iteration
will be involved. The typeface you eventually choose will subtly (and occa-
sionally greatly) influence many other parts of the design and the precise
nature of the typography. That said, it is worth repeating: choosing a typeface
is not typography; but if you have the choice, it’s an important aspect.
A few caveats
This book only explores the requirements of European written languages,
with a particular emphasis on the Latin alphabet and quite possibly an
unintentional bias towards English. Complex scripts, such as Arabic or
Devanagari, as well as logographic writing such as Hanzi or Kanji, are
not covered.
As you might rightly guess for a book on web typography, this guide
covers a lot of HTML and CSS. One of the great aspects of CSS, and work-
ing on the web as whole, is that technologies are continually evolving. To
ensure that this remains relevant and accurate for as long as possible into
the future, all the CSS techniques mentioned in this book can be found in
W3C specifications and have at least some browser support (unless other-
wise stated). The progressive nature of the web means that there will be
more support in browsers now than when the text was written. Conse-
quently there is only occasional mention of which browsers do or don’t
support any particular CSS, and very few workarounds are detailed. The
open web is a far better place than a book to find up-to-date information
on browser support1 and shims or hacks.
1 For up to date information on browser support try Can I Use (http://wbtyp.net/61).
vi How to use this book
Typefaces versus fonts
In general parlance the terms ‘typeface’ and ‘font’ can be used interchange-
ably and anyone who admonishes you otherwise should be deemed a
pedant. In almost all situations it is perfectly fine and comprehensible to
say, ‘Gill Sans is a font’.
That said, throughout this book the two terms are used to mean slightly
different things. Typeface is always used to mean a font family – a collec-
tion of fonts based on the same design (as in Gill Sans). The term font is
mostly used to imply an individual style such as Gill Sans Bold Condensed.
There may well be occasions when ‘font’ has been used to avoid repetition
of ‘typeface’ – hopefully your reading experience will be improved by that
small indulgence. Web font is used to mean a font file downloaded for the
rendering of text in web pages.
vii
viii
Contents
We are all Typographers
Why web typography really does matter. . . . . . . . . . . . . . . . . 3
Embracing the medium. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Preparing the ground . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1 Setting Type to be Read
How we read . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
The amazing em (and friends) . . . . . . . . . . . . . . . . . . . . . . . 14
Designing paragraphs: line length . . . . . . . . . . . . . . . . . . . . .21
Designing paragraphs: text size. . . . . . . . . . . . . . . . . . . . . . . 26
Designing paragraphs: line spacing . . . . . . . . . . . . . . . . . . . 34
Alignment, justification and hyphenation . . . . . . . . . . . . . . 43
Responsive paragraphs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
2 Typographic Detail
Symbols, signs and accents. . . . . . . . . . . . . . . . . . . . . . . . . . 67
Ligatures and abbreviations . . . . . . . . . . . . . . . . . . . . . . . . . 78
Hierarchy and scale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Meaning and semantics . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Numerals and tables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119
Tracking and kerning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145
Headlines and impact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Applying vertical rhythm . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Arrangement and composition . . . . . . . . . . . . . . . . . . . . . . .177
