Skip to content
Related Articles

Related Articles

Foundation CSS Typography Helpers

View Discussion
Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 07 Sep, 2022
View Discussion
Improve Article
Save Article

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:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet"
    href=
    <script src=
    </script>
</head>
 
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Foundation CSS Typography Helpers</h4>
    <p class="text-right">
        This article is on the topic
        Typography helper classes in Foundation CSS. It
        is published on the GeeksforGeeks platform. This
        article tells us about the different use cases of
        Typography helper classes in Foundation CSS. It also
        has syntax, full working code example and live output.
    </p>
 
 
    <p class="text-center">
        This article is on the topic
        Typography helper classes in Foundation CSS. It
        is published on the GeeksforGeeks platform. This
        article tells us about the different use cases of
        Typography helper classes in Foundation CSS. It also
        has syntax, full working code example and live output.
    </p>
 
 
    <p class="text-justify">
        This article is on the topic
        Typography helper classes in Foundation CSS. It
        is published on the GeeksforGeeks platform. This
        article tells us about the different use cases of
        Typography helper classes in Foundation CSS. It also
        has syntax, full working code example and live output.
    </p>
 
 
</body>
 
</html>


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:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet"
    href=
    <script src=
    </script>
</head>
 
<body style="padding: 16px">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Foundation CSS Typography Helpers</h4>
    <h1 class="subheader">
        This is the subheader class.
    </h1>
    <h2 class="subheader">
        This is the subheader class.
    </h2>
    <h3 class="subheader">
        This is the subheader class.
    </h3>  
    <h4 class="subheader">
        This is the subheader class.
    </h4>  
    <h5 class="subheader">
        This is the subheader class.
    </h5>  
    <h6 class="subheader">
        This is the subheader class.
    </h6>  
</body>
 
</html>


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:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
 
<body style="padding: 16px">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Foundation CSS Typography Helpers</h4>
     
<p>
        <span class="lead">This article </span>is on the topic
        Typography helper classes in Foundation CSS. It is
        published on the GeeksforGeeks platform. This article
        tells us about the different use cases of Typography
        helper classes in Foundation CSS.It also has syntax,
        full working code example and live output.
    </p>
 
</body>
 
</html>


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:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
 
<body style="padding: 16px">
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
    <h4>Foundation CSS Typography Helpers</h4>
    <ul class="no-bullet">
        <li>C</li>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
    </ul>
    <ol class="no-bullet">
        <li>Java</li>
        <li>JavaScript</li>
        <li>Python</li>
        <li>CSS</li>
    </ol>
</body>
 
</html>


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:

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <link rel="stylesheet" href=
    <script src=
    </script>
</head>
 
<body style="padding: 16px">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h4>Foundation CSS Typography Helpers</h4>
    <h1 class="h1">Heading 1</h1>
    <h2 class="h1">Heading 2</h2>
    <h3 class="h4">Heading 3</h3>
    <h4 class="h3">Heading 4</h4>
     
    <p class="h1">Para 1</p>
 
    <p class="h3">Para 2</p>
 
    <p class="h4">Para 3</p>
 
    <p class="h5">Para 4</p>
 
</body>
 
</html>


Output:

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!