The typography scale is designed for great readability across the platform. This page covers the various classes available to modify text.
| cssproperty | value | screensize |
|---|---|---|
font-size | h1, h2, h3, h4, h5, h6, xs, sm, md, lg, xl | tablet |
font-weight | semilight, light, normal, semibold bold | N\A |
font-style | italic | N\A |
text-decoration | underline, none | N\A |
letter-spacing | wide | N\A |
text-transform | uppercase | N\A |
text-align | left, center, right | tablet |
line-height | normal | N\A |
There are two avenues for modifying font size in Atlas.
The following classes can be used to accurately adopt a heading's size (h1- h6). These sizes are tied to the default heading sizes renderer within the markdown component.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<p class="font-size-h1">Heading 1</p>
<p class="font-size-h2">Heading 2</p>
<p class="font-size-h3">Heading 3</p>
<p class="font-size-h4">Heading 4</p>
<p class="font-size-h5">Heading 5</p>
<p class="font-size-h6">Heading 6</p>The following classes targets text that are not headings.
Extra large text
Large text
Medium text
Small text
Extra small text
<p class="font-size-xl">Extra large text</p>
<p class="font-size-lg">Large text</p>
<p class="font-size-md">Medium text</p>
<p class="font-size-sm">Small text</p>
<p class="font-size-xs">Extra small text</p>Appending -tablet to a font-size class will make that class applicable to tablet screen size and above. In this way, you may apply mobile-first font sizes, then apply a more fitting font-size for larger screens.
Heading level two on mobile, level one on tablet
Medium on mobile, large on tablet
<p class="font-size-h2 font-size-h1-tablet">Heading level two on mobile, level one on tablet</p>
<p class="font-size-md font-size-lg-tablet">Medium on mobile, large on tablet</p>There are 5 classes available to transform the font weight. There is 1 class to transform the font style.
Semilight weight text
Light weight text
Normal weight text
Semibold weight text
Bold weight text
Italic text
<p class="font-weight-semilight">Semilight weight text</p>
<p class="font-weight-light">Light weight text</p>
<p class="font-weight-normal">Normal weight text</p>
<p class="font-weight-semibold">Semibold weight text</p>
<p class="font-weight-bold">Bold weight text</p>
<p class="font-style-italic">Italic text</p>Text can have underlining added or removed with the following classes.
Text with underline
Text with decorations removed
<p class="text-decoration-underline">Text with underline</p>
<p class="text-decoration-none">Text with decorations removed</p>The following class is used to alter the letter spacing.
Text with normal letter spacing
Text with wide letter spacing
<p>Text with normal letter spacing</p>
<p class="letter-spacing-wide">Text with wide letter spacing</p>The following classes can be used to align text.
Left aligned text
Center aligned text
Right aligned text
<p class="text-align-left">Left aligned text</p>
<p class="text-align-center">Center aligned text</p>
<p class="text-align-right">Right aligned text</p>Appending with -tablet to a text-align class will make that class applicable to tablet screen size and above. Resize the screen to see it in action.
Text is centered on tablet size and above.
<p class="text-align-center-tablet">Text is centered on tablet size and above.</p>