Typography is a feature of Primer for styling and formatting the text content. It is used to create headings, subheadings, paragraphs, pull quotes, add more design-oriented font styles, and much more. It’s responsive, but on a smaller scale, and the headlines are set in the marketing typeface.
Primer CSS Typography has three types of utilities, all of them are mentioned and briefly described below.
Primer CSS Typography classes:
- Heading utilities: This is used to create different types of headings, there are seven types of headings for each type we have individual classes like h0-mktg, h1-mktg, h2-mktg, h3-mktg, h4-mktg, h5-mktg, and h6-mktg.
- Body content utilities: This is used to create different font size body elements, there are seven types of headings for each type we have individual classes like f0-mktg, f1-mktg, f2-mktg, f3-mktg, f4-mktg, f5-mktg, and f6-mktg.
- Typographic utilities: This is meant to be used in addition to Primer CSS’s core utilities.
Syntax:
<p class="Typography-utilities-types-class">...</p>
Example 1: In this example, we will see the heading utilities of Primer CSS Typography.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Typography</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="color-fg-open">GeeksforGeeks</h1>
<strong>Primer CSS Typography</strong>
</center>
<div>
<p class="h0-mktg m-1 border">Primer CSS: h0-mktg class</p>
<p class="h1-mktg m-1 border">Primer CSS: h1-mktg class</p>
<p class="h2-mktg m-1 border">Primer CSS: h2-mktg class</p>
<p class="h3-mktg m-1 border">Primer CSS: h3-mktg class</p>
<p class="h4-mktg m-1 border">Primer CSS: h4-mktg class</p>
<p class="h5-mktg m-1 border">Primer CSS: h5-mktg class</p>
<p class="h6-mktg m-1 border">Primer CSS: h6-mktg class</p>
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will see the body content utilities of Primer CSS Typography.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Typography</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="color-fg-open">GeeksforGeeks</h1>
<strong>Primer CSS Typography</strong>
</center>
<div>
<strong>f0-mktg:</strong>
<p class="f0-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f1-mktg:</strong>
<p class="f1-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f2-mktg:</strong>
<p class="f2-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f3-mktg:</strong>
<p class="f3-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f4-mktg:</strong>
<p class="f4-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f5-mktg:</strong>
<p class="f5-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>f6-mktg:</strong>
<p class="f6-mktg Box m-2">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will see the typographic utilities of Primer CSS Typography.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS Typography</title>
<link rel="stylesheet" href=
</head>
<body>
<center>
<h1 class="color-fg-open">GeeksforGeeks</h1>
<strong>Primer CSS Typography</strong>
</center>
<div>
<strong>pullquote:</strong>
<p class="pullquote">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
<strong>Without pullquote:</strong>
<p class="">
We welcome you to the platform, where we consistently
strive to offer the best of education.
</p>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/marketing-type#typography