Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The eighth element of design is Type. Selecting the right fonts in the right sizes and colors for your web projects can help improve readability, as well as communicate information more effectively to site visitors. For our purposes, we'll use the term type to refer to the fonts you choose for displaying text in your designs and how you actually use them. Choosing the right fonts can communicate the right mood to the target audience. And often designers will use fonts from the same type face along with one or two contrasting fonts to keep a design cohesive.
Type faces then, are a set of fonts in a given font family, such as Arial Regular, Arial Bold, Arial Italic, and Arial Bold Italic. To begin our discussion on fonts on the web, you should know a few basics about type in general. Here's an example of all of the parts of a type face taken from a free typography wallpaper graphic. As you can see, fonts have a lot of different parts to them; and understanding this parts can help you choose your fonts more effectively.
For instance, you may want to choose a font with a large X height for improved readability on the web. You should also familiarize yourself with the terms like ascender and descender, stem, tail, and serif. In general, the two main font styles you can choose from are serif and sans serif. If you know French, you might recognize the words sans, which means without. Therefore, sans serif font is a font without serifs. Serifs are those doodads, which some people call feet or lines or tails at the ends of the letter shapes.
Some of the most popular fonts in each category are Times New Roman, Georgia, and Century Gothic for serif fonts, and Helvetica, Arial, and Verdana for sans serif. Of course, there are thousands and thousands of other fonts out there that fall into these and other font categories. So it's up to you as the designer to choose the right fonts for the job. In addition to serif and sans serif, there are several other categories including slab serif, cursive, handwriting, decorative and typewriter.
In general, people tend to find it easier to read text set in serif fonts, especially in print. Because those little feet lead the eye from one letter to the next, word to word. Take for example this paragraph of Cupcake Ipsum text shown in Times versus Arial. Which do you think is easier to read? On the web, which has traditionally been low resolution, sans serif fonts generally display more crisply, and are therefore the preferred font type for the body text on a website.
Even so, with the prevalence of free web fonts and high definition devices, like tablets and smartphones, as long as the text is readable on the web, anything goes. Another thing about type you should pay attention to is the leading. Which refers to the space between the baseline of one line of text and the baseline of another. On the web, we refer to this space in CSS as line height. By default, the line height is usually automatically set to 120% of the font size, but you can easily override this setting in the CSS if desired.
Adjusting the line height can really help to create a more open sense of space within a design. As you've just learned, there is a lot more that goes into using fonts than just choosing them. You may take into consideration attributes such as their style, size, height, weight, color and leading. Think of the flow and harmony and always think about readability. Above all, when it comes to choosing fonts for you web projects use consistent font formatting across all of the pages of your website so your site's content is easy to understand at a glance.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.