1. Technology
Send to a Friend via Email

Fonts and Typography in Web Design

When designing a Web page, you will most certainly use fonts. You need to understand both how fonts affect the design of the page, and how to affect your readers with fonts and typography. Learn how fonts and typography can be used effectively in Web design.
  1. Type Measurements (10)
  2. Fonts Glossary (17)

Web Typography
Once you understand what typography is, you need to know how to make changes to your website that affect the typography. You do this with CSS. There are several CSS style properties that you can use to impact the typography of your Web pages.

What is Typography?
If you're going to work on typography on your website, then you should know the basics of typography. This article is a quick overview of typography terms and how typography is applied.

WOFF - Web Open Font Format
The Web Open Font Format is a file format for fonts that can be embedded in web pages. This article explains how to use the WOFF file format with the @font-face property.

font stack
Definition of the CSS term font stack

Web Typography Pet Peeves - Annoyances in Web Typography
What are some of the Web typography things that you find most annoying? Learn what other designers strive to avoid and share your thoughts about the worst of Web typography.

Hyphenation in CSS3
Learn how you can affect the typography of your web pages with more effective hyphenation using CSS3 properties. This article explains about the CSS3 hyphens property as well as other hyphenation properties that have been deferred to CSS4.

Good Font Stacks
About.com readers share what their favorite font stacks are and why.

Font Stacks
Font stacks are groups of fonts that you can use to ensure that your Web page looks at least similar to how you expected it to look. Learn how to choose a stack of fonts and what order to list them so that your Web pages look good.

Web Typography Mistakes

Web Typography is more than just choosing the font family. By avoiding these common mistakes you can create a better website.

Typography on the Web is About the Little Details
Web design encompasses a lot of things, but one thing that many people ignore is typography. Sure, you might change the font family or adjust the size of your text, but beyond that many designers leave the typography up to the browser itself. But if you want to create good web typography you need to focus on the little details.

Em for Font Size - Using Ems to Change Font Sizes - How Big is an Em
The em is a relative font size measure that defines the font size based on how big it is in relation to it's parent. In other words, a font that is 1em in size is the exact same size as the container's font size. A font that is 1.5em is 50% larger and one that is 0.5em is 50% smaller than the parent element's font size.

If you want to create your own font, you can do so with YourFonts.com an online free font generating service.

Common Font Families on Windows - Fonts Common to Most Versions of Windows
These are some fonts that are common on most Windows systems. If you're going to use special font families in your Web pages you should be aware of the font families that are common to both Windows and Macintosh machines. That way, you won't be surprised by how your page looks in various situations.

But I Want That Font - Standard Fonts on Windows and Macintosh
Changing the font family to your favorite font will make the page look great in your browser, but if your readers don't have that font, you might be surprised at what it looks like to them. Use the fancy fonts as you please, but you should always have a standard font near the end of your list, and a generic font choice last.

Common Font Families on Macintosh - Fonts Common to Most Versions of ...
These are some fonts that are common on most Macintosh systems. If you're going to use special font families in your Web pages you should be aware of the font families that are common to both Windows and Macintosh machines. That way, you won't be surprised by how your page looks in various situations.

Comparison of Macintosh Common Fonts to Windows Common Fonts
A visual comparison of common Windows fonts and their Macintosh equivalents. When you use CSS fonts you should always specify a list of fonts, and you should try to specify at least one Windows and one Macintosh common font.

Syntax of the Font Property
The CSS font property has a lot of great features that make it easy to use. Plus CSS 2 adds a bunch of additional features that you might not be aware of.

Small Caps - A Font Variant
Fonts vary in either small caps or regular. You use the font-variant style property to set the font variant.

Font Style - Italics and Emphasis in Web Typography
The style of a font is whether it is upright or slanted. Most people think of the font style as italics.

Font Weight
The weight of a font is the relative lightness or darkness. Most people think of the font weight as the boldness of a font face.

Specifying a Series of Font Families with CSS font-family Property
There are a few things you should know about the syntax of the font-family property so that your Web pages display using the fonts you want them to.

What are the generic font families in CSS?
Learn what a generic font is and how they are used with Cascading style sheet in this font and CSS FAQ.

What is a Font?
Font families can be hard to understand, especially when trying to develop a decent style sheet for a Web site. Once you understand what the fonts are, you can better use them to style your pages.

Changing Font Attributes
Learn how to use CSS to change the size, color, and face of your text

Web Typography: Separating Structure from Visual Presentation
Before CSS there were font tags to style the typography on a Web page, but now CSS allows you to separate how your fonts look from the actual text of the page, providing powerful tools for Web typography.

How can I specify fonts?
Several easy ways to change the fonts on your Web pages.

What Font Size Measure to Use
There are a lot of different font sizes to choose from, but to create a great Web page you should think about your choices and make sure that they work for what you're doing. Font typography should be more than simple guesswork.

Dynamic Fonts: Using OpenType and TrueDoc to Embed Typography
Use TrueDoc or OpenType to display the fonts you want to display on your Web pages.

Exploring Found Typography - About Desktop Publishing
This is a really neat discussion of how we can see letters everywhere.

Helvetica - A Documentary Film
Fonts are so important there's even a film about Helvetica.

Stories About Ems
Learn about the varied history of other About.com readers and what they remember from typography classes and typesetting. Read stories about the origins of the em and share your own.

Origin of the Em
In Web design, ems are a unit of size equal to the current size of the font in the parent element. But that\'s not what they were originally. Find out the origins of the em size unit in print and typography and see how much design elements have changed. Learn the origin of the em.

All Caps Make Bad Headlines
Many people are under the mistaken impression that using all capital letters in a headline makes that headline stand out more. But all caps just makes text harder to read. So while you need to use all caps for abbreviations like HTML, you should avoid using it as web page headlines and titles.

Web Safe Fonts
If you change the font on your web pages, you need to make sure that at least one of them is a font on this list - a font that is found on most computers and operating systems. The best way to use these fonts is to use them in conjunction with the font you prefer.

What Other Fonts are Web Safe?
Find out what other fonts About.com readers feel are web safe, or at least safe enough that they feel comfortable using them.

HTML Fonts
HTML fonts define the typographic information about a web page. In other words, if you define the HTML fonts you are setting the font family, style and type for the text on the page. Learn more about HTML fonts and how to change the fonts on your web page.

Web Safe Font Stacks
Finding good font stacks can be tricky. There are thousands of different fonts out there, but unless your readers have your favorite font on their computer, your page could look different from your intensions. By using font stacks with web safe fonts in them, you can be sure that your pages will look at least close to what you intended. Here is...

Rag, Widows, Orphans, Typography, and CSS
There are three typography basics that are difficult to correct using CSS style sheets: widows, orphans, and rag. This article explains why you should still be concerned about them and gives suggestions for how to fix them. Plus, it describes a common mistake that beginners make regarding two CSS style properties.

Aspect Ratio Table of Common Fonts
Use the font-size-adjust style property more effectively by knowing the aspect ratios for common fonts.

Scan Length Examples
Examples of scan length for the same block of text. One the length is too short, the second too long, and the third about right.

Sans Serif Font Examples
Here are some slides of common sans serif fonts in various sizes.

Font Families
Learn about the different font families (serif, sans serif, monospace, fantasy, and script) and how you can use them on your web pages. Learn what each family is best for including some best practices and trivia.

©2014 About.com. All rights reserved.