Typography is the study and process of typefaces; how to select, size, arrange, and use them in general. Traditionally, typography was the use of metal types with raised letterforms that were inked and then pressed onto paper. In modern terms, typography today also includes computer display and output.
#34307
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
#34764
This PDF is an excellent reference for designers who don’t want to spend a lot of time figuring out whether two or more fonts will work well together. This tool enables designers to choose the perfect typography combination.
#34765
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
#34773
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.
Hobo (2008). Design>Web Design>Accessibility>Typography
#34984
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
#34985
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
#35214
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.
Martin, Michael. Smashing (2009). Articles>Web Design>Typography>Assessment
#35215
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.
Chapman, Cameron. Smashing (2009). Articles>Web Design>Typography>CSS
#35217
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
#35218
A Strident Defense of Mediocre Formatting
Formatting automation removes cost from the process of creating and delivering content. For technical documents that change often and are perhaps delivered in multiple languages, it removes a lot of cost. Essentially, we can produce documents inexpensively and give more people access to them as a direct result of lower cost, or we can climb on our typographic high horse and whine about word spacing. I’m with the noisome fanboys.
O'Keefe, Sarah S. Scriptorium (2009). (Afrikaans) Articles>Document Design>Typography>Minimalism
#35267
Adobe FrameMaker: Refining the Type Size List
The sizes listed in the picture above are the default type sizes listed in FrameMaker's Paragraph and Character Designers. If your favorite choices are listed, great! If not, you have to type the size you want into the Size field. If you'd like to modify the Size list so that it includes your favorite Sizes, read on.
Binder, Barbara. Blogs.com (2009). Articles>Document Design>Typography>Adobe FrameMaker
#35366
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.
Johnson, Tom H. I'd Rather Be Writing (2009). Articles>Web Design>Typography>Usability
#35463
Text Wrap and Text Formatting in InDesign
The most frequently asked questions I get from people who are new to InDesign revolves around Text Wrap; however, there are also questions about text formatting that don’t get asked. But I know they exist because when I’m presenting in front of an audience and I start formatting text, I can see the look of amazement on some folks’ faces as if they’re thinking, “Hey, I didn’t know you could do that!”
White, Terry. Layers Magazine (2009). Articles>Document Design>Typography>Adobe InDesign
#35476
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.
Chapman, Cameron. Smashing (2009). Articles>Web Design>Typography>Graphic Design
#35478
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
#35483
Ampersands have long been the character in a typeface with which typographers can indulge themselves. Sweeping curves, flirtatious finishes and bold statements – these are the things that make ampersands an exciting character to use and, better still, to design. There are, however, two problems.
Smashing (2008). Articles>Typography>Graphic Design>Fonts
#35484
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.
Steven D. Smashing (2008). Articles>Web Design>Advice>Typography
#35559
If you look through a poster session at a scientific conference, I’ll bet over 98% of their titles are centered at the top of their posters. Why? There is no advantage in reading. Most word processors and other publishing programs start with text left aligned by default, which implies that people deliberately center the text all the time.
Better Posters (2009). Design>Presentations>Document Design>Typography
