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.
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>
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>
Font Size Utilities
Change the font-size of text, buttons, navigation, entire forms, or any DOM element with Natura11y's font size utilities.
<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>
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>
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>
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>
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>
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
}
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 👈
}
}