Archive for the ‘Fonts’ Category

File Under: CSS, Fonts, UI/UX, Visual Design

Google Chrome to Support the Web Open Font Format

Google’s Chrome browser plans to jump on the Web Open Font Format bandwagon. A note in the Chromium project’s bug tracker says that “it appears that we have decided to implement WOFF in Chromium.” Work on adding WOFF support to Chromium is already underway, though there’s no timetable for when the new features will make it into a shipping version of Google Chrome.

The WOFF was conceived by Mozilla as an easier way for web designers to include fonts in their designs. The idea is to let web authors include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF attempts to address some of the problems with CSS 3′s @font-face rule, which allows for downloadable fonts, but says nothing about the format of the fonts. As we’ve noted before, using @font-face can lead to radically different results in different browsers. Last year popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

Another concern is page load times. Because WOFF has built-in compression, adding extra WOFF fonts to your pages shouldn’t slow them down as much as a traditional OpenType or TrueType font file.

Since WOFF support was added to Firefox (in version 3.6), Opera and Microsoft have both pledged their support and the format has been submitted to the W3C for consideration as a standard.

The IE9 beta doesn’t yet support WOFF, but Microsoft is an official sponsor of the W3C proposal and the IEBlog has written about WOFF so we hope to see WOFF support before IE9 is finished.

With Google Chrome onboard, Apple’s Safari may soon be the only currently shipping browser without WOFF support.

Perhaps even more important than browser support is the fact that font foundries are getting behind the new spec. WOFF fonts aren’t secure, so the format won’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including Adobe, House Industries, Hoefler & Frere-Jones and ITC, LinoType — are already endorsing the format.

While WOFF doesn’t solve all the problems of web fonts, it’s a huge step in the right direction. With Firefox, Opera, IE and now Chrome all supporting WOFF, designers may soon be able to add just about any font to any webpage.

If you’d like to know more about WOFF, plus see examples of its use, head over to the original announcement on the Mozilla Hacks blog.

See Also:

File Under: Fonts

Web Typography Tutorial

Though many outside the design community see type as “just lines on a page,” it has long been considered an art form, as well as a potent form of communication with a stylistic language all its own.

From the calligraphy schools of ancient China to the explosive new forms of David Carson, it’s clear that type is more than just a vehicle for conveying information to the user. If done right, type can be one of the most powerful tools for shaping the way an audience perceives written information, written information such as these very fiery-hot words you see before you.

The pages that follow are your mini-guidebook to the strange and magical land of type. Your guide on this tour is Webmonkey Nadav, the designer with a human-friendly touch.

Nadav has divided this tutorial into two sections. In the first lesson, Nadav provides a gentle introduction to typography to give you a basic overview of how type works. The second lesson examines the challenges specific to using type on Web page: How to make it legible on a computer screen? Which type technologies do you need to master to control the fonts on your pages? Nadav reveals answers to those questions, and more!

So read on, and let what’s sure to be a long, beautiful relationship with type begin!

See you in lesson 1!

File Under: CSS, Fonts, UI/UX

Web Typography Tutorial – Lesson 1

Before I knew anything about typography, I thought of it as some kind of high magic, shrouded in arcane terminology and a long, mysterious history. Since then, I’ve learned enough to know that – although that’s all quite true – even us mere mortals can use type sensitively by learning a bit about how it works and paying just a little attention to how it is used.

Continue Reading “Web Typography Tutorial – Lesson 1″ »

File Under: CSS, Fonts, UI/UX

Web Typography Tutorial – Lesson 2

Ask any web designer about the use of typographic design on web pages and they’ll tell you the same truth: The web is a harsh, uninviting environment for the delicateness of fine typography. Along with the usual web culprit of platform inconsistency, the extreme low resolution of even the best current screens means type online can only allude to the geometry of the typefaces you’ve so carefully chosen and specified.

Continue Reading “Web Typography Tutorial – Lesson 2″ »

File Under: CSS, Fonts, Web Services

Review: Typekit Delivers Custom Web Fonts to the Masses

A new service called Typekit is now offering a legal, cloud-based method of using more elaborate typefaces on the web. The service has come out of beta and is serving up its fonts to web designers.

Despite some inconsistencies between browsers (not Typekit’s fault) and a few other quirks, we found Typekit to be a viable option for web designers looking to incorporate custom fonts into their designs.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut and paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

Of course, that ease and convenience doesn’t come without a price. There is a free trial option for Typekit, which allows you to test out the service. But if you’re serious about custom fonts, you’ll want to go with one of the paid options which range from $25 to $250 per year. The more you spend, the more font choices, domains and bandwidth you’ll get.

Typekit arrives at a time when type on the web is at a crossroads. For years, designers have been limited to using only a set of five or six common fonts on web pages. But thanks to new font-rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions. Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts.

Along with Typekit’s arrival, we’ve seen other promising developments recently, like the move by some browser makers towards adopting a new font format called WOFF which would allow better control over layouts and designs.

To see how Typekit performed in the wild, we opted to try out the free option and see if Typekit was good enough to warrant the expense. The short answer is yes, but with some drawbacks.

Before you dive in to Typekit, it’s important to remember the one very large caveat — Typekit only works in browsers that support the CSS @font-face rule. That means Firefox 3.5 and higher, Safari 3.4 and higher, and Internet Explorer 6 and higher.

While that’s not ideal, the good news is that browsers that don’t understand Typekit’s fonts can simply fall back on a default you’ve defined.

There is another slight problem, though. In some cases, fonts rendered in browsers on Windows XP can look jagged and difficult to read. The problems is that Windows XP often doesn’t have anti-aliasing turned on by default. Of course it’s worth noting that even if you don’t use @font-face, standard fonts will also be jagged on such systems. The difference is that most of the standard fonts are still readable, while in some cases custom fonts become a total disaster.

To get started with Typekit, just create an account and tell Typekit the domain where you’ll be serving the fonts. We were happy to see that Typekit will support the localhost domain for testing purposes, something many online services and APIs overlook.

After your account has been created and your domain set up, Typekit will then give a snippet of HTML to include on your site. The code simply loads Typekit’s JavaScript library; all you need to do is paste the HTML in the <head> of your site.

Now it’s time to pick some fonts. Typekit’s range of fonts depends on the amount of money you want to spend. For a trial account, you’ll have just under 70 fonts to choose from. The “personal” library ($25/year) has roughly 230 fonts and the full library ($50/year) nearly 300.

The Typekit font-browsing interface is very well designed and offers some nice tools for choosing a good font — like a live preview of the font and numerous size previews for judging readability.

Typekit’s live preview tool with custom text. Click the image for a larger view.

Once you’ve selected a font, you’ll need to configure it for your site. The Typekit editor lets you control which CSS selectors your custom fonts will be applied to, which weights and styles to use, and what font to fall back on for browsers that don’t understand @font-face.

If you’d rather apply a font to all elements on your site, you can define your own custom font-family rules in your CSS file, for example h1 {font-family: "tenby-seven-1"} would apply the Tenby Seven font to all headlines on the site.

Typekit’s editor tool for customizing fonts. Click the image for a larger view.

The next step is to publish your font, which then makes it available on your domain.

The results looked great in our testing, especially in Safari 4, which seems to render type a bit thinner than Firefox on the Mac. On the Windows side, the results were roughly the same between browsers that supported Typekit.

One thing that seems unavoidable with @font-face, whether it’s through Typekit or otherwise, is a brief flash of unstyled text. It’s annoying, but for now there doesn’t seem to be anything you can do about.

There are some other drawbacks — the need for JavaScript and the additional data that increases page load times — but so long as you’ve already accepted @font-face‘s shortcomings, Typekit makes the process of using it simple and easy. Other possibilities for broadening your type selection include Typotheque and a new service Kernest.

See Also: