Font sizing and alignment properties

Set the Font size, Line height, Text alignment, Letter spacing, Word spacing and Text indent of text and elements that can use these properties.

Font size

Set the size of the font. 

Expected value:

• Number
• Keyword - Set the font size using a keyword: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger

Accepted units:

You can leave blank (Recommended) or specify a unit to be used.

• blank - Just add a number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels. Warning: Setting the font size in pixels is not accessible because the user cannot change the font size from the browser.
• % - The value will be applied as a percentage of the parent elements font size

Additional units are accepted. For more information see https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Find more information about font-size at https://developer.mozilla.org/en-US/docs/Web/CSS/font-size

Line height

Set the distance between the lines of text.

Expected value:

• Decimal number
• Number

Accepted units:

You can leave blank (Recommended) or specify a unit to be used.

• unitless decimal number - Set line height as a decimal number E.g. 1.2 and it will always be proportional to the font size
• unitless whole number - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels. Warning: Setting the line height in pixels is not recommended as it will not scale proportionally with the text if the text size is increased
• % - The value will be applied as a percentage of the font size

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Text align

Set how text is aligned within its parent element.

Options and behavior:

• Left - Align the text to the left
• Right - Align the text to the right
• Centre - Align the text to the centre
• Start - The same as left if direction is left-to-right and right if direction is right-to-left
• End - The same as right if direction is left-to-right and left if direction is right-to-left

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

Letter spacing

Set the spacing between text characters.

Expected value:

• Number

Accepted units:

You can leave blank (Recommended) or specify a unit to be used.

• blank - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels. Warning: Setting the line height in pixels is not recommended as it will not scale proportionally with the text if the text size is increased

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Word spacing

Set the spacing between words.

Expected value:

• Number

Accepted units:

You can leave blank (Recommended) or specify a unit to be used.

• blank - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels. Warning: Setting the value in pixels is not recommended as it will not scale proportionally if the text size is increased
• % - The value will be applied as a percentage of the affected character's advance width

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing

Text indent

Set indent applied to the first line of text in a block.

Expected value:

• Number

Accepted units:

You can leave blank (Recommended) or specify a unit to be used.

• blank - Add a whole number and the value will be interpreted as pixels and be converted to rem's automatically if this behaviour is set within Base unit settings
• px - The value will be applied in pixels. Warning: Setting the value in pixels is not recommended as it will not scale proportionally if the text size is increased
• % - The value will be applied as a percentage of the containing block's width

Find more information at https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent