typography

Page 1


Typography by Joe Gillespie — Feb 1, 2000 retrieved October 12 2012from: http://www.wpdfd.com/issues/23/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. — designers have to adapt their techniques to suit the medium. A headline style that works just fine in a magazine spread would not necessarily work on a poster. A magazine is always viewed straight-on at arms length, so letter spacing can be as tight as you like and the words will still be readable. A poster is, more often than not, viewed obliquely, which distorts the type to some extent. Here, a little extra letter spacing helps identification of the individual characters, and hence the words. Designing for a computer screen has its own set of problems. Add to these the elastic nature of a Web page, which has to work across different computer platforms and screen sizes, and the problems get even worse. It is the designer's job to understand these issues and to address them — to maintain some kind of control when everything else is shifting. The SeveNet font family is no longer available from this site, but may be available from the Fountain Type Foundry in Sweden. As with MINI 7, it is a 7-point Macintosh screen font. It has no PostScript or TrueType printer font and no lowercase characters. The PC version is a regular TrueType font. You can use these fonts at multiples of 7 points (14, 21 etc) if you want a deliberately pixelated look. You should do this in Photoshop with anti-aliasing turned off.


  If you are familiar with style sheets in your page layout or in word processing programs, you will understand how it is possible to create a set of type specifications and apply them to a block of text or a whole site. You can make all headlines 48-point Times bold, subheadings 32-point Helvetica bold, and the body text 10-point Times New Roman with whatever leading and indents you like. If you want to change the overall look of your layout to something more technical, you only need edit the style sheet. You could change the headings to Arial Black, the subheads to Arial Bold, and the body text to Arial quickly and easily. Using Cascading Style Sheets (CSS) in fourth-generation browsers gives similar capabilities. Of course you will still be restricted, for the moment, by the availability of fonts on the user's system. CSS can't magically produce Frutiger Extra Bold, Bold, Roman, and Light fonts out of nowhere. Yes, there are a few font-embedding technologies available now, but they are not reliable enough for general use just yet. The idea behind CSS is that content and type markup are kept separate, giving the designer control over type that hasn't been provided for in basic HTML. Apart from the ability to make global changes to styles very easily, it is also possible to deliver the same content with different specifications according to the browser being used. Whether the user has a whiz-bang computer with a large 24-bit monitor or a small black-and-white organizer, it is technically feasible to invoke a different set of styles that give the optimal user experience in any browser. And, if the browser doesn't have CSS capabilities, the layout will degrade gracefully to give, at least, a satisfactory display. This particular block of text is, as far as HTML is concerned, one paragraph. The fact that it is visually broken up into numerous indented paragraphs using <br> tags and runs of   means that it will degrade better on non-CSS capable browsers. Normally I would alternate s with regular spaces, but the CSS implementation in MsIE ignores the spaces and halves the indent. The style named "normaltext" is providing the type size, specified in pixels, not points, because pixels are absolute across platforms and points are not. In normaltext, I have also specified the typeface and line-height. If all that CSS could do was to add a provision for line spacing, it would still be invaluable. In the next section, "alttext" supplies the typeface specifications and color and provides the indents. Just like HTML and all the other cross-platform and cross-browser issues, CSS implementation is not very consistent at the moment. It is supported by Netscape and Explorer 4 and above, and partly in Explorer 3.x, but the results are not always predictable.


  You can do a lot more with CSS than I have mentioned in this primer. The basic facilities are now reasonably reliable across browsers, but some of the more esoteric features can cause problems. Even this relatively simple, justified section with paragraph indents behaves quite differently in Netscape and Explorer depending on whether I use <div> or <p>. As with any other Web page design uncertainties, you really need to test-fly your pages on as many computers and browsers as you possibly can. The examples here only scratch the surface of what CSS can do. In addition to creating custom styles, you can modify most of the existing HTML styles. You could, for instance, redefine the <pre> tag to be a larger type size or a different color, or adjust the <H2> tag to be a particular font, size, and style. If you want to find out more, check out the CSS links in the Links section and in the advanced section under Cascading Style. Finally, some readers won't be able to see the results of your CSS. It's important to make sure your pages still look good in older browsers too. Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower-than-optimal resolution. For example, do you remember in cowboy films when the stagecoach wheels seemed to spin backwards? That was because the resolution of 24 frames per second was insufficient to capture the true forward motion of the wheels, and the illusion of the spokes moving backwards was because, in subsequent frames, the next spoke was almost reaching the position of the spoke in the previous frame. Anti-aliasing in computer graphics was popularized by Quantel in their Paintbox computer systems back in the early '80s. Much of what we take for granted now in programs like Adobe Photoshop was pioneered in early videographic systems costing hundreds of thousands of dollars. With the relatively coarse resolution of computer screens, individual pixels (picture elements) are quite apparent. Lines of pixels that perfectly fit the grid on a computer screen because they are horizontal, vertical or at 45 degrees cause no problem. Lines drawn at any other angle have to be approximated because they conflict with the natural grid and look stepped. As this magnified view shows, the cyan line is at odds with the grid and changes from two to three runs of pixels.


 Â

If the runs form a regular pattern, i.e. always two or always three, then you get a "sweet" line which, although stepped, is evenly stepped and doesn't look as objectionable as the arbitrarily stepped one above. The anti-aliased version below smooths out the stepping.

The enlarged views are at 1200% and the pixel grid simulated, there are no tiling lines like this in reality, just perfectly butting squares. For type, any edge that does not fall on the natural grid produces steps. Some cleverly designed screen fonts keep to the natural grid and look fine, but type that is really intended to be printed on a high resolution printer can look bad — or at


least severely compromised — on a computer display. Pixels are a fixed size and can't be chopped up like ceramic tiles or building bricks. If you want to smooth out these unsightly steps, you can only do so using tone and color. By introducing pixels of a color somewhere between the foreground and background colors, you can effectively smooth the edges of the lines. To smooth the edge of a simple black-on-white character on the screen, a program like Photoshop will create 16 to 20 intermediate tones of gray to fill in the steps and, from normal viewing distances, the type will look smooth. No matter what the type or background color — it might be a full-tone photograph for instance — pixels of an intermediate tone and color are used to give the illusion of smoothness. This strategy assumes that the display can handle all these colors. But on, for instance, an 8-bit display with only 256 colors, all these subtleties of tone are going to get lost, and colors are going to snap to their nearest Web palette counterparts. The image below shows how the individual pixels have "posterized" in the 8-bit rendition by a browser, yet still give an acceptable result.

Now, this is all very well for large, bold type, but as the type gets smaller, the conflict with the natural pixel grid becomes increasingly more severe. The main horizontal and vertical strokes of a typeface should, ideally, align perfectly with


the pixel grid. When they don't, you can do one of two things. You can move the strokes so they do align with the grid — at the expense of the proportion of the characters. This is called "hinting," and is often used in higher resolution devices like PostScript printers to improve image quality. Or, you can try to simulate the true position of the strokes using the same tonal illusion used to smooth edges. To get the impression of a line that should strictly be between two pixels, you can put down lighter tones of the colour in adjacent rows of pixels. In the Gill Sans Light here, the strokes of the smaller sizes should be thinner than a pixel, which they obviously can't be, so the characters blur into one another and become unreadable. The anti-aliasing on the 18 point Bold is a proportionally smaller part of the overall character shape and does what it is supposed to do — smooth the edges.

Three staggered lines of anti-aliased 12-point Helvetica show how the strokes either hit or miss the natural grid. The fact that each line is starting at a different horizontal position means the relationship between the grid and the stroke differs in each case. The first and third lines are almost but not exactly the same. The zoomed-in version shows what happens when a stroke misses the natural grid. In the first line, the letter "l" is spread across two pixels, but in the second, it is perfectly formed. The initial capital H has one stroke that hits the grid perfectly, and one that doesn't, so no placement of the capital H will ever be perfect at this point size. Exactly the same thing happens to the horizontal strokes, but in this instance, I have been lucky. If I take the best characters from each line, and the best half of the capital H, and cut and paste them into a single composite, I get the best of both worlds. However, in doing so, I have to hint the characters and adjust their


shapes and spacing by half a pixel. This really is a labor of love! There does come a point when it is just impossible to describe the shape of a letter in a given number of pixels using these techniques, but the quality of the type suffers drastically long before you even get there. For small type sizes, it is better to use a well designed screen font. By that, I mean one that has been designed pixel by pixel in sympathy with the screen grid, and not one that is imposed upon the grid. For HTML text, you don't have much choice in the matter — it will differ from one surfer's machine to the next — but if you are incorporating type into buttons or graphics, you can choose. Type sizes of 14 pixels up can usually be anti-aliased quite successfully. Around 12 pixels high, it depends very much on the weight and design of the typeface. Below that, you really should look at using a properly designed screen font without antialiasing. The PC and Mac type samples here are borderline cases where you have to choose between using the crisp but pixelated font or the smoother edged but blurred anti-aliased versions. There are a number of different coding techniques used to produce anti-aliasing, and some are better than others. Try setting the same text in different programs, compare the results, and decide for yourself which is best. Typographic design means different things to different people. Some like their type neatly arranged in grids, everything lined up with not a letter out of place. Others prefer a more free-form approach. But no matter what your stylistic preferences, being able to prioritize information successfully is one of typographic design's most essential functions. When a reader scans a printed or Web page, they are looking for information — fast! The designer can make it easier for people to find the information they need if it is presented in a logical manner. Any page of text starts out as a solid block of type. Without any other intervention, the reader will start at the top left and work down to the bottom right - so there is a natural flow there from the beginning.

Information Priority The first necessity is to break that mass of words up into smaller, more easily digested chunks — paragraphs. Each paragraph will have one or more sentences and will be visually separated from the next using an indent or paragraph space.


Because indenting paragraphs on Web pages is a little more difficult, many people just use a blank line. The effect of this not only ruins the flow of reading but give a very disjointed look to the page. It is better to use paragraph indents for paragraphs, and paragraph spaces for sections — collections of related paragraphs. Web page layout is closer to a word processor document than anything else — there just isn't the typographic control that you would get in a publishing program. There aren't even any tabs in regular HTML, so all kinds of tricks are necessary to get even the most basic typographical control. There may be a little control over type size, but very little over weight or other styles. Web page typography needs a slightly different approach from that of conventional print. You have to work within the medium and its constraints.

Differences Between Paper and Web Newspaper

Book

Browser


 Â

Fields of view are related to viewing distance and type size. When reading any page at a normal reading distance, there is a certain field of view that the eye can cope with — enough to scan a line of text and be aware of that line's relationship to its surroundings. If you have to move your head, you are changing the field of view completely and the brain has to try to relate the new field of view to the previous one. With a newspaper page, there will be considerably more head movement required than with a paperback book. For Web pages, it depends very much on the browser size on the screen. Scroll bars allow the field of view to change, but one of the most common mistakes on Web pages is to allow the text to flow to the browser width. This is word-processor thinking, not design, and is much too wide for a comfortable horizontal field of view on even a small monitor. Having to scroll a Web page vertically makes it more difficult to break the natural top to bottom flow than with a newspaper or magazine, because the physical act of scrolling takes considerably more effort than eye or head movement. There is little point in trying to fight the top-down approach for information on Web pages. This constraint suggests a couple of basic rules. For any single Web page, the information should flow in a serial manner from the top to the bottom of the page. Where information is more random access, use hyperlinked headlines to pages or blocks of serial information. These headlines can be at the tops of longer pages or on completely separate menu pages. There are various opinions of what maximum page lengths should be, but it's generally agreed that the length of any single page should not be excessive. I believe it depends more on the page layout and file size than the number of words.

Emphasis, De-emphasis, Relativity Bearing in mind the natural top-down flow of reading, certain elements of importance need to be given visual emphasis. The trick here is to introduce foils to the natural flow of reading by adding maverick elements. Anything that breaks with the norm will stand out. In typography, all elements are only relative to one another and, indeed, this is one of the underlying principles of HTML type markup.


 Â

Type Size and Weight The most basic form of prioritizing is to make certain type larger or bolder than the rest. This gives emphasis to that type, because it looks more important than its neighbors. If the type was all bolder or bigger, then that would put you back at square one. In scanning a page, the emphasized elements stand out from the others, which means they take priority and will be read first. Conversely, if you want to deemphasize some information, you can make it smaller or lighter than the normal. Lighter is not usually an option in Web design, as you can't have strokes thinner than one pixel, so we are stuck with two weights of type — normal (Roman) and bold.

Italics

Italics are often used in printed matter to give emphasis to a word or two within a block of regular Roman text. Italic type is generally harder to read than Roman, because the reader has to slow down to read it. It gives emphasis firstly because it looks different from the upright stress of the Roman and also because the reader's flow is impeded. As the simple test above shows, the eye is drawn immediately to the line that contradicts the pattern. In fact, recognizing such deviations in regular patterns is one of the human brain's major strengths. Although italics work well on a printed page, they pixelate horribly on a computer screen. They clash with the natural square pixel grid and are best avoided on Web pages, especially at smaller sizes.

Underline

Underlining was a technique much used with typewriters in days gone by. Few typewriters had any mechanism other than underlining to give emphasis and, unfortunately, the habit carried over into word processing. Underlining has a special meaning on a Web page. It indicates a hypertext link, so it is really not a good idea to use underlining for any other purpose, or it may


confuse the reader.

Color Color is considered a luxury in print, certainly as far as text is concerned. On a Web page, it costs nothing extra and can be used to compensate for other typographic deficiencies. Again, it is the deviation from the norm that causes visual disruption and therefore emphasis. Many pages on this site use colored type for emphasis. Instead of using bold or italic, the type color changes — the more it changes, the more emphasis it creates. So, there is a hierarchy of emphasis — yellow stands out more than green on a blue background, and green dominates over pale blue. In designing a more conventional black-and-white Web page, different shades of gray can be used to emulate the effect of type weight.

Orientation

A line of type that is upside-down on a page is very noticeable, but also difficult to read. On a printed page, the reader would simply turn the page around, but that's not quite so easy with a monitor. Type that runs up or down the page vertically is impossible with HTML text, but can be easily implemented with a GIF, JPG, or PNG. Used sparingly, it can be effective in a horizontal world. Balanced with other typographic attributes, size, weight, and colour, a headline on its side like this can be prominent or recessive. Of course, this is true for any line of type, but the sideways orientation is acting as a visual foil, contradicting the natural flow and bring attention to itself. As it spans a certain number of lines and paragraphs of related body text, it also has the effect of further unifying them.

Position


As with the maverick type style, a line of type that is in an unusual position will stand out. Breaking the regular geometry of a page with an indent or hanging indent will draw the attention to that element, even overriding the natural top down flow. A common exercise for students of typography is to take a piece of information, such as an exhibition flyer, and to do various layouts using only one prioritizing technique on each — weight, size, color, position, etc. Any element that looks as if it doesn't belong for some reason will draw attention to itself. Remember: Like all hard and fast rules, grids are meant to be broken!

Space A line of 8-point type in the middle of a blank page dominates the page completely. On a page full of 12-point type, it gets lost. Not only are the relative type sizes important, but the space that surrounds the type is significant too.

The effective counter play between solid and void areas is one of the finest skills used in modern architecture, abstract painting, and typography, and requires a substantial amount of training and experience. At its simplest level, isolating typographical elements in space is a sure way to give them emphasis.

Priority Used Creatively Converting priority of information into typographic emphasis successfully is one of the most basic skills of typographic design. It works at both functional and aesthetic levels and can be achieved with a little common sense. Creative typographers use a whole gamut of techniques to prioritize information and make a page more visually interesting. Even within the confines of HTML, a little imagination can prove fruitful and be visually rewarding. Much has been written about the death of typography as we know it — that, with the boom of the Web, old typesetting traditions are abandoned in favor of a more democratic approach to an information-based medium. But I always wondered what those programmers of the early Web browsers had been smoking when they chose the standard fonts for displaying text on the web. Up until the time when the <font face> tag was introduced, a designer's choice for specifying typefaces on the web was limited to Times for proportional and Courier for monospaced type.


Web Design is 95% Typography by Oliver Reichenstein retrieved from http://ia.net/blog/the-web-is-all-about-typography-period/

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. Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his contemporary print materials what we could easily say about our contemporary websites: Today we are inundated with such an immense flood of printed matter that the value of the individual work has depreciated, for our harassed contemporaries simply cannot take everything that is printed today. It is the typographer’s task to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him. With some imagination (replace print with online) this sounds like the job description of an information designer. It is the information designer’s task “to divide up and organize and interpret this mass of printed matter in such a way that the reader will have a good chance of finding what is of interest to him”. Macro-typography (overall text-structure) in contrast to micro typography (detailed aspects of type and spacing) covers many aspects of what we nowadays call “information design”. So to speak, information designers nowadays do the job that typographers did 30 years ago: Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work, which cannot be read, becomes a product without purpose. Optimizing typography is optimizing readability, accessibility, usability(!), overall graphic balance. Organizing blocks of text and combining them with pictures, isn’t that what graphic designers, usability specialists, information architects do? So why is it such a neglected topic? Too few fonts? Resolution too low? The main—usually whiny—argument against typographical discipline online is that there are only few fonts available. The second argument is that the screen resolution is too low, which makes it hard to read pixelated or anti-aliased fonts in the first place. The argument that we do not have enough fonts at our disposition is as good as irrelevant: During the Italian renaissance the typographer had one font to work with, and yet this


period produced some of the most beautiful typographical work:

The typographer shouldn’t care too much what kind of fonts he has at his disposal. Actually the choice of fonts shouldn’t be his major concern. He should use what is available at the time and use it the best he can. Choosing a typeface is not typography The second argument is not much better. In the beginning of printing the quality of printed letters was way worse than what we see on the screen nowadays. More importantly, if handled professionally, screen fonts are pretty well readable. Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography. Treat text as a user interface Yes, it is annoying how different browsers and platforms render fonts, and yes, the resolution issue makes it hard to stay focused for more than five minutes. But, well, it is part of a web designer’s job to make sure that texts are easy and nice to read on all major browsers and platforms. Correct leading, word and letter spacing, active white space, and dosed use of color help readability. But that’s not quite it. A great web designer knows how to work with text not just as content, he treats “text as a user interface”. Have a look at Khoi Vinh’s website, and you’ll probably understand what that means:


Slightly more famous examples of unornamental websites that treat text as interface are: google, ebay, craigslist, youtube, flickr, Digg, reddit, delicious. Control over typography is not just a basic design necessity, knowing how to treat text as a user interface is the key factor for successful Web design. Successful websites manage to create a simple interface AND a strong identity at the same time. But that’s another subject. UPDATE: As it raised so many eyebrows, hands and questions I decided to write a follow up to this article. Where to start: Resources On the Web Web typography In order to “allay some of the myths surrounding typography on the web”, he has “structured his website to step through Bringhurst’s working principles, explaining how to accomplish each using techniques available in HTML and CSS”. Five simple steps to better typography The kind of typography he is talking about “is not your typical ‘What font should I use’ typography.” A good read for those who believe websites are usable when leaving font size and line spacing to default while letting the text width expand to wherever. Khoi Vinh Co-founder of behaviordesign. Currently design director at NYTimes.com. Extremely talented man. Rod Graves Communication designer. Sublime work: “Typography is a definite focus for me. Typographic grids and hierarchies usually form the foundation of the visual languages I develop.” A List Apart Communicating via typefaces. Fonts and layout. Designing for readers. Legibility. Typefaces, graphic design. Problems of typography on the web. Controlling web typography: size, font, color. CSS methods, browser problems, user problems, and workarounds. Make sure you read this article as well. Association Typographique Internationale ATypI (Association Typographique Internationale) is the premier worldwide organisation dedicated to type and typography.


Founded in 1957, ATypI provides the structure for communication, information and action amongst the international type community. Thinking with Type The on-line companion to the book Thinking with Type: A Critical Guide for Designers, Writers, Editors, & Students Typetester Compare screen type Typophile Typophile is a member and sponsor-supported community. Since 2000 Typophile has been guided by open collaboration and the idea that we’re all always learning. They serve 3+ million pages monthly. Typohile Wiki A user-created encyclopedia of all things type and design-related. Users create and edit Wiki entries with the aim of becoming a collaborative, useful, balanced and relevant resource. The Next Big Thing in Online Type Bill Gates wants computer users, well, Microsoft users, to have a more enjoyable on-screen reading experience — so much so that he made improving reading on the screen one of his top five priorities. Books Emil Ruder, Typographie Emil Ruder’s Typography is the timeless textbook from which generations of typographer and graphic designers have learned their fundamentals. Ruder, one of the great twentieth-century typographers was a pioneer who abandoned the conventional rules of his discipline and replaced them with new rules that satisfied the requirements of his new typography. Kimberly Elam, Grid Systems: Principles of Organizing Type Although grid systems are the foundation for almost all typographic design, they are often associated with rigid, formulaic solutions. However, the belief that all great design is nonetheless based on grid systems (even if only subverted ones) suggests that few designers truly understand the complexities and potential riches of grid composition. Muller-Brockmann, Grid Systems: A visual communication manual for graphic designers, typographers and three dimensional designers. From a professional for professionals, here is the definitive word on using grid systems in graphic design. Though Muller-Brockman first presented hi interpretation of grid in 1961, this text is still useful today for anyone working in the latest computer-assisted design.

On Web Typography Retrieved from http://alistapart.com/article/on-web-typography

by JASON SANTA MARIA November 17, 2009 Published in Graphic Design, Typography & Web Fonts · 26 Comments There are many books and articles on typography, but considerably few explore typeface selection and pairing. With the floodgates poised to open and the promise of many typefaces being freed up for use on websites, choosing the right face to complement a website’s design will need to become another notch in the designer’s belt. But where do we start?


Until now, using any typefaces beyond those installed with computer operating systems by default meant using images, Flash, or some other workaround. But browser makers have put the ball in our court by implementing the @font-face CSS property, which allows designers to link to any font file and pull it into their pages. This exposed the elephant in the type foundry: Type makers have largely refused to license their raw typefaces on webpages out of concerns about piracy. The @fontface implementation has brought this concern to the forefront, prompting all parties to figure out a mutually copacetic solution. And many solutions are either available or in the works, ranging from augmented font end-user license agreements to hosted third-party font services such as Typekit, Typotheque, and Kernest. Web designers get more options for type, and foundries and type designers make money off of their creations. Problem solved, right? Sorta. Brave new world We’ve been spoiled. Until now, chances are that if you dropped some text onto a webpage in a system font at a reasonable size, it was legible. What’s more, we know the ins and outs of the faces we’ve been forced to use. But many faces to which we’ll soon have access were never meant for screen use, either because they’re aesthetically unsuitable or because they’re just plain illegible. The technical problems with web type also run deep. Inconsistent rendering across browsers and platforms is a substantial hurdle, as are the problems inherent in serving a font file, or more likely a font family: Page sizes can easily jump to 100k and higher. But let’s assume for a moment that these problems will get smoothed out in short order so that we can focus on what to do after that happens. There’s a serious possibility that by gaining access to the world’s font libraries, we’re opening Pandora’s Box. Many people working on the web today have some knowledge of typography, but my hunch is that many designers are about to feel quite baffled by the new challenges they face. Context and meaning Being a web designer will soon require a deeper understanding of typography and how typefaces work. As we move in this direction, our options may be limited at first, but the pool of choices will steadily grow. And as we know, with great power comes great responsibility. Just because you can use the font that looks like it’s wearing bellbottoms, doesn’t mean you should. The system fonts we commonly use such as Georgia, Verdana, and Arial have become so ubiquitous that any associations we might have with them other than “web” are pretty


much gone. The aesthetic expression we were unable to achieve due to scant selection afforded us time to hone legibility on a grand scale. This has largely made the web a “set it and forget it” world, in part due to the rapid state of publishing, but also because we don’t have the fine control over typography that we have in print design. Picky, picky Using a typeface because it looks interesting might yield acceptable results, but really practicing the art of typography involves understanding typefaces and what they mean. Picking a good-enough face isn’t that hard, but choosing an appropriate one that fits comfortably within societal and technical concerns can be tough. Notable type designer Zuzana Licko once said “We read best what we read most.” This notion rings true in our learned behavior, but also reveals the reason for the typographer’s toughest challenge: Reading is a personal and relative act. Reading a long passage in a blackletter face that was considered “readable” centuries ago would take us considerably more time than if that passage was set in a basic serif face. Most of what we read now is set in simple serif and sans serif typefaces, whether in print or online. Beyond the question of readability, much of typography comes down to contrast and form. The details of a typeface can inject meaning into a design: Soft lines and stroke weights, for example, can be useful for delicate material or to give an air of elegance and dignity. Those same attributes can be juxtaposed with unexpected content to produce an ironic effect. Here’s a list of qualities and methods to keep in mind as you venture into the widening world of web type. The drop dead guide to choosing and pairing typefaces As we look to our coffers for new selections of typefaces, the smart money stays true to what we know: Find typefaces that are in our general realm of readability—the ones we use and read on a daily basis. Anything that hits on those points on the “legibility spectrum” (possibly a four quadrant graph) will be best, and will be easier to read. The farther we veer away from that, the more difficult our designs will be to read. That’s not to say there isn’t a wide gray area of legibility. CONTRAST Contrast is probably the most important thing to keep in mind. When pairing typefaces, it’s important to be able to tell that there are two distinct typefaces in play, but contrast has other uses as well. Very different typefaces can play off of each other in complementary ways or resist each other to create a bit of tension, while typefaces that


appear too similar can weaken the message and confuse a design’s visual language. THE BASICS OF BODY TEXT

Bobulate.com using TypeTogether’s Skolar, served via Typekit.

When choosing typefaces, I like to start by picking a text face for body copy, as this is what a reader will spend the most time looking at. For body copy, look for typefaces that are sturdy and legible at smaller sizes, and for those that have a healthy contrast between characters. The best text faces generally have some personality, but not so much that it distracts us from the content or experience of reading. Typefaces that have a lot of personality are better reserved for display sizes, as they can become cumbersome to read in longer passages.


READ ME

As text gets smaller, a slightly larger x-height and contrast can go a long way.

The usual conventions to selecting type apply for on screen use too, but due to the disparity in quality between the screen and a printed page, those conventions should be followed even more closely on screen, and possibly even exaggerated a little. High xheights and a strong character body help keep your texts legible, even at small sizes. For instance, Verdana and Georgia, both proven screen typefaces, have a larger x-height and a bit more space between the letters so that text retains clarity even at small sizes. WHAT’S THE MESSAGE?

This movie poster from the double feature, Grindhouse, uses lots of different typefaces and styles, but does so in imitation of the kinds of posters that were emblematic of late 1970s exploitation films.

One helpful way to understand what you are designing for is to write down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities. If you are designing something serious, a playful handwritten display typeface probably won’t work. But a sturdy typeface such as


Franklin Gothic could convey stability and strength while imparting an air of importance. One typeface can be enough to say what you need to say, and two is usually plenty. If you are using more than that, have a good reason—like trying to achieve a certain aesthetic—such as replicating the look of an old boxing, film, or music poster, for example. ONE SANS, ONE SERIF

Bodoni and Futura have very different looking letterforms, but their structure is based on the same basic geometric principles.

One of the easiest ways to quickly create balance and contrast in typography is to choose a serif and sans serif pairing. It’s a simple, easily managed combination that can produce a cohesive look to the text if you select the right typefaces. It’s not a hard and fast rule, but typefaces from the same designer can sometimes work very well together. As in two paintings from the same artist, sometimes you can see the designer’s hand in two typefaces they’ve made. Eric Gill’s Perpetua and Gill Sans work well together because they share some of the same strokes and curves. Similarly,


typefaces that were made to be paired, like Meta Sans and Meta Serif, often work well together. Combining more than one display or script typeface is usually a bad idea. There are exceptions to every rule, but these typefaces usually have so much personality that one is plenty and two could confuse the mood of the text. Look for typefaces that were designed on similar principles. For instance, despite looking quite different, Futura and Bodoni can make a great pair because they were both inspired by simple geometric forms.

Baskerville and Futura, “old” juxtaposed with “new.”

Alternatively, finding two divergent typefaces can create new meaning or an interesting juxtaposition, as long as the contrast is strong. Pairing a transitional typeface like Baskerville with a more modern face like Futura could create an interesting statement on the idea of old vs. new. EXPLORE DIFFERENT STYLES


Type families such as Mark Simonson’s Proxima Nova contain a variety of weights which can be helpful in creating a design with diverse and flexible typographic possibilities.

Choosing typeface families with a good selection of weights and styles gives you more flexibility without needing to introduce more typefaces. Play a bold off of a light or italic weight for contrast, or try all caps or small caps with a bit of letter-spacing for a subhead. If you choose typefaces that only contain a single weight, you may find it very difficult to create the contrast that a passage requires to adequately distinguish sections visually. TO THE LIBRARY! Many typefaces have an inherent connection with a cultural period or subculture. Depending on what you’re creating, this could be an advantage or a disadvantage. It’s always best to follow up on potential typeface choices by finding out where and when, and for what purpose they were made. Sometimes a typeface can have the right “look” but evoke the wrong connotations. For instance, Trajan has been appropriated as the typeface of choice for epic, thriller, romantic, comedy, and well, any kind of film, despite being nearly 1900 years old and Roman. Blackletter typefaces have long been a staple of heavy metal bands or anything that needs to feel “scary” or “dark.” Understand these cultural implications so that you can either avoid them or use them intelligently to bring clarity to your viewers. MONEY, HONEY We’ve been so accustomed to using system fonts that many web professionals balk at the idea of paying for fonts. But even when you use the typefaces that come with your computer, you’re using typefaces that you’ve paid to license—those costs are included in the price of your operating system. There are many free fonts out there, but most of them are free for a reason: They’re often fine at display sizes, but kerning and hinting might not be up to snuff and many aren’t complete or robust enough to be used in a serious way. Solid typefaces, like almost anything else of quality, usually cost money. TRUST YOUR GUT Sometimes a pair of typefaces just looks or feels right together, even though you’re not sure why. These are guidelines, not laws: there are a myriad of types and styles, and sometimes you’ll be surprised what typefaces work together even when logic says they shouldn’t. Ever forward! The number of typefaces available to us increases every day. If your favorite font isn’t available yet, chances are it will be soon enough, though the problem of licensing, delivering, and selecting web fonts won’t be figured out overnight.


As more typefaces hit the scene, we need to understand how they can best serve our designs, and to push ourselves to move beyond mere novelty in our selections. If much of the web is made up of text—and it is—web typography can be a very powerful tool indeed.

Real Web Type in Real Web Context Retrieved from : http://alistapart.com/article/real-web-type-in-real-web-context

by TIM BROWN Now that browsers support real fonts in web pages and we can license complete typefaces for such use, let’s move past the hype of web type and think pragmatically about how to use real fonts in our web projects. Several experiments with the CSS @font-face property, including some preliminary work with the much-anticipated Typekit, have led me to a single, urgent conclusion: I need to know how my type renders on screens, in web browsers. To that end, I created Web Font Specimen, a handy (free) resource web designers and typographers can use to see how typefaces will look on the web.

Markup-and-style samples for testing purposes are nothing new. You probably already have a go-to resource bookmarked, be it the W3C’s HTML element sampler or something homegrown. Web Font Specimen is very much like the sample files we find or make for ourselves, with two important distinctions: its sole purpose is to exercise a typeface, and it is ours to share. Web Font Specimen is available under a Creative Commons Attribution 3.0 license. I welcome and look forward to your adjustments, iterations, and improvements. We’ll return to this issue in the context of buying and selling type. Let’s quickly go over what Web Font Specimen looks like and how to use it. Afterward, we’ll discuss ways of paying closer attention to web type rendering—as well as how this approach will influence type sellers, type designers, and web designers. Web Font Specimen Head over to Web Font Specimen, download the .zip file, and preview the HTML in a browser. You should see something like this example. Rendering will vary depending on your setup, but the example specimen should come through just fine (it’s plain old Georgia—most of you should have it installed, and it was designed to look good on screen).


Scroll down and you’ll see Georgia exercised in headings, lists, and with varying emphasis. There’s a body size comparison, different leadings (line-heights), a showcase of glyphs, different measures (widths), different sizes with uppercase and sentence case, grayscale text, light-on-dark text, and, an assortment of color combinations. Reasons for including each of these in the specimen are listed alongside a labeled screenshot at Web Font Specimen.

Fig. 1. Glyphs at 42px.

Fig. 2. Headings, lists, emphasis, and leading.

Fig. 3. Grayscale and color, light on dark. KICK THE TIRES Next, you will replace Georgia with the typeface you want to test. See the README file in the download for instructions on how to do this. For additional information, see two of my posts at Nice Web Type—“Where to get web fonts” and “How to use CSS @fontface.” You may notice that Web Font Specimen is built atop Nathan Smith’s 960.gs, which is a great resource for quick layouts. Just as I have done with Nice Web Type likes reviews, the text.css file that comes with 960.gs has been replaced by one that is more streamlined


for our needs. All that’s left to do is test the result and decide for yourself whether the way your typeface renders across operating systems and browsers is, indeed, acceptable. What this means for type sellers Part of the reality of type sellers’ changing business is that they suddenly have a huge new market for their goods and services. Sure, we web designers have always used type in our sites: Replacement techniques, images with alt text, and fonts summoned with CSS have yielded some incredible typographic experiences (these and more are detailed at Typesites). However, we’ve rarely dealt with type the way print folks regularly do, because our experiences in web typesetting have always had more to do with the means than the end. NO MORE KIDDIE TABLE For years, web designers have yearned to embrace typography in its fullest aesthetic and traditional capacities while bringing to bear all that we know about sound markup and universal accessibility. But the nature of our technical means for getting fonts into websites has acted as a barrier to setting realistic expectations for the appearance of web type on screens. We’ve been so busy getting type into our sites, we haven’t had a chance to figure out why it looks the way it does when it gets there. As a result, web type rendering has largely remained a mystery. Rather than try to sort things out, we’ve simply treated web typography as a lesser art (with some wonderful exceptions), and our grumbles of dissatisfaction have reverberated. SHOW US REAL TYPE As web designers mentally overcome the print-is-better-than-web inferiority complex, type sellers know that a throng of new customers will expect to be treated fairly when browsing, sampling, and using type. Web Font Specimen is great when the typefaces we want to sample are in our possession. But when typefaces are locked within font delivery services, or behind a type seller’s shopping cart, how will we judge whether they are suitable for use in our web projects? Type sellers need to provide some way to show the type they license for use with the CSS @font-face property in its actual intended context. They are certainly welcome (cordially and legally invited, even) to use Web Font Specimen as part of a try-beforeyou-buy experience. I hope they will, and not only because of our need to see how typefaces will look on the web, but because their type adjustments, iterations, and improvements will make Web Font Specimen better. Web designers will be watching to


see how type pros think type should be exercised, and we will adjust our toolbox specimen to take advantage of their advice—if they haven’t already done so for us by rereleasing a better iteration of Web Font Specimen. What this means for type designers If type sellers are unable to or reluctant to find ways to show their type in context on the web, type designers will not be able to showcase the nuances they have worked so hard to achieve in their fonts. To meet web designers’ type rendering expectations will be a significant challenge. The lasagna of complexity between the beautiful letters type designers draw and the type we all see on websites is largely undocumented and full of variables. FROM GLYPHS TO WEB TYPE Working through several Typophile threads with folks knowledgeable on the subject, I have tried to envision the gauntlet type must endure on its journey from type designers’ mathematical points and curves to Web Font Specimen’s grid-fitted shapes made of light. Here is my working list of steps, which has been improved with several suggestions and blessed by David Berlow as “pretty good overall.” 1. A glyph starts as a bezier-based shape. 2. This shape is made in or brought into a font-creation program such as FontLab. 3. Settings such as UPM (units per em), key dimensions (for vertical measurements such as x-height, cap height, ascenders and descenders), and metrics (for horizontal measurements such as sidebearings and kerning) determine how the letterform will act as a glyph in a font—e.g., how much room it will occupy at a given size, how close other letters may live. 4. Hinting or instructions are added (automatically and/or manually) which can provide directions to conserve the font’s design character in environments where less-than ideal output is to be employed. 5. The glyph is exported as part of a font, in either OTF or TTF format (in this context, I am ignoring all other formats—let me know if I shouldn’t). TrueType hints are ditched if the font is OTF. 6. The glyph is confronted by operating-system-level and browser-level rendering algorithms. I am still trying to list these combinations for myself. I would want to cross-reference technologies such as Quartz and ClearType with headings such as OS rendering engine, browser rendering engine, result of combination (overrides, any ignored font data). 7. User settings in various places (browser preferences, OS preferences) can modify


how and when the rendering engines interact with font files. Windows users can turn ClearType on or off. Users can turn antialiasing off altogether. Certain preferences can limit the size at which antialiasing is applied. Listing these variables is another item on my to-do list. 8. Finally, there are the physical qualities of a user’s hardware, such as the kind of monitor they use, its resolution, whether they run it at native resolution or not, and their settings for color and luminosity. Steps four through six are important and must not be overlooked. These factors may be the bane of type designers—especially independent shops. In the eyes of a new audience that will judge typeface quality by on-screen rendering alone, the way a typeface looks across different operating systems and browsers is critical. Without getting into specifics (let’s save them for the discussion forum), the possible rendering algorithm combinations most often conclude in one of two ways: 1) the rendering engine ignores hints from type designers and does its own thing, remaining as true as can be to typeface design, usually with a good-looking result (this is Apple); or 2) the rendering engine relies upon complex hints from type designers, tries to use that information for ideal readability, and only looks good if the type is designed and hinted to suit this aim (this is Microsoft). What can type designers do? Well, three things. They can prepare their typefaces to look good across different setups (even though it’s quite difficult and time consuming), they can wage a campaign for type rendering standards, or they can lose business. These are awful options. Should type designers decide upon something like a Type Standards Project, however, I’m sure they would find skilled advocates and passionate allies on this side of the shopping cart. What this means for web designers Already we have read about some roles web designers can play. We must move past web typography’s stigma of subordination by embracing realistic expectations for the appearance of web type and, if type designers think it worthy, we might once again bring change to a situation (typeface rendering on screens) in which standards would help. Meanwhile, we have to make sure type looks good in our sites today. If we run our favorite typeface through a copy of Web Font Specimen, test it across browsers, and we like how it looks, then great! That’s the typeface we will use. But what


if we don’t like the way it looks? What do we do next? What are our options? IF YOUR TYPE RENDERS POORLY If we (and our visitors) are lucky, we might be able to look for a different typeface that does render well on screen. Despite the foreboding aspects of type design in this emerging market, thoroughly-hinted typefaces already exist that render very well in different situations—and more are on the way. For though many type designers will be disadvantaged by not having the experience or resources to augment their work with finetuned hinting, many others will thrive. Disappointing as it might be at times to have to choose a typeface other than the one we seek, at other times it could be devastating. If your project is entirely dependent on the use of a particular typeface, such as when following brand-based guidelines, we may still be stuck with replacement hacks. Unless something changes about how many typefaces are rendered across operating systems and browsers—whether that change comes from rendering agents that accept standards of some kind, or from a greater selection of thoroughly-hinted typefaces—these are the realistic choices many of us will face when we decide to use real fonts with @font-face: • use some kind of conditional logic to serve different typefaces to different visitors, • allow our type to render in an unsatisfactory way for some visitors, and • continue using replacement techniques. Go forth and spec type To make change, the best thing we can do is argue for a better way by first understanding the challenges we face. To see how typefaces will look on the web, we just need a good specimen. I hope this article and Web Font Specimen make these activities easier and more fun for you, and that you find something of value here and use it to our collective advantage—for the betterment of typographic style and practice.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.