Foundation CSS Typography Helpers

Foundation CSS is one of the most popular front-end frameworks used by developers to design the website. It has several useful components to make the website look much more professional and user-friendly. One such component is the Typography helper. In every website, typography is an essential thing. The Typography helper component has certain classes that help us to scaffold certain typographic styles better. In this article, we will learn about the Typography Helper component in Foundation CSS.

1. Text alignment: We can change the text alignment of an element by adding the text alignment classes. We can also add breakpoints in front of the text alignment classes to make the text-align at specific screen sizes. For example: If we add .small-text-center class to a <p></p> element. This will align the text of the <p> element to the center when it is opened in small size screens and the rest of the time, it will have default alignment.

Typography Helpers Text alignment Classes:

• text-left: This class is used to align the text to the left.
• text-center: This class is used to align the text to the center.
• text-right: This class is used to align the text to the right.

Syntax:

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

Example:

Output:

2. Sub-header: We can lighten up the header by adding the sub-header class to the header element.

Typography Helpers Sub-header Classes:

• sub-header: This class is used to add a subheader to the header element.

Syntax:

<h1 class="subheader">...</h1>
<h2 class="subheader">...</h2>
<h3 class="subheader">...</h3>

Example:

Output:

3. Lead Paragraph: We can make the font size slightly larger than the rest by adding the .lead class to the <p> tag or <span> tag.

Typography Helpers Lead Paragraph Classes:

• lead: This class is used to make the font size slightly larger.

Syntax:

<p class="lead">...</p>
<span class="lead>...</span>

Example:

Output:

4. Un-bulleted List: We can remove the bullets from the <ul> list and the number from the <ol> lists by adding the class name no-bullets to the <ul> and the <ol> tag.

Typography Helpers Un-bulleted List Classes:

• no-bullets: This class is used to remove the bullets from unordered or ordered lists.

Syntax:

<ul class="no-bullets">
    ...
</ul>
<ol class="no-bullets">
    ...
</ol>

Example:

Output:

5. Typescale

We can override the existing default font size of an element using the header classes of Foundation CSS. For example, there is a paragraph on our website and we want to make its font size equal to that of the h2 class, then we can add the header class ‘.h2’ to it. Another usage case is that suppose we have used a <h4> tag but we want to resize it to that of h1, we can add the class ‘.h1’ to element.

Syntax:

• For Headers:

<h1 class="h1">...</h1>
<h2 class="h1">...</h2>
<h3 class="h4">...</h3>
<h4 class="h3">...</h4>

• For Text:

<p class="h1">...</p>
<p class="h3">...</p>
<p class="h4">...</p>
<p class="h5">...</p>

Example:

Output:

Reference: https://get.foundation/sites/docs/typography-helpers.html