**Typography** is the art of arranging text on a page. 

Let's start by making an​ HTML file and adding the following code to introduce a heading and some text in HTML.

<!DOCTYPE html>
<html>
<head>
<title>CSS typography</title>

</head>
    <body>
        <main class = "container">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <p>This is another paragraph</p>
            <p> Welcome to Educative </p>
        </main>
    </body>
</html>

codemirror

Now, let's centralize the text a little. We can do that by introducing a new module under `<title>` named `<style>` to enforce styling changes in our HTML text. You can see that our main text has a `container`​class, therefore, we introduce
`.container` to specify some features of text alignment.

<!DOCTYPE html>
<html>
<head>
<title>CSS typography</title>
    <style>
        .container{
        margin: 0 auto;
        max-width: 480px;
        padding: 60px 60px;
        text-align: center;
        }
    </style>
</head>
    <body>
        <main class = "container">
            <h1>This is a Heading</h1>
            <p>This is a paragraph.</p>
            <p>This is another paragraph</p>
            <p> Welcome to Educative </p>
        </main>
    </body>
</html>




Now, lets add a heading (`<h1>`) and paragraph font (`<p>`). Here we have three main features:
* **`font-size`** refers to the user-defined size of the text
* **`color`** refers to the color of the text
* **`font-family`** refers to the style of the text

Just as in Microsoft Word, the font styles "Arial," "Calibri," "Times," and "New Roman" all refer to the `font-family` of a text. In the `font-family` column for `h1`, we have given it `arial` and `sans-serif`. 

# Let's understand what these values mean

Imagine that we ask the web page to use the `arial` font style for the text. However, the web page does not support this font; so, it will move on to the next font style which, in this case, is `sans serif`. By default, `sans-serif` chooses any available font; therefore, it is good practice to write `sans-serif` at the end when choosing `font-family`.     

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.container{
margin: 0 auto;
max-width: 480px;
padding: 36px 24px;
text-align : center;
}

h1{
font-family: arial, sans-serif;
font-size: 60px;
color: red;
}

p{
font-family: monospace;
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<main class = "container">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph</p>
<p> Welcome to Educative </p>
</main>
</body>
</html>

Let's look at some other typographical features. These include:

**`font weight: bold`**: This can be used when we need to turn the text of a specific text to bold. 

**`word-spacing: 5px`**: Sometimes a user may want to increase the space between words.

**`letter-spacing: 2px`**: Increase the spacing between the letters. 

**`text-indent: 60px`**: Introduce indentation at the start of a paragraph. 

**`text-transform: uppercase`**: This property changes a specific text to upper-case or lower-case.

**`text-align: center`**: This property changes the alignment of the text to center, left, or right.

**`line-height: 2`**: This property can be used to increase the spacing between lines. The value `2` adds double spacing. 

What is the typography.css.file?

Let’s understand what these values mean