Skip to content

Texts and fonts

Jump to bottom
Enio edited this page Mar 4, 2025 · 2 revisions

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, as well as 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, as well as 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 paragraph tag, as well as the class: paragraph.
Each child tag of the paragraph tag will automatically get 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 get the size small.

Unless the tag in question has a size. 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 had 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 biggest (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 by adding one of these classes to any text (titles, paragraphs, links, lists, containers, body…). Exemple:

  • 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>

Clone this wiki locally