www.sitepoint.com Open in urlscan Pro
2600:9000:2250:6800:10:7abf:f800:93a1  Public Scan

Form analysis
2 forms found in the DOM

<form class="relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input type=" text"
    class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " placeholder="Search articles..." aria-label="Search articles" value="" maxlength="100">
</form>

<form class="relative flex bg-transparent text-white lg:text-primary-900 m-0 z-50"><input type=" text"
    class="bg-gray-500 lg:bg-transparent border rounded-sm border-gray-400 focus:border-primary-400 px-2.5 py-1.5 lg:py-1 m-1 w-full text-sm focus:outline-none " placeholder="Search articles..." aria-label="Search articles" value="" maxlength="100">
</form>

Text Content

WE VALUE YOUR PRIVACY

We and our partners store and/or access information on a device, such as cookies
and process personal data, such as unique identifiers and standard information
sent by a device for personalised ads and content, ad and content measurement,
and audience insights, as well as to develop and improve products.With your
permission we and our partners may use precise geolocation data and
identification through device scanning. You may click to consent to our and our
partners’ processing as described above. Alternatively you may click to refuse
to consent or access more detailed information and change your preferences
before consenting.Please note that some processing of your personal data may not
require your consent, but you have a right to object to such processing. Your
preferences will apply to this website only. You can change your preferences at
any time by returning to this site or visit our privacy policy.
MORE OPTIONS DISAGREE AGREE
🔥 50% Off Sale 600+ Tech Courses and Books
23:59:56
Claim Now
SitePoint

 * Hmm... Couldn’t find any articles containing:
   
   ¯\_(ツ)_/¯
 * Blog
 * * JavaScript
   * Computing
   * Design & UX
   * HTML & CSS
   * Entrepreneur
   * Web
   * PHP
   * WordPress
   * Mobile
 * Discord
 * Forum
 * Library
 * Login
 * Join Premium

Join Premium

Hmm... Couldn’t find any articles containing:

¯\_(ツ)_/¯

 * JavaScript
 * Computing
 * Design & UX
 * HTML & CSS
 * Entrepreneur
 * Web
 * PHP
 * WordPress
 * Mobile

Design & UX


WEB TYPOGRAPHY: ESTABLISHING A STRONG TYPOGRAPHIC SYSTEM

Design
Software
Typography
UI Design

Alex WalkerJune 6, 2022
Share

Setting up the typography for any new project is always a complex task. There
are literally hundreds of tweakable variables, and it’s very easy to spend
endless hours adjusting sizing, line heights, margins, and weights. The best way
to save your sanity is to have a design system that can generate quick answers
to most of the little questions—which lets you concentrate on the “big picture”
decisions.

As readers will consume more body text than any other text size, often our first
critical typography decision is to set the body font size for our default layout
(let’s put responsive design to the side for now). For many years, 16 pixels was
considered the default body size of the Web.

However, with today’s larger screens, text-heavy sites such as blogs and news
services are generally choosing 18-pixel to 21-pixel body font sizes. Social
media and ecommerce apps that use busier, more modular UI units have tended
towards 14px to 16-pixel body fonts. Obviously, these are broad trends, and not
hard and fast rules, but you can see these general trends in the list below.


TYPICAL BODY FONT SIZES FOR WELL-KNOWN SITES

Body font-size samples for The New York Times, Medium.com, SitePoint.com and
Wikipedia.com
 * Medium.com: 21px
 * NYTimes.com: 18px
 * CNN.com: 18px
 * Airbnb.com: 18px
 * SitePoint.com: 18px
 * BBC.co.uk: 16px
 * Developer.mozilla.org: 16px
 * Twitter.com: 15px
 * Etsy.com: 14px
 * Wikipedia.com: 14px
 * Facebook.com: 14px

Remember that these big internet properties do a lot of user testing, so put
some thought into where your application fits in relation to this list. When
you’ve settled on your base text sizes, eye-test them on real screens, tablets,
and phones until you’re happy with them as a starting point.




SCALING YOUR TYPE

So, now you’ve set your body font size. How do you decide on the sizing of your
titles, section headings, subheaders, lists and blockquotes?

For me, the answer used to be, “Umm … tweak it till it looks … kinda right?” I’d
scale up a heading, bump the weight a little, jog it a pixel up, … push it back
down, … and back up again. Frankly, it was exhausting, because there were so
many finicky little decisions and very few totally wrong answers.

Type scaling —sometimes called modular scaling – lets you use simple math to
give you simple typographic answers. It allows us to set a single scaling ratio
to generate all our font sizes while keeping them in harmony. It’s like a
musical scale for type sizing.


TYPE SCALING IN PRACTICE

Let’s start with a body font size of 18px. That makes our default paragraph
size 1em (or 18px):

body{font-size: 18px;}
p   {font-size: 1em; /* (or 18px) */ }


I’m going to set a type scale of 1.25. To calculate my h5 font size, I simply
multiply my paragraph font size by 1.25. That that’s 1em * 1.25, or 1.25em:

h5 = p * 1.25 = 1.25em


Our h4 headings would be the h5 size multiplied by 1.25 (1.25em * 1.25)
or 1.563em. Continuing the process gives us something like this:

/* Using a type scale of 1.25 */
h5 {font-size: 1.25em;}  /* 22.50px */
h4 {font-size: 1.563em;} /* 28.13px */
h3 {font-size: 1.953em;} /* 35.16px */
h2 {font-size: 2.441em;} /* 43.95px */
h1 {font-size: 3.052em;} /* 54.93px */


If I decided that my h1 headings felt a little oversized at that scale, I could
bump my type scale down to 1.2 to get this result:

h5 {font-size: 1.2em;}   /* 21.60px */
h4 {font-size: 1.44em;}  /* 25.92px */
h3 {font-size: 1.728em;} /* 31.10px */
h2 {font-size: 2.074em;} /* 37.32px */
h1 {font-size: 2.488em;} /* 44.79px */


Okay, so I need a pocket calculator to size my text? Happily, no. There are some
great tools that let you tweak and test type scales in generated CSS in real
time. My favorite is Jeremy Church’s Type-scale.com (below), a tool that lets
you quickly test different type scales and generate working CSS. There’s even a
dummy layout on the right panel to eye-test your work and a CodePen export
option. This is a great foundation for your typography CSS.

Type-scale.com generates an consistently scaled set of font sizes


DOES A SINGLE TYPE SCALE RATIO WORK FOR ALL DEVICE SIZES?

The answer is, no, often it doesn’t. We can learn from traditional print formats
here. If you compare the typography of a typical newspaper to that of a classic
paperback novel (below), you’ll notice some interesting differences beyond the
obvious paper sizes.

The Times employs a steeper type scale than The Wizard of Oz.

While their body font sizes may be quite similar, there’s much great variation
in heading sizes in the newspaper. Common sense tells you those headlines in The
Times simply aren’t going to fit as chapter titles for The Wizard of Oz. As a
general rule, smaller formats (such as phones and novels) are going to need
shallower type scales.

Type scales: Small increases compound to make a large difference.

Note that this difference in type scales doesn’t need to be large. As the image
above shows, a small increase in type scale—from 1.125 up to 1.25 —ripples
through the scale to generate a much larger top-level heading. While
that h1 title looks fine on a laptop, it would chew up far too much real estate
on a mobile device.

In short, it’s wise to use CSS @media queries to serve two type scales – a
steeper type scale for large screens, and a more compressed type scale for
smaller screens. We’ll tackle this later in the project.

So, now that we have a reliable, repeatable process to scale the type in our
designs, let’s look at the spaces in between that type.




WHAT IS A VERTICAL BASELINE RHYTHM?

Vertical baseline rhythm — sometimes referred to as the vertical measure — is a
grid of horizontal lines that you can use to ‘hang your typography from’. It’s
not unlike the blue-lined, school workbooks many of us learned to write in.

The trick is getting your larger type units to fit into the same grid as your
body text. In a simple handwritten letter (below), E.G. Webb is allowing an
extra row for his signature. He’s probably using a baseline rhythm without even
knowing what it’s called.

This beautiful vintage hand calligraphy has a built-in baseline.

In The Elements of Typographic Style Applied to the Web, Richard Rutter
describes baseline rhythm like this:

> Headings, subheads, block quotations, footnotes, illustrations, captions and
> other intrusions into the text create syncopations and variations against the
> base rhythm of regularly leaded lines. These variations can and should add
> life to the page, but the main text should also return after each variation
> precisely on beat and in phase.

How does that work on the web? Let’s look at a real-world example. The
excellent Colossal magazine uses a very open, airy layout, yet it still somehow
manages to feel strong and structural. How does it do that? It turns out that if
we superimpose a 21px vertical grid over the whole layout (see below), we see a
previously hidden structure emerge. For this example, I’m going to call one row
of this grid a “unit”.

You’ll notice that:

 * the site branding fits nicely into a box five units high
 * the main navigation is three units high
 * article titles are two units high
 * secondary navigation and social links are one unit high

The excellent ‘This is Colossal’ art and design magazine

In fact, most UI elements “hang” on this underlying grid like socks pinned on an
invisible clothesline. Even though we can’t see the underlying grid, we’re aware
of it through a feeling of balance and harmony. It just feels right.

Note that we’re not talking about just font size, but instead the whole space
the text occupies —including the line height and margins. So in
the Colossal example, the article title would have a line height of 42px, or two
units for each line.

However, you’ll notice that not every element is locked to this grid. The
designers have chosen to offset elements like the photos from the grid. That’s
fine too. The grid is a great starting point, not martial law.


USING LAYOUT GRIDS IN YOUR UI DESIGNS

Most modern graphic layout tools (such as Sketch, Figma or Adobe XD) make it
easy to add a vertical baseline to any canvas/frame. In this Figma example (see
below), I selected the document frame and used the + button to add separate rows
and columns in the Layout Grid panel.

These grid layers can be switched on and off using the eye icon. I find that,
with a grid in place and “snap-to-grid” switched on, it simply becomes easier to
size items with the grid than without it. And that makes your life easier.

There’s even a tool to help you work out the CSS. Gridlover.net (below) is an
excellent, free tool that lets you experiment with different base font sizes,
line-heights and type scalings—all locked to a vertical baseline. If you try
adjusting any of the line heights or margins on the right CSS panel, you’ll
notice the number only changes by a full “grid unit” each time.

Gridlover.net: A great tool for generating vertical baseline rhythm.

You might also notice that the tool avoids using CSS padding in its typography.
I’ve found this to be a generally good policy when working with a vertical
baseline system. Use padding freely on your container units, but never on
typography. Even text buttons can be given height with a line-height setting
rather than CSS height or padding.

Gridlover not only writes useful CSS, but it really helped me get my head around
how vertical baseline and type scaling can work in the real world. I believe
this is a great place to start your CSS typography.

Archetype is another tool designed to help you create well-planned, integrated
type systems. It offers controls for both type scale and baseline rhythm in one
very thoughtfully conceived UI. It even encourages you to set different type
scales for mobile and desktop out of the box. I believe this is the most
sophisticated tool in this area.

The only caveat to Archetype is that it currently costs $59 per year to unlock
the “Export as CSS” option. Clearly that’s a bigger outlay than Gridlover
(free), but if you spend a lot of time crafting type systems, it could save you
a lot of time (and money). Archetype is very good.

 

Archetype: Pro-level type system design tool.


VERTICAL BASELINE RHYTHM IS A TOOL – NOT A RELIGION

Vertical baselines are a very useful tool, but they shouldn’t become the end
goal of your design. I have to admit, there was a time when I spent too much
sweat trying to bend every page element to obey my mighty grid rules. I was
arm-wrestling typographic percentages and margins, and “hitting the grid” became
a goal in itself, rather than just a tool to help me design better.

That’s neither fun nor useful.

Today, I think it’s better to look at vertical baselines as a strong bass drum
in a band—a regular beat that helps to measure out the space for the rest of the
band to play in. Set up a nice backbeat that everyone can feel, but don’t be
afraid of dropping little off-beat flourishes. Often they can add energy and
flavor to a composition (visual or musical).

Personally, I like to start with a strong grid. If there’s whitespace between
headings or paragraphs, it might as well be one, two, or three whole “vertical
units”, rather than 1.3 or 2.75 units. And that invariably feels balanced and
harmonious immediately.

Likewise, your hero image might as well be exactly 12 units tall, rather
than 11.8 or 12.3, as now the bottom edge of the image is more likely to nicely
line up with the bottom edge of any text flowing alongside it. It’s
“self-tidying”.

But if, on the other hand, the caption on your images just looks too spacey when
it’s spread over 25-pixel line-heights, that’s fine. Forget the grid there. Just
make it look good.




THE TAKEAWAY

Ultimately, most design work is just a long, long list answers to “why”
questions.

 * Why did you make that major heading 49 pixels high?
 * Why is that bottom margin 17 pixels?
 * Why does the h3 have a line-height of 1.7778?

And so on.

There are potentially hundreds of these little questions in even a small
project. And you probably have enough natural “designer gut instinct” to answer
them all-eventually. The problem is, it’s exhausting.

However, if you can come up with a repeatable system that delivers viable
answers to most of the boring, little questions, you can save your designer gut
instinct for the bigger, more important questions.

Which is usually the fun part anyway.

RELATED ARTICLES

 * Typography Cheat Sheet: The 6 Big Mistakes to Avoid
 * Taking the Guesswork out of Typography on the Web
 * Choosing the Best Typography for Your UI

Extract from: The Principles of Beautiful Web Design:4th Edition


SHARE THIS ARTICLE

x
Alex Walker

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead
front-end design and dev for SitePoint and one-time SitePoint's Design and UX
editor with over 150+ newsletter written. Co-author of The Principles of
Beautiful Web Design. Now Alex is involved in the planning, development,
production, and marketing of a huge range of printed and online products and
references. He has designed over 60+ of SitePoint's book covers.

css typographypractical typography tips



UP NEXT

Converting Your Typographic Units with SassByron Houwens
Type Nugget: Good Typography is About Finding the Right PlaygroundAlex Walker
Taking the Guesswork out of Typography on the WebLaura Elizabeth
Four Surprisingly Strong Free Design ProgramsGabrielle Gosha
Twelve Terrific Typographic LogosAlex Scott
Creating Typographic LogosJennifer Farley


 * STUFF WE DO

 * Premium
 * Newsletters
 * Forums


 * ABOUT

 * Our story
 * Terms of use
 * Privacy policy
 * Corporate memberships


 * CONTACT

 * Contact us
 * FAQ
 * Publish your book with us
 * Write an article for us
 * Advertise




 * CONNECT

 * 

© 2000 – 2022 SitePoint Pty. Ltd.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of
Service apply.