Typography

For
Web Designers
by Alex Devero

Copyright 2016 Alex Devero. All rights reserved.

Alex Devero, Author, Editor, Designer, Web Developer

Feel free to take passages from this book and replicate them
online or in print, but link back to blog.alexdevero.com/
everything. If you want to use more than a few paragraphs,
email [email protected]. If you flat-out steal, Ill find out.
Portions of this book have appeared on my blog
(blog.alexdevero.com) over the last few years.

Table of Content
Introduction

Part I: The Fundamentals of Typography

Different styles of typefaces
Proportional and monospaced typefaces
Mood
Weights and styles
The anatomy of a typeface

Part II: How to Format a Document

No.1: Distrust default software settings
No.2: Ensure good contrast between text and background
No.3: Avoid chart junk and page junk
No.4: Enforce a consistent style within a document
No.5: Maintain a visual hierarchy
No.6: Group related page elements

Part III: How to Format Large Bodies of Text

No.1: Set printed body text from 9 to 11 points (12 points for web)
No.2: Set body text two to three alphabets wide
No.3: Favor flush-left, ragged-right body text
No.4: Separate sentences with one space, not two

No.5: Dont allow less than seven characters on a line

No.6: Avoid bad paragraph breaks
No.7: Avoid line-breaking hyphens
No.8: Signal new paragraphs once, not twice
No.9: Break up large blocks of text

Part IV: How to Format Smaller Blocks of Text

No.1: Emphasize ten percent or less of text
No.2: Avoid all caps and underlined text
No.3: Set acronyms and initialisms in small caps
No.4: Hang punctuation in small chunks of text
No.5: Hang bullets and numbers in lists
No.6: Avoid bad line breaks
No.7: Use symbols and special characters as needed
No.8: Use proportional old-style figures in body text
No.9: Adjust leading and kerning for large text
No.10: Verify software alignments optically

Part V: How to Use Punctuation Properly

No.1: Connect thoughts using em dashes
No.2: Show ranges using en dashes
No.3: Clarify and improve readability using hyphens
No.4: Designate feet and inches with prime symbols

No.5: Replace missing characters with apostrophes

Part VI: How to Choose Typefaces

No.1: Limit typefaces to two per project (document)
No.2: Use typefaces that reinforce a documents mood
No.3: Choose serif or sans-serif, based on aesthetics

Part VII: Typography in Web design

CSS and typography
Width
Line-height
Font-size

Summary
Further Reading
Thanks

Introduction
In this book you will find the all the fundamental information
you will need in your career as a web designer. We will start by
exploring typography in general. Then, we will move to a set of
laws or suggestions you should keep in mind when working
with text and also with design in overall. Some of the
suggestions will be more useful in print design while some in
web design. Still, make sure to read all of them because in
every single one is at least a bit of knowledge that will help
you become better designer. The last chapter will be focused
solely on web design. In this chapter, you will learn about CSS
properties related to typography and how to use them.
I hope this book will give you useful knowledge and help you
do a better work.

Part I
The Fundamentals of
Typography
Typography is one of the most important parts of any design
(maybe the most important). It can bring your work to next
level or take you down.
First lets have a smalltalk about history. Typography first
appeared in ancient times. It was used on coins and seals.
More focus on type began in medieval times with start of print
with individual letter punches. The revolution of type came
with Johannes Gutenberg and his invention of mechanical
printing press. With this technology, using cheap letter
punches in huge amount to print multiple copies of text, first
book was created Gutenberg Bible.
Next revolution came in 20th century with computers. First
personal computer that gave more space and choices to
designers was Apples Macintosh with first design software. As
time went, designers started to create more experimental
typefaces. The price of typefaces was also lowered so they

became more available for masses. This is called

democratization of type.

Typeface or font?
Those two are indeed not same. Typeface is simply set of
typographical characters, numbers and symbols (also type
families). Font is a complete character set within typeface.
Fonts are also specific computer files that contain all
characters of typeface.

Different styles of typefaces

Serif
Serif typefaces or serifs are created by small lines that are
attached to the main strokes of characters within the face.
They are most often used for body copy in print documents
and for body text or headlines online. Some designers prefer
not to use them for bigger blocks of text because their
readability online is often questioned.
Serifs contain many sub-types. Old Style serifs (also called
humanist) are the oldest ones. Some were created in 15th
century. Their main characteristic is diagonal stress (the
thinnest parts of the letters appear on the angled strokes,

rather than the vertical or horizontal ones). Examples: Adobe

Jenson, Centaur and Goudy Old Style.
Transitional serifs first appeared in the mid of 1700s. They are
the most common serif typefaces. The differences between
thick and thin strokes in transitional typefaces are more
pronounced than they are in old style serifs, but less so than in
modern serifs.
Examples: Times New Roman, Baskerville, Caslon, Georgia and
Bookman

Modern serifs have more contrast between thin and thick

lines, also have a vertical stress.
Examples: Didot and Bodoni.

The last type of serif typeface is slab serif. Slabs have little or
no contrast between thick and thin lines plus thick, rectangular
serifs and sometimes fixed widths.

Sans-Serif
Sans-Serifs lack serif details on characters. These typefaces are
often more modern in appearance than serifs. They were
created in the late 18th century.

There are four basic classifications of sans-serif typefaces:

Grotesque, Neo-grotesque, Humanist, and Geometric.
Grotesques are the earliest. These typefaces often have
letterforms very similar to serif typefaces, minus the serifs.
Examples: Franklin Gothic and Akzidenze Grotesk.

Neo-grotesque typefaces have a relatively plain appearance

when compared to the grotesques.
Examples: MS Sans Serif, Arial, Helvetica and Univers.

Humanist typefaces are more calligraphic and also the most

legible than other sans-serif typefaces they have a greater
variation in line widths.
Examples: Gill Sans, Frutiger, Tahoma, Verdana, Optima and
Lucide Grande.

Geometric sans-serifs are based on geometric shapes.

Generally, the Os will appear circular and the letter a is
often just a circle with a tail. Theyre the least commonly-used
for body copy and also the most modern sans-serifs.

Script
Scripts are based on handwriting and has very fluid
letterforms. They are divided into two basic classifications
formal and casual.
Formal are reminiscent of the handwritten letterforms which
you can find in the 17th and 18th century. They are modern
creations, too, for example Kuenstler Script. Theyre common
for elegant typographical designs and are unsuitable for body
copy.
Casual more closely resemble modern handwriting. Their roots
are back in the mid-twentieth century. Theyre much less
formal, often with stronger strokes and a more brush-like
appearance.
Examples: Mistral and Brush Script.

Display
Display typefaces are, I guess, the broadest category which
also include the most variation. Their are unsuitable for body
copy. The best is to use them for headlines or other short copy
that needs attention. These typefaces can be formal, or
informal and evoke any kind of mood. Theyre more common
in print design, but are used more and more online with the
use of web fonts.

Dingbats and other Specialty Typefaces

The last ones are dingbats and specialty typefaces. These
consist of symbols and ornaments instead of letters.
Example: Wingdings

Proportional and monospaced typefaces

At first, we have to know how to recognize proportional and
monospaced types. Characters in proportional typefaces takes
up as much of space as is needed for the natural width of that
character. For example, an j will take up less space than w.
One example of proportional typeface is Times New Roman.
As you might guess, in monospace, every character takes
exactly the same space. When you have a narrower character,
it will simply get a bit more spacing around. One example of
monospace typeface is Courier New.

Mood
Mood of a typeface that tell us how individual typeface should
be used. This means that different typefaces have different
moods, sometimes very different. Most used moods are
formal or informal, modern or classic (also traditional) and
light or dramatic. Some typefaces have very significant moods.
Some fonts like Times New Roman will always be a traditional.

This also makes them very useful for some kind of work like, in
case of traditional fonts, correspondence (mostly business). As
an example of modern mood font take Verdana.
Some typefaces are more transcendent then others and their
mood is dependent on the content and typefaces you used
them with. Great example can be Helvetica.

Weights and styles

Within the majority of typefaces, youll find more than one
style and/or weight. We can differentiate weights as light, thin,
regular, medium, bold, heavy or black. These values refers to
the thickness of the strokes of every character.
To simplify it, we have three main styles which you can find:
italic, oblique, and small caps. Small caps are often used for
headings or subheadings to add variety to your typography if
you are using a single typeface.
Italic and oblique are often confused. These two are distinct
styles. Oblique type is simply a slanted version of the regular
characters. On the other hand, italics are slanted like obliques,
but are actually a separate set of characters, with their own
unique letterforms.

The anatomy of a typeface

Now, lets take a look at anatomy. The different letterforms
within a typeface share a some common characteristics. These
characteristics can help you to determine whether two or
more examples of typefaces will work together. What are the
basic parts of a typeface?

Baseline

The baseline is the invisible line that all the characters stand
on. Rounded letters sometimes sit just a tiny bit under the
baseline, and descenders always drop below this line. A given
typeface will have a consistent baseline.

Meanline

The meanline is the height of most of the lowercase characters

within a typeface, and is generally based on the lowercase x
if there are varying heights among the lowercase characters.
This is also where the term x-height comes from. The cap
height is the distance between the baseline and the top of
uppercase letters like A.

Stem

The stem is the main upright of any letter, including the

primary diagonal. Its could be considered the anchor of the
character.

Bar

This is any horizontal part, which are sometimes also called

arms.

Bowl

The bowl is curved part of a character that creates an interior

empty space. The inside of a bowl is a counter.

Ascender

The ascender of a lowercase character is any part that rises

above the meanline, such as the uprights on the letters d,
h, and b. Descenders are the parts of a lowercase character
that drop below the baseline, such as in a p, q or g.

Serifs

Serifs are the extra flourish at the end of a stroke on serif

typefaces. Some typefaces have very pronounced serifs, while
others are barely distinguishable.

Descender

Descenders are the parts of a lowercase character that drop

below the baseline, such as in a p, q or g.

Aperture

The aperture of a character refers to the opening at the

bottom of some characters, such as the uppercase A or
lowercase m.

Ear

An ear is a decorative extension on a letter, as highlighted on

the g above.

Hairline

Hairlines are the thinnest part of a serif typeface.

Crossbar

Crossbars are horizontal strokes, as found on the uppercase

A and H.

Terminal

Terminals are only found on serif characters, and are the end
of any line that doesnt have a serif.

Loop

Loops are found on some lowercase g characters, and can be

fully closed or partially closed.

Spur

Spurs are tiny projections from curved strokes, such as on

some uppercase G characters.

Link

Links connect the top and bottom bowls of a double-stacked

lowercase g.

Spine

The spine is the curved stroke found on the letter s.

Tail

Tails are sometimes-decorative descending strokes, as seen on

an uppercase R.

Finials

Finials are the tapered endings of some strokes.

Shoulders

Shoulders are any curved stroke that originate from a stem.

Part II
How to Format a
Document
Lets start in outside-in direction or from the big picture to
details if you want. The first set of rules we are going to talk
about will focus on document (print, or web page) and will
deal with typography and style in bigger scale.

No.1: Distrust default software settings

Most of the software in your toolbox is not created by
designers and your need will vary depending on the industry
you are working in. In every case, make sure to at least control
the default or current settings of the software you are using.
Default setting does not mean the best setting for you. It is
more like the best way to set things for the biggest group of
users (customers). Dont believe that you have to follow it just
because it was there when you bought it. Always modify and
customize the workspace to your needs because you are the
one who will work with it.

If you are working with Photoshop, as many of us do, check

out this older, but great article on setting Photoshop
workspace for web and app design on Smashing magazine
because there are many factors you should pay attention to
like units of measurement and colors. Dont skip it or you
might find out that your design looks somehow different from
you though.

No.2: Ensure good contrast between text and

background
No matter what type of page or what section you are about to
design, creating appropriate contrast between text and
background is crucial to make the text readable and legible.
Dont worry, you dont have to force yourself into B & W mode
of thinking (black & white) in order to choose right contrast. If
you are well-rounded in color psychology, you can quickly
create well-balanced color palette using analogous,
complementary, compound, monochromatic or triad colors.
Otherwise there are many great tools to help you. For
example, Color wheel created by Adobe, paletton,
colorsontheweb, or pages like Colorhexa and COLOURlovers
providing various palettes and sets created by design
communities. If this is not enough, just use Google to search
for another sources and pick the tools you feel more
comfortable with.

Note: Whenever you can, that mean in all cases, avoid using
pure black (#000, hsl(0,0%,0%), rgb(0,0,0)). This is applicable
to design in overall. You might be asking why and here is the
answer. Pure black color is not that natural as you could think.
Take a look around yourself. You are surrounded by thousands
of different shades of colors, most of them are not absolutely
black. When you take a look at examples of UI design, the ones
based on pure black almost never look as good and natural as
the ones based on dark shades.

No.3: Avoid chart junk and page junk

What this rule says is to simply avoid including unnecessary
data in charts, graphs or pages. In all situations think about
information user will want to and also want to see. Even
though it might look like a good idea to provide as much data
as you can, the result can be disastrous. Too much information
can easily clutter the medium and user will not be able to
understand it or it can mislead him. So, always think about
what are the most important information and provide them as
first.

No.4: Enforce a consistent style within a

document
This is like an omnipresent mantra you probably hear in many
associations from various sides. It applies to design and
typography as well. One of the factors of great design is
consistency. There is no question about it. Medium providing
information in consistent and predictable form will always win
over chaotic and unordered pile of mess. You typography
should be always based on certain plan, not on momentary
mood or whatever.
Always create style guide you will follow through the whole
project. No excuses allowed. You want to keep everything as
consistent as you can so the user dont have to guess or
question anything and just enjoy the experience. This will not
only make you a better designer and bring you more users, it
will also increase the number of returning users in long-term.

No.5: Maintain a visual hierarchy

For those of you who are not familiar with visual hierarchy (I
wasnt a short time ago), visual hierarchy is all about using
different presentation style for different kinds of text objects.
These objects are headings, body text, captions, quotes, etc.
Every single one of these object should have set some style it
will consistently follow. It can be font size, font weight, font

style, tracking (letter-spacing), leading, indentation and so on.

All these type attributes are important because the allow users
to understand better what type of content are the reading.
For example, main heading and body text should always have
different size. Otherwise, it will be harder to distinct between
them and decide which one is more important. He same
applies to secondary heading, quotations, italics, centered
text, left or right aligned text and more. However, visual
hierarchy goes even deeper. It also includes grid system,
content distribution and positioning and also media.
You always have to keep in mind how eyes work with chunk of
text and what content is more important and has higher
meaning (or priority) than other. According to this notion, you
then decide on how to style it so it follows the exact order and
experience you want. No detailed should be left unquestioned.

No.6: Group related page elements

When elements are placed close together, people tend to
perceive them as a group. This is one of the Gestalt laws called
proximity (similarity, continuity, closure, proximity, symmetry,
common fate, good gestalt and past experience). The same
can be applied vice versa. When you want to help users
understand which object is related to what, the easiest way to
achieve that is through white space.

Take a blog for example. If you feature number of posts on

main page, they all should have some white space between
them so they are perceived as individual objects. However,
their heading and summary (or caption of text) should use
different amount of white space to create illusion of group so
user will perceive them as related to each other. Similar
philosophy should be applied when designing a website.
Every website consist of number of distinct sections and each
of these sections contain some content. To ensure the content
will not blend together you should again use consistent
amount of whitespace to transform every section into
independent group. Doing this, even though you will not
provide any headings or anything indicating new section, users
will always unintentionally understand it. This law of grouping
related elements is used every day on one-page layouts and
website and these are the best demonstrations how to
approach this law properly.

Part III
How to Format Large
Bodies of Text
The main subject of the part 2 is formatting large bodies of
text. Typography rules that will follow will be incredibly useful,
for example, when dealing with paragraphs of text.

No.1: Set printed body text from 9 to 11

points (12 points for web)
The first rule you will learn about is a bit complicated. Since
web and print are different environments we have to split it
explore this rule and separately for both of the environments.
Lets discuss the print as first. Typography in print has one
huge advantage. It is stable environment with specified
dimension. In other words, it is not possible (yet) that when
you buy a newspaper or a magazine in A4 format it will either
shrink or extend in your bag. With this on mind, you can
control all the variables you work with like width and height of
the medium, line length, etc.

This makes print much easier to handle with just a few preset
rules or guides for typography. Good rule of thumb for body
text in print, when it comes to size, is to set it between 9 and
11 points Thats approximately between 0.125 and 0.153
inches, 0.3175 and 0.388 cm or 12px and 15px if you dont like
to work with points. Staying in this range will allow you to keep
the content readable and legible for your readers.
No matter how comfortable can be working with defined
unchangeable dimensions, this is not the way web works.
When you put some content online it is hard to control on
what devices can users view it and what properties will the
screen have. However, one thing you can control is the font
size of text. Font size have a huge effect on the overall
readability of your content and should be important part of
your typography plan in every project you are working on. So,
how to make sure text is big enough users can read it without
hurting their eyes or using magnifying glass? Good rule of
thumb is to set 16px or 1em as default for body text
(paragraphs).
Lets take a look at Bootstrap 3 and Foundation 5 to see how
they handle this question. Bootstrap 3 uses 14px as a font-size
for body element. 14px can be harder to read so please, dont
use it. Take a look at medium. It uses 18(!) pixels as default size
for body element and I guess youve never complained about
readability. Foundation, on the other hand surprised me (in a
good sense). It doesnt use pixels to set the body font-size, but

percentages. 100% as default that is for most browsers

approximately 16 pixels (1em).
Guys behind the Foundation framework let the browser decide
what font size is the best. Thats what you should follow. So,
use 16 pixels as a font-size for body text (or 100%).

No.2: Set body text two to three alphabets

wide
Line length is another important factor in typography. Users
will be less likely to read text that is too wide, while text to
narrow can be hard to follow and damage the experience as
well. In order to deal with this problem, people interested in
typography made various experiments to find out what length
is the best to choose. The result they came up with was range
between 50 and 75 characters (including spaces). To simplify
this even more, Robert Bringhurst come up with easy to
remember 66-character rule.
You can use this as a golden rule for line length. However,
there can be situations when you will need to make include
more content on single line, so if you have to go wider just
make sure keep it under 75 character. To control the length of
line, use the width of paragraph followed by good old counting
of characters to find out the right length. Sometimes, just

using your eyes can be a good way to get the job done. You
know, follow you designers instincts (or 66 rule).

No.3: Favor flush-left, ragged-right body text

This one is going to be quick. Whenever you will find yourself
working with text, always flush it on the left and rag on right.
In other words, align the text on the left and dont use
justification. Even though justified text can look in some
situations, it can easily break. Examples of it can be too wide
gaps between words in paragraph. When you justify the text,
you cannot control the size of these gaps or get rid of them.
So, always align it to left (flush-left, ragged-right).

No.4: Separate sentences with one space, not

two
Im not sure if this even needs any more explanation. Never
ever ever ever ever use two spaces to separate sentences in
your text. It is not just bad typography habit, but also waste of
space and nonsense. So please remember, one space between
sentences.

No.5: Dont allow less than seven characters

on a line
Have you ever though how bad a single word on new line can
look? Well, your instincts were right. From typography point of
view you should never let fewer than 7 characters stand on
new line. Example of this problem can be orphan. That is
single word on the whole line. How to control this (in certain
degree)? Again, you can use width of paragraph and change to
make it either wider no need for new line or narrower
new line with more characters.

No.6: Avoid bad paragraph breaks

When there is too much content or to narrow line length,
certain situation can happen. Orphan can appear. You already
learned about orphans in previous rule single word on line. It
is good typography habit to make sure no orphans are
appearing in your content. Solution is, again, width of
paragraph Or improving the content.

No.7: Avoid line-breaking hyphens

Never let the hyphen be the last character of the line. Thats
not the form you should present your content in. If you have
to use some lengthier word or have narrower line, it will be

better to put the whole on new line without breaking it. I

know it can be annoying and boring, but it will improve the
readability and overall experience your users will have on your
website. And thats the main goal, right?

No.8: Signal new paragraphs once, not twice

There are two ways you can signal the reader (user) new
paragraph. First is using indentation for the first line (indent
the first word). Second is including empty line between
paragraphs. These are most often used styles in typography.
Some people like to use both of these styles in the same time
include empty line and indent the first line. No matter what
reason for this can be, just stick to one option. When driving a
car, you dont use winker and your hand (out of the window)
to signal you are about to turn. Use the same in typography,
choose one.

No.9: Break up large blocks of text

Long content can easily discourage users either from continue
reading or reading it at all. We all experience it. Imagine a two
A4 long article in one paragraph. Would you read it? Would
you even think about reading it? Probably not and you are not
alone. The majority of people would reject to read that stuff.

So, if you dont want to lose readers you should split longer
content into series of smaller paragraphs. Good rule to follow
by Neil Patel is to start new paragraph after about five lines. It
is simple and your users will love you.

Part IV
How to Format
Smaller Blocks of Text
In this part you are going to learn about how to deal with
smaller blocks of text. To give you some example These can
be lists, acronyms, words you want to emphasize or highlight
and so on.

No.1: Emphasize ten percent or less of text

One of the hardest questions designer and content creators
have to face, from time to time, is what information should be
highlighted and what not. Or, what percentage of the content
should be highlighted at max. Just try to read an article or
chapter in a book and highlight the most important. Not that
easy right? Believe it or not, this is one of the topics
typography has to deal with, while many people have no idea
about it.
Why it is so hard? Well, if you use emphasis too much,
emphasis itself will lost its meaning. On the other hand, you

might skip some information that can indeed be very

important for readers for understanding the whole content or
context. If you will find yourself in doubt, just use the law of
ten percent or less. If you are under ten percent (+/-), its okay.
If not, re-read the text and check if you emphasized only the
crucial information. To test it, let someone else read that and
summarize it for you.

No.2: Avoid all caps and underlined text

All caps can be very tempting to use in text. However, you
should avoid it at all costs. Think about the line like a river
flowing from left to right (or right to left) and imagine all caps
as obstacles in its way. This is typography transformed into the
real life. When you do a good job, readers will have no
problem reading the content. Their eyes will follow the flow of
line and their focus will be untouched. That is example with
consistent typography without all caps.
On the other hand, when you use all caps for whatever reason,
it will distract your readers. We are wired to spot changes and
imbalances around us. This helps us survive in hostile
environment. Since our brain looks for patterns in every
situation, all caps in consistent lower-case text will present
breaking of pattern and attract the eye to it. Whats more,
20th-century studies indicates that all caps text is actually less
legible and readable than lower-case text.

From web, we are used to seeing underlined text as indication

of links. This applies to documents as well. When you see
underlined text, you almost automatically perceive it as a link.
Let it that way and use underlines only for links.

No.3: Set acronyms and initialisms in small

caps
In previous rule you learned about avoiding all caps. OK, but
how about acronyms Or initialisms? Solution is simple. Use
small caps every time you encounter some of these objects.
This will do no harm to the content and it will conserve its
meaning without confusing the reader. Your typography will
stay consistent, legible, readable and will look great.

No.4: Hang punctuation in small chunks of

text
From time to time you will yourself in situation when you have
to use quotations or other punctuation. You have basically two
options where to place it inside or outside the block of text.
Without any need to weighting both options or trying them
out to compare them visually, go for the inside option.
Remember every chunk of text is set inside some grid. You
dont have to be a typography expert to see that. So dont try

to break that grid by placing the punctuation outside it [grid /

chunk].

No.5: Hang bullets and numbers in lists

The exact same thing as with punctuation applies also to the
bullets and numbers used in lists. Always place them inside the
list to keep the layout consistent without any abnormalities.
Dont break the flow consistency creates and grid of the page
by placing them outside.

No.6: Avoid bad line breaks

You already learned about line breaks in previous part in
association with paragraphs. However, lets briefly repeat it
here too. Pay attention to orphans, avoid using line-breaking
hyphens and never let less than seven characters on one line.
Adjust the width of the page or article as you need to make
sure these suggestions are in check. Your users and readers
will thank you for it.

No.7: Use symbols and special characters as

needed
Symbols and special characters should be used as much as you
need. You dont have to limit yourself (just dont overdo-it).
However, when designing a website always make sure to use
HTML entities and codes so the browsers will render all the
symbols and characters correctly no matter the language user
is using.
If you need to use any symbol or character and dont know
what the entity for it is, check this reference chart of all
available HTML entities.

No.8: Use proportional old-style figures in

body text
You might not hear about this yet (I didnt), but there are
several figural styles you can use in your typography setting for
your documents or website. These are tabular lining,
proportional old-style, proportional lining and tabular oldstyle. Every style is supposed to work in different environment.
However, if you want to add a bit of elegance and
sophistication to your typography proportional old-style is the
way to go. Proportional lining is better for all caps (avoid that
rule 17).

For more information about proportional and tabular figures

check out this great post on fonts.com.

No.9: Adjust leading and kerning for large

text
Large text will often require special effort when it comes to
typography because it cant be threatened in the same way is
small text. There is different leading (i. e. line-height) and
kerning (i. e. adjusting the spacing between characters) and
dont forget the tracking (letter-spacing). All these factors must
be taken into consideration when dealing with any type of
content. If content requires it, adjust the large text. Go with
your gut. It doesnt have to follow the properties of small text.
Think about them like independent chunks.

No.10: Verify software alignments optically

In the end, it doesnt matter how good your software is. You
should always check the typography and correct the flaws and
issues. Let the software take care about spelling and grammar
while your designers eye will focus on the visual part of your
work. By the way, only through this practice of observing every
detail of typography your design skills will grow steadily. So
dont skip it.

In recap Emphasize sparingly. If you dont have reason for it,

dont use all caps and underlined text. Acronyms should be set
in small caps. For small pieces of text use hanging punctuation.
Bullets and numbers belong inside the lists. You should always
plan where the lines will break. When you need some symbol
or character, just use it. For figures, forget the lining and go for
oldschool. Leading and kerning must be result of plan, so
adjust it whenever you need. Always use your eye to check the
alignment done by software.

Part V
How to Use
Punctuation Properly
No.1: Connect thoughts using em dashes
In typography, three options are available for you in most
situations em dash, en dash and hyphen. Today you are
going to learn about all them, but for now lets pick the em
dash. The em dash is named after the M letter and it
indicates its width is equal to the width of letter M. When
you should use em dash? To simplify it, use it any time when
you want to connect thoughts. You can use them instead of
commas (ems are more empathic).
You can also replace parenthesis with them in less formal and
a bit more intrusive context. Keep in mind that dashes draw
more attention, so when you are working in more subtle
context you might rather use classic parenthesis instead.
Another example of switching with dashes are colons. Again, if
you want to emphasize something in less formal way, em
dashes can be useful.

No.2: Show ranges using en dashes

Second option, after em dashes, are en dashes. It is just a
small detail in width what distinct them, but as every
designer will agree details are important. In short, en dash is
shorter than em dash, but wider hyphens. It stands right in the
middle. The en dash has the same width as space. En dashes
should be used primarily when dealing with ranges or spans of
numbers, dates and time. Both, em and en dashes should not
have any space on sides.
Another examples of use can be indication of conflict,
direction or connection between words and also compound
adjectives. The only reason for this is pure aesthetics. So, feel
free to use hyphens for these two situations instead.

No.3: Clarify and improve readability using

hyphens
The last option are hyphens. They are the narrowest in the
group. In typography, hyphens are mostly used for word
division and compound terms. They can be a useful tool to
increase over readability and clarity of the content, but never
use them as substitude for em or en dashes. To make sure you
are using hyphens correctly, include them in compound verbs,

nouns, adjectives and terms, nothing more. This way you will
avoid most of mistakes.

No.4: Designate feet and inches with prime

symbols
If you are working with units of measurement like feet and
inches, you had better use prime symbols instead of
characters. In other words, always go for single and double
quotes. However, choose only straight quotes. Single quotes,
or minute marks, are mostly used for feet while double,
second marks, for inches.

No.5: Replace missing characters with

apostrophes
If you want to skip certain letter in the text, never ever ever
leave the space blank. That is not a good habit for increasing
your typography skills. Instead, replace it with apostrophe to
indicate that missing letter. Otherwise, you might confuse the
reader. Even though apostrophes can look like a good idea,
there are some situations when they can cause you more
harm than good.
To avoid any potential typography faux pas, keep in mind to
double-check the context of your content. Formal documents

should never use apostrophes to replace missing characters. In

formal speech, there should be no missing characters at all.
They are often used in slang so it would look bad using them
on companys websites, official documents, cover letters, CV,
etc. In formal environment forget skipping characters at all
costs.
Thats all for punctuation. Now, lets take a look at how you
can get better in typography through working with typefaces
like a pro.

Part VI
How to Choose
Typefaces
No.1: Limit typefaces to two per project
(document)
Number of typeface you use in your projects should not be
more than two. Thats it. One or two typefaces and you are
good to go. One typeface should be for headings and the
second one for body text. This way you will create contrast
between them while keeping your design consistent. You can
also pick just one typeface and use it for both, headings and
body text, but dont forget to create contrast in another way
(padding, color, etc.).

No.2: Use typefaces that reinforce a

documents mood
Typeface should always reinforce the overall mood of the
design or document. This is not only a rule of thumb, but
necessity. When design breaks, it is often the typography that
needs to be fixed. Do you know that feeling when something is
not right? Well, the typeface might be the right choice for that
particular project. For example, you would choose different
typeface for college website and for tattoo shop. The devil is
again in context (environment) and mood of the website.
You should always think deeply about what message do you
want to communicate through the website, document or
whatever you are working on. Different messages carry various
moods and require different typefaces. Another thing is to
consider the target audience you are talking to. This is not the
owner of the website, but his customers. Think about who
they are and dont skip your research. This will help you in
your decision-making process.

No.3: Choose serif or sans-serif, based on

aesthetics
One question causing many headaches is when to choose serif
and when sans-serif typeface. If you find it difficult to
distinguish between them, remember that sans in French

means without. Serif is that small line at the end of stroke of

the letter. To decide which one to choose is to go with your
gut. Engage your aesthetic instinct. This is often the way
designers deal with typography. They listen to what they feel.
Again, think about the context and content. What message do
you want to communicate to whom?
Youve just finished the 33 Laws of Typography series, or crash
course if you want. With this, you are now fully equipped and
ready for any typography related challenge. In recap, from
now you know when it is better to use em dashes and when
en dashes and you can use hyphens to increase readability of
the content. How to display feet and inches properly. How to
deal with missing characters. How many typefaces should you
use per project (document). How they should always reinforce
the mood of your project and how to choose between serifs
and sans-serifs.
Since now, any time when you will feel unsure, just go back to
these 33 laws you were learning about. They will provide
sufficient foundation for you and cover your back during tough
times. What are your experiences and thoughts about
typography?

Part VII
Typography in Web
design
It was said and repeated for many times that web is 90%
typography. If you are a web designer, developer or just
anyone working in web industry, typography covers huge part
of your work. Typography is also one field that is often
overlooked by young designers wanting to start their careers
or businesses. This is no surprise. For majority of people, web
design is about creating mockups in Photoshop and other
graphic software or programming in HTML and CSS
(sometimes with JavaScript or jQuery). Sure, these are
necessary parts of our process. However website would be
empty without text.
Web design is often compared or associated with print design.
Have you ever heard about layout, grid or columns? These
terms were here long before Tim Berners-Lee, father of the
Internet, was born. What is more interesting is never ending
discussion between designers about how much should web
follow the practices and principles of print. If you want to see

fight of two designers, ask them on their opinion about fixed

and fluid layout. How many teeth will left in a place nobody
knows.
But we are not going to talk about which layout is better, how
much similar should web and print be or anything like that.
Today, we will take a look at how you can work with type in
your projects through CSS so it doesnt looks like sh*t. Even
though our options are quite limited as opposed to print, we
still have couple of ways to make the typography beautiful.
Available CSS properties related to typography are font-family,
font-size, font-style, font-variant, font-weight, line-height and
letter-spacing. You can also use font property to work with all
of them at once. There are other properties related to text as
well like text-align, text-decoration, text-transform, but we will
not care about them for now. Our main focus will be on the
first group covering font, lines and letters. We have to add one
more property to this list. It is width and I will explain why in a
moment.

CSS and typography

From the properties above we can pick three that have the
biggest impact on the text. These are width, line-height and
font-size. You will also probably work with font-weight and

letter-spacing, but if you omit them, the change will not be

that drastic. So lets take a look at the top three.

Width
First property we need to talk about is width. Width of the line
is one of the most important factors when it comes to
typography. Make the line too wide or too thin and it will be
uncomfortable for user to read it. So, how wide the line should
be in perfect case? There is a good rule of thumb coming from
print design that states it between 60 and 75 cpl (including
spaces). Cpl means characters per line. Thats it. This suits well
both, desktop and tablet devices. To be more precise, Robert
Bringhurst has set the ideal cpl to 66 (66 characters rule).
For mobile, you should go somewhere between 35 and 40 cpl.
By following this principle you will keep the text in digestible
form, not too thin and not too wide.
Since there is no property to control the number of words you
will have to manually modify the width of paragraphs in a
browser and count the characters or you can use some tools
available online like Golden Ratio Typography Calculator for
example. This is great tool for setting ideal typography
properties for font-size, width and cpl you want.

Line-height
Next property to examine is line-height. You can also know this
property from print design as leading. If you dont understand
why, try to play with different values on a piece of text and you
will see the reason on your own eyes. Too big line height will
enlarge the gaps between individual lines of text and, on the
other hand, too small will make them smaller. You can also
overdo it and make the lines overlap each other. Optimal value
for line-height is considered somewhere between 120% and
145%. When you take a look at various stylesheets in use on
the web, they often use values ranging from 1.2 to 1.375. So, if
by remaining in this range you will be good.
It is important to note that line-height is unitless property. This
means that you can either define its value in px, ems,
percentages or completely omit the unit. For example, by
defining line-height as 1.375 it will cause the changing it to
1.375 times bigger than the font-size. In case of font-size set to
16px, line-height will be 22px.

Font-size
The last property to work with is font-size. Again, good and
well tried practice from print design is to use 16px for body
text (paragraphs) as the best value. Another reason for this
value is that it is also default size for most of the browsers. So,
you can either set the font-size property for body element to

16px or to 100%. The result will be the same. According to a A

More Modern Scale for Web Typography article, the best
values for h1, h2, h3 and h4 elements are following:
Desktop:
h1: 3em;
h2: 2.25em;
h3: 1.75em;
h4: 1.125em;

Tablet:
h1: 2.5em;
h2: 2em;
h3: 1.5em;
h4: 1.125em;

Mobile:
h1: 2em;
h2: 1.625em;
h3: 1.375em;
h4: 1.125em;

These values are based on cpl between 60-75 we discussed

above and default base font-size of 16px. Try these values on
your own to see how they suit the content of your website.

Summary
Readability and legibility are the main goals of every designer
working with type. Whenever the content of the page (text) is
hard to read or display, youve failed. Yes, text on the web is
much harder, if not some times almost impossible, to control.
However, doing your best in order to provide content to the
user in readable and legible form is your responsibility. Use the
information provided in this book to create great experience
and easily digestible content for your users and remember
that web design is not only about code or nice graphic, but
typography as well.

Further Reading:
Dash on Wikipedia:
http://en.wikipedia.org/wiki/Dash

Hyphen on Wikipedia:
http://en.wikipedia.org/wiki/Hyphen

Serif on Wikipedia:
http://en.wikipedia.org/wiki/Serif

Sans-serif on Wikipedia:
http://en.wikipedia.org/wiki/Sans-serif

Best Practices of Combining Typefaces on Smashing Magazine:

http://www.smashingmagazine.com/2010/11/04/bestpractices-of-combining-typefaces/

Thanks
Thanks belongs to my mother, Dagmar, for raising me the way
she did and for having so much patience with me. My sister,
Michaela, for not killing her brother although he deserved it
many times. My father, for showing me example of a good
man to his wife. My grandmother and my grandfather () who
were always here for me in the toughest times and provided
me a place to stay. Thanks also to all the great people reading
my blog, sharing on and chatting on twitter, Linkedin,
Facebook and Google+. Without you this book would never
exist.

And you, the reader.

To continue what weve got going here, here are some links
where you can find me:
website: http://alexdevero.com
blog: http://blog.alexdevero.com/
Twitter: @alexdevero
Linkedin: https://www.linkedin.com/in/alexdevero

Facebook: https://www.facebook.com/deveroalex/
Google+: https://plus.google.com/+AlexDevero