Tachyons Typography

Last Updated : 21 Jun, 2022

Tachyons are the toolkit that is used to create a responsive website. In this article, we will learn how to include Typography into the webpage using the Tachyons toolkit.

Tachyons Typography is the art of arranging types to make written language readable and appealing when displayed.

Tachyons Typography Components:

Type Scale: This class is used to set the capitalization of text.
Measure: This class is used to measure refers to the length of a line of text.
Line Height / Leading: This class is used to define the height of the line.
Tracking: This class is used to define the spacing between the elements.
Font Weights: This class is used to define font-weight.
Font Style: This class is used to define font style.
Vertical Align: This class is used to define vertical alignment.
Text Align: This class is used to define aligned text.
Text Transform: This class is used to transform text.
Text Decoration: This class is used to decorate any text.
White Space: This class is used to define white space around the element.
Font Families: This class is used to define font style.
Avenir Next: This class is used to set font style to avenir next.
Helvetica: This class is used to set font style to Helvetica.
Roboto: This class is used to set font style to Roboto.
San Francisco: This class is used to set font style to San Francisco.
System Sans-Serif: This class is used to set font style to System Sans-Serif.
Athelas: This class is used to set font style to Athelas.
Baskerville: This class is used to set font style to Baskerville.
Garamond: This class is used to set font style to Garamond.
Georgia: This class is used to set font style to Georgia.
System Serif: This class is used to set font style to System Serif.

Syntax:

<element-name class="Typography Classes ">
    ...
</element-name>

Example 1: In the below example, we will make use of the font-weight classes to define fonts with different weights.

HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Tachyons Typography</title>
   <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
 
   <style>
      body {
         text-align: center;
         margin: 20px;
      }
   </style>
</head>
 
<body class="contain">
   <h1 class="fw1">GeeksforGeeks</h1>
   <h1 class="fw6">GeeksforGeeks</h1>
   <h1 class="fw9">GeeksforGeeks</h1>
</body>
 
</html>

Output:

Example 2: In the below example, we will make use of the text-transform classes to change the style of the font.

HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Tachyons Typography</title>
   <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
 
   <style>
      body {
         text-align: center;
         margin: 20px;
      }
   </style>
</head>
 
<body>
   <h1 class="ttu tracked">geeksforgeeks</h1>
   <h1 class="ttl">GEEKSFORGEEKS</h1>
   <h1 class="ttc">geeksforgeeks</h1>
</body>
 
</html>