Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Primer CSS Typography Type Scale Utilities
Primer CSS is a CSS framework collectively developed by various GitHub contributors. One of its components is typography which enables the developers to style the written content of the website. By applying these utility classes to the HTML elements, we can easily customize the visual appearance of our application. Here, in this article, we will discuss about the type scale utilities offered by Primer CSS and how to use them in our webpage.
What are Type Scale Utilities?
Type scale utilities are collection of properties which help in creating proper typography throughout your website. It consists of series of pre-defined in-built font sizes and line heights which can be applied to different HTML elements on your web page.
Basically, it properly estimates the proportional spacing and size between the text elements so that they look consistent over the website. This makes the website easy to read and attractive for the users.
Font Size Utilities
Before using any of the classes in Primer CSS, we must install it from npm −
npm install --save @primer/css
or use the CDN link in the HTML code −
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
In type scale utilities, firstly, we have font size of the text. For this, we have 6 classes. They are .f1 – .f6 with decreasing size.
Syntax
<div class= "f1"> </div>
Example
<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 Typography Type Scale Utilities </h1>
<div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1"> This is the text. It displays class "f1" </p>
<p class="f2"> This is the text. It displays class "f2" </p>
<p class="f3"> This is the text. It displays class "f3" </p>
<p class="f4"> This is the text. It displays class "f4" </p>
<p class="f5"> This is the text. It displays class "f5" </p>
<p class="f6"> This is the text. It displays class "f6" </p>
</div>
</body>
</html>
Here, we have displayed text in f1-f6 classes of type scale utilities.
Font Weight Utilities
For light font weights, Primer CSS allows a limited range. We can reduce the font weight up to f3 (which is 20px). This is because as the size decreases, lighter font weights makes the text less legible. Hence, we have the only 5 classes for the same.
Syntax
<div class= "f3-light"> </div>
Example
<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 Typography Type Scale Utilities </h1>
<div class="container"> Following we have different classes of type scale utilities as provided by Primer CSS. <p class="f1-light"> This is the text. It displays class "f1-light" </p>
<p class="f2-light"> This is the text. It displays class "f2-light" </p>
<p class="f3-light"> This is the text. It displays class "f3-light" </p>
<p class="f0-light"> This is the text. It displays class "f0-light" </p>
<p class="f00-light"> This is the text. It displays class "f00-light" </p>
</div>
</body>
</html>
Line Height Utilities
We can change the line height between the elements by using these classes. We have 3 classes which are displayed in the following example.
Example
<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;
}
.container {
width: 30%;
}
</style>
</head>
<body>
<h1 class="heading"> Primer CSS Typography Type Scale Utilities </h1> Following we have different classes of type scale utilities as provided by Primer CSS. <div class="container">
<p class="lh-default"> This is the text. It displays class "lh-default". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
<p class="lh-condensed"> This is the text. It displays class "lh-condensed". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
<p class="lh-condensed-ultra"> This is the text. It displays class "lh-condensed-ultra". apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado. </p>
</div>
</body>
</html>
Here, we have paragraphs of different line heights.
Note − We have another class lh-0 which sets the vertical line height to be 0 for the desired element. This can be used for elements which do not contain any text.
Marketing Type Scale Utilities
Type scale utilities for marketing materials like product landing pages, advertisement, etc., have slightly different font size and font weight.
Example
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<style>
* {
margin: 10px;
padding: 0;
letter-spacing: 1px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
</style>
<body>
<div class="container">
<h1 class="heading"> Primer CSS Marketing Typography Type Scale Utilities </h1> Following we have different classes of marketing type scale utilities as provided by Primer CSS. <p class="f0-mktg"> This is the text. It displays class "f0-mktg" </p>
<p class="f1-mktg"> This is the text. It displays class "f2-mktg" </p>
<p class="f2-mktg"> This is the text. It displays class "f2-mktg" </p>
<p class="f3-mktg"> This is the text. It displays class "f3-mktg" </p>
<p class="f4-mktg"> This is the text. It displays class "f4-mktg" </p>
<p class="f5-mktg"> This is the text. It displays class "f5-mktg" </p>
<p class="f6-mktg"> This is the text. It displays class "f6-mktg" </p>
</div>
</body>
</html>
Conclusion
In this article, we have learnt about the type scale utilities provided by Primer CSS for websites as well as marketing products like landing pages. Using these classes saves a lot time and make your website look professional and consistent.
119 Views
