Tachyons Typography System Sans-Serif

Last Updated : 21 Jun, 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 System Sans-Serif using the Tachyons Typography.

Tachyons Typography is an 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.

System San-Serif: It is one of the font styles that is used to create a beautiful website.

Syntax:

<element-name class = "system san-serif | fw | i">Content</element-name>

Tachyons Typography System Sans-Serif Classes:

system san-serif: This class is used to style any text into system-sans-serif 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.

Typeface alphabets: Appearance of alphabets, numerical values, and special character in system san-serif.

Example1: In the below example, we will see how typeface alphabets look using the System San-Sarif font style.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
</head>
 
<body>
    <h1 class="tc">GeeksforGeeks</h1>
    <h3 class="tc">
        Tachyons Typography System Sans-Serif
    </h3>
    <h2 class="system sans-serif tc">
        this is lowercase system-sans-serif text
    </h2>
    <h2 class="system sans-serif tc">
        THIS IS UPPERCASE SYSTEM-SANS-SERIF TEXT
    </h2>
    <h2 class="system sans-serif tc">
        1234567890 !@#$%^&*()
    </h2>
    <h2 class="system sans-serif tc">
        œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷
    </h2> 
</body>
</html>

Output:

Font Weights: We can define any font-weight from 900 to 100 values.

Example 2: In the below example, we will see how to use font-weight.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
</head>
 
<body>
    <h1 class="tc">GeeksforGeeks</h1>
    <h3 class="tc">
        Tachyons Typography System Sans-Serif
    </h3>
    <h2 class="system sans-serif fw4 tc">
        GeeksforGeeks
    </h2>
    <h2 class="system sans-serif fw5 tc">
        GeeksforGeeks
    </h2>
    <h2 class="system sans-serif fw6 tc">
        GeeksforGeeks
    </h2>
    <h2 class="system sans-serif fw7 tc">
        GeeksforGeeks
    </h2>
    <h2 class="system sans-serif fw8 tc">
        GeeksforGeeks
    </h2>
    <h2 class="system sans-serif fw9 tc">
        GeeksforGeeks
    </h2> 
</body>
</html>

Output:

Italic: It is the style of the font that looks like cursive text.

Example 3: In the below example, we will see the use of italic font with a system san-serif font.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> 
</head>
 
<body>
    <h1 class="tc">GeeksforGeeks</h1>
    <h3 class="tc">
        Tachyons Typography System Sans-Serif
    </h3>
    <h2 class="system sans-serif i tc">
        This is System Sans-Serif font-style 
    </h2>
    <h2 class="system sans-serif i tc">
        THIS IS SYSTEM-SANS-SERIF FONT STYLE
    </h2> 
</body>
</html>