A directory of resources inthe field of technical communication.

Design>Web Design>Typography

87 found. Page 1 of 4.

About this Site | Advanced Search | Localization | Site Maps

1 2 3 4  NEXT PAGE »



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.

Webdesigner Depot (2009). Design>Web Design>Typography


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.

I Love Typography (2008). Design>Web Design>Typography


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.

Byrne, Jim. Scotconnect.com (2003). Design>Typography>Web Design


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.

Daggett, John. Mozilla.org (2009). Articles>Web Design>Typography>CSS


Beautiful Web Type

A demonstration of the best typefaces from the Google web fonts directory.

HelloHappy (2014). Design>Web Design>Typography


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.

Ford, Nathan. Unit Verse (2008). Articles>Web Design>Typography>CSS


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.

Fahrner, Todd. Cleverchimp (1997). Design>Web Design>Typography


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.

Ampsoft (2007). Design>Typography>Web Design


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.

Robbins, Kyle. ReEncoded (2008). Articles>Web Design>Typography


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.

Jason, Chris. ChrisJason.com (2006). Articles>Web Design>CSS>Typography


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).

Rodriguez, David. Web Page Design for Designers (2008). Design>Web Design>Typography>Fonts


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.

Hunt, Ben. Web Design From Scratch (2006). Design>Web Design>Writing>Typography


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?

Bailey, Robert. Web Usability (2003). Design>Typography>Web Design


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.

Shaikh, A. Dawn. Usability News (2005). Articles>Web Design>Typography>Usability


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.

Mulder, Steve. Webmonkey (2002). Design>Web Design>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.

I Love Typography (2007). Design>Web Design>Typography


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.

I Love Typography (2008). Design>Web Design>Typography>Case Studies


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.

Yehla, Noura. Smashing (2009). Articles>Web Design>Typography


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?

Wagner, Mindy. Webdesigner Depot (2009). Design>Web Design>Typography


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.

Manian, Divya. Nimbupani Designs (2009). Articles>Web Design>Typography>CSS


The @Font-Face Rule And Useful Web Font Tricks

The possibility of embedding any font you like into websites via @font-face is an additional stylistic device which promises to abolish the monotony of the usual system fonts. It surely would be all too easy if there was only one Web font format out there. Instead, there’s quite a variety, as you will get to know in this article.

Hermann, Ralf. Smashing (2011). Articles>Web Design>Typography>Fonts


Font-Weight Is Still Broken in All But One Browser

Since its inception in 1996, CSS has provided a way of displaying these other weights through use a numerical scale with the font-weight property. This is still almost entirely broken in every current browser except Firefox 3 on Mac.

Clagnut (2009). Articles>Web Design>Typography>CSS



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.

Apple Inc. (2006). Design>Web Design>Typography>CSS


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.

Grannell, Craig. Opera (2008). Articles>Web Design>Typography


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.

Ivey, Keith C. Editorial Eye, The (1997). Design>Typography>Fonts>Web Design



Follow us on: TwitterFacebookRSSPost about us on: TwitterFacebookDeliciousRSSStumbleUpon