Intro to Web Typography

 

Choosing the right Typography styles for your website is one of the most important decisions you will have to make before starting a web project.

There are many properties that you can define to configure the style of your typography. Here, we’ll cover the essentials:

  • Font family
  • Font Weight
  • Font Style (default or italic)
  • Font Color
  • Best Practices
Webflow Typography styles

Font family

From the font family dropdown you can choose the font for the selected element. Setting the font, like setting any type style, will apply the font to all text elements of the selected element and all of its children. Learn more about how text style cascading works.

Webflow Typography Styles

Changing the font

You can choose the font of any text element from the Font dropdown menu in the Typography section of the Styles Panel.

 

Adding other fonts

By default, there are a number of fonts available in the font dropdown for you to choose from. To add more fonts to your project, go to the Fonts tab in your Project Settings. Here you can choose to add additional fonts and font weights from Google Fonts or Adobe fonts (Typekit). You can also upload custom fonts.

Read how to pick the best font for your project.

Setting the default font

Each project has default typography properties set on the Body tag. All text elements inherit these values throughout your project. Any changes to the typography styles on the Body tag will essentially change the default font in your project. This will affect typography everywhere. Except for any elements on which you have already set specific typography values—specific values override global values. Learn more about text style cascading.

To set a default font:

  1. Go to the Navigator (shortcut: F) or the navigation breadcrumb bar at the bottom of the canvas
  2. Select the Body element
  3. Go to the Styles panel (shortcut: S)
  4. Select the Body (All Pages) tag from the Selector dropdown
  5. Scroll to the Typography section of the Styles panel
  6. Select the font family from the font dropdown menu
 
The orange indicator on the style property icon means that there’s an inherited value for that property. Clicking on this icon shows you where the value is being inherited from. However, when you add a custom value to override the inherited value, the indicator turns blue.
 

Font weight

Most fonts have multiple font weights like light, normal, bold, or black. The font weight property can be helpful to distinguish between headings and paragraphs or bolded words in a paragraph.

Setting font weights in Webflow
Font weights

The available weights for each font are indicated in white in the dropdown under the typography section. Grayed out font weights aren’t available for the selected font.

Webflow Typography Styles

You can hover over these weights and see the effect in real-time on the canvas.

 
Selecting a grayed-out weight may create a browser-generated weight for that font which may render poorly.

Font Style (default or italic)

The font style property gives you two options to toggle between: normal, the default value, and italic.

Webflow Typography Styles
If your font doesn’t have a native italics version and if you set italics style on your text, the browser will force an italics style that may render poorly.

Font Color

To set a font color, type in a web color (hex, rgba, or color name), or use the Color Picker to choose a color.

Webflow Typography Styles
 

Best Practices

Instead of configuring typography on each text element, you can use CSS to your advantage and use classes. Create styles and apply them to different elements. Even better, create a style guide for your Text elements by styling the tags for the All Headings and the All Paragraphs tag. This way you, typography will be uniform throughout your site and any changes you make on a tag or a class will affect all related elements without having to go and update every individual element.

 

To learn more about how to pick your typography options check out our “Web Typography 101” blog post.