Typography in Cosmic

The Cosmic theme now offers a set of class names that can be applied to text to give it a particular visual style.

Note: These features require your site to be using UO Core/Cosmic version 21.05 or newer.

Visit our Design and Layout page to learn why we limit our UO web fonts to United Sans Regular, United Serif Regular, and Source Sans Variable.

Text Size Classes

These text size classes can be useful when you need text to be visually larger (like a header style), but without changing the HTML tags that wrap an element. All text in the Cosmic theme is based off of these sizes, so if you ever need text to "look like" the text used in another component, you can simply apply one of these classes to your component to achieve the same font design.

Class Name

Example

uo-text-size--xs

This is xs text. This is xs semibold text. This is xs bold text.

uo-text-size--sm

This is sm text. This is sm semibold text. This is sm bold text.

uo-text-size--rg

This is rg text. This is rg semibold text. This is rg bold text.

uo-text-size--md

This is md text. This is md semibold text. This is md bold text.

uo-text-size--lg

This is lg text. This is lg semibold text. This is lg bold text.

uo-text-size--xl

This is xl text. This is xl semibold text. This is xl bold text.

uo-text-size--2xl

This is 2xl text. This is 2xl semibold text. This is 2xl bold text.

uo-text-size--3xl

This is 3xl text. This is 3xl semibold text. This is 3xl bold text.

uo-text-size--4xl

This is 4xl text. This is 4xl semibold text. This is 4xl bold text.

uo-text-size--5xl

This is 5xl text. This is 5xl semibold text. This is 5xl bold text.

Fluid Text Size Classes

Each text size also includes a "fluid" version which will shrink down a bit on mobile to adapt better to the smaller screen size.

Class Name

Example

uo-text-size-fluid--xs

This is fluid xs text. This is fluid xs semibold text. This is fluid xs bold text.

uo-text-size-fluid--sm

This is fluid sm text. This is fluid sm semibold text. This is fluid sm bold text.

uo-text-size-fluid--rg

This is fluid rg text. This is fluid rg semibold text. This is fluid rg bold text.

uo-text-size-fluid--md

This is fluid md text. This is fluid md semibold text. This is fluid md bold text.

uo-text-size-fluid--lg

This is fluid lg text. This is fluid lg semibold text. This is fluid lg bold text.

uo-text-size-fluid--xl

This is fluid xl text. This is fluid xl semibold text. This is fluid xl bold text.

uo-text-size-fluid--2xl

This is fluid 2xl text. This is fluid 2xl semibold text. This is fluid 2xl bold text.

uo-text-size-fluid--3xl

This is fluid 3xl text. This is fluid 3xl semibold text. This is v3xl bold text.

uo-text-size-fluid--4xl

This is fluid 4xl text. This is fluid 4xl semibold text. This is fluid 4xl bold text.

uo-text-size-fluid--5xl

This is fluid 5xl text. This is fluid 5xl semibold text. This is fluid 5xl bold text.

Header Text Style Classes

If you need the text to look like a header (h1-h6) tag, without using that tag (or to adjust text within one of those tags to look like another visually), you can use the following classes to make the text visually behave like a header.

Class Name

Example

uo-text-header-1

H1. Main Header

uo-text-header-2

H2. Header

uo-text-header-3

H3. Header

uo-text-header-4

H4. Header

uo-text-header-5

H5. Header

uo-text-header-6

H6. Header

Fixed Size Header Text Style Classes

While the header styles are fluid by default, each header class also has an accompanying fixed variant if you do not want it to change size on smaller screens.

Class Name

Example

uo-text-header-1--fixed

H1. Main Header (Fixed Size)

uo-text-header-2--fixed

H2. Header (Fixed Size)

uo-text-header-3--fixed

H3. Header (Fixed Size)

uo-text-header-4--fixed

H4. Header (Fixed Size)

uo-text-header-5--fixed

H5. Header (Fixed Size)

uo-text-header-6--fixed

H6. Header (Fixed Size)

Visit the Text page to learn about using headers to improve page layouts and increase accessibility.

Note: The 8.x-21.05 release of Cosmic/UO Core, used the incorrect font-family.

Text Weight Classes

There are several classes to adjust the weight of the text, from extra light, to bold, to heavy.

Class Name

Example

uo-text-weight--ext-light

This is an example of Extra-Light text

uo-text-weight--light

This is an example of Light text

uo-text-weight--reg

(default weight) This is an example of the text weight

uo-text-weight--semi

This is an example of Semi-Bold text

uo-text-weight--med

This is an example of Medium text

uo-text-weight--bold

This is an example of Bold text

uo-text-weight--ext-bold

This is an example of Extra-Bold text

uo-text-weight--heavy

This is an example of Heavy text

Text Variants

If you need to adjust the style of a font to be italic (without wrapping it in an em tag), or if you need all-caps text visually, you can use the following styles. If you need text to NOT be italic, you can apply the uo-text-style--reg class to it if you need to override a default italic style.

Class Name

Example

uo-text-style--italic

This is italic text

uo-text-style--all-caps

This is all-caps text

uo-text-style--title-case

This is title case text

uo-text-style--reg

This is regular text (used to undo any text variants that exists)

Font Family Overrides

If you have a context where you need text to be a particular font family type (serif, sans-serif, slab or slab sans-serif), you can apply the following classes to change the font display. This should be limited to use-cases when you need to adjust the font-family for a custom designed or tweaked element, and should NOT be used to change the font for a whole page or standard body copy.

Class Name

Example

uo-text-font--serif

This is serif text (source serif)

uo-text-font--sans

This is sans-serif text (source sans)

uo-text-font--slab

This is slab text (united serif)

uo-text-font--sans-united

This is slab sans-serif text (united sans)