Quick viewing(Text Mode)

Printips, We Discuss the Elements of Typography and the Tools You Need to Communicate with Your Provide Suggestions for Both Print and Web

Printips, We Discuss the Elements of Typography and the Tools You Need to Communicate with Your Provide Suggestions for Both Print and Web

May we have a word? As your , our job is to provide you with PrinTips, we discuss the elements of 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 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 (defined as upper and lower web-based communication methods case letters, numerals, marks and Presorted Ato traditional print-based ones, symbols) in a single size, weight and style. Standard it becomes clear that modifications to A is a family of 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 • 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 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 , combined with Gutenberg’s Font classifications are groupings of invention of oil-based and modification fonts according to shared characteristics. Our Services: of agricultural presses for , became Typography for print uses these main • Offset 2 & 4 the basis for printing for centuries. classifications: Roman, and • High Volume Digital Copying Gaelic. The Roman classification – which • Needs The process of manufacturing movable predominates today – is further divided into • Free Pickup & Delivery type in metal was continually improved , 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 – a sentence that uses all the creation of , numerals and • Serif 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, , , type. Simply take a balanced. Movable type progressed from , . For a large amount of text, use nonsense words or 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 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 vats , , Futura, Avant Garde, known as : that created whole lines of type on-the-fly are all sans serif typefaces. (hot type). Eventually typecasting yielded to • Script typefaces mimic or Omnis mos prae earumquis endae nobit et eatecat. computerization – first as and are either formal or and later as desktop . 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- lit maion non nonecta consequos qui ut labor alition plignia que nonsed arrange type on both the printed 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 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, , 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 Answers Z, set in one row. The alphabet length of a font varies Beginning in the mid-1970s, 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; : 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 spacing, space associate white space with an upscale or sophisticated look. : 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 pairs, ligatures, connecting elements – page margins, and 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 indents within the text itself. In general, web vides specific instructions to the 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 if the web site viewer’s omission of text or an interruption or hesitation. The white space between lines. 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, ) determines reader interest, that are compatible with the font and will therefore produce better- comprehension and ultimately the 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- 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. capital letter M. Now, the square of the body of any size for use of typography provide a basis to guide design choices. font, the page will look as intended. type (10 points wide for 10 point type). Also a measure of Typography standards include the selection and use of fonts, white • (-), (–), and em dashes (—) are used to type height on the web. space, punctuation marks and symbols. separate characters. Each has a specific use. A is used 2. An alternative font. A font that is similar to the En: Half the width of an em space. to hyphenate words and separate characters in a phone number. font of choice so there is as little change to the Helvetica: the name of a font that is a registered trademark Selecting and Using Fonts An en shows duration of range (such as April 1–April 30 page design as possible. of Linotype-Hell AG; derived from the Latin name for The choice of fonts is dictated by the page’s purpose, the amount of or 76–100. An em dash is used in place of single or double text, the intended audience, and characteristics of the font itself. Use Switzerland. hyphens to indicate a parenthetical phrase or to set apart clauses 3. A common Windows or Macintosh font. A font these standards for selecting and using fonts: in a sentence. En and em dashes are part of the character set of that has a very high likelihood of being installed Kerning: To adjust the spacing between individual pairs the font. on either a Windows or Macintosh computer. of letters. See also: tracking • For on a text-heavy printed page, use a serif font. • Single (‘’) and double (“ ”) quotation marks are used to indicate (pronounced led’-ing): The space between rows (Most , and magazines use serif type for conversation, word-for-word remarks, or a non-traditional use body copy.) For readability on a web page, use a sans serif font. of a word. Use double quotes to enclose the entire sentence, 4. A generic font name in CSS (cascading style of type. Also called line spacing. Originally, thin strips of sheet). The generic font families in CSS are ser- lead were inserted between lines of type to add space and The text will look cleaner, and sans serif fonts render better in phase or word, and single quotes for a quotation within a if, sans serif, monospaced, cursive, fantasy and make the type easier to read – hence the term leading. smaller point sizes in the low resolution of computer monitors. quotation. Quotation marks are part of the font character set. • Limit the number of serif and sans serif fonts to no more than • An ellipsis (…) indicates an interruption or an unfinished script. : a font whose characters are all the three. In general, the longer the , the more fonts that thought. Use the ellipsis character rather than three periods, same width or pitch (the number of characters in an can be used. For a single-page or short document, use only one since the spacing between the dots in an ellipsis is narrower Times Roman is the most common serif font on the inch. Common pitch values are 10 and 12.) Contrasted to or two fonts. Use only one script or ornamental font, regardless than a period followed by a space. web, and the default serif font in most browsers. proportionally spaced fonts whose character widths vary of the number of pages. • Become familiar with symbols such as trademark (™), copyright (PC) and Helvetica (Mac) are the most common sans depending on the shape of the character. • Be consistent by using the same fonts throughout the document and registered copyright (© ®), degree (°) and (¼, ½, serif fonts. : A measure of type size. One pica equals one-sixth or web site. For variety, change the size or weight of the type, ¾). of an inch. not the font. • For contrast, use a sans serif font for headlines when using a Typography is about the details Point: A unit of measure. Twelve points equals one pica. serif font for body copy, and vice versa. It is generally accepted Whether in print or on the web, the goal of good typography is the Pica was once the name given to 12-point type, and a that sans serif fonts are best for text on web pages. same: to put the reader at ease, thereby enhancing his understanding 12-point capital letter M was exactly square. • For as well as contrast, use bold or . and ability to learn from the text. Pay attention to the details and you Tracking: To adjust letter spacing for an entire range of • Except for and abbreviations, avoid using all will make typography work for you. text (such as a headline or paragraph). See also: kerning. capital letters for text. In printed documents, slows down reading speed; on the web, all caps is synonymous with If you have any questions, please contact us at shouting. 650-377-0700. • Never use all caps in a script font – the letters won’t connect as they would in handwriting or calligraphy and the words will be very difficult to read.

Top View