sign in sign up
<<
Home , All caps, Blackletter, Greeking, Italic type, Lorem ipsum, Movable type

July 2011

Typography Basics for and Web Sites

s we move forward with adding web-based communication methods to traditional print-based Aones, it becomes clear that modifications to existing standards for print are needed. This is particularly true of since conditions Mailing for the web are quite different than for print. Under One Roof A brief of typography Typography today is the result of Johann TechneGraphics, Inc. Gutenberg’s use of movable in the mid- Park 50 TechneCenter 2002 Ford Circle 1400s. He was the first European to use Suite individual letters, numbers, and spaces to Milford, OH 45150 assemble into words, sentences, and pages that (513) 248-2121 could be disassembled and used again. Movable Typography basics Fax (513) 248-5141 type, combined with Gutenberg’s invention of As with many things, today’s designer who oil-based and modification of agricultural Web site: understands the basics of typography will find it www.techgra.com presses for printing, became the basis for easier to make decisions about how best to arrange printing for centuries. : type on both the printed and a . [email protected] Let’s begin with the definition of a . Although The process of manufacturing movable font and are used interchangeably, the type in metal was continually improved actual definition of a font is an (defined and eventually fostered a true art form – as upper and lower case letters, numerals, the creation of , numerals, and marks, and symbols) in a single size, characters in a single size, weight, and style weight and style. A typeface is a family of (called a font) with distinctive characteristics, representing various sizes, weights, and styles. artistically rendered and mathematically balanced. progressed from • Font size is the height of the alphabet and is crafting fonts individually to cutting matrices measured in points (print) or ems (web). and casting the fonts with hot metal to • Font weight such as medium, bold, light or black, is compositing machines with molten vats the thickness of the alphabet relative to its hight. that created whole lines of type on-the-fly • Font style is the slant of the letters. Upright Scan the QR code (hot type). Eventually typecasting yielded to letters are known as roman; slanted is called above to view computerization – first as italics or oblique. our new mobile and later as desktop . . Typography Basics (continued)

Font classifications are groupings of fonts according with other elements (, illustrations, to shared characteristics. Typography for print graphics) determines reader interest, comprehension, uses these main classifications: Roman, and ultimately the of the page on the reader. and Gaelic. The Roman classification – which Thus typography is an essential element of design, and “Typography for predominates today – is further divided into , standards for use of typography provide a basis to guide sans serif, script, and ornamental. design choices. Typography standards include the print uses these main selection and use of fonts, white , punctuation classifications...” • Serif have finishing strokes and stems on individual characters. Serif typefaces marks, and symbols. you may be familiar with include Times, Selecting and Using Fonts , , , . The choice of fonts is dictated by the page’s • Sans serif typefaces lack finishing strokes and purpose, the amount of text, the intended are relatively modern. , , audience, and characteristics of the font itself. Use , Avant Garde, are all sans these standards for selecting and using fonts: serif typefaces. • For on a text-heavy printed page, • Script typefaces mimic or use a serif font. (Most , and and are either formal or casual. magazines use serif type for body .) For Formal script examples are Snell Roundhand readability on a web page, use a sans serif font. and ; casual script includes Brush The text will look cleaner, and sans serif fonts Script and Mistral. render better in smaller sizes in the low “The choice of fonts • Ornamental typefaces (also known as display or resolution of monitors. is dictated by the novelty type) have limited use as or • Limit the number of serif and sans serif fonts to page’s purpose...” for decorative purposes. no more than three. In general, the longer the , the more fonts that can be used. For uses a slightly different a single-page or short document, use only one classification system: serif, sans serif, monospaced, or two fonts. Use only one script or ornamental , fantasy and script. font, regardless of the number of pages.

Digital typography • Be consistent by using the same fonts Beginning in the mid-1970s, began to throughout the document or web site. For generate fonts. Early digital type used scaling to variety, change the size or weight of the type, change the size, weight and style of fonts which not the font. often meant losing the elegance and proportion • For contrast, use a sans serif font for headlines of hand-created fonts. Eventually font metrics – when using a serif font for body copy, and vice complex mathematical formulas describing curves, versa. It is generally accepted that sans serif angles, word and spacing, space expansion fonts are best for text on web pages. and compression – were developed, resulting • For as well as contrast, use bold or in better scaling and rules for forming “Web typography . pairs, ligatures, connecting script letters and other • Except for and abbreviations, avoid uses a slightly refinements. Digital typography has also allowed using all capital letters for text. In printed different the creation of fonts composed of symbols, documents, slows down classification pictographs and other ornaments that never speed; on the web, all caps is synonymous existed in mechanical typography. system...” with shouting.

Typography standards • Never use all caps in a script font – the letters Text is a major component of any , whether won’t connect as they would in handwriting for print or web. How text is organized and integrated or calligraphy and the words will be very Typography Basics (continued)

difficult to read. is used in place of single or double to indicate a parenthetical phrase White Space or to set apart clauses in a sentence. and White space is the part of a page that is empty “... the goal of good em are part of the character set of the of text, photos or graphic elements. Sometimes font. typography is the called negative space, it separates the design • Single (‘’) and double (“ ”) quotation marks same: to put the elements and creates “breathing room” on the are used to indicate conversation, word-for- reader at ease...” page. If a page looks crowded, it probably needs word remarks, or a non-traditional use of a more white space. Many readers associate white word. Use double quotes to enclose the entire space with an upscale or sophisticated look. sentence, phase or word, and single quotes for Page layout elements – page margins, length a quotation within a quotation. Quotation and width – affect white space. So does marks are part of the font character set. character spacing, word spacing, line spacing, and • An ellipsis (…) indicates an interruption or an indents within the text itself. In general, unfinished thought. Use the ellipsis character web pages look better and are easier to read when rather than three periods, since the spacing there is additional white space between lines. between the dots in an ellipsis is narrower Punctuation Marks and Symbols than a period followed by a space. A typography alphabet includes punctuation • Become familiar with symbols such as marks and symbols that are compatible with the trademark (™), copyright and registered font and will therefore produce better-looking copyright (© ®), degree (°) and (¼, text. Learn what they are and how to use them ½, ¾). properly and you will produce much more Typography is about the details professional looking text. Whether in print or on the web, the goal of good • Hyphens (-), en dashes (–), and em dashes (—) typography is the same: to put the reader at ease, are used to separate characters. Each has a thereby enhancing his understanding and ability specific use. A is used to hyphenate to learn from the text. Pay attention to the details words and separate characters in a phone and you will make typography work for you. number. An en dash shows duration of range (such as April 1–April 30 or 76–100. An

Lorem ipsum

o get a clear visual of how a font looks, dolor sit amet, consectetur use a – a sentence that uses all adipisicing elit, sed do eiusmod tempor the letters of the alphabet. A familiar incididunt ut labore et dolore magna aliqua. IDEA Tpangram is “The quick brown fox jumps over the Ut enim ad minim veniam, quis nostrud CORNER lazy dog.” A pangram can be set alone or repeated exercitation ullamco laboris nisi ut aliquip ex to create a block of type. ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum “This technique is For a large amount of text, use nonsense words or dolore eu fugiat nulla pariatur. Excepteur sint known as ...” to examine the weight and style of the font. This occaecat cupidatat non proident, sunt in culpa technique is known as greeking and is a good way to qui officia deserunt mollit anim id est laborum. approximate the overall feel of the type. A common form of nonsense text is known as lorem ipsum: 513-248-2121 PRSRT STD Fax 513-248-5141 US Postage PAID 2002 Ford Circle, Suite D www.techgra.com Permit #271 Typography Milford, OH 45150 [email protected] Milford, OH Basics for Address Service Requested Documents and Web Sites

1. The font of choice. If the browser can access this font, the page will look as What is a font intended. . stack? 2. An alternative font. A font that is similar “...what to include in to the font of choice so there is as little a font stack...” change to the page design as possible. 3. A common Windows or Macintosh font. A font that has a very high likelihood of A font stack is a list of being installed on either a Windows or A.fonts in the order of Macintosh computer. preference for use on a web site. The font 4. A generic font name in CSS (cascading style stack provides specific instructions to the web sheet). The generic font families in CSS browser for how to make a if are serif, sans serif, monospaced, cursive, the web site viewer’s computer does not have a fantasy, and script. specified font installed. Without a font stack, the browser will choose the font. Times Roman is the most common serif font on the web, and the default serif font in most Here is a suggestion for what to include in a browsers. (PC) and Helvetica (Mac) are the font stack: most common sans serif fonts.