Skip Navigation

Photo by Ashim DSilva  on Unsplash

Typography

Natura11y provides a wealth easily customizable typography styles.

Banner Headline

The .banner-headline utility is named after the large headline in a newspaper that stretches across the top of the front page. It is useful for styling a header larger (or visually different) than the typical <h1> heading.

<h1 class="banner-headline">
    Banner Headline
</h1>
Figure 1

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.

  • Extra Large
  • Large
  • Regular
  • Medium
  • Small
<p class="font-size-xl">
    Extra Large
</p>
<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>
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>
Figure 4

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 4

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 4

Related CSS Variables

Further customize Typography by redefining any of their related CSS variables as shown below.

:root {
    --body-font-family: Source Sans Pro;
    --body-font-weight-normal: 400;
    --body-font-weight-medium: 600;
    --body-font-weight-bold: 700;
    --body-font-size: 22px;
    --body-line-height: 1.5;
    --font-size-sm: calc(var(--body-font-size) * 0.7);
    --font-size-md: calc(var(--body-font-size) * 0.8);
    --font-size-lg: calc(var(--body-font-size) * 1);
    --font-size-xl: calc(var(--body-font-size) * 1.4);
    --h1-font-size: calc(var(--body-font-size) * 3);
    --h2-font-size: calc(var(--body-font-size) * 2.2);
    --h3-font-size: calc(var(--body-font-size) * 1.8);
    --h4-font-size: calc(var(--body-font-size) * 1.6);
    --h5-font-size: calc(var(--body-font-size) * 1.4);
    --h6-font-size: calc(var(--body-font-size) * 1.2);
    --header-line-height: 1.125;
    --banner-headline-font-size-sm: calc(var(--body-font-size) * 2.75);
    --banner-headline-font-size-lg: calc(var(--body-font-size) * 2.75);
    --paragraph-margin-bottom: 1.25em;
}