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.
The Effect of Screen Size on Readability Using Three Different Portable Devices
As small portable computing devices become more prevalent in society, the readability of text available on such devices becomes of increasing concern. This paper describes two experiments that compare the readability of text presented on three portable devices, a laptop, a Rocket Book, and a Palm Pilot. The first experiment involved a visual search task on one page of text while the second experiment required scrolling (or paging) of text. We hoped to discover whether reading speed was affected by screen size when text was presented with and without the need for scrolling. We also hoped to determine whether error rates were correlated to screen size. Finally, we wished to investigate issues of user satisfaction as they related to the different devices.
Chung, I-Hsin, Erica Kolatch, Sofia Sculimbrene and Hui-Fang Wen. SHORE 2000 (2000). Articles>Typography>Wireless Web>Usability
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).
Bailey, Robert. Human Factors International (2002). Articles>Web Design>Typography
Typography 101B: The Role of White Space in Making Words Readable

Hart continues his dissection of typography in this second installment, in which he discusses the important of spacing for the readability of words and sentences.
Hart, Geoffrey J.S. Intercom (2008). Articles>Typography>Usability
You Got Your Technology in My Typography!!!
What is it about XML, and the technical publishing solutions that storing content in XML enables, that makes non-technical, design-oriented people in publishing want to run for the hills while screaming “You just don’t get it!”, leaving the technical people in publishing in the dust, wondering why no one understands all the wonderful benefits that can be reaped through publishing automated by XML-enabled technologies.
Kaplansky, Jean. Content Wrangler, The (2009). Articles>Content Management>Typography>Visual Rhetoric
Text Treatment and the User Interface
Before graphic user interfaces, text was the primary means of both input and output defining human-computer interactions. Even today, much of the information user interfaces present is textual. Therefore, we should not underestimate how the right text treatment can measurably improve user productivity and increase user satisfaction. As new technologies become available—for example, larger monitors with higher resolutions—a good foundation of knowledge about effective text treatment can help designers create usable user interfaces for them more quickly.
Komischke, Tobias. UXmatters (2009). Articles>User Interface>Typography
Get creative. Expand your font choice. Mix fonts. Use weights, font-styles, small-caps. Mind variations in size and legibility.
Schoors, Lennart. SlideShare (2009). Presentations>Web Design>Typography>Fonts
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.
Rutter, Richard. Twenty-Four Ways to Impress Your Friends (2007). Articles>Web Design>Typography>Fonts
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.
Monday By Noon (2007). Articles>Web Design>Typography>Linux
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
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
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.
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
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
Changing the Default Font in Microsoft Word
Don't like the font that Word uses for a default in your new documents? You can pick a different font, but the way you make the selection is not as straightforward as you might expect. (This tip works with Microsoft Word 2000, Word 2002, Word 2003, and Word 2007.)
Wyatt, Allen. Word Tips (2009). Articles>Typography>Software>Microsoft Word
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
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
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
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
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
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
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
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
Adobe FrameMaker: Troubleshooting Unavailable Fonts
I never like opening up a FrameMaker document and getting the dreaded unavailable fonts dialog box. Sadly, with multiple authors who contribute documents to me from around the world, it's just a fact of life that I see the dialog box frequently.
Binder, Barbara. I Came, I Saw, I Learned (2009). Articles>Typography>Software>Adobe FrameMaker
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
There are 31 readers currently online: 0 registered users and 31 guests. Register.

![]()
![]()


![]()
![]()
![]()