Tachyons Typography Athelas

Last Updated : 16 Oct, 2022

Tachyons is a free and open-source CSS toolkit that is used to create a responsive website.

In this article, we will see how to style the font in the system Sans-Serif using the Tachyons Typography.

Tachyons Typography is the art of arranging types to make written language readable and appealing when displayed. It is also used to change the width as well as the height of any text and with the help of this tool, we can make any website beautiful.

Athelas: It is one of the font styles that is used to create a beautiful website.

Syntax:

<element-name class = "athelas | fw | i">Content</element-name>

Tachyons Typography System Athelas Classes:

Athelas: This class is used to style any text into Athelas style.
fw: This class is used to set the font weight of the text.
i: This class is used to set the font style to italic.

Example 1: In the below example, we will see how typeface alphabets look using the Athelas font style.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href= 
        "https://unpkg.com/tachyons/css/tachyons.min.css" /> 
    <style> 
        h2{ 
            margin-left:300px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="tc green">GeeksforGeeks</h1> 
        <h3 class="tc"> 
            A computer science portal for geeks 
        </h3> 
    </center> 
    <h2 class="w1 tc athelas">Athelas</h2> 
</body> 
</html>

Output:

Example 2: In the below example, we will see how typeface alphabets look using the Athelas font style.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1" /> 
    <link rel="stylesheet" href= 
        "https://unpkg.com/tachyons/css/tachyons.min.css" /> 
    <style> 
        h2{ 
            margin-left:300px; 
        } 
    </style> 
</head> 
<body> 
    <center> 
        <h1 class="tc green">GeeksforGeeks</h1> 
        <h3 class="tc"> 
            A computer science portal for geeks 
        </h3> 
    </center> 
    <h2 class="w1 tc athelas i">Athelas</h2> 
</body> 
</html>