Typography

Control the way your text looks with the settings inside Advanced > Typography.

Font Family

This setting specifies the font for an element.

By default, Oxygen allows you to choose from 800+ Google Fonts. Because there are so many fonts on Google Fonts, displaying them all at once in the list would not be practical. To use a font from Google's library, click the Font Family dropdown, and then start typing the font’s name.

Read the article on Global Fonts for information on adding any custom font or linking Oxygen to Typekit.

Font Size

Sets the size of the text.

Color

Sets the color of the text.

Font Weight

Sets the boldness, also known as weight. A weight of 700 is bold, and 400 is normal.

Text Align

Sets the alignment of the text.

• Left – Aligns the text to the left.
• Right – Aligns the text to the right.
• Center – Centers the text.
• Justify – Stretches the lines so that each line has an equal width (like newspapers and magazines).

Line Height

Sets the amount of vertical space used by a line of text.

Oxygen recommends using a unitless line height - i.e. just a number, without px or em or %.

When a unitless line height is used, the browser automatically multiplies it by the font size to compute a final line height. For example, a line height of 1.5 and a font-size of 14px would result in lines with heights of 21px.

If you wish to use a unit, simply type it in after the number, i.e. "21px".

Letter Spacing

This setting increases or decreases the space between characters in the text.

Text Decoration

• none – Default value.
• underline – The text will be underlined
• overline – The text will be overlined.
• line-through – A line will be displayed through the text.

Font Style

• normal – Default value.
• italic – The text will be italic.

Text Transform

This setting allows for automatic capitalization of text.

• none – No capitalization. The text renders as it is. This is used by default.
• capitalize – Transforms the first character of each word to uppercase
• uppercase – Transforms all characters to uppercase.
• lowercase – Transforms all characters to lowercase.

Font Smoothing

This setting controls the application of anti-aliasing when fonts are rendered. There are three options available:

• initial – Is used by default. In this mode, the browser decides when to use subpixel antialiasing.
• antialiased – Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
• subpixel-antialiased – On most non-retina displays, this will give the sharpest text.

Keep the following tips in mind when changing the font smoothing:

• when you place light text on a dark background, change the font smoothing to antialiased
• when you place dark text on a light background, leave the font smoothing as is

Recommendation: do not use this setting until you read this excellent article on font smoothing: http://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/