Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML

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.
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.
YourFonts.com
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 Macintosh OS
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
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.

Explore Web Design / HTML

About.com Special Features

Build Your Own Website

Step-by-step advice on how to do everything from choosing a Web host to promoting your content. More >

Connect Your Home Computers

Easy ways to connect two computers for networking purposes. More >

Web Design / HTML

  1. Home
  2. Computing & Technology
  3. Web Design / HTML
  4. Web Design
  5. Principles of Web Design
  6. Fonts

©2009 About.com, a part of The New York Times Company.

All rights reserved.