- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
45 Views
