Fonts and Typography in Web Design
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.
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.
Good Font Stacks
About.com readers share what their favorite font stacks are and why.
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.
Web Typography is more than just choosing the font family. By avoiding these common mistakes you can create a better website.
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.
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.
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.
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 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.
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.
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.
Changing Font Attributes
Learn how to use CSS to change the size, color, and face of your text
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...
Aspect Ratio Table of Common Fonts
Use the font-size-adjust style property more effectively by knowing the aspect ratios for common fonts.
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.