CSS Typography

Design for web content

Web Design is
95% Typography
Arial Rounded MT Bold

Oliver Reichenstein, 2006

Web Design is 95% Typography

One More Time: Typography Is The Foundation Of Web Design
 Typeface/font?
A typeface is a named design for a set of characters (glyphs) that make up a character set. For
example, Garamond is a typeface.

Typefaces are often composed of a number of fonts that define variations in the design and these
are often referred to as a font family. For example, Garamond Regular, Garamond Bold and
Garamond Italic are all fonts and are part of the wider Garamond font family.

Typically, each font is

contained in a separate file.

This may change in the future

with variable fonts.

A typeface is not a font

Typography is the visual component
of the written word.
Good typography reinforces the
meaning of the text.

Typography is for the benefit of the

reader, not the writer.
Minion Pro Medium

practicaltypography.com by Matthew Butterick

 Typography

Clarity
Arial

Personality
Trebuchet MS

Typography has many purposes but clarity (readability) and personality are two of the
most important. Notice that the two fonts used above are subtly different and this makes a
big difference to the way they appear to the reader.
 Typography and typefaces
Typography is not just about choosing the correct typeface for a
particular design, it’s about how that typeface is used:
 Size and colour
 Line height
 Line length (measure)
 Letter and word spacing
 Use of upper/lower case
 General composition, use of whitespace, hierarchy and
vertical rhythm etc.
CSS gives us control of all these variables
Design for web content

CSS TYPOGRAPHIC PROPERTIES

 Key typographic properties

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.0em;
line-height: 1.5; /* a ratio of font size */
text-align: left; /* or right, center, justify */
font-weight: regular; /* or bold, a number e.g. 400 */
font-style: normal; /* or italic, oblique */

Don’t forget that the font-family

rule requires a list of fall-backs (font
Note: line-height does not need a
stack) and a keyword to act as a unit. See this article for an
default backstop. explanation why.
 Other typographic properties

text-decoration: none; /* or underline, line-through */

text-transform: none; /* or uppercase, lowercase; */
text-indent: 1.2em;
letter-spacing: 0.1em; /* use with caution */
word-spacing: 0.5em; /* use with caution */
font-variant: normal; /* or font specific e.g. small-caps */

text-decoration is commonly used to remove

the underline from link text. text-transform is
very useful and means you never need to type
all uppercase for headings etc.
 CSS Typography

Here’s an example of a web page displayed

without styles (left) and with CSS added (right).
Notice how visual hierarchy is changed in the
styled version with the quote being given greater
prominence. Notice also how whitespace is used
to create logical groupings of content.

Typography in CSS
 Web Typography has changed...
• In the past, web designers were restricted to using only those
fonts that were installed on the client computer.
• This limited set of fonts were described as “web safe” or “system”
fonts.
• Modern browsers now support the CSS3 “@font-face” feature,
which enables designers to use just about any font.
• Fonts can be served from the web server or (more usually) from a
font service such as Google Fonts.

https://websitesetup.org/web-safe-fonts-html-css/
 Open Source fonts are free
• Fonts with an open source
license may be used for free.
• Some services, such as Google
Fonts, (established in 2010)
provide an easy way to use open
source fonts.
• Font embedding is now well
established on the web and older
browsers are becoming rare.

https://fonts.google.com/
 Web font services
• There are several services that provide and/or serve fonts.
• Some are free and others have varying payment models.
• The most popular are shown below:

Adobe Fonts (formerly Typekit): Google Fonts: Free and self-serve using a
Pay for and serve Free and serve provider like Font Squirrel
 Variable Fonts
Variable fonts are the next big
typographic innovation on the
web. They have a number of
benefits over traditional “fixed”
fonts. They may be varied along
one or more defined “axes” e.g.
width or weight and can be used
to define a number of typographic
variants from within the same
font file, thus saving bandwidth
and server resources. See the
links on the left to learn about
them now and keep ahead of the
Richard Rutter: Getting started with variable fonts
MDN: Variable fonts guide
pack! Also, take a look at the
Google: Introduction to variable fonts on the web Recursive font project to get an
Can I Use (browser support) idea of what to expect in the near
Variable Fonts (examples)
future.
Design for web content

HOW ARE TYPEFACES CLASSIFIED?

 Typeface classification
There are several different ways to classify typefaces but broadly,
there are two we should be aware of:
1. Typefaces are either serif or sans-serif, which describes the
design of the letterforms. Other styles also exist (e.g. script) but
are less commonly used.
2. Typefaces are designed for a specific use and typically this is
either body text (long-form text), heading text (short-form text)
or display text (very short-form or logo).
It's important to choose the correct typeface for a particular
purpose.
 Typeface classification
The Google Fonts service uses 5 broad
categories. The Serif and Sans Serif fonts could
be used for either headings or body text but you
will need to use your own judgement to decide
which is best. Display should be used only for
headings or page banners. Handwriting is rarely
a good idea if readability is important and
Monospace* is useful for tabular data,
particularly for numerals.

*Each character occupies the same space irrespective of character width.

 What is a Serif?
Traditionally, the purpose of the
serif was to guide the eye when

A Serif Font
reading small printed body text
such as newsprint.

Cambria

A Sans-Serif Font
Calibri
On the web, serif fonts don’t
render well on low resolution
screens and so the sans-serif fonts
are more commonly used for body
text – a reversal of the traditional
printed use*.
*The advent of high resolution or “retina” displays is changing this.
 Print/Online Comparison

Sans-serif
heading Serif heading

Serif body text

Sans-serif
body text
 Screen Fonts

Georgia x-height

counter

Verdana x-height

Fonts designed specifically for the screen tend to have larger x-heights. This
results in more open “counters”, making them more easily rendered and
therefore more readable. Georgia and Verdana are good examples of this and
are commonly used in combination on websites.
Design for web content

CHOOSING TYPEFACES
System typeface combinations
Verdana body text with Georgia
headings.

Before the advent of font-serving

services like Google Fonts, the
combination of Georgia and
Verdana was very common. Both
are system fonts, designed
specifically for screen.
Modern typeface combinations
Lato body text with Playfair
Display headings.

These are popular Google

Fonts and work well in
combination because they
provide good contrast. Lato
is rightly popular because it
is warm but authoritative
with a large x-height,
making it ideal for reading
on screens. Playfair has
slender serifs, quite
unusual for a screen font
but renders well on modern
high-resolution screens.
 Which typeface is right?
Selecting a typeface is tricky and has become more so now that choice has
increased but you can start by selecting typefaces that are designed for a
particular job (e.g. body text) and then select the one that has the right
personality for a particular website. As with many design decisions, this choice
is subjective and you'll need to train your eye…

Georgia Fira Sans

http://www.smashingmagazine.com/2011/03/how-to-choose-a-typeface/
 Not ornamental
In the main, your choice of typeface should
allow the content to be read more easily.
Often, this means selecting a typeface that is
in keeping with the written style. An
informal typeface may work better for
informal writing.
Typefaces are not ornamental, they are
designed to do a specific job.

https://practicaltypography.com/what-is-good-typography.html
How many typefaces should I use?

You’d have to make a pretty good case for using more than 2.
One for headings, one for body
Typically, one typeface is used for headings and
another used for body text. This creates contrast
between the two and makes the document easier to
read. However, contrast can also be created within a
single typeface using font size, weight and colour.

The variety of fonts within the Roboto* family means

it could be used for both headings and body text
providing there is enough visual contrast between the
two.

*Roboto comes is 6 different weights as well

as italic, condensed and slab-serif variants.

https://fonts.google.com/specimen/Roboto
 Working with CSS inheritance
If your design uses just two fonts, one for body text (paragraphs, lists etc.) and one for headings, you can
use CSS inheritance (the font-family property is inherited) to style all text in your site using just two
declarations:

This works because setting font-family on the body means that every element within the body will inherit
that value (including headings). We then add a rule below the body rule, which overrides the inherited
value for all the headings. Now, every element will be displayed using Calibri except the headings, which
will be displayed using Georgia.

https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance
Design for web content

WHAT ARE THE KEY CONSIDERATIONS?

 Justification: take care
The CSS type properties provide great control over the way we set
type on our webpages but great care should be taken. For example,
the text-align property has a number of possible values,
including left, right, center* and justify but these should be used
with care. By default, text is aligned to the left, which works well in
most cases. Changing this default may cause undesirable results…

*Note American English spelling

 p {
text-align: left;
}

 The default – does not need to

be specified. Gives flush left
and ragged right.
 p {
text-align: justify;
}

 Gives flush left and right. OK

providing columns are wide
enough so that words can be
evenly spaced.
Justified text in narrow
columns is a bad idea

Distracting over-large spacing

Distracting “rivers”
 p {
text-align: center;
}

 Never for body text, headings

maybe. No flush left so the eye
finds it difficult to follow.
 h1, h1 + p {
text-align: center;
}

 Centred text can work well for

headings and bylines.
 p {
text-align: right;
}

 Wrong for Western script.

 Line height

Line height is another characteristic that should be used with care for many
fonts in most contexts, the default value works just fine but it's worth
experimenting to see if you can optimise readability.
body {
line-height: 1.1;
}

Too narrow: It's difficult to jump

from the end of one line to the
start of another, making it difficult
to read.
body {
line-height: 1.9;
}

Too wide: At some point the space

between lines becomes more
visually dominant that the text.
body {
line-height: 1.55;
}

Just right: The default value (1.5)

is tweaked for this typeface. The
correct line height ratio will be
different for each typeface
depending on its context.
 main {
max-width: 600px;
}

Measure

Measure: In typography,
“measure” refers to the line length.
We can control this in CSS using
the max-width property on the
containing element, often <main>.
 p + p {
margin-top: 2.2em;
}

Vertical rhythm

Vertical rhythm: In typography,

“vertical rhythm” refers to the
relationship of blocks of content with
the whitespace that surrounds them.
We should ensure that elements that
are conceptually associated are also
visually associated e.g. headings with
paragraphs.
Whitespace…

…is your friend.

Design for web content

WHAT UNITS SHOULD I USE?

 Typographic units
• There are a wide range of units that a designer may use when
specifying the size of type in CSS.
• In practice, only px (pixels), em (ems) and % (percent) are
commonly used.
• The px is an “absolute” measurement whereas both em and % are
“relative” or scalable.
• It is best practice to use relative units because IE6 (or lower) will
not scale fonts set with px.
• The em unit is the preferred unit for type.

https://css-tricks.com/css-font-size/
 Additional typographic units
• CSS3 introduces some useful new typographic units (rem, ch, vw,
vh and vm).
• The new REM (Root EM) unit may be the most useful for
typography.
• Because the EM unit is relative to its parent element size, it can
be unpredictable or hard to calculate (or both!).
• REM solves this by being relative to the root element <html>, so
the same value can be applied at different levels of the DOM with
the same result.
• See CSS values and units for a complete description.

https://generatedcontent.org/post/11933972962/css3values
 The EM has it!
In practice, most designers will use EM units for typography because, despite
the apparent complexity, they work relative to the content context, which
means that content will scale proportionally to its context (usually the parent
element). This is helpful for responsive web design. Many designers will also use
EM units when sizing typographic-related elements such as padding and
margin. This allows whitespace to scale with type.

/*======= TYPOGRAPHY =======*/

h1 {
font-size: 4.0em;
font-weight: 300;
}
h2 {
font-size: 2.0em;
}
 Learning more

The fonts.com website has a fantastic learning resource for students of

design. Fontology covers almost everything you need to know about
general typography.
 Learning more

On Web Typography by Jason Santa Maria is a good place to start. It’s a slim
volume and easy to read – highly recommended.
 Learning more

Web Typography by Richard Rutter (Clear Left) is an excellent reference

that will take you to the next level – also highly recommended.
The End