Author:

Laura Franz is a Pro­fes­sor at UMass Dartmouth, where she teaches a wide range of type classes — including a Web Typography class in The Grad­u­ate Cer­tifi­cate In Web and Inter­ac­tion Design. Inspired by the intersection of tradition and technology, Laura shares her web font recommendations on goodwebfonts.com and her typography knowledge via “Typo­graphic Web Design: How to Think Like a Typog­ra­pher in HTML and CSS” (Wiley), “Typog­ra­phy for Web Design­ers” (lynda.com), and “Choosing and Using Web Fonts” (lynda.com).

Dear Web Font Providers

When you buy something, I bet you want it to work. Heck, even if you use something for free — maybe borrowed from a friend — I bet you want it to work. No one prefers hiking boots that are too tight (or too loose), a car that shimmies when you drive faster than 40 miles an hour, or a kitchen knife that can’t cut a tomato.

Dear Web Font Providers

And Web designers don’t prefer fonts that don’t fit a project, fall apart in different browsers or can’t be used in a mock-up. We also don’t like wading through all of the fonts that won’t work for us in order to find the ones that will. It takes precious time away from other tasks and responsibilities.

Read more...

Web TypographySetting Weights And Styles With The @font-face Declaration

If people are on your website, they’re probably either skimming quickly, looking for something, or they’ve found what they’re looking for and want to read it as easily as possible. Either way, keeping text readable will help them achieve their goal.

Setting Weights And Styles With The @font-face Declaration

A few months ago, I wrote an article on “Avoiding Faux Weights and Styles with Google Web Fonts.” I ended the article by showing that weights and styles are an important UX element when setting text. Bold and italic forms of a font help people to skim your website.

Read more...

Avoiding Faux Weights And Styles With Google Web Fonts

If you’re using Google Web Fonts on your websites, then there’s a very good chance that 1 in 5 visitors are seeing faux bold and italic versions of your fonts — even if you correctly selected and used all of the weights and styles. That’s because the implementation method recommended by Google Web Fonts doesn’t work with Internet Explorer 7 or 8.

Avoiding Faux Weights And Styles With Google Web Fonts

As of 21 May 2012, StatCounter reports that IE 7 or 8 was used for 19.4% of the 45 billion page views collected in February, March and April 2012. As an experienced print and Web typographer, I embrace and use the term “font” when talking about Web fonts; it’s the term used in CSS syntax and by a myriad of Web font providers.

Read more...

Drop Caps: Historical Use And Current Best Practices With CSS

The practice of using a large letter to mark the start of a text has been around for almost two thousand years. Illustrated caps increased usability by marking important passages and guiding readers through the text. Unlike their historic counterparts, drop caps on the Web don’t add value in terms of usability or readability—and they are hard for Web developers to control, often rendering differently across browsers.

Early table of contents

Yet, front-end designers and clients often want to use drop caps as decorative elements. How should we implement them? Just as scribes, artisans, and early printers had a variety of methods for creating initial capitals, we Web designers have multiple methods to choose from. We can use an image of a letter, create a class to enlarge and place a letter, or use a first-child:first-letter to enlarge and place the first letter of the first paragraph. But which method should we use? Which method remains consistent across browsers? Which is most accessible?

Read more...

↑ Back to top