May we have a word? As your printer, our job is to provide you with PrinTips, we discuss the elements of typography and the tools you need to communicate with your provide suggestions for both print and web. customers and prospects so they will buy from you instead of the competion. You know we’re And remember this - as web-based communication PrinTiPs experts at developing and producing printed grows, it doesn’t mean that the standards and pieces, but did you know that we’re also skilled fundamentals of design for print are no longer relevant. Your Eco-friendly Printer July 2011 Vol 5; No. 07 in web-based communication? In fact, they are even more important as we all learn more about effective design for desktop and mobile With our solid foundation in standards for print, web sites. we are able to adjust text, color, resolution, Sincerely, Typography Basics for layout and the other elements of design to Mike Stempien Mike Stempien move easily from print to web. In this issue of 650.377.0700 Documents and Web Sites Order business cards online with our Business Card Template - Call Linda @ 650.377.0700 s we move forward with adding is an alphabet (defined as upper and lower web-based communication methods case letters, numerals, punctuation marks and Presorted Ato traditional print-based ones, symbols) in a single size, weight and style. Standard it becomes clear that modifications to A typeface is a family of fonts representing San Mateo U.S. Postage existing standards for print are needed. various sizes, weights and styles. Your Eco-friendly Printer PAID This is particularly true of typography since One North Amphlett Boulevard, Suite F Please Route to the Print Buyer San Mateo, CA conditions for the web are quite different than • Font size is the height of the alphabet Permit No. 951 San Mateo CA 94401-2900 Or for print. and is measured in points (print) or ems 650-377-0700 Fax 650-377-0180 Our Products: (web). www.mmpsm.com • Business Stationery A brief history of typography • Font weight such as medium, bold, light • Newsletters Return Service Requested Typography today is the result of Johann or black, is the thickness of the alphabet • Postcards Gutenberg’s use of movable type in the relative to its height. mid-1400s. He was the first European to • Font style is the slant of the letters. • Training Manuals use individual letters, numbers and spaces Upright letters are known as roman; • Mailing Services to assemble into words, sentences and pages slanted is called italics or oblique. • Promotional Items that could be disassembled and used again. • And Much More Movable type, combined with Gutenberg’s Font classifications are groupings of invention of oil-based ink and modification fonts according to shared characteristics. Our Services: of agricultural presses for printing, became Typography for print uses these main • Offset 2 & 4 Color Printing the basis for printing for centuries. classifications: Roman, Blackletter and • High Volume Digital Copying Gaelic. The Roman classification – which • Graphic Design Needs The process of manufacturing movable predominates today – is further divided into • Free Pickup & Delivery type in metal was continually improved serif, sans serif, script and ornamental. The Idea Corner and eventually fostered a true art form – To get a clear visual of how a font looks, use a pangram – a sentence that uses all the creation of alphabets, numerals and • Serif typefaces have finishing strokes Have a smart the letters of the alphabet. A familiar pangram is “The quick brown fox jumps characters in a single size, weight and style and stems on individual characters. (called a font) with distinctive characteristics, Serif typefaces you may be familiar with phone that is QR over the lazy dog.” A pangram can be set alone or repeated to create a block of code ready? artistically rendered and mathematically include Times, Garamond, Palatino, type. Simply take a balanced. Movable type progressed from Bodoni, Bookman. For a large amount of text, use nonsense words or Latin to examine the weight photo of this code crafting fonts individually to cutting matrices • Sans serif typefaces lack finishing to contact us now. and style of the font. This technique is known as greeking and is a good way and casting the fonts with hot metal to strokes and are relatively modern. to approximate the overall feel of the type. A common form of nonsense text is compositing machines with molten lead vats Helvetica, Univers, Futura, Avant Garde, known as lorem ipsum: that created whole lines of type on-the-fly Gill Sans are all sans serif typefaces. (hot type). Eventually typecasting yielded to • Script typefaces mimic calligraphy or Omnis mos prae earumquis endae nobit et eatecat. computerization – first as phototypesetting handwriting and are either formal or and later as desktop publishing. casual. Formal script examples are Snell Poresto tatur? Pudic tem rem sam, occus rem. Ebit adio occaepel maxim Roundhand and Old English; casual arumendi si denimporite qui omnient liquis di ut porit ari dolorro blaut quiatis Typography basics script includes Brush Script and Mistral. ut quiates corianda duciendae debit earionet es sequiae pudion cullaccum qui As with many things, today’s designer who • Ornamental typefaces (also known as blantia sumet il modit, consequunt imperro viduciis et est aut ulpa digniae dit understands the basics of typography will find display or novelty type) have limited use Production Notes: This issue of quat. it easier to make decisions about how best to as headlines or for decorative purposes. Smart Print Tips is printed digi- Em lit maion non nonecta consequos qui ut labor alition plignia que nonsed arrange type on both the printed page and a tally on New Leaf Imagination qui dolorenit omnis quo beatia invelique ium ne ni te aliquam quae optatus, web page. Let’s begin with the definition of Web typography uses a slightly different 100% Recycled, 100% post- excepratia acerspidus, consequi illest od quis rerumque lanihita nus eatur, aut a font. Although font and typeface are used classification system: serif, sans serif, consumer waste, processed eaquam am dolore nonsene dolupta simolum aut volesti consed es eriae nullam interchangeably, the actual definition of a font monospaced, cursive, fantasy and script. chlorine free, Green-e Certified, Forest Stewardship Council Cer- alignati omnis arumquae. Oviti de apeliqui oditis el molecto vendiciat. tified to make a statement that Harchiligni cuptatur acia velesto con eius, optionseque dolor sequae repuda qui represents our environmental continued on next page conscience. continued from Typography Basics for previous page Vocabulary Documents and Web Sites Questions & Alphabet length: The length of an entire alphabet, A to Digital typography White Space Answers Z, set in one row. The alphabet length of a font varies Beginning in the mid-1970s, computers began to generate fonts. White space is the part of a page that is empty of text, photos or depending on the weight (i.e., light, medium, bold, black). Early digital type used scaling to change the size, weight and style graphic elements. Sometimes called negative space, it separates the of fonts which often meant losing the elegance and proportion of design elements and creates “breathing room” on the page. If a page What is a font stack? Body type: Type used for the main body of the page; Q: hand-created fonts. Eventually font metrics – complex mathematical looks crowded, it probably needs more white space. Many readers usually measuring between 8 and 14 points. formulas describing curves, angles, word and letter spacing, space associate white space with an upscale or sophisticated look. Dingbats: a font consisting of symbols and line art images. expansion and compression – were developed, resulting in better A font stack is a list of fonts in the order of scaling and rules for forming kerning pairs, ligatures, connecting Page layout elements – page margins, line length and column width A: Display font: Type 16 points or larger in size. Also called preference for use on a web site. The font stack pro- headline type. script letters and other refinements. Digital typography has also – affect white space. So does character spacing, word spacing, line allowed the creation of fonts composed of symbols, pictographs and spacing and paragraph indents within the text itself. In general, web vides specific instructions to the web browser for how Ellipsis: also known an elliptical periods, indicate the other ornaments that never existed in mechanical typography. pages look better and are easier to read when there is additional to make a font substitution if the web site viewer’s omission of text or an interruption or hesitation. The white space between lines. computer does not have a specified font installed. classic ellipsis is four spaces separated by three periods. Typography standards Without a font stack, the browser will choose the font. The space at the beginning or end provides spacing Text is a major component of any page layout, whether for print Punctuation Marks and Symbols between the ellipsis character and preceding or following or web. How text is organized and integrated with other elements A typography alphabet includes punctuation marks and symbols Here is a suggestion for what to include in a font stack: text, including punctuation. (photographs, illustrations, graphics) determines reader interest, that are compatible with the font and will therefore produce better- comprehension and ultimately the impact of the page on the reader. looking text. Learn what they are and how to use them properly and Em: Originally, a space equal to the size of a 12-point 1. The font of choice. If the browser can access this Thus typography is an essential element of design, and standards you will produce much more professional looking text.