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 = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </ head > < body > < center > < h1 class = "green" > w3wiki </ 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 = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </ head > < body > < center > < h1 class = "green" > w3wiki </ h1 > < h3 class = "system serif" > Tachyons Typography System-Serif </ h3 > < p class = "system serif fw1" > w3wiki </ p > < p class = "system serif fw2" > w3wiki </ p > < p class = "system serif fw3" > w3wiki </ p > < p class = "system serif fw4" > w3wiki </ p > < p class = "system serif fw5" > w3wiki </ p > < p class = "system serif fw6" > w3wiki </ p > < p class = "system serif fw7" > w3wiki </ p > < p class = "system serif fw8" > w3wiki </ p > < p class = "system serif fw9" > w3wiki </ 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 = "https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> </ head > < body > < center > < h1 class = "green" > w3wiki </ 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/
Contact Us