Tachyons Typography System Serif
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/
Last Updated :
21 Jun, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...