Open In App

Tachyons Typography type-scale

Improve
Improve
Like Article
Like
Save
Share
Report

Tachyons type-scale is used to specify the format of the text. For example title of an article is always bold and bigger than the rest of the content in the article.

Syntax:

<element_name class="class_name">...</element_name>

Tachyons Typography type-scale Classes:

  • f-headline: This class is used to define the headline of the page.
  • f-subheadline: This class is used to define the subheadline of the page.
  • f1: This class is used to define the size of the font which is smaller than the subheadline.
  • f2: This class is used to define the size of the font which is smaller than f1.
  • f3: This class is used to define the size of the font which is smaller than f2.
  • f4: This class is used to define the size of the font which is smaller than f3.
  • f5: This class is used to define the size of the font which is smaller than f4.
  • f6: This class is used to define the size of the font which is smaller than f5.

Below examples illustrate the Tachyons Typography type-scale:

Example 1: In the below example we have used the “f-headline” class for the header.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" 
          href=
  
</head>
  
<body>
    <center>
        <h2 style="color:green; text-align:center;">
          GeeksforGeeks
        </h2>
        <h3 style="text-align:center;">
          Tachyons Typography type-scale
        </h3>
  
        <div>
            <h1 class="f-headline">Geeksforgeeks</h1>
            <h1 class="f6">A Portal for all the Geeks</h1>
        </div>
    </center>
</body>
  
</html>


Output:

Tachyons Typography type-scale

Tachyons Typography type-scale

Example 2: In the below code we have used all the classes that are mentioned in the above section.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" 
          href=
  
</head>
  
<body>
    <center>
        <h2>
          GeeksforGeeks</h2>
        <h3>
            Tachyons Typography type-scale
        </h3>
  
        <div>
            <h1 class="f-headline">GeeksforGeeks</h1>
            <h1 class="f-subheadline">GeeksforGeeks</h1>
            <h1 class="f1">GeeksforGeeks</h1>
            <h1 class="f2">GeeksforGeeks</h1>
            <h1 class="f3">GeeksforGeeks</h1>
            <h1 class="f4">GeeksforGeeks</h1>
            <h1 class="f5">GeeksforGeeks</h1>
            <h1 class="f6">GeeksforGeeks</h1>
        </div>
    </center>
</body>
  
</html>


Output:

Tachyons Typography type-scale

Tachyons Typography type-scale

Reference: https://tachyons.io/docs/typography/scale/



Last Updated : 03 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads