Advertisement
  1. Web Design
  2. Kids
Webdesign

Web Design for Kids: Typography

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: Design Basics
Web Design for Kids: Color

Welcome to the ninth lesson of our Web Design for Kids series, all about Typography.

In this tutorial we will look at what typography is all about and why it’s so important in design. We have talked about the user’s experience a lot so far and this tutorial will be no exception; we’ll be working hard to make sure our text is beautiful and easy to read!

Don’t forget to ask any questions in the comments section at the bottom of this page!

What is Typography Exactly?

Typography is everywhere. It’s how we see written words, so anywhere we come across words we see typography. These words can be found on screens, paper, and signs all around us.

With typography we can change the “look and feel” of these words, changing how they impact readers. The design of words will often affect our users before they even get a chance to read our content, so it’s important that the design and overall feel of our typography matches the feel of the content itself.

In the previous lesson we talked about how important content is. After all, it doesn’t matter how good our site looks if it doesn’t contain information anyone wants to read! How we present these words to the user, however, becomes just as much part of the message as the words themselves.

Typeface vs. Fonts

Typography involves a lot of fairly similar terminology.

A typeface is the general design of a collection of characters (words and symbols), while a font is a specific size, weight (how thick the letters are), style, and use of a typeface.

Our Tuts+ Town design uses a typeface called “Open Sans”. We use different sizes and weights of this typeface, which tell us which fonts to load into the page.

So, while we use fonts on our site, these fonts are based on typefaces that someone has spent a lot of time designing.

Serif vs. Sans-Serif

A typeface can be serif or sans-serif. A serif is best described as the tails or extensions at the ends of some letters.

A serif typeface has these extensions:

Open Sans is a sans-serif typeface; meaning without serif. A sans-serif typeface does not have extensions like the letter above:

There is no right or wrong answer as to which to use on our site, but we’ll want it to match the overall design and feel we are trying to achieve as well as be the most readable option considering our layout and amount of text.

A serif typeface is generally easier to read on paper or when there is a lot of text, while a sans-serif may be better on a screen or with a smaller amount of text overall.

The Parts of Typefaces

In order to get the very best typography for our websites we need to think about what makes each typeface different from another. There are many different parts of each typeface that someone has designed and thought about in great detail.

It’s these details that make up the uniqueness of each one and it’s up to us to choose which one works best for different designs and situations.

Let’s briefly take a look at some details of typefaces to better understand how these can improve (or worsen) our designs:

There’s no need to memorize these parts right now, but just know that variations of them help make each typeface special.

Spacing

As with most things related to typography, spacing is super important when building the best experience for our users. The amount of spacing between each letter, between words, and between lines of words can make a huge difference to readability.

Not enough spacing give us letters and words that are too bunched up to read well, while too much spacing will break everything up and be just as difficult to read and follow.

Fonts come with their own spacing that is generally pretty nice to read, but let’s take a look at what all this different spacing is called and how to make changes in our CSS in case we ever need to in our designs.

Kerning & Tracking

Tracking is the general spacing between all characters (letters) in a piece of text.

We can make changes to this in our CSS if we want to, by using the letter-spacing property:


We can also make changes to the spacing between each word, through the word-spacing property:

Kerning is the spacing between two characters.

Kerning between each character pair is changed by the typeface designer, because some letters look better closer together and some further apart. This is completely down to making things look balanced and is difficult to do with just CSS alone.

Leading

Leading refers to the spacing between lines of sentences.

We can make adjustments to this spacing by giving a value that changes the default leading set by the font in use through the line-height property.

A value of 2 here will ensure our leading is twice as much as the default amount for that font.

Widows & Orphans

If a single word is left on a line by itself (aaaah) at the end of a block of text it is called a Widow.

Let’s say that the blocks in the following image represent words within columns. The Widow is the blue block, sitting on its own at the end of the column because that’s where the sentence ends:

An Orphan is a single word existing on a line by itself at the beginning of a column, usually living next to the column where most of the related text is.

Widows and Orphans are considered bad typography because of how distracting they can be, making the overall reading experience worse.

There are several different approaches we can take to correct one of these issues if it happens on our sites, such as:

  • adjust the font size
  • adjust the container’s width
  • add or eliminate text
  • or adjust the kerning or tracking of the text

Alignment

We can choose to align our text to the left (default on the web for languages written left-to-right such as English), in the center, or to the right.

Left

Text on the web should generally be left-aligned (again, for languages written left-to-right) because it is how speakers and readers of those languages are used to reading.

Center

Center alignment is often used on titles and headings which helps them stand out more from the main text on a page. We can do this in our CSS with the text-align property, for example:

Text that is aligned this way can usually be found on signs and flyers trying to grab someone’s attention, but we shouldn’t center align a large body of text on the web because it will be much more difficult for our users to read. Center aligned text creates very different widths from line to line, making it more difficult for the eye to follow.

Right

Some languages (such as Hebrew) are written from right to left, making right alignment the default alignment.

As designers we can also choose to have certain small bits of text right aligned so it can stand out a bit more, like image captions. These captions are titles or descriptions for images with their own HTML element, figcaption.

The above alignment is done by declaring right on the element in a CSS document:

General Tips

A lot of the typography we design will be because of reading the content ourselves and making adjustments as needed. There are, however, some general tips that can help us get more comfortable with our typography skills.

Font-Size & Visual Hierarchy

A font-size less than 16px on the text that makes up the bulk of our content is usually considered too small and difficult to read on screens.

We talked a lot about visual hierarchy in the previous tutorial on design basics. Setting hierarchy for the text throughout our design will ensure the site is easier to navigate by separating related content and highlighting what’s most important.

The text on our Tuts+ Town site has several different levels of hierarchy, with the title being the most important, followed by the business categories and specific shops, and ending with the “created by” section at the very bottom.

The hierarchy here is established by different sizes, color, and locations on the page.

Contrast

We’ll talk at more length about color and contract in the next tutorial, so just know to be aware of the color of your text and whether or not it clashes with the background color, making it difficult to read.

Here’s an example of bad contrast on the left and better contrast on the right:

The bright pink text on a dark turquoise background on the left shows the impact of poor contrast. The text is difficult to read, looks a bit blurry, and hurts our eyes!

Number of Fonts

As a general rule it’s best to not use more than two to three different fonts per project. Paired fonts should suit each other and both support the overall feel and ideas behind the design.

Web Fonts

Not all fonts work well on the web and are best for print only. Luckily Google Fonts, which we used to import Open Sans into our Tuts+ Town site, provides us with an amazing list of fonts suited to the web.

Wrap Up

In this tutorial we touched on what typography is exactly, reviewed how different parts of a typeface can distinguish it from others, and concluded with some general tips to keep in mind when working with text and fonts on the web. All to achieve one ultimate goal: to make our content easier to read.

Next we’ll dive into some general rules involved with using colors on the web and what message we are communicating to our user based on our overall color selection.

See you around town!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.