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:

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:

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:

  • Serif:

  • Mono:

  • Display:

  • Dots:

PreviousDark modeNextDisplay

Last updated