Web_Designer_UK__May_2018

GET PRO DESIGN SKILLS
6 STEPS TO MEANINGFUL
TYPOGRAPHY
1
READ THE CONTENT
Meaningful typography
starts with one thing —
the content. Typographers know
this since they’ll always read the
book before they start typesetting
for it. Unfortunately, it
seemsthatmanywebdesigners
underestimate the importance of
contentinawebdesignprocess.
They will often find excuses in
the fact that the website doesn’t
existyetsothere’snocontentto
work with. When that’s the case,
use content that is similar. If
you’re designing a website
about finance and economics,
for example, find an article
about that and read it.
2
CHOOSE A TYPEFACE
BASED ON CONTENT
Now you have read the
content, you’re ready to choose
your main typeface. If a website
isabouttechnology,butis
expected to have medium to long
articles,useatypefacethatlooks
abitmodernbutiseasytoread.
If it’s an art gallery portfolio, you
can get away with something
edgy.Don’tuseLoremIpsumas
placeholder text — it’s a strange
form of the Latin language that
has nothing to do with your
website. Use the content from
Step 1, in the language that
will be used, and then design
around that.
3
START MOBILE-FIRST
An important step is to
design the best reading
experience for the screen that’s
hardest to design for — mobile.
Mobile-first is a fundamentally
different approach to web design
where progressive enhancement
is favourable to graceful
degradation. Don’t design the
best reading experience for
desktopscreensandthenadapt
for mobile or, even worse, forget
about mobile altogether. Choose
a combination of font size and
line height that works best on
smaller screens. Your starting
pointshouldbetheagreed-on
browser default of 16 pixels.
GREAT EXAMPLES Matej Latin picks a selection of typography that works well
4
ADAPT FOR
LARGE SCREENS
Don’t let mobile-first
turn into mobile-only. The tools
forshapingthebestreading
experiences for different screens
areinplaceandtheyshouldbe
used.Largerscreensareusually
further away from reader’s eyes
so the base font size needs to be
larger.18pixelsiswidely
considered a good starting point.
Don’t forget to limit the width of
paragraphs — recommended for
best reading experiences is up to
60charactersperline.Theline
height needs to be looked at
again — 1.4 or 1.5 times the font
size is usually best.
Wired — wired.co.uk
Wired comes with a typeface designed for web usage (Exchange
Web) and neatly designed reading experiences for both, mobile (17
pixels and 1.3 line height) and desktop (19 pixels and 1.4 line height).
The Independent — independent.co.uk
The Independent benefits from a bespoke typeface, Indy Serif, which
seems very capable at delivering any type of news content on any
medium. Well-shaped paragraphs offer a great reading experience.
46 _________________________________________________feature