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
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
Reference: https://tachyons.io/docs/typography/scale/