Texts and fonts

Texts

Atomix supports five paragraph sizes, four subtitle sizes, and four title sizes.

Before continuing

Please make sure you have added Atomix to your project.

Title

To display a title in your browser, use the six default title tags, along with the class: title.

Sizes

  • Small: title small (2.2rem)

  • Normal: title or title normal (3.0rem)

  • Big: title big (4.6rem)

  • Biggest: title biggest (6.2rem)

Subtitle

To display a subtitle in your browser, use the six default title tags, along with the class: subtitle.

Sizes

  • Small: subtitle small (1.4rem)

  • Normal: subtitle or subtitle normal (2.2rem)

  • Big: subtitle big (3.0rem)

  • Biggest: subtitle biggest (3.3rem)

Paragraph

To display a paragraph in your browser, use the p tag, along with the class: paragraph.

Each child tag of the paragraph tag will automatically inherit the size assigned to the paragraph tag. Example:

<p class="paragraph small">Lorem ipsum dolor sit amet, <a href="#" class="link">consectetur adipiscing</a>.</p>

In this code, the paragraph is small. The link tag will automatically inherit the small size.

Unless the tag in question has a size class. Example:

<p class="paragraph small">Lorem ipsum dolor sit amet, <a href="#" class="link normal">consectetur adipiscing</a>.</p>

In this code, the paragraph is small, but the link has the normal size. So the link is bigger than the paragraph.

Sizes

  • Small: paragraph small (1.0rem)

  • Normal: paragraph or paragraph normal (1.4rem)

  • Big: paragraph big (1.7rem)

  • Bigger: paragraph bigger (2.2rem)

  • Biggest: paragraph biggest (3.0rem)

Font

The default font is 'Lato', sans-serif. You can apply a custom font, use default CSS fonts, or use custom Atomix fonts.

Style

  • Normal: none ('Lato', sans-serif)

  • Serif: serif ('Faculty Glyphic', serif)

  • Mono: mono ('Geist Mono', monospace)

  • Display: display ('Sour Gummy', cursive)

  • Dots: dots ('Doto', sans-serif)

You can add a font style by adding one of these classes to any text (titles, paragraphs, links, lists, containers, body, etc.). Example:

  • Normal:

<p class="paragraph small">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>

  • Serif:

<p class="paragraph small serif">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>

  • Mono:

<p class="paragraph small mono">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>

  • Display:

<p class="paragraph small display">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>

  • Dots:

<p class="paragraph small dots">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
PreviousDark modeNextDisplay

Last updated