Tachyons Typography Avenir Nex
In this article, we will learn how to style text in Avenir Nex using the Tachyons toolkit. Tachyons toolkit is free and open-source that is used to create a responsive website. Avenir Nex is a font style that is used to style the text.
Syntax:
<element-name class="avenir nex">...</element-name>
Used Classes:
- avenir nex class: This class is used to style text in Avenir Nex.
Example 1:
HTML
<!DOCTYPE html> <html> <head> <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="avenir nex"> A COMPUTER SCIENCE PORTAL FOR Beginner </h3> </center> </body> </html> |
Output:
Example 2:
HTML
<!DOCTYPE html> <html> <head> <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="avenir nex"> A COMPUTER SCIENCE PORTAL FOR Beginner </h3> <button class="avenir nex"> w3wiki </button> <button class="avenir nex">About</button> <button class="avenir nex">Practice</button> <button class="avenir nex">DSA</button> </center> </body> </html> |
Output:
Reference: https://tachyons.io/docs/typography/font-family/avenir/
Contact Us