Typography
The Cosmic theme offers a set of class names that can be applied to text to give it a particular visual style.
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
Section titled “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.
| Token | Custom Property (Font Size) | Custom Property (Line Height) | Value (Font Size) | Value (Line Height) | Utility Class | Example |
|---|---|---|---|---|---|---|
| Extra Small | —text-size—xs | —line-height—xs | 0.875rem (14px) | 1.225rem | uo-text-size--xs | XS Size Text |
| Small | —text-size—sm | —line-height—sm | 1rem (16px) | 1.4rem | uo-text-size--sm | Small Size Text |
| Regular | —text-size—rg | —line-height—rg | 1.125rem (18px) | 1.575rem | uo-text-size--rg | Regular Size Text |
| Regular (Extra) | —text-size—ex | —line-height—ex | 1.25rem (20px) | 1.75rem (28px) | uo-text-size--ex | Regular (Extra) Size Text |
| Medium | —text-size—md | —line-height—md | 1.5rem (24px) | 1.65rem | uo-text-size--md | Medium Size Text |
| Large | —text-size—lg | —line-height—lg | 1.75rem (28px) | 1.9rem | uo-text-size--lg | Large Size Text |
| Extra Large | —text-size—xl | —line-height—xl | 2rem (32px) | 2.2rem | uo-text-size--xl | XL Size Text |
| 2XL | —text-size—2xl | —line-height—2xl | 2.5rem (40px) | 2.5rem | uo-text-size--2xl | 2XL Size Text |
| 3XL | —text-size—3xl | —line-height—3xl | 3.125rem (50px) | 3rem | uo-text-size--3xl | 3XL Size Text |
| 4XL | —text-size—4xl | —line-height—4xl | 3.75rem (60px) | 3.5rem | uo-text-size--4xl | 4XL Size Text |
| 5XL | —text-size—5xl | —line-height—5xl | 5.625rem (90px) | 5.35rem | uo-text-size--5xl | 5XL Size Text |
Fluid Text Size Classes
Section titled “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.
| Utility Class | 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
Section titled “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.
| Utility Class | 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
Section titled “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.
| Utility Class | 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.
Text Weight Classes
Section titled “Text Weight Classes”There are several classes to adjust the weight of the text, from extra light, to bold, to heavy.
| Token | Custom Property (font-variation-settings) | Custom Property (font-weight) | Value | Utility Class | Example |
|---|---|---|---|---|---|
| Extra-Light | —font-ext-light | —font-weight-ext-light | 100 | uo-text-weight--ext-light | An Example of Extra-Light Weight Text |
| Light | —font-light | —font-weight-light | 300 | uo-text-weight--light | An Example of Light Weight Text |
| Regular (Default) | —font-reg | —font-weight-reg | 350 | uo-text-weight--reg | An Example of Regular Weight Text |
| Semi-Bold | —font-semi | —font-weight-semi | 500 | uo-text-weight--semi | An Example of Semi-Bold Weight Text |
| Medium | —font-med | —font-weight-med | 600 | uo-text-weight--med | An Example of Medium Weight Text |
| Bold | —font-bold | —font-weight-bold | 700 | uo-text-weight--bold | An Example of Bold Weight Text |
| Extra-Bold | —font-ext-bold | —font-weight-ext-bold | 800 | uo-text-weight--ext-bold | An Example of Extra-Bold Weight Text |
| Heavy | —font-heavy | —font-weight-heavy | 900 | uo-text-weight--heavy | An Example of Heavy Weight Text |
Text Variants
Section titled “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.
| Utility Class | 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
Section titled “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.
| Token | Custom Property | Value | Utility Class | Example |
|---|---|---|---|---|
| Sans Serif | —font-family-sans | ”Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans | Sans Serif Text |
| United Sans Serif | —font-family-sans-united | ”United Sans”, “Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans-united | United Sans Serif Text |
| United Sans Semi-Condensed | —font-family-sans-united-semi | ”United Sans Semi-Condensed”, “Source Sans Variable”, Arial, Helvetica, Verdana, sans-serif | uo-text-font--sans-united-semi | United Sans Semi-Condensed Text |
| Source Serif | —font-family-serif | ”Source Serif Variable”, Times, “Times New Roman”, Georgia, “DejaVu Serif”, serif | uo-text-font--serif | Source Serif Text |
| United Serif | —font-family-slab | ”United Serif”, “Source Serif Variable”, Times, Georgia, “DejaVu Serif”, serif | uo-text-font--slab | United Serif |
| United Serif Light | —font-family-slab-light | ”United Serif”, “Source Serif Variable”, Times, Georgia, “DejaVu Serif”, serif | uo-text-font--slab-light | United Serif |
| Monospace | —font-family-monospace | ”Courier New”, “DejaVu Sans Mono”, monospace, sans-serif |