Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 developers to style the written content of websites. By applying these utility classes to HTML elements, we can easily customize the visual appearance of our applications. This article discusses the type scale utilities offered by Primer CSS and how to use them in webpages.
What are Type Scale Utilities?
Type scale utilities are a collection of properties that help create proper typography throughout your website. They consist of a series of pre-defined, built-in font sizes and line heights which can be applied to different HTML elements on your web page.
These utilities properly estimate proportional spacing and size between text elements so they look consistent across the website, making it easy to read and attractive for users.
Installation: Install Primer CSS using npm:
npm install --save @primer/cssOr use the CDN link in your HTML:
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
Font Size Utilities
Primer CSS provides 6 font size classes .f1 through .f6 with decreasing sizes.
Syntax
.f1 { /* Largest font size */ }
.f2 { /* Second largest */ }
.f3 { /* Medium large */ }
.f4 { /* Medium */ }
.f5 { /* Small */ }
.f6 { /* Smallest */ }
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
.container {
margin: 20px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Primer CSS Typography Type Scale Utilities</h1>
<p class="f1">This is f1 class - Largest font size</p>
<p class="f2">This is f2 class - Large font size</p>
<p class="f3">This is f3 class - Medium large font size</p>
<p class="f4">This is f4 class - Medium font size</p>
<p class="f5">This is f5 class - Small font size</p>
<p class="f6">This is f6 class - Smallest font size</p>
</div>
</body>
</html>
Six paragraphs are displayed with progressively decreasing font sizes from f1 (largest) to f6 (smallest), demonstrating the type scale hierarchy.
Font Weight Utilities
For light font weights, Primer CSS allows a limited range down to f3 (20px) to maintain text legibility. We have 5 light weight classes available.
Syntax
.f0-light { /* Extra large with light weight */ }
.f00-light { /* Largest with light weight */ }
.f1-light { /* Large with light weight */ }
.f2-light { /* Medium large with light weight */ }
.f3-light { /* Medium with light weight */ }
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
.container {
margin: 20px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Font Weight Utilities</h1>
<p class="f00-light">This is f00-light class</p>
<p class="f0-light">This is f0-light class</p>
<p class="f1-light">This is f1-light class</p>
<p class="f2-light">This is f2-light class</p>
<p class="f3-light">This is f3-light class</p>
</div>
</body>
</html>
Five paragraphs are displayed with different font sizes and light font weights, showing decreasing sizes while maintaining readability.
Line Height Utilities
Line height utilities control the vertical spacing between lines of text. Primer CSS provides 3 main line height classes
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
.container {
margin: 20px;
width: 60%;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
}
p {
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Line Height Utilities</h1>
<p class="lh-default">This paragraph uses lh-default class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="lh-condensed">This paragraph uses lh-condensed class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="lh-condensed-ultra">This paragraph uses lh-condensed-ultra class. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</body>
</html>
Three bordered paragraphs are displayed with different line heights: default spacing, condensed spacing, and ultra-condensed spacing, showing the visual difference in line spacing.
Note The lh-0 class sets vertical line height to 0 for elements that don't contain text.
Marketing Type Scale Utilities
Marketing type scale utilities are designed for promotional materials like landing pages and advertisements, featuring slightly different font sizes and weights optimized for marketing content.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
<style>
.container {
margin: 20px;
}
.heading {
color: brown;
text-decoration: underline;
font-family: sans-serif;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="heading">Marketing Typography Type Scale</h1>
<p class="f0-mktg">This is f0-mktg class - Marketing largest</p>
<p class="f1-mktg">This is f1-mktg class - Marketing large</p>
<p class="f2-mktg">This is f2-mktg class - Marketing medium large</p>
<p class="f3-mktg">This is f3-mktg class - Marketing medium</p>
<p class="f4-mktg">This is f4-mktg class - Marketing small</p>
<p class="f5-mktg">This is f5-mktg class - Marketing smaller</p>
<p class="f6-mktg">This is f6-mktg class - Marketing smallest</p>
</div>
</body>
</html>
Seven paragraphs are displayed using marketing-specific typography classes, showing font sizes optimized for promotional and marketing content with slightly different proportions than regular type scale.
Conclusion
Primer CSS type scale utilities provide a comprehensive set of typography classes for both regular content and marketing materials. These utilities ensure consistent, professional-looking typography across your website while saving development time through pre-defined font sizes, weights, and line heights.
256 Views
