Giant Robots Smashing Into Other Giant Robots | Joshua Ogle

Typography has a very long history,
from ink and brush through the printing press,
but type on the web starts with the advent of digital type.
A “typeface” is a group of all the letters
of a specific family, style, and weight,
like “Helvetica Bold Italic”.
A “font” is a file that contains the typeface.
When we’re talking about digital usage,
these terms are fairly interchangeable,
so don’t feel bad
about getting them mixed up.
We’ll mostly be talking about Latin typefaces
(for languages with letters like English),
but there is a whole wide world
of categories and details
for other languages
that I encourage you to explore.

Early fonts were simple bitmap images
of each character very quickly
became the vectorized shapes
that we know and use today.
These scale better, obviously,
but the vector format also allows
for better control over
what are essentially just elaborate shapes.
In some ways,
the details of those shapes matter
so much more in typography
than in iconography or illustration
because they form the personality and voice
of the content.

Even though the computer revolutionized the way
we create and use typefaces,
you’d be surprised how little has changed
in the styles and categories of type.
The anatomy of the characters,
the names we give typefaces,
and the terminology around how they work
almost all go back hundreds of years or more.
There’s a lot of terminology to learn
if you’re going to impress your designer friends,
so let’s get down to it.

Parts of a Typeface

• X-height: The height of lowercase letters like x, a, e, and o, not including ascenders and descenders.
• Cap Height: The height of capital letters from a baseline to the top of character.
• Baseline: The invisible line that guides the characters and forms the bottom of the x-height.
• Ascender: Part of a character that raises above the x-height. Typically seen in b, d, f, h, k, l, t.
• Descender: Part of the character that drops below the x-height. Typically seen in g, j, p, q, y, and sometimes J.
• Serif: The projections off of the ends of a stroke in serif typefaces.
• Arm/leg: An upward or downward stroke connected on one end.
• Bar: The horizontal stroke in characters like A, H, and e.
• Bowl: A curved stroke that encloses a space inside the character. This empty space is called a counter.
• Ear: A small stroke that extends from the top of the lowercase g and sometimes r.
• Loop: The lower portion of a lowercase g and some cursive letters with descenders.
• Stem: A vertical stroke that typically forms the main structure of a character.
• Shoulder: The curved stroke moving downward in letters like h, and n.
• Tail: The diagonal descending stroke of a Q, K and R, or on lowercase letters like g and y.
• Terminal: The end of a stroke that does not have a serif.

Types of Type

Serifs

Serif typefaces have a very long history,
starting in ancient Rome
where they were commonly carved
or written with pen and ink.
Serifs are the flat ends
that are added to the ends
of certain strokes,
which aids in legibility
and also serves to tidy the rough stroke ends
when using these primitive writing techniques.
These features were used in various kinds of writing systems
for thousands of years,
and they aren’t going away any time soon.

Types of serifs:

• Old-style: Patterned after the origin types of ancient Rome, these classic types feature brackets and some small variation in stroke weight.
• Slab serif: Developed as a more modern type, these feature no bracketing, little change in stroke weight, and otherwise resemble geometric sans-serif types.
• Transitional: A mixture of old-style and neoclassical designs, these types tend to be more geometric and regular but still feature bracket serifs.

Because of their classical roots,
serif typefaces are associated
with tradition and stability,
so serifs in branding are particularly popular
in the finance, education, and publishing industries.
Serif typefaces haven’t received
as much appreciation as those without serifs,
but they have too rich a history
and too many strengths to ignore.

They give a visual anchor to the characters
that make them feel sturdy and solid.
Serifs can also seem cold and imposing,
but leveraging their good qualities
can give a professional and trustworthy impression.
They also improve legibility of long strings of text,
giving the eye some stability
as the serifs differentiate similar characters.
So if you are designing
for news articles, books or something dominated by lots of text,
buck the trend and pick a nice serif.

Sans-serifs

Sans-serif types are a much more recent development
relative to the long history of type.
They became popular around the start of the 1800s
and coincided with the start of modernism.
Like we discussed with abstraction,
design was moving toward a universal style
and focusing on human-centered thinking.
Sans-serif typefaces strip down the traditional letterforms
to their essential parts,
and are usually classified according
to how far they take that goal.

Sans-serif fonts come in a few different classifications:

• Grotesque: These were some of the first sans-serifs and carry over some serif heritage, including bowls on the “g” shapes and some variation in stroke weight.
• Geometric: Simple shapes and consistent stroke weights make this the most minimal of types, but also one of the least legible.
• Humanist: These types take the best from both serif and sans-serif characteristics, and are geared for maximum legibility.

Popular sans-serif typefaces
like Helvetica, Proxima Nova, and Open Sans
are everywhere on the web these days
because they fit right in with the modern aesthetic.
That makes them a great choice
for branding, marketing and user interfaces,
but because they’re so ubiquitous
they may not have the kind of impact you want.
The typeface that you choose
can have a big impact on your web project,
so take the time to make sure the typeface you have in mind
has a personality that matches your project’s personality.
If you can’t decide between a serif
and sans-serif typeface,
don’t worry,
we’ll cover combining typefaces in a bit.

Display

Display typefaces are meant to grab attention.
Some look like various forms of handwriting,
others are more graphical,
and some push the limits of what a typeface can be.
The typefaces vary wildly,
so categories of display typefaces
are more about style
than specific anatomical parts.

• Calligraphic – As the name suggests, these are based on handwriting and calligraphy, with large loops alongside shapes that look much like italicised serif characters.
• Formal Script – Less regular but also sometimes more formal than Calligraphic typefaces, Formal Scripts are modeled after classic cursive handwriting.
• Casual Script – Even more varied, these look more like the scrawled handwriting that most of us use every day, but also covers the kind of hand-painted letters you might see on shop window signage.
• Blackletter – A style of calligraphy popularized in Germany and was widespread in Middle Ages Europe. Extremely traditional and heavy, usually featuring ligatures.
• Decorative – Any typeface that doesn’t fit in one of the categories we’ve described already but are recognizable as letters. It’s the junk drawer of typeface classification reserved for the especially wacky.

While many of them have classical roots
in calligraphy and formal handwriting,
these days display typefaces are mostly used sparingly
for visual impact,
taking advantage of their interesting visual characteristics.
You will find display fonts used in brands and marketing,
but they’re not likely to show up
in a user interface elements or long-form articles.
Sometimes you need the big guns,
just be sure you use them responsibly.

A quick note about other languages

Serif and sans-serif types appear in other writing systems too,
not just the Latin alphabet,
and are classified with many of the same terms.
Try out your favorite serif font
with support for Greek and Cyrillic characters
and you probably won’t be too surprised to see
that the characters look very similar
to their Latin counterparts.
Chinese and Japanese typefaces can have the same features
with the same features even though
they have a very different history.
The digital age has influenced the styles
of these different writing systems
and the more they are used
in combination with western type,
the more obvious the influence becomes.

Pairing Typefaces

Now that we know the strengths and weaknesses
of these kinds of typefaces,
we can use each to its advantages.
There’s absolutely no reason to stick
to just serifs or just sans-serifs,
so use whatever combination fits your brand the best.

Combining typefaces isn’t easy,
and deserves some careful consideration of their parts
to create a theme,
and gives your project
a much more unique look
than you can get from one typeface alone.
One of the typefaces you choose
should be chosen as the foundation.
I recommend starting with your body text,
since this will probably be the simplest typeface to choose
and arguably is the most important.
Use the characteristics like a large or small x-height,
the angle of the stems,
and roundness of the bowls
to build your other other typefaces around.

If you want some variety,
but the idea of picking out specific typefaces
gives you a panic attack,
you can ease into things
by sticking to one typeface family.
Some typefaces will include a few variations
that are all related
(like “Tungsten”, “Tungsten Narrow”, and “Tungsten Rounded”).
They were designed by the same type foundry
to work well together,
and give you just enough variation
without worrying about the details.

The most common typeface pairing on the web
is to match a serif for headings
and a sans-serif for body text.
It’s hard to go wrong with this combination,
especially if you find a set
from a foundry designed to work together.
I like to make sure there’s a mixture
of similar and disparate elements
between them to provide a good balance.

Still too boring?
See how far you can push things
by bringing in some display typefaces
or combining 3 or more fonts.
Just keep in mind
that your different font treatments
should communicate to the user
what the purpose of that text is,
so if you have headings in more than one typeface
or your UI elements don’t look similar,
it will be confusing.

Symbol and Icon Fonts

There’s one more category of font
that almost doesn’t count as a typeface,
but is very useful on the web.
Symbol and Icon fonts are packaged
just like other fonts,
but they aren’t used for the same purpose at all.
Symbols have always been used in combination with writing,
so it makes sense to have fonts
for this purpose (remember Wingdings?).
On the web they have been adapted to provide icons
for user interface elements
where creating individual image assets would be a hassle.
This also gives them the advantage
of being easy to style in CSS just like fonts,
and icon sets can come prepackaged as font files
to make it easy to keep your symbols consistent.

The example below is simply single characters of the font,
just like you might type out a sentence,
but what you get back is a collection of symbols instead.
As you can imagine,
this would be a terrible way
to use an icon font (“What was ‘q’ again?”),
so they usually come with a CSS stylesheet
as well so you can just add a class to an element
and the stylesheet will take care of adding the icon for you.
All you would have to do is something like this:

<i class="fa fa-question-circle-o"></i> 

This is an example from Font Awesome,
which cleverly uses the <i> tag
not to mean italics (as originally intended),
but to imply icon.
Because icon fonts are so easy to implement this way,
icon fonts have become very popular among developers
and people who don’t want the mess
of styling image icons.
If you have an app project that will make heavy use of symbols,
icon fonts can be a great choice.
There are more
than a few great Icon Fonts
to choose from.

As we’ll discuss in the next section,
Icon Fonts can create a performance problem
by being yet another asset to fetch from your server,
so you’ll have to weight the pros and cons
for your particular project whether it’s worth it
to use a font or something fancier
like [inline SVG icons] instead.

Font Performance

The ability to easily use web fonts with CSS
has improved dramatically over the last few years,
but because these depend on loading files
into the browser after the page loads
there are some performance issues to consider.
Maybe more importantly for the design,
it can lead to a momentary delay
where your preferred font isn’t loaded
and the dreaded “Flash of Unstyled Text”
creates a jarring effect for your user.

There are a few ways to combat this:
– Use a hosted service like Google Fonts or Typekit for your typefaces.
– Make sure you’re doing everything you can to optimize and cache your locally hosted fonts.
– Make sure your fonts get loaded before other blocking scripts that could be loaded later.
– Use some fancy JavaScript to hide the text until the font is loaded.

I suggest using a service
like Google Fonts or Typekit
for your typefaces
(especially if they happen to be freely hosted by Google).
This means not having to host it yourself
and they have easy integration instructions.
The biggest benefit though
is that there’s a decent chance your user
has already come across this asset
on another website and
will have it cached in their browser.
Not having to make another request
for the font file will speed up the page load,
and the font will load almost instantly if it’s in cache.