Intro to Typography (Part 1)
Total Page:16
File Type:pdf, Size:1020Kb
Load more
Recommended publications
-
Typography One Typeface Classification Why Classify?
Typography One typeface classification Why classify? Classification helps us describe and navigate type choices Typeface classification helps to: 1. sort type (scholars, historians, type manufacturers), 2. reference type (educators, students, designers, scholars) Approximately 250,000 digital typefaces are available today— Even with excellent search engines, a common system of description is a big help! classification systems Many systems have been proposed Francis Thibaudeau, 1921 Maximillian Vox, 1952 Vox-ATypI, 1962 Aldo Novarese, 1964 Alexander Lawson, 1966 Blackletter Venetian French Dutch-English Transitional Modern Sans Serif Square Serif Script-Cursive Decorative J. Ben Lieberman, 1967 Marcel Janco, 1978 Ellen Lupton, 2004 The classification system you will learn is a combination of Lawson’s and Lupton’s systems Black Letter Old Style serif Transitional serif Modern Style serif Script Cursive Slab Serif Geometric Sans Grotesque Sans Humanist Sans Display & Decorative basic characteristics + stress + serifs (or lack thereof) + shape stress: where the thinnest parts of a letter fall diagonal stress vertical stress no stress horizontal stress Old Style serif Transitional serif or Slab Serif or or reverse stress (Centaur) Modern Style serif Sans Serif Display & Decorative (Baskerville) (Helvetica) (Edmunds) serif types bracketed serifs unbracketed serifs slab serifs no serif Old Style Serif and Modern Style Serif Slab Serif or Square Serif Sans Serif Transitional Serif (Bodoni) or Egyptian (Helvetica) (Baskerville) (Rockwell/Clarendon) shape Geometric Sans Serif Grotesk Sans Serif Humanist Sans Serif (Futura) (Helvetica) (Gill Sans) Geometric sans are based on basic Grotesk sans look precisely drawn. Humanist sans are based on shapes like circles, triangles, and They have have uniform, human writing. -
Choosing Fonts – Quick Tips
Choosing Fonts – Quick Tips 1. Choose complementary fonts – choose a font that matches the mood of your design. For business cards, it is probably best to choose a classic font. *Note: These fonts are not available in Canva, but are in the Microsoft Office Suite. For some good Canva options, go to this link – https://www.canva.com/learn/canva-for-work-brand-fonts/ Examples: Serif Fonts: Sans Serif Fonts: Times New Roman Helvetica Cambria Arial Georgia Verdana Courier New Calibri Century Schoolbook 2. Establish a visual hierarchy – Use fonts to separate different types of information and guide the reader - Use different fonts, sizes, weights (boldness), and even color - Example: Heading (Helvetica, SZ 22, Bold) Sub-heading (Helvetica, SZ 16, Italics) Body Text (Garamond, SZ 12, Regular) Captions (Garamond, SZ 10, Regular 3. Mix Serifs and Sans Serifs – This is one of the best ways to add visual interest to type. See in the above example how I combined Helvetica, a sans serif font, with Garamond, a serif font. 4. Create Contrast, Not Conflict: Fonts that are too dissimilar may not pair well together. Contrast is good, but fonts need a connecting element. Conflict Contrast 5. Use Fonts from the Same Family: These fonts were created to work together. For example, the fonts in the Arial or Courier families. 6. Limit Your Number of Fonts: No more than 2 or 3 is a good rule – for business cards, choose 2. 7. Trust Your Eye: These are not concrete rules – you will know if a design element works or not! . -
Background a Short Introduction to Font Characteristics
fonts: background A short introduction to font characteristics Maarten Gelderman Hardly anyone will dispute the statement that proporion- ally spaced fonts are more beautiful and legible than mono- abstract spaced designs. In a monospaced design the letter i takes as Almost anyone who develops an interest in fonts is bound to much space as a letter m or W. Consequently, some char- be overwelmed by the bewildering variety of letterforms acters look simply too compressed, whereas around oth- available. The number of fonts available from commercial ers too much white space is found. Monospaced fonts are suppliers like Adobe, URW, LinoType and others runs into the simply not suited for body text. Only in situations where it thousands. A recent catalog issued by FontShop [Truong et al., is important that all characters are of equal width, e.g., in 1998] alone lists over 25.000 different varieties.1 And listings of computer programs, where it may be important somehow, although the differences of the individual letters are that each individual character can be discerned and where hardly noticable, each font has its own character, its own the layout of the program may depend on using mono- personality. Even the atmosphere elucided by a text set from spaced fonts, can the usage of a monospaced font be de- Adobe Garamond is noticably different from the atmosphere of the same text set from Stempel Garamond. Although fended. In most other situations, they should simply be decisions about the usage of fonts, will always remain in the avoided. realm of esthetics, some knowledge about font characteristics may nevertheless help to create some order and to find out Romans, italics and slant A second typeface character- why certain design decisions just do not work. -
Classifying Type Thunder Graphics Training • Type Workshop Typeface Groups
Classifying Type Thunder Graphics Training • Type Workshop Typeface Groups Cla sifying Type Typeface Groups The typefaces you choose can make or break a layout or design because they set the tone of the message.Choosing The the more right you font know for the about job is type, an important the better design your decision.type choices There will are be. so many different fonts available for the computer that it would be almost impossible to learn the names of every one. However, manys typefaces share similar qualities. Typographers classify fonts into groups to help Typographers classify type into groups to help remember the different kinds. Often, a font from within oneremember group can the be different substituted kinds. for Often, one nota font available from within to achieve one group the samecan be effect. substituted Different for anothertypographers usewhen different not available groupings. to achieve The classifi the samecation effect. system Different used by typographers Thunder Graphics use different includes groups. seven The major groups.classification system used byStevenson includes seven major groups. Use the Right arrow key to move to the next page. • Use the Left arrow key to move back a page. Use the key combination, Command (⌘) + Q to quit the presentation. Thunder Graphics Training • Type Workshop Typeface Groups ����������������������� ��������������������������������������������������������������������������������� ���������������������������������������������������������������������������� ������������������������������������������������������������������������������ -
Vision Performance Institute
Vision Performance Institute Technical Report Individual character legibility James E. Sheedy, OD, PhD Yu-Chi Tai, PhD John Hayes, PhD The purpose of this study was to investigate the factors that influence the legibility of individual characters. Previous work in our lab [2], including the first study in this sequence, has studied the relative legibility of fonts with different anti- aliasing techniques or other presentation medias, such as paper. These studies have tested the relative legibility of a set of characters configured with the tested conditions. However the relative legibility of individual characters within the character set has not been studied. While many factors seem to affect the legibility of a character (e.g., character typeface, character size, image contrast, character rendering, the type of presentation media, the amount of text presented, viewing distance, etc.), it is not clear what makes a character more legible when presenting in one way than in another. In addition, the importance of those different factors to the legibility of one character may not be held when the same set of factors was presented in another character. Some characters may be more legible in one typeface and others more legible in another typeface. What are the character features that affect legibility? For example, some characters have wider openings (e.g., the opening of “c” in Calibri is wider than the character “c” in Helvetica); some letter g’s have double bowls while some have single (e.g., “g” in Batang vs. “g” in Verdana); some have longer ascenders or descenders (e.g., “b” in Constantia vs. -
Web Typography │ 2 Table of Content
Imprint Published in January 2011 Smashing Media GmbH, Freiburg, Germany Cover Design: Ricardo Gimenes Editing: Manuela Müller Proofreading: Brian Goessling Concept: Sven Lennartz, Vitaly Friedman Founded in September 2006, Smashing Magazine delivers useful and innovative information to Web designers and developers. Smashing Magazine is a well-respected international online publication for professional Web designers and developers. Our main goal is to support the Web design community with useful and valuable articles and resources, written and created by experienced designers and developers. ISBN: 978-3-943075-07-6 Version: March 29, 2011 Smashing eBook #6│Getting the Hang of Web Typography │ 2 Table of Content Preface The Ails Of Typographic Anti-Aliasing 10 Principles For Readable Web Typography 5 Principles and Ideas of Setting Type on the Web Lessons From Swiss Style Graphic Design 8 Simple Ways to Improve Typography in Your Designs Typographic Design Patterns and Best Practices The Typography Dress Code: Principles of Choosing and Using Typefaces Best Practices of Combining Typefaces Guide to CSS Font Stacks: Techniques and Resources New Typographic Possibilities with CSS 3 Good Old @Font-Face Rule Revisted The Current Web Font Formats Review of Popular Web Font Embedding Services How to Embed Web Fonts from your Server Web Typography – Work-arounds, Tips and Tricks 10 Useful Typography Tools Glossary The Authors Smashing eBook #6│Getting the Hang of Web Typography │ 3 Preface Script is one of the oldest cultural assets. The first attempts at written expressions date back more than 5,000 years ago. From the Sumerians cuneiform writing to the invention of the Gutenberg printing press in Medieval Germany up to today՚s modern desktop publishing it՚s been a long way that has left its impact on the current use and practice of typography. -
A Collection of Mildly Interesting Facts About the Little Symbols We Communicate With
Ty p o g raph i c Factettes A collection of mildly interesting facts about the little symbols we communicate with. Helvetica The horizontal bars of a letter are almost always thinner than the vertical bars. Minion The font size is approximately the measurement from the lowest appearance of any letter to the highest. Most of the time. Seventy-two points equals one inch. Fridge256 point Cochin most of 50the point Zaphino time Letters with rounded bottoms don’t sit on the baseline, but slightly below it. Visually, they would appear too high if they rested on the same base as the squared letters. liceAdobe Caslon Bold UNITED KINGDOM UNITED STATES LOLITA LOLITA In Ancient Rome, scribes would abbreviate et (the latin word for and) into one letter. We still use that abbreviation, called the ampersand. The et is still very visible in some italic ampersands. The word ampersand comes from and-per-se-and. Strange. Adobe Garamond Regular Adobe Garamond Italic Trump Mediaval Italic Helvetica Light hat two letters ss w it cam gue e f can rom u . I Yo t h d. as n b ha e rt en ho a s ro n u e n t d it r fo w r s h a u n w ) d r e e m d a s n o r f e y t e t a e r b s , a b s u d t e d e e n m t i a ( n l d o b s o m a y r S e - d t w A i e t h h t t , h d e n a a s d r v e e p n t m a o f e e h m t e a k i i l . -
Brand Manual the NEW BRAND DESIGN GUIDELINES for “LIPSUS”, a PRODUCT by SHAHAK-TEC LTD
AppleBay Media [email protected] Uziya Street 15/10 www.applebaymedia.com Jerusalem 9314315 Company Representative +972 50 990 2285 David Metzler Brand Manual THE NEW BRAND DESIGN GUIDELINES FOR “LIPSUS”, A PRODUCT BY SHAHAK-TEC LTD. March 2019 BRAND DESIGN MANUAL V1 PREPARED FOR LIPSUS Address Phone & Fax Online Shahak-Tec Ltd. Email 1: [email protected] 1 Avshalom Road, P.O. Box 166 Phone: +972 4 624 4444 Email 2: [email protected] Zikhron Yaaqov 3095101 Israel Fax: +972 4 635 0999 Website: www.shahaktec.com Brand Identity? Have a Look when Image meets Design. Lipsus Corporate Brand Guidelines Version: v1 // 2019 Table of content Brand Design Manual SECTION 1 | INTRODUCTION .........................................................................PAGE 04 SECTION 2 | BRAND LOGO ............................................................................PAGE 06 SECTION 3 | BRAND TYPOGRAPHY ..................................................................PAGE 10 SECTION 4 | BRAND COLOR SYSTEM ...............................................................PAGE 14 These guidelines describe the visual and verbal elements that represent Lipsus´ brand identity. welcome4 // 16 1. INTRODUCTION // Introduction THE DESIGN GUIDELINES These guidelines describe the visual and verbal elements that represent the corporate identity of Lipsus. This includes our name, logo and other elements such as color, type and graphics. Sending a consistent and controlled message of who you are is essential to presenting a strong, unified image of your company. These guidelines should reflect Lipsus’ commitment to quality, consitency and style. The Lipsus brand, including the logo, name, colors and identifying elements, are valuable company assets. Each of you is responsible for protecting the company’s interests by preventing unauthorized or incorrect use of the Lipsus name and marks. DAVID METZLER AppleBay Media welcome5 // 16 The Logo • Introduction • Elements • Versions • Dimensions • Applications 6 // 16 2. -
Vademecum Logo+Font
Vademecum per l’uso di logotipo e font Logotipo Il logo Mosaico+ è disponibile in due versioni: logotipo completo e pittogramma con o senza payoff 1. logotipo completo (MOSAICO+) da utilizzare in ogni contesto istituzionale come: · lettere · documenti legali · firme email · presentazioni · cataloghi · progetti · listini · offerte · ... 2. pittogramma (M+) da utilizzare all’interno di: · sito e canali social di Mosaico+ in cui il profilo stesso si chiami Mosaico+ · presentazioni o strumenti che già riportino il logo completo · su immagini fotografiche e realizzazioni da ricondurre al brand · laddove lo spazio sia estremamente piccolo da rendere il logo completo illeggibile · ... 3. Il pittogramma può essere accompagnato dal payoff (Shaping mosaics) solo se leggibile. Logotipo e pittogramma sono disponibili esclusivamente in: · nero per tutte le comunicazioni istituzionali · bianco per cover o per brandizzare immagini Non si modificano il colore, le proporzioni e la direzione del logo. Nelle immagini il logo viene posizionato in basso a destra. Le immagini di collezione sono parte integrande della comunicazione del brand, pertanto non è possibile apporvi loghi diversi da quello ufficiale. Font ufficiali 4. Per tutte le comunicazioni istituzionali o commerciali: · Helvetica light 45 o Helvetica heavy 85 per i grassetti (in alternativa Helvetica regular o Helvetica bold per i grassetti) Per testi tecnici o lunghi testi contrattuali o legali · Trade gothic condensed 18 o Trade gothic condensed 20 per i grassetti. Per ogni chiarimento o specifica esigenza, vi preghiamo di contattare preventivamente l’ufficio marketing: [email protected] 1. logotipo completo lettera catalogo Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -
Typeface Classification Serif Or Sans Serif?
Typography 1: Typeface Classification Typeface Classification Serif or Sans Serif? ABCDEFG ABCDEFG abcdefgo abcdefgo Adobe Jenson DIN Pro Book Typography 1: Typeface Classification Typeface Classification Typeface or font? ABCDEFG Font: Adobe Jenson Regular ABCDEFG Font: Adobe Jenson Italic TYPEFACE FAMILY ABCDEFG Font: Adobe Jenson Bold ABCDEFG Font: Adobe Jenson Bold Italic Typography 1: Typeface Classification Typeface Timeline Blackletter Humanist Old Style Transitional Modern Bauhaus Digital (aka Venetian) sans serif 1450 1460- 1716- 1700- 1780- 1920- 1980-present 1470 1728 1775 1880 1960 Typography 1: Typeface Classification Typeface Classification Humanist | Old Style | Transitional | Modern |Slab Serif (Egyptian) | Sans Serif The model for the first movable types was Blackletter (also know as Block, Gothic, Fraktur or Old English), a heavy, dark, at times almost illegible — to modern eyes — script that was common during the Middle Ages. from I Love Typography http://ilovetypography.com/2007/11/06/type-terminology-humanist-2/ Typography 1: : Typeface Classification Typeface Classification Humanist | Old Style | Transitional | Modern |Slab Serif (Egyptian) | Sans Serif Types based on blackletter were soon superseded by something a little easier Humanist (also refered to Venetian).. ABCDEFG ABCDEFG > abcdefg abcdefg Adobe Jenson Fette Fraktur Typography 1: : Typeface Classification Typeface Classification Humanist | Old Style | Transitional | Modern |Slab Serif (Egyptian) | Sans Serif The Humanist types (sometimes referred to as Venetian) appeared during the 1460s and 1470s, and were modelled not on the dark gothic scripts like textura, but on the lighter, more open forms of the Italian humanist writers. The Humanist types were at the same time the first roman types. Typography 1: : Typeface Classification Typeface Classification Humanist | Old Style | Transitional | Modern |Slab Serif (Egyptian) | Sans Serif Characteristics 1. -
Style Guide: Best Practices in Formatting
Style Guide: Best Practices in Formatting According to Colin Wheildon, author of Type & Layout: Are You Communicating or Just Making Pretty Shapes, it’s possible that 75% of your readers attempting to access your content (whether online, in print, or via email) will disregard what you’re saying based solely on the type of font you choose. That’s right—75%! That’s why it’s critically important to choose fonts that are clean and accessible and to choose a layout that is visual but not busy. Don’t try to pack too much into your layout, or else you may run the risk of your message being lost. First, let’s look at the differences between a “serif” and “sans serif” font. Serif fonts are more embellished, with small lines attached to the end of a stroke in a letter or symbol. Popular serif fonts include Times New Roman, Georgia, and Garamond. Many books, newspaper, and magazines use a serif font. In print mediums, serif fonts are often easier to read. Sans serif fonts don’t have the added embellishments. These fonts are often used in advertisements, and are generally easier to read. In print, sans serif fonts are often used as a headline, whereas serif fonts are used for the body text. Popular sans serif fonts include Helvetica, Arial, and Calibri. There are some simple best practices in formatting print, online, and email communications for your organization. These best practices will make your information easier to understand and more accessible to the average reader. When do I use a serif font like Times New Roman or Garamond? For print items, it’s suggested to utilize serif fonts for brochures, donation letters in the mail, etc. -
History of Moveable Type
History of Moveable Type Johannes Gutenberg invented Moveable Type and the Printing Press in Germany in 1440. Moveable Type was first made of wood and replaced by metal. Example of moveable type being set. Fonts were Type set on a printing press. organized in wooden “job cases” by Typeface, Caps and Lower Case, and Point Size. Typography Terms Glyphs – letters (A,a,B,b,C,c) Typeface – The aesthetic design of an alphabet. Helvetica, Didot, Times New Roman Type Family – The range of variations and point size available within one Typeface. Font (Font Face) – The traditional term for the complete set of a typeface as it relates to one point size (Font Face: Helvetica, 10 pt). This would include upper and lower case glyphs, small capitals, bold and italic. After the introduction of the computer, the word Font is now used synonymously with the word Typeface, i.e. “What font are you using? Helvetica!” Weight – the weight of a typeface is determined by the thickness of the character outlines relative to their height (Hairline, Thin, Ultra-light, Extra-light, Light, Book, Regular, Roman, Medium, Demi-bold, Semi-bold, Bold, Extra-bold, Heavy, Black, Extra-black, Ultra-black). Point Size – the size of the typeface (12pt, 14pt, 18pt). Points are the standard until of typographic measurement. 12 points = 1 pica, 6 picas = 72 points = 1 inch. (Example right) A general rule is that body copy should never go below 10pt and captions should never be less than 8pt. Leading – or line spacing is the spacing between lines of type. In metal type composition, actual pieces of lead were inserted between lines of type on the printing press to create line spacing.