Reveal elements on hover

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. In the Style panel, you can edit your typography settings to control how text is displayed.  

Here, you can customize the font, weight, size, height, color, alignment, and so much more.

Below, we’ll cover all of the typography settings and styles available to you in Webflow:

1. Typography styles
2. Text style inheritance
3. Best practices

Typography styles

There are many properties that you can define to configure the style of your typography:

• Font: the font family
• Weight: how thick or thin your characters are
• Size: the big or small your characters are
• Height: the distance between lines of a paragraph
• Spacing: the distance between each letter or character
• Indent: the indentation of the first line
• Color: the color of your text element
• Align: how your paragraph is aligned horizontally
• Capitalization: whether the letters in a text are uppercase or lowercase
• Decoration: the line decoration added to your text
• Italicize: whether your text is italicized or not
• Direction: whether the text is written right-to-left or left-to-right
• Columns: the multiple column settings of a text
• Breaking: override default wrapping and white-space behavior of text
• Text shadows: shadows added to text

Setting any typography style will apply the font to all text elements of the selected element and all of its children.

Learn more about text style inheritance.

Font

In the font dropdown menu, you can choose the font family for the selected element. There are a number of fonts available in the font menu by default. You can add Google Fonts, Adobe fonts, or upload your own custom font in your project settings.

Learn more about adding:

• Google fonts
• Adobe fonts (Typekit)
• Add custom fonts

Weight

Most fonts have multiple font weights such as light, normal, bold, or black.

The font weight property can be helpful to distinguish between headings and paragraphs or bolded words in a paragraph.

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. Hover over each font weight to preview the effect on the canvas.

You can also add additional weights to certain fonts in your project settings.

Size

The font size property allows you to change the text size of the selected element and the children within that element. To override the text size of any child element, select that element and customize the font size.

You can also use fixed values or relative values to set font size.

Learn more about typography units.

Height

Line-height is the ver­ti­cal space be­tween lines of text. You can use different units for line-height to make it scale automatically with the font size set it independent of the font size.

If you want your line-height to scale proportionally with your font size, you can use unitless number values or percentages. You won’t have to change the line-height every time you change the font size. Unlike with relative units, you’ll need to set the font size and line-height independently.

Learn more: 

• Using typography units
• ‍Setting a default line height for your entire project

Letter spacing

Letter spacing defines the space between characters. By default, the value for this property is set to normal. Negative spacing values allow you to decrease the spacing between letters and bring the characters closer. Decimal values, such as .5px, can be used for higher precision.

Learn more about using input values and units.

Text indent

The text indent property affects the first line of text in a text element. Increasing the value will push the first line of a text block to the right. Negative values will reverse-indent or move the starting point of the text to the left.

Color

You can apply a color to your text by entering a web color (hex, rgba, or color name) or choosing a color using the color picker.

Text elements may also inherit text color from their parent elements or tags. For example, text links, or text elements with link blocks inherit the text color from the all links tag.

Learn how to change the color of linked texts.

Align

The text-align property allows you to set your text’s horizontal alignment.

You can choose between the following values:

• ‍Left - Aligns the text to the left.
• Center - Aligns the text to the center.
• Right - Aligns the text to the right.
• Justify - Auto adjusts letter spacing and word spacing to keep the text aligned to the left and the right, except for the last line.

Setting text-align on a parent element will align all text content and also elements that have a display setting of inline-block (e.g. images and buttons).

Capitalize

You can specify text case or capitalization by choosing any of the following text transform values:

• ‍None (X): displays text as you’ve typed it — the default value.
• All caps (AA): transforms every letter to uppercase or all caps.
• Capitalize every word (Aa): transforms only the first character of each word to uppercase. However, it doesn’t transform any capital letters inside a word.
• Lowercase (aa): forces all letters to lowercase

The text transform property only changes the appearance of the text, but the text you type in retains its original format in the HTML. Turning off text transform (setting it to none), will expose the original text the way it was originally typed.

Decoration

With the text decoration property, you can set the following values:

• ‍None: the default value. It can also be used to override any inherited decoration. For example, setting the decoration to none on a text link or link block will remove the default underline from its content.
• Strikethrough: adds a line through the text
• Underline: underlines the text
• Overline: adds a line over your text

Italicize

The font style property gives you two options to toggle between:

1. Regular, the default value
2. Italic

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.

Direction

Unlike text alignment which just aligns the text inside its wrapper, text direction determines the direction in which text is written for a specific language.

You can choose between these values:

• LTR or ‍Left-to-Right: the default value
• RTL or Right-to-Left: the text direction for right-to-left languages such as Arabic or Hebrew

This setting only affects the direction of the text, not layout or presentation. Websites tailored to languages that require right-to-left reading will require entire layouts to be reversed so that columns and other content start at the right side of the screen.

Learn more about using flexbox and reversing layouts.

Columns

To wrap text and other content, you can use multiple columns.

Once you set a column count, open the text column properties to customize the column settings.

Select any column child you want to span all columns and switch their span setting in the text column properties.

Learn more about Text columns.

Breaking

The typography breaking setting (white-space property in CSS) allows you to specify the following:

1. Wrap or not wrap the text within its parent wrapper
2. Display unwanted whitespace (e.g., spaces, tabs) or remove them by collapsing them into a single space
3. Remove trailing whitespace (spaces at the end of the line)
4. Remove or retain manual line breaks in any embedded text

The values you can apply for this property are:

• Normal (default): used to wrap text and remove all extra whitespace
• Nowrap: use this value to stop the text from wrapping while still removing all extra whitespace
• Pre: use this value to prevent the text from wrapping while preserving all whitespaces

More settings for wrapped text:

• Pre-warp: use this value to preserve whitespaces while wrapping the text
• Pre-line: use this value to remove extra whitespaces but preserve newline breaks while wrapping the text
• Break-spaces: use this value to remove extra whitespaces and preserve newline breaks while wrapping or breaking the text and the trailing spaces
  

Line-breaks created by pressing Enter or SHIFT-Enter in a text element or by typing <br> in an embed element are always preserved.

Good to know:
To keep text together, use non-breaking spaces [↗] between them. For example, to keep a number and its unit together on one line, instead of typing space between them type Opt+Space on Mac or Alt+0160 on Windows.

Text shadows

You can add one or more text shadow layers on a single text element to create unique visual effects. Once you add a shadow, you can customize its style by updating the following parameters:

• Angle: adjusts the angle or direction of the text shadow by using the direction arrows, clicking and dragging the dial, or simply typing in the desired angle.
• Distance: sets how far away the shadow is from the typography.
• Blur: controls how focused or solid the blur of the text shadow should be. 0 px is completely solid.
• Color: specifies the color and opacity of your text shadow. The default is solid black.

‍

Text style 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.

See examples of how text style inheritance works.

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 change the default font in your project. These changes 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 inheritance.

The orange indicator on the style property icon means that there’s an inherited value for that property.

To see where the value is being inherited from, select the orange text.

Learn more about inheritance indicators in the Style panel introduction.

Best Practices

Instead of configuring typography properties for each individual element, you can use CSS to your advantage and use classes. Creating classes will allow you to create a style for one element and apply that style to other elements across your project.

Creating a style guide will also help you create more consistent and efficient typography styles across your project. To create a style guide for text elements, style the tags for each heading type and the all paragraphs tag. Any stylistic changes you apply to a tag or a class will then 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 blog post on web typography.

Inline text formatting

Inline text formatting options give you the power to style individual parts of the text. Select text from any text element, such as a paragraph or heading, to bold, italicize, link, or simply style that selected text.

Learn more about inline text formatting.

Nested tag formatting

You can style the tag of text elements, such as headings, block quotes, and paragraphs, nested within a class. Apply a class to a rich text element, select a heading or a paragraph within that rich text element, select the tag in the selector, and nest the selector inside of the class.

Any style you apply here will apply to all tags only within that class.