Fonts and Typography in Web Design

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.

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.

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.

Definition of the CSS term font stack

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.

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.

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

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

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.

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.

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.

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.

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.

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.

Fonts vary in either small caps or regular. You use the font-variant style property to set the font variant.

The style of a font is whether it is upright or slanted. Most people think of the font style as italics.

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.

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.

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

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.

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

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.

Several easy ways to change the fonts on your Web pages.

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.

Use TrueDoc or OpenType to display the fonts you want to display on your Web pages.

This is a really neat discussion of how we can see letters everywhere.

Fonts are so important there's even a film about Helvetica.

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.

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.

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.

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.

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

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

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.

Use the font-size-adjust style property more effectively by knowing the aspect ratios for common fonts.