Advanced Typography Styles

 

Customizing how typography looks and feels is one of the most important choices a designer can make. On top of font properties, line height, and typography units, there are a number of other typography options that you can set in the Styles Panel to define the appearance and flow of text.

In this lesson
  • Letter Spacing
  • Text Indent
  • Text Align
  • Text Decoration
  • Text Transform
  • Direction

All these options are located in the Typography section of the Styles Panel. To access some of these options, you may need to switch the Advanced toggle in the Typography section.

Webflow Typography

Letter spacing

Letter spacing defines the space between characters. By default, the value for this property is Normal. Negative values allow you to decrease the spacing between letter bringing the characters closer. Decimal values, like .5px, can be used for more precision.

 

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.

 

Text Align

Webflow Typography - text 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.
Good to know
  • 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).

Text decoration

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

  • None - This is the default value. It can also be used to override any inherited decoration. For example, setting a text link’s or link block’s decoration to none will remove the underline on its content.
  • Underline - Underlines the text.
  • Strikeout - Adds a line through the text.
 

Text transform

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

  • None - The text is displayed as you’ve typed it. This is the default value.
  • Uppercase - This transforms every letter to uppercase or all caps.
  • Capitalize - Transforms only the first character of each word to uppercase. However, it doesn’t transform any capital letters inside a word.
  • Lowercase - Forces all letters to lowercase
Text transforms
Good to know
  • 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.

Direction

Unlike text alignment which just aligns the text inside it’s wrapper, text direction determines the direction in which text is written for a specific language. You can choose between these values:

  • Left-to-Right - This is the default value. You can leave this at default for languages like English.
  • Right-to-Left - For right-to-left languages like Arabic or Hebrew, you can use this option to toggle the text direction.
Good to know
  • This 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.