Oops! Something went wrong while submitting the form
Intro to Typography
The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
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:
Text style inheritance
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.
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.
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.
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.
Line-height is the vertical space between 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.
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.
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.
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).
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.
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
The font style property gives you two options to toggle between:
Regular, the default value
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.
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.
The typography breaking setting (white-space property in CSS) allows you to specify the following:
Wrap or not wrap the text within its parent wrapper
Display extra whitespace (e.g., spaces, tabs) or collapse them into a single space
Remove trailing whitespace (spaces at the end of the line)
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 Shift+Space.
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.
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.
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.
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.
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.
Can I Use ?
Data on support for the feature across the major browsers from caniuse.com.