Primer CSS Typography Heading Utilities


Typography is an essential component during creation of websites and applications. It is primarily used to display majority of the content for the users. It determines the tone and mood of the content of your website.

So, it is very likely that it affects the overall user experience. Headings in any website is the center of attraction for any user. So, it is very important that it looks perfectly fine to increase the readability of your website or application. In this article, we will use Primer CSS to create headings.

Primer CSS

Primer CSS is a versatile and popular CSS framework which provides easy to use typography features for the developers. It is an open-source created by GitHub design system. Using the typography utilities will enhance your visual appearance and consistency of the website.

The Typography Heading Utilities allows the developers to select the font size, color and weight of the heading according to the requirement.

To use Primer CSS in your web page, you can install it from npm −

npm install --save @primer/css

In this article, we have used the CDN link.

<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet">

Typography Heading Utilities

The Typography Heading Utilities is a collection of pre-defined in-built classes which enables the developers to style the headings for their websites or application. You can add these classes to any element (except <img>) and convert it to a heading of your desired style.

As we already know, we have 6 heading classes of different sizes. It starts from h1 to h6. The size decreases in the same order.

Syntax

<div class= "h1"> </div>

Example

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      h1 {
         color: orange;
         text-decoration: underline;
         font-family: Calibri;
      }
   </style>
</head>
<body>
   <h1> Primer CSS Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of heading utilities as provided by Primer CSS. <p class="h1"> This is the heading of class "h1" </p>
      <p class="h2"> This is the heading of class "h2" </p>
      <p class="h3"> This is the heading of class "h3" </p>
      <p class="h4"> This is the heading of class "h4" </p>
      <p class="h5"> This is the heading of class "h5" </p>
      <p class="h6"> This is the heading of class "h6" </p>
   </div>
</body>
</html>

In this example, we have shown text in h1-h6 classes of the Heading Utilities.

Example

If you apply these classes to any heading element (such as <h1>, <h2> etc.,), it will follow the style rule of the classes. This implies that the font size of the respective heading utility class will be followed. Let’s understand this with and example.

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: Georgia;
      }
   </style>
</head>
<body>
   <h1 class="heading"> Primer CSS Typography Heading Utilities </h1>
   <div class="container">
      <h1 class="h6"> This is h1 element with class "h6" </h1>
      <h2 class="h5"> This is h2 element with class "h5" </h2>
      <h3 class="h4"> This is h3 element with class "h4" </h3>
      <h4 class="h3"> This is h4 element with class "h3" </h4>
      <h5 class="h2"> This is h5 element with class "h2" </h5>
      <h6 class="h1"> This is h6 element with class "h1" </h6>
   </div>
</body>
</html>

Here, we have applied h6 class to <h1> element. But as we can see the font size is according to the class h6. Similarly, we have h2, h3, h4, h5 and h6 elements.

Marketing Typography Heading Utilities

Marketing Typography Utilities in Primer CSS enables the marketing developers and designers to create visually attractive brand marketing content such as product landing pages, advertisements etc.,

It represents the brand identity and vision for the customers. Primer CSS has a set of classes defined for such purposes also. These are responsive but are on slightly different scale. It is followed according to the defined marketing font.

Syntax

<div class= "h0-mktg"> </div>

Example

In Marketing Typography Utilities, we have 7 heading classes. They are h0-mktg to h6-mktg. let us see an example −

<html>
<head>
   <link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
   <style>
      CSS code * {
         margin: 10px;
         padding: 0;
         letter-spacing: 1px;
      }

      .heading {
         color: brown;
         text-decoration: underline;
         font-family: sans-serif;
      }
   </style>   
</head>
<body>
   <h1 class="heading"> Primer CSS Marketing Typography Heading Utilities </h1>
   <div class="container"> Following we have different classes of marketing heading utilities as provided by Primer CSS. <p class="h0-mktg"> This is the heading </p>
      <p class="h1-mktg"> This is heading of class "h1-mktg" </p>
      <p class="h2-mktg"> This is the heading of class "h2-mktg" </p>
      <p class="h3-mktg"> This is the heading of class "h3-mktg" </p>
      <p class="h4-mktg"> This is the heading of class "h4-mktg" </p>
      <p class="h5-mktg"> This is the heading of class "h5-mktg" </p>
      <p class="h6-mktg"> This is the heading of class "h6-mktg" </p>
   </div>
</body>
</html>

In this example, we have shown text in h0.mktg -h6.mktg classes of the Marketing Heading Utilities in Primer CSS.

Conclusion

In this article, we have discussed about Primer CSS Typography Heading Utilities and how it simplifies the work of developers. It makes web designing easier with the use of pre-defined classes. We have also seen about Marketing Typography which slightly different. It helps us in creating visually appealing product landing pages as well as advertisements. With various responsive design features, the developers produce high-quality and user-friendly websites with increased readability.

Updated on: 28-Apr-2023

61 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements