Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

The Power of Typography

6.987 Aufrufe

Veröffentlicht am

A detailed presentation on Typography and the reasons why its powerful

Veröffentlicht in: Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

The Power of Typography

  1. 1. LANGUAGE is mostly Spoken or Heard TYPOGRAPHYis an art that makes Language Visible
  2. 2. This art form has evolved over several millennia Cave Paintings Medieval Ages Digital Typography Ancient Hieroglyphics We have come a long way from scribbling on walls to type setting on a digital canvas. A neat type setting does not only result in an aesthetic appeal but reduces the void between man and machine.
  3. 3. TYPEFACE is a set of typographical symbols and characters. This is the design of the structure of the alphabet. FONT is traditionally defined as a complete character set within a typeface, often of a particular size & style. vs FontsTypefaces EXAMPLE 1 2 3 1 - is a font that is average in it’s build 2 - is tall and lanky font 3 - is stout and swollen font. Assume 1, 2, 3 are brothers that have the same dashed attribute border and comprise of the dashed triangle typeface. To keep it simple, typeface is the creative labour involved in giving birth to a great font that can have multiple variations. A collection of these variations forms a type-family.
  4. 4. Serif typefaces Sans serif typefaces Script typefaces Ornamental typefaces BLACK - LETTER GAELIC MONO - SPACED SYMBOL EFFECT CJK - Chinese / Japanese / Korean Mincho typefaces Gothic typefaces Maru typefaces TYPEFACE CLASSIFICATION ROMAN Mimicry typefaces An abundance of typefaces have been created over the centuries. Roman types are the most widely used typefaces today. This is the primary classification and the rabbit hole keeps getting deeper with new fonts coming up everyday. E E E E EE E E E E  E OTHERS
  5. 5. THE ANATOMY OF TYPE IMAGE SOURCE: Martin Silvertant - Deviant Art
  6. 6. Mixing various styles to create more variety Bodoni and Futura have very different looking letterforms, but their structure is based on the same basic geometric principles. Use varying weights to convey & create unity See how different weights effect the look and feel of the textual elements in design. We shall come to learn sizes soon.
  7. 7. 5 reasons why TYPOGRAPHY is powerful 1. It attracts and holds the audience’s attention. 2. It is reader friendly. 3. It establishes an information hierarchy. 4. It helps to create harmony. 5. It creates and builds recognition.
  8. 8. Importance of WHITESPACE
  9. 9. IT MAY SEEM AS THOUGH ALL UPPERCASE OR CAPITAL LETTERS WOULD BE LIKELY TO CATCH A READER’S ATTENTION BUT IT’S LACK OF LEGIBILITY IS MORE LIKELY TO ALIENATE THAN ATTRACT. ALL CAPS MAKES THE TEXT LOOK AS THOUGH IT WERE SCREAMING AND GENERALLY THIS IS WHAT THE USERS PERCEIVE. • The main use of typography is to guide the users eye along your presentation. • Our eye's span of acute focus is only about 3 inches (8 cm). • We can see three to five words at a given point of time. • Eyes following a long line of text, they tend to lose track of the next line. • Magazines and Newspapers use columns to help maintain comfortable focus. Creating Reader Friendly Type
  10. 10. What is LOREM IPSUM “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas magna sem, imperdiet non auctor ac, tempor sit amet est. Cras ultricies elementum risus vel adipiscing. Aliquam erat volutpat. Nullam interdum tincidunt velit. Etiam rhoncus volutpat posuere. Suspendisse turpis lectus, varius non risus a, scelerisque imperdiet orci. Vivamus tincidunt mauris justo, id auctor lacus tincidunt id. Vivamus ultrices eros sit amet diam molestie imperdiet. Nulla porttitor congue ipsum, nec feugiat quam ullamcorper nec. Quisque euismod id diam nec sodales.” Lorem Ipsum has been the printing and typesetting industry's standard since the 1500s. It has endured five centuries and has also leapt into electronic typesetting. This is not random text and has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham. ADDITIONAL NOTES
  11. 11. Font - Family Font - Size Font - Weight Font - Style Font - Variant Letter - Spacing Word - Spacing Line - Height List of Typographical Properties Text - Align Text - Decoration Text - Indent Text - Transform Text - Shadow Vertical - Align White - Space Direction Margins STYLING FORMATTING
  12. 12. The most important part of the composition is given the most prominence. Once the viewer is hooked, supplementary information is displayed. Symmetric : Equally distributed on either side of a central axis. A modular scale is a sequence of numbers that relate to one another in a meaningful way. & BalanceProportion Asymmetric : Distributed unevenly on a page so that positive and negative space are equal. BALANCE CAN BE ACHIEVED SYMMETRICALLY OR ASYMMETRICALLY BALANCE CAN BE ACHIEVED SYMMETRICALLY OR ASYMMETRICALLY
  13. 13. Sometimes it helps to think of type as a design element that is confined within a grid. A Grid sets up a system of blocks that can be arranged as elements in a composition. How to style, color, and size type are all dictated by the principals of design: • Hierarchy & Dominance - the most prominent item gets VIP treatment • Unity & Variety - this can be achieved by using varying font sizes and colours • Balance - distribution around a central axis / by using equal +ve & -ve space • Proportion - using modular scales to give a homogeneous feel to the type. Proportional Systems & the Grid
  14. 14. Tried & Tested font combinations
  15. 15. Fonts that look great on MOBILE screens ■ Noticia / Serif - Typeface ■ Bariol / Rounded - Typeface ■ Gleegoo / Serif - Typeface ■ Cabin / Sans Serif - Typeface ■ Ubuntu / Sans Serif - Typeface ■ Ostrich Sans / Sans Serif - Typeface ■ Dock no. 11 / Sans Serif - Typeface
  16. 16. Ligatures
  17. 17. Tracking & Kerning Kerning is the process of adding or subtracting space between specific pairs of characters. Tracking is the process of loosening or tightening a block of text.
  18. 18. Further Reading http://www.adobe.com/type/topics/glossary.html http://voiceandtone.com/ http://www.adobe.com/type/browser/classifications.html http://powerpointsymphony.com/?tag=typography http://practicaltypography.com http://www.creativebloq.com/typography/free-web-fonts-1131610 http://www.smashingmagazine.com/2009/11/15/20-new-high-quality-free-fonts/ THANK YOU ! by, Rohan Kartik UI - Designer