Typography • Natura11y
Jump to main contentJump to website footer

There is a newer version of Naturally.

Withered trees under clear blue sky

Photo by Ashim DSilva

Typography

Introduction

Natura11y provides a wealth easily customizable typography styles. Out-of-the-box font sizes are set to a type scale. This makes it easy to customize all font sizes With one variable, instead of having 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

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

Types scales help you create consistent, maintainable, and scalable font sizes across viewports and projects. Natura11y's font sizes use a predefined type scale, which you can customize with just two properties.

The first property, --base-font-size sets the document's smallest font size. The second property, --type-scale is the multiplier (or scale) value. Each font size is set to the previous font size multiplied by the type scale value.

For a closer look at Naturally's type scale, examine Related CSS Variables at the end of this page to see font size relationships.

For a practical visual example, use the following dropdown options to see the type scale work in practice.


              :root {
                --base-font-size: 0.75rem;
                --type-scale: 1.2
            }
Figure 8

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Large

Regular (body)

Small

Responsive Fonts

Easily create responsive topography by wrapping a different scale value in a @media or @container query (Figure 8).


        /* Change the type scale at a breakpoint */

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