Cosmic Theming - Typography

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.

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

NOTE: In the 8.x-21.05 release of Cosmic/UO Core, these fixed headers sizes use the incorrect font-family. This will be fixed in the next release.

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)

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, or slab), 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
uo-text-font--sans This is sans-serif text
uo-text-font--slab This is slab text