Typography • Natura11y
Jump to main contentJump to website footer
Withered trees under clear blue sky

Photo by Ashim DSilva

Typography

Introduction

Natura11y offers a wide range of customizable typography styles. Out-of-the-box, font sizes are set using a type scale. This makes it easy to adjust all font sizes with just one variable, without needing to specify sizes for each element individually.

Section Headings

Natura11y provides six levels of section headings, <h1> through <h6>. Styles for each level are consistent for a tag header (e.g. <h1>) and a utility class header (e.g. .h1).

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6


        <h1>Header 1</h1>
        <p class="h1">Header 1</p>
        
        <h2>Header 2</h2>
        <p class="h2">Header 2</p>
        
        <h3>Header 3</h3>
        <p class="h3">Header 3</p>
        
        <h4>Header 4</h4>
        <p class="h4">Header 4</p>
        
        <h5>Header 5</h5>
        <p class="h5">Header 5</p>
        
        <h6>Header 6</h6>
        <p class="h6">Header 6</p>
Figure 2

Font Size Utilities

Easily change the font-size of text, buttons, navigation, entire forms, or any DOM element with Natura11y's font size utilities.

  • Large
  • Regular
  • Medium
  • Small

        <p class="font-size-lg">
            Large
        </p>
        <p class="font-size-rg">
            Regular
        </p>
        <p class="font-size-md">
            Medium
        </p>
        <p class="font-size-sm">
            Small
        </p>

        <!-- With Breakpoint Modifier (e.g., medium breakpoint) -->

        <p class="font-size-lg--md 👈">
            Large
        </p>
Figure 3

Paragraphs

Below is an example of Natura11y's default <p> tags.

The Namib-Naukluft Park is a national park in western Namibia situated between the coast of the Atlantic Ocean and the edge of the Great Escarpment. It encompasses part of the Namib Desert (considered the world's oldest desert), the Naukluft mountain range, and the lagoon at Sandwich Harbour.

The best known area of the park and one of the main visitor attractions in Namibia is Sossusvlei, a clay pan surrounded by sand dunes, and Sesriem, a small canyon of the Tsauchab. The desert research station of Gobabeb is situated within the park.


        <p>
            The <strong>Namib-Naukluft Park</strong> is a <a href="#1">national park</a> in western <a href="#1">Namibia</a> situated between the coast of the <a href="#1">Atlantic Ocean</a> and the edge of the <a href="#1">Great Escarpment</a>. It encompasses part of the <a href="#1">Namib Desert</a> (considered the world's oldest desert), the <a href="#1" title="Namibia">Naukluft mountain range</a>, and the lagoon at <a href="/wiki/Sandwich_Harbour">Sandwich Harbour</a>.
        </p>
        
        <p>
            The best known area of the park and one of the main visitor attractions in Namibia is <a href="#1">Sossusvlei</a>, a clay pan surrounded by sand dunes, and <a href="#1">Sesriem</a>, a small canyon of the <a href="#1">Tsauchab</a>. The desert research station of <a href="#1">Gobabeb</a> is situated within the park.
        </p>
Figure 4

Text Align Utilities

Apply text-align property to a selector.

Text align left

Text align center

Text align right


        <p class="text-align-left">Text align left</p>
        <p class="text-align-center">Text align center</p>
        <p class="text-align-right">Text align right</p>

        <!-- With Breakpoint Modifier -->

        <p class="text-align-left--lg 👈">Text align right</p>
Figure 5

Text Transform Utilities

Apply text-transform property to a selector.

text transform capitalize

text transform uppercase

text transform lowercase


        <p class="text-transform-uppercase">text transform capitalize</p>
        <p class="text-transform-capitalize">text transform uppercase</p>
        <p class="text-transform-lowercase">text transform lowercase</p>
Figure 6

Text Decoration Utilities

Apply text-decoration property to a selector.

Underline

Line through


        <p class="text-decoration-underline">Underline</p>
        <p class="text-decoration-line-through">Line through</p>
Figure 7

Natura11y's Type Scale

A type scale helps maintain consistent, readable font sizes across your projects and screen sizes. In Natura11y, font sizes follow a simple type scale that you can easily adjust with two properties.

The first property, --base-font-size, controls the smallest font size. The second property, --type-scale, sets the multiplier used to create larger font sizes. Each size is a multiple of the one before it, based on the scale value.

For more details, check out the Related CSS Variables section at the end of this page, which explains how font sizes relate to each other.

To see it in action, use the dropdown options below to explore how the type scale works.

Type Scale Visualizer

Responsive Fonts

You can easily make fonts responsive by using a different type scale inside a @media or @container query (see Figure 9).


        /* Adjust the type scale at a specific screen size */

        @media (max-width: 768px) {
            :root {
                --type-scale: 1.125 👈
            }
        }
Figure 9