CSS Typography

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).

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. 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.

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

<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>

/*
 * 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 Firefox 70 web browser and its Developer Tools.

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

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.

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:

/* 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.

/* Create a declaration for the p tag */

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

Save and refresh your browser.

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:

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:

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:

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

Make the following modifications to p:

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

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

The result in the browser:

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.

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.

Let's make some improvement to code:

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.

CSS has some selectors 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.

/*
 * 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:

/*
 * 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.

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

.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.

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:

p {

  /* All other properties remain the same */

  margin-bottom: 48px;
}

The result in the browser:

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.