http://tc.eserver.org/dir/Typography A listing of the most recently indexed works about Typography in the field of technical communication. en-us Copyright (c) 2005-08 by the EServer. All rights reserved. tclib-editorial@eserver.org (TC Library Editorial Board) webmaster@eserver.org (Geoffrey Sauer) http://tc.eserver.org/images/newlogo.gif http://tc.eserver.org/dir/Typography http://tc.eserver.org/35559.html http://tc.eserver.org/35559.html 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. http://tc.eserver.org/35476.html http://tc.eserver.org/35476.html 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. http://tc.eserver.org/35477.html http://tc.eserver.org/35477.html Here are 40 fantastic typography-related blogs that will allow you to expand your knowledge base of what typography really is. http://tc.eserver.org/35478.html http://tc.eserver.org/35478.html 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. http://tc.eserver.org/35483.html http://tc.eserver.org/35483.html 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. http://tc.eserver.org/35484.html http://tc.eserver.org/35484.html 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. http://tc.eserver.org/35485.html http://tc.eserver.org/35485.html In most designs typography is used to present information in a rather static way — after all, it has to be read by users. However, it doesn’t have to be like this. What effects can be achieved if typography is set in motion? What happens if letters are suddenly floating, jumping and dancing around while sentences are actually interacting with the readers? Where motion is involved, video is necessary. Below we present some excellent examples of typography embedded into movies and videos — be prepared, “dynamic” typography can be breathtaking. http://tc.eserver.org/35486.html http://tc.eserver.org/35486.html Which typefaces are “bulletproof”? What fonts can be used effectively in almost every Corporate Design? And what are the options for unique, but still incredibly beautiful typefaces? We have answers. Over the last few days we’ve browsed through dozens of type foundries, read dozens of designers’ articles about typography, analyzed font rankings and visited bookmarked font-related suggestions. So this post has ‘em all. Well, OK, at least many of them. http://tc.eserver.org/35463.html http://tc.eserver.org/35463.html 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!” http://tc.eserver.org/35420.html http://tc.eserver.org/35420.html 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. http://tc.eserver.org/35366.html http://tc.eserver.org/35366.html 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. http://tc.eserver.org/35267.html http://tc.eserver.org/35267.html 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. http://tc.eserver.org/35214.html http://tc.eserver.org/35214.html 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. http://tc.eserver.org/35215.html http://tc.eserver.org/35215.html 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. http://tc.eserver.org/35217.html http://tc.eserver.org/35217.html 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. http://tc.eserver.org/35218.html http://tc.eserver.org/35218.html 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. http://tc.eserver.org/34982.html http://tc.eserver.org/34982.html 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.) http://tc.eserver.org/34984.html http://tc.eserver.org/34984.html 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. http://tc.eserver.org/34985.html http://tc.eserver.org/34985.html 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. http://tc.eserver.org/34773.html http://tc.eserver.org/34773.html 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. http://tc.eserver.org/34764.html http://tc.eserver.org/34764.html 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. http://tc.eserver.org/34765.html http://tc.eserver.org/34765.html 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. http://tc.eserver.org/34379.html http://tc.eserver.org/34379.html Their logo is COPPERPLATE. We can't shop here. http://tc.eserver.org/34302.html http://tc.eserver.org/34302.html 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? http://tc.eserver.org/34307.html http://tc.eserver.org/34307.html 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. http://tc.eserver.org/34146.html http://tc.eserver.org/34146.html 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. http://tc.eserver.org/34047.html http://tc.eserver.org/34047.html Get creative. Expand your font choice. Mix fonts. Use weights, font-styles, small-caps. Mind variations in size and legibility. http://tc.eserver.org/34048.html http://tc.eserver.org/34048.html 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. http://tc.eserver.org/33723.html http://tc.eserver.org/33723.html 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. http://tc.eserver.org/33656.html http://tc.eserver.org/33656.html 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. http://tc.eserver.org/33401.html http://tc.eserver.org/33401.html 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. http://tc.eserver.org/33231.html http://tc.eserver.org/33231.html 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). http://tc.eserver.org/33178.html http://tc.eserver.org/33178.html There is a commonly held belief that Helvetica is the signage typeface of the New York City subway system, a belief reinforced by Helvetica, Gary Hustwit’s popular 2007 documentary about the typeface. But it is not true—or rather, it is only somewhat true. Helvetica is the official typeface of the MTA today, but it was not the typeface specified by Unimark International when it created a new signage system at the end of the 1960s. Why was Helvetica not chosen originally? What was chosen in its place? Why is Helvetica used now, and when did the changeover occur? http://tc.eserver.org/33179.html http://tc.eserver.org/33179.html At present, we do not know how to optimize reading via electronic equipment. In this chapter, some considerations that may help us do this in the future will be raised, and some of the relevant evidence and theory that do exist will be cited and briefly highlighted. The focus of this paper is on reading of continuous text, whether in linear form or hypertext form, and with or without the presence of graphics or other types of information. http://tc.eserver.org/33180.html http://tc.eserver.org/33180.html The readability of twelve different fonts and sizes in the Microsoft Windows environment was studied. The specific fonts were Arial, MS Sans Serif, MS Serif, and Small Fonts. Their sizes ranged from 6.0 to 9.75 points. These were presented using black text on either a white or gray background and either bold or non-bold style. There were significant differences between the various font/size combinations in terms of reading speed, accuracy, and subjective preferences. There were no consistent differences as a result of background color or boldness. The most preferred fonts were Arial and MS Sans Serif at 9.75. Most of the fonts from 8.25 to 9.75 performed well in terms of reading speed and accuracy, with the exception of MS Serif at 8.25. Arial at 7.5 and both of the Small Fonts (6.0 and 6.75) should generally be avoided. http://tc.eserver.org/33181.html http://tc.eserver.org/33181.html Reading text from electronic displays has now become a routine behavior in the workplace and elsewhere. As the computer replaces paper documents, the problems of reading text from electronic displays becomes increasingly evident. A decline in performance in display reading performance can be as high as 40 percent or more when compared to the same text read from paper. This report provides a review and analysis of recent studies of reading from electronic displays. Factors examined include not only display variables such as flicker, spatial resolution and image quality, but also the effects of autoscrolling, single and multiple word sequential presentation, color, font characteristics, and other factors. Of particular note are the effects of display presentation methods on text legibility and comprehension. Conclusions and recommendations for user interface design are provided. http://tc.eserver.org/33182.html http://tc.eserver.org/33182.html 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. http://tc.eserver.org/33148.html http://tc.eserver.org/33148.html There is an optimum width for a Measure and that is defined by the amount of characters are in the line. A general good rule of thumb is 2-3 alphabets in length, or 52-78 characters (including spaces). This is for legibility purposes. Keep your Measure within these guidelines and you should have no problem with legibility. Please note that this figure will vary widely with research, this is just the figure I use and it seems to work well as a generally rule of thumb. http://tc.eserver.org/33149.html http://tc.eserver.org/33149.html Hanging punctuation is an area of typographic design which has suffered at the hands of certain software products. It's a term which refers to glyph positioning to create the illusion of a uniform edge of text. It's most commonly used for pull-quotes, but I feel the most neglected is that of bulleted lists. http://tc.eserver.org/33150.html http://tc.eserver.org/33150.html The third installment of this series is dedicated to just one typographic element - Ligatures. Ligatures are combinations of letters - some of them are functional, some are decorative. They are more commonly seen in serif faces, although ligatures in sans-serif faces such as Gill Sans and Scala Sans are important to the typeface and should be used. http://tc.eserver.org/33151.html http://tc.eserver.org/33151.html Typographic hierarchy is how different faces, weights and sizes of typefaces structure a document. Some of these hierarchical devices are well-established conventions, such as cross heads and folios, so I'm not going to touch on them in this post. To keep it simple I'm going to concentrate on two things - size and weight. The first of which is size. http://tc.eserver.org/33152.html http://tc.eserver.org/33152.html Typeface weight, and the choice of weight, is perhaps one area of typography that to most designers is simply a matter of choice. That choice is dictated by answering a design problem which is aesthetically, or content, motivated. What many designers do not realise is that there are rules which should govern the choice of weight - a typographic pecking order - which when followed, aids the designer's typesetting and can produce stunning results. http://tc.eserver.org/33116.html http://tc.eserver.org/33116.html The appropriate type size for a publication depends on many factors but there are some general type size guidelines to follow to insure readability for the main audience of your publication. These are not hard-and-fast rules. The more you know about your readership, the better type size choices you will make. http://tc.eserver.org/33117.html http://tc.eserver.org/33117.html 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. http://tc.eserver.org/33118.html http://tc.eserver.org/33118.html This study compares reading performance between an ornate sans serif font (Gigi) and Times New Roman. The traditional measures of reading speed, comprehensibility, and subjective preference were employed. http://tc.eserver.org/33120.html http://tc.eserver.org/33120.html While processing speed and computational flexibility have grown at incredible rates, our displays, the most human-facing elements of our digital lives, lag behind. http://tc.eserver.org/33121.html http://tc.eserver.org/33121.html 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. http://tc.eserver.org/33122.html http://tc.eserver.org/33122.html 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. http://tc.eserver.org/32878.html http://tc.eserver.org/32878.html 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. http://tc.eserver.org/32897.html http://tc.eserver.org/32897.html 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. http://tc.eserver.org/32911.html http://tc.eserver.org/32911.html 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. http://tc.eserver.org/32828.html http://tc.eserver.org/32828.html 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. http://tc.eserver.org/32801.html http://tc.eserver.org/32801.html Resumes play an important role when applying for a job. Unfortunately, many applicants focus only on the content of the resume and not the appearance. The typeface chosen to display the resume not only influences the physical appearance, but also influences how an employer may view the applicant. In this study, resumes displayed in a high appropriate typeface (Corbel), resulted in the applicant being perceived as more knowledgeable, mature, experienced, professional, believable, and trustworthy than when displayed in a neutral typeface (Tempus Sans) or low appropriate typeface (Vivaldi). Moreover, the applicant was more likely to be called for an interview when their resume was displayed in a high appropriate typeface than a neutral or low appropriate typeface. http://tc.eserver.org/32804.html http://tc.eserver.org/32804.html This article continues the investigation of the legibility of onscreen typefaces and the influence of individual character features on correct identification. Specific attributes of alphanumeric characters and symbols shown to be the least legible were measured and analyzed using a statistical method called classification tree analysis. Results from this analysis for the number "1" and the "÷" symbol are discussed. http://tc.eserver.org/32745.html http://tc.eserver.org/32745.html 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. http://tc.eserver.org/32719.html http://tc.eserver.org/32719.html In this article, we go retro, finding beautiful examples of vintage typography and the modern work they’ve inspired. Looking back, it’s easy to see why some of this type has stood the test of time and is still lingering in the design community today. http://tc.eserver.org/32725.html http://tc.eserver.org/32725.html 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. http://tc.eserver.org/32727.html http://tc.eserver.org/32727.html 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). http://tc.eserver.org/32728.html http://tc.eserver.org/32728.html 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. http://tc.eserver.org/32557.html http://tc.eserver.org/32557.html OpenType fonts often contain a treasure trove of typographic options. Discover some easy ways to enhance your typography by taking advantage of discretionary ligatures, swashes or titling alternates – to name just a few. http://tc.eserver.org/32558.html http://tc.eserver.org/32558.html The history of Helvetica includes a number of twists and turns. There are, in fact, two versions of Helvetica. The first one is the original design, which was created by Max Miedinger and released by Linotype in 1957. And secondly, in 1983, D. Stempel AG, Linotype’s daughter company, released the Neue Helvetica® design, which was a re-working of the 1957 original. http://tc.eserver.org/32559.html http://tc.eserver.org/32559.html Setting professional-looking typography is all about attention to detail. Hyphenation is one of these critical details: what and where to hyphenate, and, in some cases, what not to hyphenate. There are times you don’t want text to break at the end of a line, such as a proper name, a phone number or a URL. But if you leave the choice up to auto-hyphenation, it can happen without your consent. This is when the nonbreaking hyphen comes in handy. A nonbreaking hyphen is not really a hyphen; rather, it is a command not to hyphenate. When placed in front of a word or a group of characters acting as a word, such as a phone number, web address or email address, that word will not be hyphenated. This is helpful not only in text, but also in headlines that you don’t want breaking onto two lines. http://tc.eserver.org/32560.html http://tc.eserver.org/32560.html We previously discussed small caps and the importance of using true-drawn versions rather than computer-generated, “fake” ones. Many of today’s OpenType fonts include true-drawn small caps, making it easier than ever to take advantage of this typographically sophisticated feature, but the OpenType interface in both Adobe® InDesign® CS3 and QuarkXpress® 7 can be a bit confusing. http://tc.eserver.org/32561.html http://tc.eserver.org/32561.html Garamond typefaces, in both their American and European flavors, are generally considered ideal book faces. The design is also an excellent choice for most other forms of continuous text. Magazines, newsletters, annual reports, lengthy advertising copy – for example – are all naturals for the Garamond design. http://tc.eserver.org/32562.html http://tc.eserver.org/32562.html Even with all the technology at the disposal of today’s designers, in the end it’s what the human eye sees that counts. That’s why hung punctuation is one of the skills to master when you’re ready to add professional finesse to your typography. Learn what hung punctuation is and how to achieve it in the leading page layout applications. http://tc.eserver.org/32563.html http://tc.eserver.org/32563.html Typing two spaces after a period is a relic of the typewriter era that has hung around long past its sell-by date. Here’s how to make sure none of those double-space dinosaurs find their way into your typeset work. http://tc.eserver.org/32564.html http://tc.eserver.org/32564.html Automatic, or manual? No, we’re not talking about transmissions - we’re talking about bullet lists, those frequently used tools for organizing lists of information. Your layout application will be happy to format these lists for you, but for true typographic finesse, it’s time to learn to “drive stick” and call your own shots about bullets, alignment and spacing. http://tc.eserver.org/32565.html http://tc.eserver.org/32565.html The Halloween season offers a spookily good excuse to explore the world of scary fonts, but the terror needn’t end there. From media packaging to promotional items, whenever horror, mystery, fear and suspense need to be evoked, scary fonts can sneak up behind your audience and say “boo!” http://tc.eserver.org/32568.html http://tc.eserver.org/32568.html Breaking up isn’t hard to do – just do it right so you don’t lose face. Learn why making the right line breaks in display type is essential for good looks and good sense. http://tc.eserver.org/32569.html http://tc.eserver.org/32569.html Space matters. Word space, that is. Different letter and word shapes call for subtly different amounts of space. Learn to see and finesse word spacing in both text and display type with these how-tos. http://tc.eserver.org/32570.html http://tc.eserver.org/32570.html Comic book writers aren’t the only ones who can use silly, wacky and irreverent fonts. You, too, can give your work a fresh and light-hearted look with one of these fine, fun fonts. http://tc.eserver.org/32571.html http://tc.eserver.org/32571.html The keyboard is rarely the friendliest path to symbols and special characters. Sometimes a bit of menu magic can guide you past the overwhelming Glyph palette. Indeed, the Special Character flyout palette in Adobe InDesign CS3 is a great shortcut to frequently-used characters and will spare your fingers the keyboard contortions. http://tc.eserver.org/32572.html http://tc.eserver.org/32572.html Powerful design software makes many choices available to graphic designers, but just because you can do something doesn’t always mean you should. For example, sometimes it’s a good idea to convert your text layouts to outline, but sometimes it isn’t. Learn more about this occasionally necessary, often ill-advised practice before you decide whether or not it’s time to convert. http://tc.eserver.org/32573.html http://tc.eserver.org/32573.html If there were a “Ten Most Wanted” list for typographic crimes, these hardboiled miscreants would be on it. Learn what the ten worst (and most common) type crimes are, and how to avoid them. http://tc.eserver.org/32574.html http://tc.eserver.org/32574.html Today’s OpenType fonts come equipped with a virtual buffet of numeral styles, but all those choices can be a bit much for your design application to swallow. Here’s a practical guide to help you find your way through the maze of oldstyle, lining, proportional, and tabular, in both InDesign and Quark. http://tc.eserver.org/32575.html http://tc.eserver.org/32575.html Sometimes a simple idea can make a big difference in your work. One recent improvement to major design applications is the addition of glyph palettes. This handy feature will help you find and use the exact character you’re looking for – even if your font has thousands to choose from! http://tc.eserver.org/32576.html http://tc.eserver.org/32576.html Does designing a table of contents drive you dotty? Next time, remember to say “take me to your tab leader.” Learning how to use your application’s automated tab leader function is a great way to save time and keep your layouts looking professional, down to the last detail. http://tc.eserver.org/32577.html http://tc.eserver.org/32577.html Graphic designers love the convenience of today’s computer-created type designs, but too much perfection can get boring. When your eye gets tired of all those flawless, digitally-precise letters, it’s time to explore distressed typefaces. They’re weather-beaten, inconsistent, and utterly, irresistibly human. http://tc.eserver.org/32578.html http://tc.eserver.org/32578.html Are your characters depressed? When punctuation marks are positioned next to ALL CAPS, it can leave them looking a little low. Even making small adjustments in a character’s position will create greater visual balance and give your layout a “lift,” especially in display sizes. http://tc.eserver.org/32594.html http://tc.eserver.org/32594.html Are you known by your initials? Turn those letters into a terrific signature! http://tc.eserver.org/32555.html http://tc.eserver.org/32555.html 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. http://tc.eserver.org/32533.html http://tc.eserver.org/32533.html 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. http://tc.eserver.org/32436.html http://tc.eserver.org/32436.html 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. http://tc.eserver.org/32463.html http://tc.eserver.org/32463.html 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. http://tc.eserver.org/32408.html http://tc.eserver.org/32408.html 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. http://tc.eserver.org/32263.html http://tc.eserver.org/32263.html Typotheque is a type foundry, run by Peter Biľak (who is responsible for the fonts and website in general), and Johanna Biľak, (who is responsible for other products, such as books and t-shirts). We also work with a number of freelance designers, writers, and programmers who assist in some of our current projects. http://tc.eserver.org/32104.html http://tc.eserver.org/32104.html iLT is designed to inspire its readers, to make people more aware of the typography that is around them. We really cannot escape typography; it's everywhere: on road signs, shampoo bottles, toothpaste, and even on billboard posters, in books and magazines, online...the list is endless, and the possibilities equally so. http://tc.eserver.org/32105.html http://tc.eserver.org/32105.html if you’re not a brilliant designer or a master calligrapher, well, don’t worry—you can still create some beautiful fonts with a little hard work, a lot of knowledge, and a little inspiration. http://tc.eserver.org/32106.html http://tc.eserver.org/32106.html 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. http://tc.eserver.org/32107.html http://tc.eserver.org/32107.html We owe it to the reader not to hinder their reading pleasure, but to aid it; second, we owe a responsibility to the typeface or typefaces we employ. Good typefaces are designed for a good purpose, but not even the very best types are suited to every situation. http://tc.eserver.org/32108.html http://tc.eserver.org/32108.html Ever seen a typeface (font) you like but couldn’t identify it? I once knew an Art Director who seemed to be able to identify just about any typeface I showed him. However, in recent years, even he responds with, I don’t have a clue.So where to turn? Well, rather than publishing my Art Director friend’s email address here, I’ll introduce a few resources to get you started. Although none of the following resources is infallible, they will definitely give you a head start. http://tc.eserver.org/32109.html http://tc.eserver.org/32109.html learning just a little about the terminology will help you to have a greater appreciation for type; it will also help you to identify different typefaces and fonts — and that in turn will help you make better, more informed choices about the fonts you use. Oh, and lastly, you’ll learn what fish scales and serifs have in common. http://tc.eserver.org/32110.html http://tc.eserver.org/32110.html typoholism. noun. A disorder characterized by the excessive consumption of and dependence on type, leading to physical and psychological harm and impaired social and vocational functioning. Also called typographical abuse, font dependence. http://tc.eserver.org/32111.html http://tc.eserver.org/32111.html 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. http://tc.eserver.org/32112.html http://tc.eserver.org/32112.html 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. http://tc.eserver.org/32113.html http://tc.eserver.org/32113.html Today we’re going to de-robe two popular typefaces, namely Arial and Helvetica — faces that are often confused, and often the subjects of mistaken identity. http://tc.eserver.org/32114.html http://tc.eserver.org/32114.html Every subject, from dentistry to dog handling has its own vocabulary — terms that are peculiar (unique) to it. Typography is no exception. Learning the lingua franca (lingo) of type will make typography that much more accessible; and that will, in turn, lead to greater understanding, and hopefully a greater appreciation for all things 'type.' http://tc.eserver.org/32095.html http://tc.eserver.org/32095.html Understanding what really goes on where the eyeballs meet the photons. http://tc.eserver.org/32101.html http://tc.eserver.org/32101.html Have you a typographer's eye? Head on over to this site to test your skills. http://tc.eserver.org/32072.html http://tc.eserver.org/32072.html 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. http://tc.eserver.org/31984.html http://tc.eserver.org/31984.html 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. http://tc.eserver.org/31910.html http://tc.eserver.org/31910.html Users scan lists by moving their eyes rapidly down the left edge. Menu items that are right-aligned make scanning more difficult. http://tc.eserver.org/31881.html http://tc.eserver.org/31881.html Some people are really creative and can take everyday ordinary things and turn them into something extraordinary. This is certainly the case with Streeter Seidell and Dan Gurewitch, the creators of Font Conference. http://tc.eserver.org/31492.html http://tc.eserver.org/31492.html I am trying to evangelize the 10/20/30 Rule of PowerPoint. It’s quite simple: a PowerPoint presentation should have ten slides, last no more than twenty minutes, and contain no font smaller than thirty points. While I’m in the venture capital business, this rule is applicable for any presentation to reach agreement: for example, raising capital, making a sale, forming a partnership, etc. http://tc.eserver.org/31235.html http://tc.eserver.org/31235.html As business communicators, our goal is typically to influence opinion or change behavior in order to achieve business objectives. To accomplish this, we must get people to interact with our message. A page of 12-point Times New Roman text is seldom compelling, so what you are left with to persuade people to read your publication is graphic design. http://tc.eserver.org/31195.html http://tc.eserver.org/31195.html This study investigated the effect that a font has on the reader's perception of an email. Based on a previous study by Shaikh, Chaparro, and Fox (2006), a sample email message was presented in three fonts (Calibri, Comic Sans, and Gigi). The three chosen fonts represented a high, medium, and low level of congruency for email messages. The least congruent typeface (Gigi) resulted in different perceptions of the email document and its author. However, no significant differences were found between the moderately and highly congruent fonts. http://tc.eserver.org/31191.html http://tc.eserver.org/31191.html This study investigated the effect of website typeface appropriateness on the perception of the site's company. Results indicate that typefaces that are high in appropriateness should be used for websites. Neutral and low appropriate typefaces significantly decreased the perception of the company as judged by professionalism, believability, trust, and intent to act on the site. http://tc.eserver.org/31192.html http://tc.eserver.org/31192.html This study investigated the legibility of onscreen typefaces and the influence of individual character features on correct identification. Specific attributes of alphanumeric characters and symbols shown to be the least legible were measured and analyzed using a statistical method called classification tree analysis. Results from this analysis for the letter "e" and the number zero are discussed. http://tc.eserver.org/30605.html http://tc.eserver.org/30605.html 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. http://tc.eserver.org/30527.html http://tc.eserver.org/30527.html An article about the graphic design of logotypes using typographic widely successful techniques. http://tc.eserver.org/30529.html http://tc.eserver.org/30529.html How to choose a typeface for clear, easy reading over long distances. http://tc.eserver.org/30337.html http://tc.eserver.org/30337.html Type is to a publication as a speaker is to an audience -- they both have to work coherently to capture and keep your attention. Type defines a publication's personality; since it's a common element on every page, it should work to achieve a visual unity throughout. Crisp, consistent, readable typography will help propel the reader through your pages. http://tc.eserver.org/30301.html http://tc.eserver.org/30301.html You wouldn't think that something as seemingly insignificant as the type of font you use could be so important, but it really is. As one of the goals of technical communication, we try our best to make information easy to find and understand. The type of font being used has a lot to do with this goal. http://tc.eserver.org/30302.html http://tc.eserver.org/30302.html In the first lesson on font type I highlighted how they can be used to make information easier to understand, and how the look of the font accomplishes that. Here I'd like to discuss how fonts can actually affect the meaning of that information. http://tc.eserver.org/30211.html http://tc.eserver.org/30211.html A catalogue of examples of typographic designs with particular typefaces/fonts, indexed by category and alphabetically. http://tc.eserver.org/30212.html http://tc.eserver.org/30212.html Describes from start to finish the designing of a type and the details of making that type--beginning with the designer's mental attitude and ending with the printed sheet, illustrating each step as graphically as possible. http://tc.eserver.org/30158.html http://tc.eserver.org/30158.html The technology of in-house publishing is radically shifting the responsibility for document design from the graphic specialist to the individual writer. To apply the new technology, professional communicators need to understand the principles underpinning typographical design and their origin in the functionalist aesthetics of modernism, particularly as articulated by the Bauhaus. While some of the key concepts of modernism--strict economy, universal objectivity, intuitive perception, and the unity of form and purpose--are well-suited to business and technical documents, these concepts are bound to an historical and intellectual milieu. By understanding the influence of modernism on typographical design, professional communicators equipped with the new technology can adapt design principles to the rhetorical context of specific documents. http://tc.eserver.org/29974.html http://tc.eserver.org/29974.html Seven new fonts will make their public appearance in Office 2007. Segoe UI will be used as the Office user interface, and will also be the font used throughout the Windows Vista user interface. For documents produced by Office, Calibri (a sans serif font) is recommended for headings, with Candara (a humanist sans font) recommended for sans body text, and Cambria for serifed. Consolas is a monospaced font, while the remaining two having characteristics that suit particular types of paragraphs. http://tc.eserver.org/29800.html http://tc.eserver.org/29800.html This article considers various notions of 'beauty' and how these have informed the creative and critical processes of graphic design, specifically typography. The author considers how the Renaissance revival of Greek mathematics to support a 'universal beauty' was gradually unpicked by Enlightenment thinkers such as Descartes, Kant and Hume, and how this process has subsequently shaped modernist and postmodernist attitudes towards 'beauty'. From our current vantage point it could be argued that 'beauty' should now be considered a redundant concept; however, design schools and studios continue to make value judgments dividing the 'beautiful' from the 'ugly'. On what basis are these judgements made and are they still valid in a pluralistic society? Is it possible that we now have a new sensibility, a different notion of beauty? Reflecting upon important questions raised by the American designer and writer Steven Heller in his controversial essay 'The Cult of the Ugly' in _Eye_ magazine in 1993, the author proposes that 14 years on from the article, we can indeed witness a new aesthetic sensibility, shared but not universal, rooted in loss yet also 'found'. http://tc.eserver.org/29562.html http://tc.eserver.org/29562.html The population is rapidly aging and becoming a larger share of the marketplace. The demands of the aging eye require typefaces that function well under low-vision conditions. Can signage display useful information that is accessible to all ages? http://tc.eserver.org/29483.html http://tc.eserver.org/29483.html The number of type faces in use today runs into the thousands and as such presents difficulty in selecting the appropriate design for a particular job. Because there are so many type designs to choose from, it is easier to first choose a general type style or classification to suit your graphic design, and then, look for a particular type face that relates to that classification. http://tc.eserver.org/29478.html http://tc.eserver.org/29478.html Copy preparation is a skilled job which, if done properly, assists the smooth flow of work through later stages of the production cycle. All personnel, especially those involved in the composition areas, have seen the results of ineffective copy preparation. http://tc.eserver.org/29480.html http://tc.eserver.org/29480.html Principles of design should always be incorporated in any graphic design project to assist its communicating and graphic interest, however in the planning of a basic design, the designer must produce a job to suit the class of work, the copy, and the tastes of the customer. http://tc.eserver.org/29479.html http://tc.eserver.org/29479.html In the year 1898 the English typefounders, as a body, adopted a system (which had been in use in America since 1878) of casting their types to a certain fixed standard. That standard was the American pica, 83 of which equalled 35 centimetres. The pica, which measured 4.21mm, was divided into 12 equal parts called 'points', which makes the size of a point approximately 0.35 mm. http://tc.eserver.org/29484.html http://tc.eserver.org/29484.html Typing or setting text lines to the same length so that they line up on the left and the right is known as 'justification.' The information that you are now reading has been typeset using this method. The practice originated with Mediaeval scribes who ruled margins and text lines so as to speed writing and fit as many characters on a line as possible. http://tc.eserver.org/29487.html http://tc.eserver.org/29487.html A glossary of typographers' terms. http://tc.eserver.org/29353.html http://tc.eserver.org/29353.html In 1998 when Times New Roman was still widely used on the web, my then boss made sure we always designed our medical web sites with Arial, as she hated the look of serif fonts on the web. Was it the case that sans serif fonts were more legible, or was it just a matter of taste? In an effort to get at the truth, I reviewed over 50 empirical studies in typography and found a definitive answer. http://tc.eserver.org/29312.html http://tc.eserver.org/29312.html Follow along as we travel from hot metal type to phototypesetting, to Type 1, to TrueType, to OpenType, then end the journey with a rousing rendition of a type-centric Johnny Cash song. Who knew the Man in Black was a font fan?