Basics of typography hierarchy

Hierarchy

1. Basics of Typography

2. Anatomy of Type Historic Families of Type and Classification Type / Typeface / Font / Families of Type Studying a Typeface Kerning , Leading , Tracking , Measuring Type Type Hierarchy

3. What is Type Hierarchy? Typographic Hierarchy is a system for organizing type that establishes an order of importance within the data, allowing the reader to easily find what they are looking for and navigate the content

4. It helps guide the reader’s eye to where a section begins and ends , whilst enabling the user to isolate certain information based on the consistent use of style throughout a body of text Type Hierarchy

5. A Simple Example 1 Type Hierarchy

6. As you can see in the example , the title, date, and descriptions are all styled uniquely, consistently and isolated by using paragraph spacing Type Hierarchy

7. Type Hierarchy

8. Type Hierarchy

9. Type Hierarchy

10. Type Hierarchy

11. Type Hierarchy

12. Type Hierarchy Styling Techniques

13. There are a few basic methods for establishing a visual typographic hierarchy Size Weight Color Position Type Contrast Type Hierarchy

14. Size This is the easiest & most common method for establishing hierarchy Type Hierarchy

15. Type Hierarchy

16. Type Hierarchy

17. Type Hierarchy

18. Weight Simply using a bolder weight of a font can help isolate. Type Hierarchy

19. Type Hierarchy

20. Type Hierarchy

21. Type Hierarchy

22. Type Hierarchy

23. Type Hierarchy

24. Colour Colour plays a big role in what our eye sees as primary & secondary. Generally speaking; warm colors pop, cooler colours recede. Type Hierarchy

25. Type Hierarchy

26. Type Hierarchy

27. Type Hierarchy

28. Texture & Tone Hierarchy based on type is usually shaped by relationships of visual texture and tone; that is, letterforms, words and lines of type come together to form  different tonal values & varying characteristics of patterns or texture .  Type Hierarchy

29. Type Hierarchy

30. Position Where sections of information are positioned in relationship to each other can establish a hierarchy Type Hierarchy

31. Type Hierarchy

32. Type Hierarchy

33. Contrasting Typefaces A great way to achieve hierarchy is to use contrasting typefaces Type Hierarchy

34. Type Hierarchy

35. Combination As mentioned previously, these methods can be most effective when used in combination with one another. This is the fun part – deciding what combination is right for your content and layout! Type Hierarchy

36. Spacing Matters One of the most important concepts in type design is spacing. It’s one of the most difficult concepts to grasp for beginning designers, yet it is also one of the most visually obvious. Proper typographic spacing is critical in establishing hierarchy ; it can make the difference between confusion and clarity . Type Hierarchy

37. Spacing Matters The rule of  proximity  in design generally states that related items should appear closer to each other than items that are not related. However , proper spacing involves more than just a hard return between sections of type. Generally, a hard return creates too much space between content in the context of a paragraph. Paragraph spacing – either before or after – should be used. This typically allows the group of content to hold together while providing an adequate division of content within it. Type Hierarchy

38. Type Hierarchy

39. Type Hierarchy