Download as PDF, PPTX
![[x]cube LABS, profile picture](https://crownmelresort.com/cdn.slidesharecdn.com/profile-photo-xcubelabs-48x48.jpg?cb=1628694410)
Uploaded by[x]cube LABS
The Power of Typography
This document provides an overview of typography, including its history and evolution from ancient cave paintings to digital typesetting. It discusses key typographic concepts like typeface versus font, classifications of typefaces, the anatomy of letters, and principles of layout and design like balance, hierarchy, and grid systems. Examples are given of techniques like kerning and ligatures as well as tried and tested font combinations that look good on mobile screens. Further reading resources are listed for learning more about typography.
More Related Content
![SMOKE - The Convenient Truth [1st place Worlds Best Presentation Contest] by ...](https://cdn.slidesharecdn.com/ss_thumbnails/smoke-theconvenienttruth-ep-101028211434-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to The Power of Typography
![[DevDay2019] Spacing and Typography, keys to a professional UI design - By Ng...](https://cdn.slidesharecdn.com/ss_thumbnails/duongnguyen-typographyspacing-190408082945-thumbnail.jpg?width=640&height=640&fit=bounds)
![[x]cube LABS Agritech Report Launch 2021](https://cdn.slidesharecdn.com/ss_thumbnails/xcubelabsagritechreportlaunch-210805154352-thumbnail.jpg?width=640&height=640&fit=bounds)
![[x]cube Design LABS](https://cdn.slidesharecdn.com/ss_thumbnails/xcubedesignlab1-140725065932-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
![Laminated_Springs[1]. Machine design practice](https://cdn.slidesharecdn.com/ss_thumbnails/laminatedsprings1-251116120255-2a3c06fb-thumbnail.jpg?width=640&height=640&fit=bounds)
The Power of Typography
- 1. LANGUAGE is mostlySpoken or Heard TYPOGRAPHYis an art that makes Language Visible
- 2. This art formhas 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. TYPEFACE is aset 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. Serif typefaces Sansserif 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. THE ANATOMY OFTYPE IMAGE SOURCE: Martin Silvertant - Deviant Art
- 6. Mixing various styles tocreate 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. 5 reasons whyTYPOGRAPHY 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.
- 9. IT MAY SEEMAS 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. What is LOREMIPSUM “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. 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. The most importantpart 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. Sometimes it helpsto 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. Tried & Testedfont combinations
- 15. Fonts that lookgreat 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.
- 17. Tracking & Kerning Kerningis 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.