Design>Web Design>Typography

Rich Typography On The Web: Techniques and Tools

In addition to font stacks, why not replace the heading text with an image, embedded font, or bit of Flash? The methods described below are easier than they sound. And the end result is that the vast majority of users will see the beautiful typography you want them to see. A word of warning, though: don’t use dynamic text replacement for all of the text on your page. All that would do is slow it down and frustrate your visitors. Instead, save it for headings, menu items, pull quotes and other small bits of text.

Fifty Useful Design Tools For Beautiful Web Typography

Looks at 50 most useful typographic tools, techniques and resources for creating effective and expressive designs. We will also look at some hands-on typography tools that help designers and developers learn how to style their Web content, test it interactively and see the changes instantly. These tools are great for experimenting with different font types for your website.

Top Ten Web Typography Sins

While many designers have been quick to embrace web standards, it’s surprising how often the basic standards of typography are neglected. Here are ten deadly sins to avoid in your web typography.

The Seven Deadly Sins of Blogging: Sin #4, Being Unreadable

Although there are other ways to increase your blog's readability, these are the most important elements to consider: font size, line height, line length, typeface, background, subheadings, paragraphs, white space, graphics, and invisibility.

Typographic Design Patterns and Best Practices

To find typographic design patterns that are common in modern Web design and to resolve some common typographic issues, we conducted extensive research on 50 popular websites on which typography matters more than usual (or at least should matter more than usual). We’ve chosen popular newspapers, magazines and blogs as well as various typography-related websites. We’ve carefully analyzed their typography and style sheets and searched for similarities and differences.

Guide to CSS Font Stacks: Techniques and Resources

CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font. But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Better CSS Font Stacks

You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience.

Beautiful Fonts with @font-face

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

Font in your Face

So, you are a web designer going about your daily life, struggling with IE 6, huffing about CSS 3/HTML 5, berating your designers for not using web-safe fonts, and there comes a brick hurling towards you named @font-face. You are dumbstruck. You have no idea what hit you. Everyone is asking about it, and you pretend to know about it. Then you quickly google for it and are hit with even more bricks. I was one such web designer and I spent 4 days in agony, learning about @font-face. I wrote this down, so that no other web designer has to face this torture anymore. So here is the “A to Z” of what @font-face means now and what it will mean for the future of web design.

Web Design For Dyslexia

People with dyslexia frequently experience discomfort when reading because they find it more difficult to ‘decode’ the words on the page, and can also find it difficult to remain focussed on a particular piece of text. Some people may also have to concentrate more to remember what they have already read, which means they will tire more easily.

Common Fonts to All Versions of Windows and Macintosh

If you want to know how the fonts are displayed in other OS's or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. Also, you can take a look to the list of the default fonts included with each version of Windows.

Five Simple Ways to Improve Web Typography

Type is one of the most-used elements of the web. Think about it. Unless you are YouTube or Flickr, chances are your site visitors are coming for your text content - not the fancy packaging that surrounds it. So why are web designers still treating text like a secondary element?

101 Examples of Text Treatments on the Web

Typography is often a deciding factor in the success of a design. Its importance cannot be overstated. Effective typography can be achieved in so many different ways, as demonstrated in the 17 different categories below. Some of the most common ways to treat type is with size, color variation, creative illustrations, and use of textures. The examples below are just the tip of the iceberg as far as the possibilities for type.

Linux Font Equivalents to Popular Web Typefaces

While the list of Web safe fonts we have come to know and love is relied heavily upon, it can be very beneficial to include similar default Linux fonts in your font-family as well.

To Hell with Web Safe Fonts

Get creative. Expand your font choice. Mix fonts. Use weights, font-styles, small-caps. Mind variations in size and legibility.

Increase Your Font Stacks With Font Matrix

I have put together a matrix of (western) fonts showing which are installed with Mac and Windows operating systems, which are installed with various versions of Microsoft Office, and which are installed with Adobe Creative Suite. The idea of the matrix is that use can use it to help construct your font stack.

Optimal Line Length

What can we conclude when users are reading prose text from monitors? Users tend to read faster if the line lengths are longer (up to 10 inches). If the line lengths are too short (2.5 inches or less) it may impede rapid reading. Finally, users tend to prefer lines that are moderately long (4 to 5 inches).

Why Readability Testing is not Enough

he recent press coverage of the Bath University research paper "Readability Assessment of British Internet Information Resources on Diabetes Mellitus Targeting Laypersons" has raised interesting questions about some of the methodologies used to measure users' experience on the web. On the face of it, the conclusion and the methodology used is fine, but due to the indiscriminate nature of automated testing tools, it doesn’t present the entire picture and, at worst, can give the impression that the users of these websites can’t understand the content at all, which may not be the case.

Reading on the Web

People rarely read web pages word by word; instead, they scan the page, picking out individual words and sentences. In a study John Morkes and Jakob Nielsen found that 79 percent of test users always scanned any new page they came across; only 16 percent read word-by-word.

Text/Typographical Layout

The default setting in browsers is to align text to the left. Text can also be aligned to the right, in the center, or justified (aligned on both the left and the right sides). Although some people like the look of justified text, studies have routinely shown that left-aligned text is the easiest to read. Some Asian and Middle Eastern languages are notable exceptions to this rule, since the normal text direction in these languages may be vertical from top to bottom or horizontal from right to left. For English and other left-top-right languages, the best practice is to align text on the left.

When Legibility, Readability and Usability Intersect, Then We Reach Our Target Audience

If we want to reach our target audiences when presenting text-based information, we as content specialists (designers, programmers, writers, and project managers) need to constantly consider usability. We must move crucial concepts of legibility, readability, and usability to the forefront of our design practices else we will unquestionably lose our audience.

On Scalable Text

In order to provide scalable text, make textual information text (rather than images), and use relative text sizes (rather than absolute). Scalable text is important for people with low vision. The basics of providing scalable text are very simple. However, strict design requests can pose challenges.

sIFR 2.0: Rich Accessible Typography for the Masses

Over the last several months, a small group of web developers and designers have been hard at work perfecting a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics. The method, dubbed sIFR (or Scalable Inman Flash Replacement), is the result of many hundreds of hours of designing, scripting, testing, and debugging.

CSS Link Styles

One of the easiest, yet most interactive, elements you can add to your Web site is dynamic link text—links that change their appearance once the user puts their cursor over them.

Knowing About Web Safe Fonts

What are Web safe fonts? Practically every personal computer has a set of fonts installed. These fonts are usually put there by the computer manufacturer or are the default sets of fonts for the operating system that computer is using. It's possible to install additional fonts on your own. However, not all font sets are created equal. Different computers can have very different sets of fonts installed, and most casual computer users never know the difference.

Don't Be Afraid of Serif Fonts

As the practice of Web design ages, some common rules and "best practices" inevitably embed themselves in the craft. Among these are the processes for using specific types of semantics when coding your site, like using divs as hooks in your X/HTML for your CSS, and making your page beautiful and functional that way. Another is to ensure readability of your site by choosing a proper number of fonts (generally, no more than three or four, and for the minimalist, one or two).

Simple CSS: Creating More Readable Text

Typography is an important part of Web design. Just like in the print world, your content needs to be readable to your viewers for it to be of any use. As a general rule, you want to make sure your Web site provides as little resistance as possible to the user, and the easier your site is to read, the better. CSS provides three very useful properties to enhance the readability of your site: font , line-height , and letter-spacing.

Fonts for Web Design: A Primer

Modern CSS provides web designers with an unprecedented level of control over online typography. Restrictions are still imposed however by the limited number of “common” fonts—those typefaces that are generally available cross-platform. This article looks at the fonts web designers have available to them, and also considers their suitability for various tasks.

Setting Web Type to a Baseline Grid

This article covers the basics of baseline grids—defined grid areas within which content is placed—and how they can be applied effectively to the web medium. In print, baseline grids are almost mandatory. They ensure the bottom of each line of text—its baseline—aligns with a vertical grid, akin to writing on a ruled piece of paper. With books, this means text is always in the same position on the page. This ensures the gaps between lines of text aren’t “filled” with content showing through from the reverse of any page, thereby making the text easier to read. This advantage isn’t relevant for Web design, but the other major advantage—maintaining a vertical rhythm—is.

Typography on the Web

In this article I’ll look at exactly why typography is limited on the web (compared to print design) and present some tips to follow for good web typography, along with an example web page that demonstrates some of these tips. Don’t worry if you don’t understand the CSS and HTML code at this stage—the point here is to make you think about design. While you are going through the article, it might be an idea to have a pen(cil) and paper by your side so you can start to sketch ideas about text layout.

The Resurrection of Downloadable Web Fonts

Despite it being in the CSS 2 specification from 1998, downloadable fonts specified with the @font-face at-rule never caught on. The main reason was that Microsoft and Netscape chose to support different font formats, neither of which was in wide use. However, that may be about to change. As reported in Downloadable Fonts, recent nightly builds of Apple WebKit (not the normal nightly build but a feature branch) support @font-face rules with TrueType fonts. The browser will download the font file you specify and use the typeface it contains just like any other.

Seven Tips for Replacing the Font Tag

Replacing font tags with semantic code and CSS isn’t as terribly difficult as it might seem at the outset. To help you along your way, here are a few tips on how to tackle the project.

A Guide to Web Typography. The Basics

Typography for the Web has come a long way since Tim Berners-Lee flipped the switch in 1991. Back in the days of IE 1.0, good web typography was something of an oxymoron. Today things are different. Not only do we have browsers that support images (gasp!), but we have the opportunity to make our web pages come to life through great typography.

Fifteen Excellent Examples of Web Typography. Part 1

I have spent the last month searching, stumbling, noting, bookmarking and analysing in a quest to find 15 Excellent examples of Web Typography. I’ve chosen them because they make excellent use of type. Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable.

Fifteen Great Examples of Web Typography. Part 2

What better way to start the year than with a little typographic inspiration. Last year I published 15 Excellent Examples of Web Typography, and owing to its popularity and people’s sateless appetite for lists, here are another 15.

Create Your Own Style and Flair with Custom Fonts

Are you tired of those same boring fonts for your web applications and print projects? Do you know most fonts are licensed and can’t be added to web applications? Well, you can solve that problem by creating your own fonts with FontStruct, a slick flash application that allows you to create nice fonts right from your browser and save them to your computer or server.

HTML Museum: Font and Page Size

I want to spend some time on a series of articles on web design usability practices. I call this series, the HTML Museum. I hope to update it with articles that address past web design practices and why they are no longer in use.The first exhibit deals with font, text and page size.

Right-Justified Navigation Menus Impede Scannability

Users scan lists by moving their eyes rapidly down the left edge. Menu items that are right-aligned make scanning more difficult.

Zoom Layouts

A zoom layout uses CSS (cascading stylesheets) to automatically reformat a page so it's easier for a low-vision user to read. Multiple columns become single columns, navigation gets simplified and put at the top, fonts become bigger, and (usually) colours are set to light on dark.

Setting Type on the Web to a Baseline Grid

It's easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid.

Text-Based Logos

Logos in the form of words or letters have natural properties that make them visually effective: (see also logos article): good recognition; good descriptiveness; and good presence.

Effective Text

In the web environment, text has enormous strengths. In many situations, using text delivers far better results than graphics. Web designers should be daring and use text wherever possible.

Readability

Everyone benefits from clear, readable text content. People with visual impairments benefit particularly.

Lists

Lists are commonly found on Web sites. These may be lists of, for example, people, drugs, theaters, or restaurants. Each list should be clearly introduced and have a descriptive title. A list should be formatted so that it can be easily scanned. The order of items in the list should be done to maximize user performance, which usually means that the most important items are placed toward the top of the list. If a numbered list is used, start the numbering at 'one,' not 'zero.' Generally only the first letter of the first word is capitalized, unless a word that is usually capitalized is shown in the list.

Text Appearance

Even though it is important to ensure visual consistency, steps should be taken to emphasize important text. Commonly used headings should be formatted consistently, and attention-attracting features, such as animation, should only be used when appropriate.

Web Design is 95% Typography

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: typography.

The Effects of Line Length on Reading Online News

This study examined the effects of line length on reading speed, comprehension, and user satisfaction of online news articles. Twenty college-age students read news articles displayed in 35, 55, 75, or 95 characters per line (cpl) from a computer monitor. Results showed that passages formatted with 95 cpl resulted in faster reading speed. No effects of line length were found for comprehension or satisfaction, however, users indicated a strong preference for either the short or long line lengths.

Is Multiple-Column Online Text Better? It Depends!

This study investigated the effects of multi-column displays and justification on reading performance and satisfaction of an online narrative passage. Participants read a short story displayed in one of six formats (one, two, or three columns, in either a full or left-justified format). Results showed a significant column x justification interaction with reading speed significantly faster for the two-column full-justified text than for one-column full-justified, and significantly faster for one-column left-justified than for one-column full-justified or three-column full-justified text. Post-hoc analyses indicate that the faster readers may have benefited most from the two-column justified format.

Reading Online Text with a Poor Layout: Is Performance Worse?

This study examined the effects of enhanced layout (headers, indentation, and figure placement) on reading performance, comprehension, and satisfaction. Participants read text passages with and without enhanced layout. Results showed that reading speed and comprehension were not affected by layout, however, participants were more satisfied with the enhanced layout and reported it to be less fatiguing to read.

Reading Online Text: A Comparison of Four White Space Layouts

In this study, reading performance with four white space layouts was compared. Margins surrounding the text and leading (space between lines) were manipulated to generate the four white space conditions. Results show that the use of margins affected both reading speed and comprehension in that participants read the Margin text slower, but comprehended more than the No Margin text. Participants were also generally more satisfied with the text with margins. Leading was not shown to impact reading performance but did influence overall user preference.

The Typography of News

Peter Hall explores the changing role of typography in the news media.

Fonts

The ability to customize fonts— in Mac OS, in word processing documents, in Web pages— is really nothing new. However, when it comes to changing fonts on Web pages, the mechanism is decidedly less intuitive and certainly less than easy. Having to litter a Web page with FONT FACE tags makes for larger files, and larger headaches as you weed through these tags to find that one misspelled word. CSS makes the process of selecting a font easy, and even better, it provides a fallback mechanism for those times when users don'’t have the fonts you wanted to appear.

Web Type 101, a Primer

While you may never consciously notice the typefaces used on a Web page, they subconsciously affect the way you feel about the page.

Web Typography

What stays the same, and what's different when you go from books and magazines to websites? Allow me one digression, and then I'll get to specific implications of the switch to onscreen reading.

Fonts on the Web

One of the original ideas behind the Web is that readers should have control over how things look, since only they know what color combinations, point sizes, and so on they find easiest to read on their particular combination of hardware and software. That said, there's a difference between designing for the World Wide Web, where your documents can be read by anyone, and designing for an intranet, an internal network that's accessible only to people within your organization. On an intranet, you can (theoretically) know exactly what hardware and software your readers are using, so you can control the look to a much greater extent.

Power To The People: Relative Font Sizes

Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

Nearly My Type

It's the face you've always wanted. Font embedding on the Web may help you get it.

Text Sizing

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so I could see where they did and didn't work. So I made 264 screenshots. This collection is posted for anyone else who is unhappy and distrustful.

Accessible Web Typography: An Introduction for Web Designers

Text is your flexible friend; it can be transformed into audio or braille; used to describe non-text elements; and be presented visually in an infinite number of sizes.

Embedding Fonts Tutorial

We really don't have to be stuck in bland land anymore. Font embedding is here, which means that we can use just about any font we want to on our Web pages, and users will actually see it.

Beyond the FONT Tag: Practical HTML Text Styling

Since its introduction, HTML's FONT tag has been the predominant means of specifying font size, face, and color on the Web. Use of FONT is unfortunate on many counts, not least of which for Web developers is the tedium and bloat of adding, e.g., '...' dozens or even hundreds of times to complex table-based pages. Modem users suffer too: often more than 20% of a typical commerce/portal site's weighty HTML code consists of FONT and its attributes. FONT is slow.

Toward a Standard Font Size Interval System

This document discusses the strengths and weaknesses of various deployed and recommended methods of specifying font sizes in Web documents and application interfaces, and proposes a harmonization. This scheme will enhance the legibility, clarity, and aesthetics of documents presented on screen, and help retire less elegant alternatives that are hurtful to the Web as a dynamic information resource - one that is accessible to users with widely varying needs and purposes. It is intended for Web browser and stylesheet implementors of all religions, but may be of interest to Web authors and digital typography and/or CSS enthusiasts at large.

Why Points Suck

A thousand-word GIF essay and a dump of ill-edited correspondence on units of measure for Web design.

Breaking the Web

One of the lessons I learned at my mother’s knee was that you have to know the rules in order to break them properly. (Mother was a graphic designer.) The rules that are worth breaking are the ones you understand the purpose of – maybe you even agree with that purpose in general. There are plenty of stupid rules for the Web, rules that were put there by people who extrapolated too soon from too small a set of data. Those rules are no fun to break, kind of like removing a tag that says 'Do not remove under penalty of law' from a sofa cushion. We won’t bother with those rules today. Let’s go after the rules worth our time and effort. Given that, here’s my list of Web rules I’d most like to see broken, but only if they’re broken well.

The War Between Text and Links

There are tiny typographic battles being fought on the Web, from page to page and site to site, skirmishes in a larger conflict between text and links. Like many wars, this one has a thin ideological gloss that obscures a deeper economic and territorial conflict.

The Trouble With Em 'n En

More than you ever wanted to know about dashes, spaces, curly quotes, and other vagaries of online typography. HTML specs, grammatical rules, browser bugs and character encoding—it’s all here.

Typography Matters

It's a style thing. It's a usability thing. It's a tricky thing for large content sites and a step up for independents. It's typographically correct punctuation on the web, and ALA's associate editor makes the case for it.

More About Fonts

No Web page fonts should be less than 10-points, Optimal reading speed for most adults will be elicited with 12-point fonts (size=3). There is probably no reliable difference in reading speed for most adults when viewing common font styles (Arial, Verdana, Georgia, Times New Roman). Most users tend to prefer sans serif fonts (Arial, Verdana). Older users will benefit from type sizes that are at least 14-points.

The Effects of Bold Text on Visual Search: The Downside of Highlighting

Everybody knows that by making a word bold that it will ‘standout,’ be perceived more readily and (obviously) processed faster. For example, which of the following formats will elicit the fastest performance by customer service representatives -- A or B?

Optimal Line Length: Research Supporting How Line Length Affects Usability

What is the optimal line length when reading prose text from a monitor? Certain aspects of usability have been researched for over 120 years. One active area of investigation has been the influence of line length on the speed of reading prose text. Weber (1881) made the first research-based recommendations when he suggested that an ideal line length was 4 inches (100 millimeters). He stated further that the maximum never should exceed 6 inches (150 mm). The same year Javel (1881) reported that line lengths should be no longer than 3.6 inches (90 mm). Two years later, Cohn (1883) confirmed that 3.6 inches (90 mm) was the best length, and that 4 inches (102 mm) was the longest admissible line length.

Website Layout: What Works Best--Fluid, Centered, or Left-Justified?

How should you lay out your website? Michael Bernard and Laurie Larsen from Wichita State University published a study where they compared three layouts: Fluid, Centered (fixed-width) and Left-justified (fixed-width).

Typefaces

Typography is the balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content. Typography plays a dual role as both verbal and visual communication. As readers scan a page they are subconsciously aware of both functions: first they survey the overall graphic patterns of the page, then they parse the language, or read. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.

Web Design: Readability

One of the most important rules of web design is that your site should be easy to read. This is determined by a number of factors.

Web Page Design for Designers

The purpose of my Web Page Design for Designers site is not to teach people how to produce web pages. There is little mention of HTML or any other technical stuff except where necessary. It is assumed that the reader already has a grasp of HTML programming, or has made the decision to use a WYSIWYG Web page editor. It is aimed at people who are already involved with design and typography for conventional print and want to explore the possibilities of this new electronic medium. They are probably already using page layout tools like QuarkXPress, Photoshop, Freehand and Illustrator and have discovered that designing web pages is something quite different.

Web Page Design for Designers: Typography

Good typography is just as important on a web page as it is in any other medium. The fact that it appears on a computer screen and not on a piece of paper is immaterial, it should still be pleasing to look at and easy to read. In every situation where type is used - in publishing, signage, packaging, television etc. - the designer has to adapt his techniques to suit the medium.

The Tyranny of Typography

Authors accustomed to controlling every aspect of their document's presentation are often frustrated by their inability to control document presentation on the Web. There is a Web Uncertainty Principle that says you cannot simultaneously determine the presentation of a document to all viewers and maintain its 'webness.' It is impossible, and it is a good thing. What appear to be problems controlling typography are the result of permitting users to control how information is presented to them. Modern web browsers provide many opportunities for users to change an author's intended presentation. To some this is a problem — possibly, a threat — while to others it is liberating.

Let Users Control Font Size

Sometimes technological progress backfires, and the 'better' technology turns out to be worse for users. The Web is no stranger to this problem, and has experienced many innovations that would have been best avoided. Examples include frames, changing the color of browser scrollbars, and scrolling text. Another example of harmful Web technology comes with the increasing use of style sheets, which let web designers specify the exact size of text down to the pixel. Unfortunately, many designers are using this ability, leading to reduced readability of an increasing number of websites.

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.

Intercultural Research in Page Design and Layout for Asian/Pacific Audiences

We, Fuji Xerox, implemented an intercultural survey in page design and layout of customer documents for business machines such as copy machines and printers. The research covered the main regions in Asia/Pacific: Australia, Japan, Korea, Singapore, and Taiwan. We studied their preferences in printed colors, typography, page layout, and pictographs. The results show Asia/Pacific audiences share a lot of preferences in page design and layout, though there are some uniqueness in printed colors and pictographs. It also became clear American English is not a serious problem for people who are Queen’s English natives.