Primer CSS Typographic Styles

Last Updated : 19 Apr, 2022

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 Typographic Styles. Primer CSS Typographic Styles is used to change the font weight, styles, and alignment.

CSS Typographic Style Classes:

text-normal: This class is used for writing normal text.
text-italic: This class is used for writing italic text
text-bold: This class is used for writing bold text.
text-semibold: This class is used for semi-bold text.
text-light: This class is used for writing lighter text.
text-uppercase: This class is used for writing text in uppercase.
no-wrap: Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line by using this class.
ws-normal: This class is used for writing normal text.
text-underline: This class is used for writing text with an underline.
no-underline: This class is used for writing text without any underline.
text-emphasized: This class is used for making text emphasized/strong.
text-small: This class is used for making the text smaller.
lead: This class is used for writing text in lead.
text-mono: This class is used for writing text with font-family ‘monospace’.
user-select-none: This is used for no styling to text.

Syntax:

<div class="Typographic-Style-Class">
    ...
</div>

Example 1: In this example, we will write some text and use classes like text-normal, text-italic, text-bold, text-semibold, and text-light.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h3> Typographic Styles</h3> 
  
    <p class="text-normal"> 
        Hi Geek! I am Normal Text 
    </p> 
  
    <p class="text-italic">  
        Hi Geek! I am Italic Text 
    </p> 
  
    <p class="text-bold"> 
        Hi Geek! I am Bold Text 
    </p> 
  
    <p class="text-semibold"> 
        Hi Geek! I am Semi-bold Text 
    </p> 
  
    <p class="text-light"> 
        Hi Geek! I am Light Text 
    </p> 
  
</body> 
  
</html>

Output:

Example 2: In this example, we will write some text and use ws-normal, text-underline, no-underline, text-emphasized, and text-small classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css"
        rel="stylesheet" /> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> Typographic Styles</h3> 
      
    <p class="ws-normal"> 
        Hi Geek! I am a Normal whitespace Text 
    </p> 
  
    <p class="text-underline"> 
        Hi Geek! I am a Text underline Text 
    </p> 
  
    <p class="no-underline"> 
        Hi Geek! I am a No underline Text 
    </p> 
  
    <p class="text-emphasized"> 
        Hi Geek! I am a Emphasized Text 
    </p> 
  
    <p class="text-small"> 
        Hi Geek! I am a Small Text 
    </p> 
  
</body> 
  
</html>