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 |
text-wrap | pretty | N\A |
line-height | normal | N\A |
white-space | normal, nowrap, pre, pre-wrap | 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>The .text-wrap-pretty atomic can be used to prevent orphans, or situations where a line breaks and just one small word ends up on the next line. When the .text-wrap-pretty atomic is applied, the browser will instead try to cut the line so the break looks a little more balanced.
If your browser supports pretty text-wrapping, resize your browser window and notice the differences between how these two paragraphs break.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.</p>
<p class="text-wrap-pretty margin-top-xxs">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
</p>.text-wrap-pretty has two caveats:
- Support: As of March 2024, support is mainly available in Chromium browsers. Browsers which don't support this rule will ignore it and break lines as usual. Treat this as a progressive enhancement.
- Performance: Calculating optimal line breaks can be expensive, especially for larger blocks of text. Use, but use sparingly.
Control the preservation of white space (or lack thereof) and text wrapping by using the white-space property.
For example, show white space:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
<p class="white-space-pre-wrap">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>