Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Tachyons Typography Avenir Nex

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=
</head>
  
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
        <h3 class="avenir nex">
            A COMPUTER SCIENCE PORTAL FOR GEEKS
        </h3>
    </center>
</body>
  
</html>

Output:

 

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 class="green">
            GeeksforGeeks
        </h1>
          
        <h3 class="avenir nex">
            A COMPUTER SCIENCE PORTAL FOR GEEKS
        </h3>
          
        <button class="avenir nex">
            GeeksforGeeks
        </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/


My Personal Notes arrow_drop_up
Last Updated : 20 Jun, 2022
Like Article
Save Article
Similar Reads
Related Tutorials