CSS - Cascading Style Sheets

CSS Tutorials, Articles, and Tips, Page 4

CSS Fonts, CSS Typography

The CSS Tutorials: CSS Fonts, CSS Typography section below has links to helpful CSS tutorials designating fonts with CSS and CSS typography. Included are tutorials on how to size fonts with CSS, such as using CSS relative units, such as font size keywords, em, or % (percentage) units, along with cross-browser, cross-platform CSS font considerations.

Related in WebsiteTips.com's Typography Typography Tutorials section: Choosing Fonts for Websites, Image Replacement Techniques Articles, Tutorials (sIFR, swfIR), and more.

IE7 CSS Hacks, IE8 CSS Bugs, Bug Fixes, Solutions: Wondering what to expect with CSS and Internet Explorer 8? Want some information about conditional comments? Looking for IE7 CSS hacks? Going nuts with a browser problem with your CSS? Check out Solutions to CSS Browser Bugs, CSS Bug Fixes, and Cross-Browser, Cross-Platform CSS Issues.

On this page:

CSS, Typography, and CSS Typography Techniques
CSS Relative Font Sizing
Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions
Other CSS Fonts, CSS Typography Links Resources

Also within CSS Tutorials:

Also within CSS - Cascading Style Sheets:

CSS - Cascading Style Sheets Home
W3C CSS Recommendations, Working Drafts, and Tutorials (1 page)
Solutions to CSS-Related Browser Bugs, CSS Bug Fixes, Cross-Browser, Cross-Platform CSS Issues (1 page)
CSS Sites, Resources, and Books (1 page)
CSS Templates (1 page)
CSS Tools - Editors, Reference Charts, Validators, and More (1 page)
CSS Discussion Lists, Newsgroups (1 page)

Related within Web Site Resources:

New and Popular Books on CSS
Recommended by WebsiteTips.com

Read reviews, why we recommend each book.

In association with

CSS, Typography, and CSS Typography Techniques

See the links below for helpful tutorials on typography with CSS - using dropcaps, styling options, line height, letter spacing, web-safe fonts, and more.

Wondering which fonts are installed in most people's computers, whether Windows, Mac, Linux, etc? Check out Cross-Browser, Cross-Platform Font References, Information for helpful font charts, listings of fonts included in various software and operating systems, and more.

A Beginner's Palette of Styling Options
[Article/tutorial dated 2006, by Ian Lloyd, part of Learn HTML and CSS: An Absolute Beginner's Guide, via SitePoint.]
Add Windows Vista Fonts to your Stylesheets
Suggestions for Windows Vista font-family order declarations within your style sheets to use Windows Vista fonts within your websites. Also includes downloadable PDF file that shows their use vs. “typical Web fonts.” [Article/tutorial dated 03/26/2007, by Christian Montoya, for The Montoya Herald.]
Are Vista Fonts Ready for the Web?
Especially helpful Comparison chart graphic of Core Web fonts and Vista fonts at various sizes (rendered with ClearType on Windows XP). [Article/tutorial dated 04/01/2008, by Brownspank, Sixthings.]
Complex Type: CSS Fix, ClearType Miss
Creating a site logo with only CSS, rendering differences with and without ClearType, and more. Interesting blog post, links to other information, and more. [Article/tutorial dated 11/17/2007, by Jon Tangerine, Jon Tangerine.]
Creating Dropcaps Using CSS
Tutorial covers the typography of dropcaps with a helpful grid screenshot, problems with CSS pseudo-elements and a workaround using the span element, and fonts that render the best cross-platform and cross-browser. “Large capital letters spanning multiple lines of type at the beginning of paragraphs are known as 'drop caps', 'dropped initials', or sometimes 'uncials'. Creating basic drop caps using Cascading Stylesheets (CSS) is easy, but ensuring good typography requires care.” [Article/tutorial dated 02/20/2008, by Safalra's Website.]
CSS Typography
Tutorial covers line height, letter spacing, cross-browser, cross-platform default fonts and considerations, text sizing, and a variety of available CSS styles that can work well and are supported by modern browsers. Plenty of links to more information, too. [Article/tutorial dated 01/16/2006, by Garrett Dimon, for Digital Web Magazine.]
Downloading and Using Vista Web Fonts
Calibri, Cambria, Candara, Consolas, Constantia, Corbel screenshots, and more information, including a chart of suggested uses to replace previous Microsoft core fonts, along with some CSS examples and a downloadable PDF file showing the fonts in use. [Article/tutorial dated 04/14/2007, by Patrick Hunlock, Pat's Place.]
The Myth of 'Web-safe' Fonts
Explains the five key font family stacks and provides screenshots of each, along with a little history and how to implement them effectively with CSS. “The pervasive myth of 'web-safe' fonts asserts the existence of a small set of font families that are present on almost all computers. A belief in this myth has led to the widespread adoption by web authors of typefaces such as Verdana, without the precautions necessary to ensure that content remains readable for visitors who don't possess these fonts. Fortunately Cascading Stylesheets (CSS) provide a solution, allowing authors to specify 'font family stacks' to increase the likelihood of a satisfactory appearance.” [Article/tutorial dated 02/20/2008, by Safalra's Website.]
New Vista Fonts & The Web
Discussion and examples of several new fonts included with Windows Vista: Cambria, Calibri, Candara, Consolas, Constantia, and Corbel. Brown also writes about the fonts that each of these could replace and why. Interesting read, good info about each font. [Article/tutorial dated 02/03/2007, by Stuart Brown, Modern Life.]

Related in WebsiteTips.com's Typography Typography Tutorials section:

Choosing Fonts for Websites
Image Replacement Techniques Articles, Tutorials (sIFR, swfIR), and more.

Related in WebsiteTips.com's Typography Typography Tools section:

Cross-Browser, Cross-Platform Font References, Information

top ‘On this page’ menu

CSS Relative Font Sizing

Font size: the 'font-size' property
[Official documentation via W3C CSS 2.1 Recommendations.]
font-size - the right way - minimum font size
Lots here on computer font sizes, browser font sizes, using relative font size units, CSS inheritance comparison with various browsers, more. [Article/tutorial updated 11/12/2007, by Georg, gunlaug.no.]
How to Size Text with CSS: Create User-friendly Web Site Font Sizes with CSS Relative Font Sizing
Looking for an easy way to designate CSS font sizes for your website that will work well with modern, mainstream browsers for Windows or Mac computers? Need to also make sure your website's font size approach is universally accessible, meets W3C's WAI Accessibility Guidelines, U.S. Section 508 requirements, or other accessibility requirements? This tutorial will show you one possibility that can meet those needs by using CSS relative font sizing. Covers font size keywords and using CSS em units. [Article/tutorial dated 11/25/2007, by Shirley Kaiser, for WebsiteTips.com's CSS Tutorials, Articles, Tips section.]
How to Size Text in CSS
“In this article, we will reconcile the designer's requirement for accuracy with the user's need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms. We'll reach our destination by the traditional method of trial and error. With more than a nod to Owen Briggs's pioneering work of 2002, I have created a base case with six iterations and 161 screenshots. Follow along, won't you?” [Article/tutorial dated 11/20/2007, by Richard Rutter, for A List Apart.]
Relative font sizes and inheritance
Excellent presentation/article by Russ Weakley on the pros and cons, advantages and disadvantages of using various methods of sizing fonts. Although written in 2003, it's still a helpful, insightful article. [Article/tutorial dated 09/23/2003 by Russ Weakley, Max Design.]
Use Relative CSS Units
Good overview of why it matters to use relative CSS units for your website's font designations. Covers em units and more. [Article/tutorial by Laura Carlson, via Univ. of Duluth IT Systems & Services.]

CSS Font Sizing with Font Size Keywords

CSS Font-size Keywords
Great information and resource on the latest with using CSS font size keywords. Explanations, charts, cross-browser comparisons, more. [Article/tutorial by CSS Discuss Wiki.]

CSS Font Sizing with EM Relative Units

How to size text using ems
Insightful tutorial with examples, CSS, and explanations of how to use the CSS em unit element for flexible font sizing for your entire site. [Article/tutorial dated 11/18/2004, by Richard Rutter, Clagnut.]
Using EMs
Describes the use of em units, including IE6 issues and more. [Article/tutorial by CSS Discuss Wiki.]
Values: Lengths
Defines relative units: em, ex, px, and further down the page is percentages (%). [Official documentation via W3C CSS 2 Recommendations.]

CSS Font Sizing with Percentages

Using Percentages
[Article/tutorial by CSS Discuss Wiki.]

top ‘On this page’ menu

Cross-Browser, Cross-Platform CSS Typography and Font Issues and Solutions

The links below are specifically related to browser bugs and browser and platform differences with fonts and CSS font rendering.

See also Typography Articles and Tutorials on Web Site Typography. You'll find information about fonts on various platforms, which fonts ship with certain software, surveys of the most common fonts on users' computers, common cross-platform fonts, and related information.

Care with Font Size
A concise article with a few basic rules to font sizing, [Tutorial dated 07/30/2003, updated 09/04/2005 by Olivier Thereaux and Susan Lesch, for W3C Quality Assurance.]
A Dao of Web Design
by John Allsopp for A List Apart. Excellent article about the font sizing problems across platforms and browsers. Also discusses other accessibility, compatibility areas, with emphasis on adaptability and accessibility and ways to achieve that. [Tutorial dated 04/07/2000. By John Allsopp for A List Apart.]
Elastic Design
Well-written tutorial on the pros and cons of various approaches for font sizing with CSS. [Tutorial dated 01/09/2004, by Patrick Griffiths, for A List Apart.]
IE 7 does not resize text sized in pixels
While other browsers allow text resizing for CSS pixel size unit designations, IE7 does not resize text - despite W3C recommendations. So, while other browsers will resize text, IE7 will not. [Article/tutorial dated 03/2007, by Roger Johansson, for 456 Berea Street.]
Power To The People: Relative Font Sizes
How to provide users with more font size choices that can also still work cross-browser, cross-platform. This approach uses alternate style sheets and a JavaScript style-sheet switcher, samples of which are included with this tutorial. [Tutorial dated 04/09/2004, by Bojan Mihelac, for A List Apart.]
Text Sizing: The Ground Will Not Be Friends With You
Owen Briggs has provided 264 screenshots rendering fonts in the most popular browsers. Owen's screenshots can help provide amazing insight about what all the browsers do (or don't do) to fonts. Absolutely incredible resource. [Article dated 06/06/2002, Owen Briggs, The Noodle Incident.]

top ‘On this page’ menu

Other CSS Fonts, CSS Typography Links Resources

Typography: Font Sizing
Quite a listing here of best practice articles, tutorials on sizing fonts with CSS. [Article/tutorial by Laura Carlson, via Univ. of Duluth IT Systems & Services.]