Skip to content
Related Articles
Open in App
Not now

Related Articles

Tachyons Typography System Serif

Improve Article
Save Article
  • Last Updated : 21 Jun, 2022
Improve Article
Save Article

Tachyons is a free and open-source toolkit that is used to create a responsive website. Tachyons Typography is the art of arranging types to make written language readable and appealing when displayed.

System Serif is a typeface alphabet that contains different font-weights, having a variety of font-style that are utilized to create a beautiful website. It is one of the font-style in the Typography.

Syntax: 

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

Tachyons Typography System Serif Classes:

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

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

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Tachyons Typography</title>
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="system serif">
            Tachyons Typography System-Serif
        </h3>
        <div style="background-color: #19A974">
            <h3 class="system serif">
                this is lowercase system-serif text
            </h3>
            <h3 class="system serif">
               THIS IS UPPERCASE SYSTEM-SERIF TEXT
            </h3>
            <h3 class="system serif">
                1234567890 !@#$%^&*()
            </h3>
            <h3 class="system serif">
                œ∑´®†¥¨ˆøπ“‘«åß∂ƒ©˙∆˚¬…æΩ≈ç√∫˜µ≤≥÷
            </h3>
        </div>
    </center>
</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>
    <title>Tachyons Typography</title>
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="system serif">
            Tachyons Typography System-Serif
        </h3>
        <p class="system serif fw1">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw2">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw3">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw4">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw5">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw6">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw7">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw8">
            GeeksforGeeks
        </p>
 
 
        <p class="system serif fw9">
            GeeksforGeeks
        </p>
 
 
    </center>
</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 serif font.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Tachyons Typography</title>
    <link rel="stylesheet" href=
</head>
 
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="system serif">
            Tachyons Typography System-Serif
        </h3>
        <h2 class="system serif fw1 i">
            This is System-Serif font-style
        </h2>
        <h2 class="system serif fw2 i">
            THIS IS SYSTEM-SERIF FONT STYLE
        </h2>
    </center>
</body>
</html>


Output:

 

Reference: http://tachyons.io/docs/typography/font-family/system-serif/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!