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.
Banner Headline
The .banner-headline
utility is named after the large headlines in newspapers that stretch across the top of the front page. This utility is useful for creating a header that is larger or visually distinct from the usual <h1>
tag.
<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
Easily 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
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 VisualizerResponsive 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 👈
}
}