Intro to Web Typography: Revision

Typography is a key component of your web project, and choosing the right styles will elevate the look and feel of your website. 

 In the following guide, we’ll cover four important typographical properties that you can configure. Defining these essential properties will add unique styles to your text:

  • Font family

  • Font weight

  • Font style

  • Font color

We’ll also briefly review some best practices you can apply to any project. 


Font family

If you wish to change your font, you can access the font dropdown menu within the Typography section of the Styles Panel.

Picture1-min.png

After selecting an element, you can choose that element’s font by opening the dropdown menu. Simply click the font to apply it. This applies your chosen font to the element and all of its children. 


Adding additional fonts

Though Webflow automatically includes a variety of fonts, you can import fonts of your choice from Google Fonts or Adobe Typekit. You may also upload custom fonts to your project, if you need more options.

Read our tips on picking the best fonts for your web project.


Setting the default font site wide

Each project’s default font properties are assigned to the Body tag within your HTML. All body text elements throughout your website inherit these styles as they’re assigned. Thus, any typography changes you make will be applied across your entire website. This allows you to quickly update your text. Any specific typography values you’ve set elsewhere will not be affected, since these values take precedence over global defaults. 

To set your default font: 

  1. Launch Navigator within the right sidebar (hotkey: F) or by using the navigation bar at the bottom of the canvas

  2. Select Body from the list of elements

  3. Open the Styles panel (hotkey: S)

  4. From the Selector section near the top, click “Select a Class or Tag” and choose Body (All Pages)

  5. Scroll to the Typography section within the Styles panel

  6. Finally, choose your font from the dropdown menu

Webflow highlights property names orange when they inherit values from another places. Clicking these orange names displays the original locations of inherited values. When you override a value by changing it, that same property name will become blue.


Font weight

Most fonts have multiple weights, such as light, regular, semi-bold, and bold. Changing font weights can be useful when you want to give text sections a distinct appearance. This is especially important for text blocks and headings. 

Picture1-min-2.png

After selecting a font, you can choose from its available weights using the dropdown menu just below. Font weights that aren’t available are greyed out. 

Caution: If you select one of these greyed-out weights, browsers may generate weights of their own. As a result, your fonts may not render correctly. 

Hovering over each font weight shows you a real-time preview prior to selecting it. 


Font style

When configuring your typography, you can choose between two font styles: normal (default) or italic

23-min.png

Caution: Not all fonts include an italicized style. If you select italics for one of these fonts, browsers will render their own forced, italicized versions. These may not render correctly. 


Font color

Font color is a straightforward property that allows you to customize the color of your fonts. This can be applied to text snippets, text sections, and more. 

24-min.png

You can set a font color by typing in by typing in a hex value, rgba value, or a color name. Within the Typography section, you may also use the Color Picker to preview and make a selection.


Best Practices

You aren’t obligated to configure each element’s typography manually. Using CSS classes, you can create styles and apply them to the elements of your choosing. This is especially useful for styling many elements of the same type. CSS also allows you to override global styles for specific elements, granting you more flexibility.

It may also be useful to adhere to a general style guide for your text elements. When using classes and common tags for paragraphs or headings, typographic styling becomes more efficient. What developer doesn’t want to save time and energy?

This also ensures your text elements will be consistent sitewide.

If you want to learn more about choosing typography options, please visit our blog.