Primer CSS Typography Type scale Utilities Last Updated : 12 Apr, 2022 Comments Improve Suggest changes Like Article Like Report 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. HTML <!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. HTML <!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 Comment More infoAdvertise with us Next Article Primer CSS Typography Type scale Utilities N nikitamehrotra99 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Primer CSS Typography Type Scale 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 2 min read Primer CSS Typographic Utilities Primer CSS is a free open-source CSS framework based on principles that lay the groundwork for basic design components including spacing, font, and color. This strategy ensures that our patterns are consistent and compatible with one another. Object-Oriented CSS principles, functional CSS, and BEM a 4 min read Primer CSS Typography Heading Utilities 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 2 min read Primer CSS Typographic Styles 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 3 min read Primer CSS Typography Variables In this article, we will learn how to add typography variables to the website using Primer CSS. Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elemen 3 min read Primer CSS Typography List Styles 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 2 min read Primer CSS Typography 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 stead 5 min read Primer CSS Typography Line Height Styles 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 4 min read Primer CSS Typography Text Alignment 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 2 min read Primer CSS Spacing Scale Primer CSS is a free open-source CSS framework based on technologies that provide insights into important style aspects like space, font, and color. This meticulous methodology ensures that its patterns are both stable and compatible. It's mostly practical and adaptable. It was created using the Git 3 min read Like