Primer CSS is a free open-source CSS framework that is built upon systems that create 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 highly reusable and flexible. It is created with GitHub’s design system.
In this article, we will learn about Typography Type Scale Utility. Typography Type Scale Utility is used to change the font-size . It uses multiple classes from f1 to f6, where f1 provides the maximum font-size and f6 provides the least font-size.
Class:
- f*: The classes vary from f1 to f6 depending on the required font size.
Syntax:
<p class="f*" >
Content
</p>* can be substituted with any number from 1 to 6 based upon need.
Let’s learn about these classes using an Example.
Example 1: We will write some text here, and alter its font-size using type scale utility classes.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Typography Type Scale Utility</h3>
</div>
<p class="f1">GeeksforGeeks</p>
<p class="f2">GeeksforGeeks</p>
<p class="f3">GeeksforGeeks</p>
<p class="f4">GeeksforGeeks</p>
<p class="f5">GeeksforGeeks</p>
<p class="f6">GeeksforGeeks</p>
</body>
</html>
|
Output:
Example 2: In this example, we will learn about Lighter font-weight utilities. These classes reduce the legibility of text, particularly at small font sizes, so the scale only goes down to f3 at 20px.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Typography Type Scale Utility</h3>
</div>
<h1 class="f00-light">GeeksforGeeks</h1>
<h1 class="f0-light">GeeksforGeeks</h1>
<h1 class="f1-light">GeeksforGeeks</h1>
<h1 class="f2-light">GeeksforGeeks</h1>
<h1 class="f3-light">GeeksforGeeks</h1>
</body>
</html>
|
Output:
Reference: https://primer.style/css/utilities/typography#type-scale-utilities