Typography

Format your text with search engines and accessibility in mind.

This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!

In this lesson:

  1. Headings
  2. Text fills
  3. Paragraphs and text inheritance
  4. Spans
  5. Units
  6. Accessibility and inclusive typography

Headings

Think of headings as content guides — anyone should be able to understand the way you’ve organized your content by glancing at your headings. So make sure your headings are clear and descriptive.


Imagine the front page of a newspaper. In this context, an H1 is the big statement on the page (the purpose). H2s are smaller headings that fit into the big statement, and H3s are even more detailed.


To add a Heading:

  1. Open the Add panel
  2. Scroll down to Typography
  3. Click and drag a Heading onto your canvas

Classes

Instead of configuring typography properties for each individual heading, you can use CSS to create Classes. Classes allow you to create a style for one heading and apply that style to other headings across your project.

To create a Class:

  1. Make sure your Heading is selected on the canvas
  2. Click into the Selector field in the Style panel
  3. Name your Class (e.g., Big heading)

This Class will remember all the styling changes you make. If you change the font, or the weight, the Class (Big heading) will remember these changes. If you want to remove a change, you can reset that property.

To reuse a Class:

  1. Make sure the new Heading is selected on the canvas
  2. Click into the Selector field in the Style panel
  3. Start typing the name of the Class you want to reuse
  4. Select the Class from the list

Now when you change a Heading — because you’re actually styling the Class — all Headings with that same Class will also change. 

Tags


Tags let you change the default styling of text elements, like Headings, Paragraphs, and Links. Any stylistic changes you apply to a Tag or a Class will affect all related elements without having to update them individually. 

To style a Tag:

  1. Select any Heading on the canvas
  2. Click into the Selector field (without adding a class) 
  3. Click into the Tag you’d like to style (e.g., All H1 Headings)
  4. Adjust settings like font type, color, weight, etc

Any style changes you make here will apply to every element with that Tag (e.g., All H1 Headings). 

To learn more about how to pick your typography options, check out our blog post on web typography.

Text fills

Text fills use clipping to apply color to the inside of text. A text fill uses the font color by default. 


To add a custom text fill:

  1. Click into the Style panel
  2. Scroll down to the Typography section
  3. Change the font color to automatically create a Class
  4. Click into the Selector field in the Style panel to rename that Class (e.g., Bigger heading)
  5. Scroll down to Backgrounds and next to Type, set a gradient
  6. Double-click on the left edge of the gradient bar and choose your first stop color 
  7. Double-click on the right edge of the gradient bar and choose the second stop color
  8. Click and drag the circle next to Angle to adjust the gradient’s direction 
  9. Click the dropdown next to Clipping and choose Clip background to text


When you make a change to the gradient, it updates inside the text in realtime. You can put any background (or stack multiple backgrounds) using this method. When the background is clipped to text, it will ignore the font color and use the color in your Backgrounds section.

Paragraphs and text inheritance

Parent elements can pass text style information down to their children. You can set text styles on parent elements to apply to their child elements and override these styles in the child element settings.

It’s common to use this technique to set global font styles on the body tag, to align text and other elements inside of sections, and to override default link block styles.

To use text inheritance:

  1. Select the Body element (on any page) 
  2. Click into the Selector field in the Style panel
  3. Choose the Body (All pages) tag
  4. Adjust settings as you like

The Body (All Pages) tag is the top-level tag. Changes to this tag (like the font) will pass down to all your text. This is a great way to set defaults on a project.

Overriding default inheritance styles

Maybe you want the paragraph font to be different from the default font. When you click into the font, you can see it taking cues from the Body (all pages) tag. When you change this font setting, it will apply a new class.

A class is automatically created on something the moment you style a specific property — this is the key to overriding default inheritance style. The orange indicator on the style property icon means there’s an inherited value for that property. Click the orange text to see where the value is being inherited from.


To override a default inheritance style:

  1. Click the element you’d like to style
  2. Adjust any one of its settings (font, weight, etc.)
  3. Click in to the Selector field to rename the class (e.g., “Special paragraph”) 

Now you can click in to see the entire inheritance hierarchy. 

See examples of how text style inheritance works.

Learn more about inheritance indicators in the Style panel introduction.

Spans

Spans is a formatting option to style specific parts of text elements, like individual characters or words. 

To use span:

  1. Highlight the text you’d like to format
  2. Click into the Selector field in the Style panel to create a Class
  3. Change the settings as you like (font, background color, etc.)

To clear span formatting:

  1. Highlight the text
  2. Click Clear formatting from the text toolbar popup (the A with an x)

Units

Many typography units used on the web are set in pixels. But let’s look at some other options.

Ems

An em was originally based on the width of a typeface’s capital M. Ems look to their parent element and scale the font size proportionally.

So if a font is 16 pixels:

  • 1 em is 16 pixels 
  • 2 ems 32 pixels
  • 1.5 ems Is 24 pixels

You can also set the font size on a paragraph’s parent element, like a Div block:

  1. Select the parent element 
  2. Change the font size (e.g. to 20 pixels) in the Style panel under Typography

When the parent element is 20 pixels:

  • 1 em is now 20 pixels
  • 2 ems is 40 pixels
  • 3 ems — 60 pixels

Rems (root ems)

Rems are relative to the HTML font size.

A rem is calculated by taking your rem value and multiplying it by the HTML font size (which, unless you manually change it in the code, will respect the browser’s font size). This has the benefit of respecting a user’s browser preferences (if custom text size is set on the browser).

Percentages

Like ems, percentage refers to the parent element's font size.

VW (viewport width)

VW is a measurement of the width of the browser’s viewport that scales proportionally based on the width of the viewport.

CH

CH is great for sizing something like a paragraph or a heading to limit the number of characters someone has to read per line. 

For example, If a paragraph has a maximum width of 60ch, it takes the selected font (the paragraph’s typeface), and sets the paragraph’s boundary (its box) to equal the width of 60 zeros.

CH lets you set the WIDTH on a text element when you’re trying to limit the number of characters (again, based on the width of the font’s zero character.)

When it comes to font size, in most cases, pixel values are a safe bet. We have alternatives like ems, rems, percentages, viewport widths, and CH. The best way to get familiar with your options is to try them out inside a project and see how they interact. We can see these changes right on the canvas, and simulate browser and device widths at any time.

Accessibility and inclusive typography

Accessibility and inclusive design are important to consider when designing for the web. Let’s look at some easy places to start making the web more accessible and inclusive when it comes to typography. 

Font legibility

Thin fonts are extremely difficult to read . This is also the case with uneven weight distribution — there are these kinds of characters that aren't very legible. Make sure your font is no smaller than 16px for body text. 

Alignment of text 

Uneven vertical alignment on chunks of text (when text is centered, for example) can create a difficult reading experience. A jagged alignment makes it tough for the reader to follow from line to line. 

All caps

All caps can introduce a heavier cognitive load for the reader, especially in longer paragraphs. Screen readers announce all caps as individual letters, interrupting the flow and making it difficult to understand. Consider limiting the use of all caps on longer strings of text.

Underlined text

There’s an expectation on the web that underlined text indicates a hyperlink. If you’re trying to draw emphasis, consider using italics or bold text (or make stylistic changes by wrapping things with a span). 

Color contrast 

Contrast is the measurement of the difference between background and the foreground. Low contrast would be something like somewhat lighter gray on somewhat darker gray. Or maroon on red. Or purple on pink. 

Two color contrast results from Colorable. On the left is dark purple text on a light purple background. It has a ratio of 7.06:1 with a AAA rating based on WCAG guidelines. On the right is purple text on a lighter purple background with a 2.39:1 ratio that shows a fail rating.


High contrast doesn’t mean we stop considering other things like font weight (a super thin font that happens to have high-contrast against the background is still super illegible.) But higher contrast usually leads to increased legibility, which is a great thing on the web.

Check the color contrast of your designs and learn more about best practices with these excellent color contrast tools:

Characters per line

Long lines of text confuse and tire a reader — their eyes have to travel really far from left to right. Use a container to constrict how far text spans horizontally across the page. 45 - 75 characters per line is recommended.

As we covered earlier, one way to do this is to set limits on the maximum width of a text element to however many characters you want in a line. Remember: (60 CH) is equal to 60 zeroes on whatever font you’ve selected. 

Line height

Text with adequate line height makes it much less overwhelming and easier to track across and down a page. 

Your line height should be at least 1.5 times the font size for paragraphs and blocks of text. 

Clearly-defined links

Your links should be meaningful and actionable. Screen readers can give visitors an overview of links on a page. When link text is read out of context, it should tell readers:

  1. What the link is
  2. Where the link is taking them

Don’t

  • Embed links in generic terms like “more,” “this page,” or “click here”
  • Link to raw URLs

Do

  • Embed links in clear, specific language that tells people where the link will take them and why they might want to go there
  • Indicate if a link will open high-bandwidth media like a PDF or video within the linked text

Listen to an example of a screen reader announcing unhelpful links on a page in the section about links from the video lesson above on Advanced web typography.

Navigation 

All your navigation should be tested, not just for what it’ll look like, but how you can interact with it using a screen reader. This is a great way to develop an understanding of how people can navigate your content. 

We’re adding more and more teaching to Webflow University on the topic of accessibility and inclusive design, so keep checking back!

In the meantime, check out our lesson on making your site more accessible.

Clone this project
Try Webflow — it's free

Production for this lesson

Directed by

-

Produced by

-

Written by

-

Article by

-

Edited by

-

Designs by

-

Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback