Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Installation: To use Primer CSS in your web page, you can install it from npm
npm install --save @primer/cssOr include the CDN link in your HTML:
<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
.h1 { /* Largest heading style */ }
.h2 { /* Second largest heading style */ }
.h3 { /* Third largest heading style */ }
.h4 { /* Fourth largest heading style */ }
.h5 { /* Fifth largest heading style */ }
.h6 { /* Smallest heading style */ }
Example: Basic Heading Utilities
<!DOCTYPE html>
<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;
}
.main-title {
color: orange;
text-decoration: underline;
font-family: Calibri;
}
</style>
</head>
<body>
<h1 class="main-title">Primer CSS Typography Heading Utilities</h1>
<div class="container">
<p>Following we have different classes of heading utilities as provided by Primer CSS:</p>
<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>
The page displays headings in decreasing font sizes from h1 (largest) to h6 (smallest), demonstrating how Primer CSS heading utility classes override default element styling.
Example: Overriding Default Heading Elements
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
<!DOCTYPE html>
<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>
The heading elements display in reverse order sizes - the h1 element appears smallest (h6 class) while the h6 element appears largest (h1 class), demonstrating how utility classes override semantic heading sizes.
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.
Marketing Utilities Syntax
.h0-mktg { /* Extra large marketing heading */ }
.h1-mktg { /* Large marketing heading */ }
.h2-mktg { /* Medium marketing heading */ }
.h3-mktg { /* Small marketing heading */ }
.h4-mktg { /* Extra small marketing heading */ }
.h5-mktg { /* Tiny marketing heading */ }
.h6-mktg { /* Smallest marketing heading */ }
Example: Marketing Heading Utilities
In Marketing Typography Utilities, we have 7 heading classes. They are h0-mktg to h6-mktg. Let us see an example
<!DOCTYPE html>
<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: sans-serif;
}
</style>
</head>
<body>
<h1 class="heading">Primer CSS Marketing Typography Heading Utilities</h1>
<div class="container">
<p>Following we have different classes of marketing heading utilities as provided by Primer CSS:</p>
<p class="h0-mktg">This is the heading of class "h0-mktg"</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>
The page displays marketing headings with bolder, more prominent typography designed for marketing content. The h0-mktg class provides an extra-large size beyond traditional h1, perfect for hero sections and landing pages.
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.
186 Views
