Primer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.
One such very important utility present in Primer CSS is Typography.
In this article, we will learn about the Typography utility in Primer CSS.
Typography Utilities
Typography utilities in Primer CSS are designed so that it works in combination with line-height utilities to make them much more sensible and useful to use. Typography utilities also exist as variables that we can use in components or Custom CSS.
Below given is a table that shows the relationship between scale, the font size on mobile, font size on desktop, and line-height.
| Scale | Font size: mobile | Font size: desktop | 1.25 line-height | 1.5 line height |
| 00 | 40px | 48px | 60 | 72 |
| 0 | 32px | 40px | 50 | 60 |
| 1 | 26px | 32px | 40 | 48 |
| 2 | 22px | 24px | 30 | 36 |
| 3 | 18px | 20px | 25 | 30 |
| 4 | 16px | 16px | 20 | 24 |
| 5 | 14px | 14px | 17.5 | 21 |
| 6 | 12px | 12px | 15 | 18 |
Typography Utilities:
-
Heading Utilities: We can add the classes from h1 to h2 to change the font style of any element to the heading font styles.
This is very useful in situations where we have to change the font style by keeping the markup to be semantically correct. Thus, keeping the hierarchy of the page appropriate. - Type Scale Utilities: We can use the Primer CSS type scale classes like f1 to f6 for changing the existing font size of the element. We can also make the inline text lightweight according to our needs by using the classes f0-light to f3-light.
- Line Height Utilities: We can change the line-height of the paragraph using the Primer CSS classes like lh-condensed.This reduces the line height between two lines of the paragraph. We also have responsive line-height class variants like “.lh-sm-condensed” which reduces the line-height of the paragraph for medium screens or larger.
- Typographic styles: In Primer CSS, we have numerous classes for different typographic styles like bold text, italic, no-wrap, upper case, emphasized, and so on.
-
Word breaks: In Primer CSS, we have two different classes for word breaks.
- wb-break-word: This class when added to any element makes the element break-word if the line width is less than the length of the word after wrapping.
- wb-break-all: This class when added to any element makes the element break-word irrespective of whether it is shorter or longer than the line width.
- Text Alignment: In Primer CSS, we can align the text of any element using the different classes like text-left, text-right, and text-center
- Responsive Text Alignment: In Primer CSS, we can align the text of any element responsively according to the width of the screen in which it is viewed ( large, small, or medium) using the responsive text-align classes like text-sm-center, text-lg-left, and many others.
- Removing Bullets: We can remove the bullets from the ordered list by adding the list-style–none class to the <ul> tag of the ordered list in Primer CSS.
Example 1: In this example, we have created header and text of different sizes by using the different header and typography utility classes.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=`,initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body
{
margin-left:20px;
margin-right:20px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksforGeeks</h1>
<h2>Primer CSS Typography Utilities</h2>
<u><h3>Header Utilities Class</h3></u>
<p class="h2">This is a text with class h2</p>
<p class="h3">This is a text with class h3</p>
<p class="h4">This is a text with class h4</p>
<p class="h5">This is a text with class h5</p>
<p class="h6">This is a text with class h6</p>
<br>
<u><h3>TypeScale Utilities Class</h3></u>
<p class="f2">This is a text with class f2</p>
<p class="f3">This is a text with class f3</p>
<p class="f4">This is a text with class f4</p>
<p class="f5">This is a text with class f5</p>
<p class="f6">This is a text with class f6</p>
</body>
</html>
|
Output:
Example 2: The following code demonstrates three paragraphs, with different text alignments.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<style>
body {
margin-left: 20px;
margin-right: 20px;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Primer CSS Typography Utilities</h2>
<u>
<h3>Text Alignment Utilities Class</h3>
</u>
<h4>Center aligned text </h4>
<p class="text-center">
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer
CSS. This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
</p>
<h4>Left aligned text </h4>
<p class="text-left">This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.This is a sample paragraph
for displaying different text alignment
class in Primer CSS.
</p>
<h4>Right aligned text </h4>
<p class="text-right">
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer
CSS.This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment class in Primer CSS.
This is a sample paragraph for displaying
different text alignment
class in Primer CSS.
</p>
<br>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/typography