CSS Typography
Tags: beginners, css
Published: 2019-12-02 18:24:01

---
title: CSS Typography
published: true
description: A beginners guide to the world of CSS typography
tags: beginners, css
series: FrontEnd Development Zero to Hero
---

Have you ever stumbled on a website and you ask yourself one or all of the following questions:

* How can i read this?
* Who made this?

Then you proceed to another site and you are like _WOW_! this is so cool!. Now let's ask ourselves two questions:

* What made the _First Website_ unreadable or unusable to you?
* What made the _Second Website_ enjoyable?

For the _Second Website_ you might just scroll and keep scrolling probably without actually reading anything but you are just marveled at the web developer(s) creation.

So many factors can determine if a site is either unreadable or enjoyable they can include:

* Layout
* Color combination
* Animation
* Typography

We will be talking about the last mentioned factor: _Typography_.

Typography can be considered as an art of _letters_ and _fonts_. The way these duo can align with each other to create a good reading experience for the user coupled with appropriate _character count per line_.

This post is not a seminal work on the entire concept of _Typography_ but rather a gentle introduction to _Typography on the Web_  using Cascading Style Sheets (CSS).

<hr>

We might be discussing _Typography on the Web_ but it is worth mentioning the work of individuals that took their time to study and write about _Typography_ in general especially the work of _Robert Bringhurst_ in their book [_The Elements of Typographic Style_](https://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881791326). From the _Forward_ of the book (emphasis mine):

> __Typography is the craft of endowing human language with a durable visual form, and thus with an independent existence__. Its heartwood is calligraphy - the dance, on a tiny stage, of the living, speaking hand - and its roots reach into living soil, though its branches may be hung each year with new machines. So long as the root lives, __typography remains a source of true delight, true knowledge, true surprise__.

Is that not beautiful? Let's proceed.

Most text in a web document are surrounded in paragraph tags (`p`) and it flows from _left to right_ (ltr) or _right to left_ (rtl) depending on the language of the source document and if the text can not be contained on a single line they will gladly wrap into another line and this might lead to some reading difficulties for the user due to the default _User Agent_  styles for most HTML elements including the `p` tag.

CSS provide tools and techniques that can be employed to _alleviate these reading difficulties_ and also _enhance the reading experience_ creating a feeling of _web typography done right_. The tools are in the form of properties and some are:

* `font-size`
* `font-weight`
* `line-height`
* `font-family`

The techniques can include:

* Vertical Rhythm
* Responsive Typography

That's enough theory. Time for some code.

<hr>

_Save the following HTML and CSS and make sure the CSS file is linked with the HTML file._

```html
<header>
  <h1>CSS Typography</h1>
</header>
<main>
  <section>
    <p class="paragraph-1">Lorem ipsum dolor sit amet,
      consectetur adipisicing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua. Ut enim
      ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo
      consequat. Duis aute irure dolor in reprehenderit
      in voluptate velit esse cillum dolore eu fugiat nulla
      pariatur. Excepteur sint occaecat cupidatat non proident,
      sunt in culpa qui officia deserunt mollit anim id est
      laborum.
    </p>
    
    <p class="paragraph-2"><!-- Duplicate the content of .paragraph-1 --></p>

    <p class="paragraph-3"><!-- Duplicate the content of .paragraph-1 --></p>

  </section>
</main>
```
```css
/*
 * This code is similar to the snippet we used in
 * CSS Media Queries https://dev.to/ziizium/css-media-queries-14fa
*/

header {
  padding: 1.2em;
  text-align: center;
  background-color: #1560bd;
  color: #ffffff;
}

main {
  background-color: #dddddd;
  padding: 1.2em;
}
```

_And kindly note that all screenshots are from <b>Firefox 70</b> web browser and its Developer Tools_.

<hr>

If we take a look at the HTML in the browser it is evident the text is difficult to read.

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/y21r1k3b7w4zdk96wt08.PNG)

The paragraph text is set to its default `font-size` of `16px` which is the _Browser default_ and you can use the _Developer Tools_ to confirm this.

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/7tus7amvrjiiwrdjbdcy.PNG)

The first thing we'll add is the `font-family` property which accepts comma separated values of _font names_. We can apply the `font-family` to the entire document or just specifics.

Let's apply it to the `body` element:

```css
/* Create a declaration for the body tag */

body {
  font-family: Georgia, "Trebuchet Ms"; /* Add this */
}
```

Next we need to modify the `font-size` of the paragraph text.

```css
/* Create a declaration for the p tag */

p {
  font-size: 1.3em; /*Add this */
}
```

Save and refresh your browser.

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/pmyk80tozmep4edbeasy.PNG)

The text readability is getting better but the line of text seems to be jam packed. We'll make use of the `line-height` property to give them a little bit of breathing space.

From [Mozilla Developer Network]( https://developer.mozilla.org/en-US/docs/Web/CSS/line-height):

> The line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text

Update the `p` CSS rule with the following:

```css
p {
  /* All other properties remain the same */

  /* Note the we've used a unit less line-height for simplicity */

  line-height: 1.618; /* Add this */
}
```

If you take a look at the HTML file in the browser, you will realize the readability is getting better but we can do better by putting some space between the letters. This is where `letter-spacing` comes into the picture.

From [MDN]( https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing):

> The letter-spacing CSS property sets the spacing behavior between text characters.

Make the following modifications to `p`:

```css
p {
  /* All other properties remain the same */

  letter-spacing: 0.02em; /* Add this */
}
```

The result in the browser:

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/vv7shmsz0azyofpcptbo.PNG)

We have made some progress so far but the _number of words per line is way too much_. The best thing we can do is to reduce the width of the text parent container the `main` element.

```css
main {
  /* All other properties remain the same */
  
  width: 60%;
  margin: 0 auto;   /* This will align the main to the center of the page */
}
```

Save and refresh your browser.

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/xb0pwfxb3wt5i6teeor0.PNG)

Let's make some improvement to code:

```css
p {
  /* All other properties remain the same */
  
  font-size: 1.5em;   /* These are just */
  line-height: 1.8;   /* updated values */
}
```

Save and view the output in the browser the changes you will notice will be minimal.

<hr>

CSS has some [selectors](https://dev.to/ziizium/css-selectors-1ch3) that can be used to add some swag to our text, in this context we can use two of these selectors:

* `::first-line`
* `::first-letter`

Officially these selectors are called _pseudo-elements_.

The `::first-line` will select the first line of a text and with this we can style it the way we want. For the sake of simplicity we will only make the `font-weight` bold.

```css
/*
 * We are only working with the first paragraph hence
 * we using the class selector with the pseudo element
 * selector.
*/

.paragraph-1::first-line {
  font-weight: bold;
}
```

The `::first-letter` selector strictly apply to the _first letter_ of a container element that has some text in it.

The code snippet below will increase the `font-size` of the first letter of `.paragraph-1`:

```css
/*
 * Here are using the ::first-letter selector to get
 * the first letter of the paragraph
 *
*/

.paragraph-1::first-letter {
  font-size: 120px;
}
```

The result in the browser is _not that good._

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/kn1bqz27bkuv16q9jxo0.PNG)

The fix for this behavior is to apply the `float` property with a value of `left` and some `margin` for outer spacing.

```css

.paragraph-1::first-letter {
  
  /* All other properties remain the same */

  float: left;         /* This will move the letter to the left of its parent */
  margin-right: 12px;  /* Some outer spacing to keep the letter away from other text*/
  margin-top: 0.15em;  /* This will let it align with the rest of the line */
}
```

The output should be better.

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/0xo04wcw55lpuh4fl1g2.PNG)

<hr>

Our web page is readable in its current state but we can make a tiny addition by applying some _vertical rhythm_.

Vertical rhythm is a concept in _Web Typography_ that as to do with applying some space after _block of texts_ in order to aid readability.

We can use CSS `margin` property to get this space. Remember that `margin` is shorthand for four other properties namely:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`

The `margin-bottom` property will get us the needed _vertical rhythm_ because each text is in a block level element; the `p` tag. And if we remember quite clearly _block level_ element are laid out _vertically_ one after the other.

Therefore the `margin-bottom` will create a space after each paragraph.

Add the following to the `p` tag:

```css
p {
  
  /* All other properties remain the same */
  
  margin-bottom: 48px;
}
```

The result in the browser:

![Text on a blue and grey background](https://thepracticaldev.s3.amazonaws.com/i/s5j1kkt6naprpjopm1cf.PNG)

<hr>

Aside _vertical rhythm_, the other technique that can aid text readability is _responsive typography_. Responsive typography require us to change our mindset and design process when developing website(s), that's why we will discuss it under _Responsive Web Design_.

You should know we've merely scratched the surface and there is more to _Web Typography_ than what we've discussed. We will cover more web typography in the _Final Project._ 

Up next, _CSS Animations and Transitions_.