Type on the Web: Dos, Don ts and Maybes Ilene Strizver What exactly is Type on the Web? How does it differ from print? Type in print Fixed Predictable Controllable Appearance varies depending on: Operating system Browser Monitor resolution Installed fonts screen resolution Characteristics of Type on the Web Font style Type size Column width (line length) Alignment Color Font style In order for fonts to be viewed by everyone, they have to be installed on the viewer s computer. (Unless they are the new Web fonts which reside on a remote server.) If they aren t, the font will default to something else on the user s system... often with disasterous results! For this reason, it is best to stick to Web-safe fonts to maintain control over what you viewers see. The five Web-safe fonts common to most Mac and PC browsers: Verdana Trebuchet Arial Georgia Times New Roman Verdana Considered the most legible, this sans serif, with its tall x-height, comfortable width, and open letter spacing, was designed to be readable at small sizes on screen. Trebuchet This sans serif retains clarity and readability at small sizes. It is slightly narrower than Verdana, allowing more copy to fit in the same space. Its curved stroke endings and unusual lowercase g give it a bit more personality than Verdana.
Arial Although not specifically designed for the Web, Arial is a fairly readable sans that works well on the Web. It is similar to Helvetica in both width and spacing, but with slight character modifications. Georgia Designed for the Web as an alternative to Times, Georgia has open letterforms and spacing, making it crisp, clean, and easy to read on the Web, especially at smaller sizes. Times New Roman Designed for print, this commonly used typeface is not the easiest to read on the Web, especially at smaller sizes. If you like Times, try Georgia instead. Symbol Fonts Although not considered 100% Web safe, these symbol fonts are found in most systems, although occasionally with a different name. Webdings Wingdings ITC Zapf Dingbats Alignment There is no control over where a line will break in running text on the Web, since font size and style can vary from user to user. In addition, current browsers don t support hyphenation. Because of this, the line breaks and the resulting column rag are at best unpredictable. Avoid justification on the Web Avoid justification on the Web as varying type size and lack of hyphenation often result in huge word spaces and rivers of white space. While a justified setting might look ok on one person s monitor, it can change drastically for a viewer whose computer and browser displays the type at a different size. Stick to flush left for best readability and more reliable results. Color Color varies from computer to computer depending on: browser monitor calibration color profile Aim for enough contrast between type and background color to allow for color variations from viewer to viewer. Less is more...colorwise. Smart Punctuation on the Web IN PRINT, the use of typographically correct punctuation, including smart quotes and apostrophes, as well as en and em dashes, is the accepted practice when setting professional typography. ON THE WEB, not only can they be used, but they should be.
Cascading Style Sheets (CSS) CSS is style sheet language that is used to define specific characteristics of type on the Web, including font style, size, spacing, alignment, emphasis, and color. Much like style sheets used for print, cascading style sheets are a time-saving feature that give more control over the stylistic preferences and appearance of Web documents. CSS can be applied to a block of text or a whole site, making for consistent typography, as well as making it easy to alter elements on a global basis. These days, CSS is an essential element in Web design. Even if you are working with a programmer to built the site, CSS is worth learning and understanding its characteristics and possibilities. Type as Graphic Type can be converted into a graphic in the form of a.gif,.jpg, or.png file. Pros Unlimited freedom and creativity for headings, logos, other font-specific images. Allows combining text with images, textures, patterns. Special effects are possible. Cons Graphics are slower loading. Search engines won t recognize a graphic as content with key words as they do text. Graphics are not easily editable for corrections or updates. Dos and Don ts for Type on the Web Do Do use a line space between paragraphs for better readability, not an indent. Do add a word space before and after dashes to allow for more line-break choices. Do use subheads to break up lengthy copy, which can be tiring to read. Do choose text colors and backgrounds carefully for maximum readability. Do check how your Web pages look on as many browsers as possible on both a Mac and a PC. Do use the smallest image files possible while maintaining sharpness, clarity, and color. Don t Don t justify type on the Web which can create unsightly rivers and holes. Don t set a lot of text in all caps which reduces redability. Don t make manual line or word breaks to adjust a rag as one does in print. Don t make text columns too wide or too narrow, both of which can reduce readability. Don t drop small text out of black or a color close in value.
Web Fonts In the recent past, text on a Web site was limited to either Web-safe fonts, or the use of type as image. But the availability of the new @facefont code, Web fonts and Web font services is changing all that. Web fonts offer a degree of typographic freedom never before available. What exactly are Web fonts?? They are NOT what are commonly referred to as Web-safe fonts. They are NOT fonts commonly found on your computer or operating system. They are NOT fonts used to create images for the Web. They ARE fonts that can be used for Web design that are not found on the user s computer but are located and downloaded from a remote location. What is a Web font service? It is a service that offers a range of specially developed Web fonts optimized for the Web that can be used to display real text on a Web page. The actual fonts reside on a network of remote servers and can be accessed and automatically downloaded to a Web page by the inclusion of special code within the Web page or site. What does this mean for designers and clients alike? Pros Expanded creative and typographic freedom Protect your brand; Use the same typefaces that define your identity in the print world. Text is search engine friendly, searchable, editable, resizable, copyable. Text is easily editable. Web font text is dynamic far easier to update and customize than static images. Faster loading than many graphics. Cons Variable onscreen quality Variable browser support and screen display, look different on every browser Issues and Considerations Web fonts Main issue is browser screen rendering, which can vary dependent upon platform (Mac vs. PC), operating system, browser, version, and the user s browser settings. Factors in selecting a Web font and/or service: Web font quality varies wildly. A good Web designer needs to sample Web fonts in all rendering scenarios. Size of library Font quality Pricing terms Character set Browser and OS support Degree of user-friendliness Not all Web fonts are created equal
Ease of setup Speed of upload/ depends on file size of font Web font services The ease with which one can search a particular Web font library varies from service to service, but most attempt to mimic the font search capabilities and features of the major font foundry distributor Web sites. This, too, is being tweaked and improved for optimum ease and functionality. Most of these services are subscription-based, and offer different tiers of service for different budgets and needs. (Google Web fonts are free.) Most require a special code added to the Web site or page to allow for the access of these Web fonts from a remote server. Some of the major supplies of Web type are: Typekit [http://typekit.com/] Fonts.com Web fonts [http://webfonts.fonts.com/] Webtype [http://www.webtype.com/] Extensis WebINK http://www.extensis.com/en/webink Fontdeck [http://fontdeck.com/ Web fontfonts http://www.fontshop.com/fontlist/n/web_fontfonts/ Kernest [http://kernest.com/] Typotheque [http://www.typotheque.com/site/index.php] Google Web Fonts [www.google.com/webfonts]
STAY INFORMED (typographically speaking) Sign up for The Type Studio s monthly enewsletter, All Things Typographic at www.thetypestudio.com Follow me: Twitter@The Type Studio Facebook@Ilene Strizver & The Type Studio LinkedIn@Ilene Strizver Thank you! S