How to create a typography hierarchy that makes sense

Key quotes:

• "Numerous different properties of text (size, color, line height, x-height, weight…) are crucial to the readability, usability, and the overall look and feel of a digital product."
• "The bottom line: every text style property is crucial to the overall experience of users and needs to be carefully managed."
• "Carbon also defines rules for using different font weights and provides tools to calculate line-height (1.5x font size for standard text and 1.25x for headlines)."
• "We have to also remember that different sizes of headings may represent the same level of importance in different parts of IBM, so there’s a higher risk of an inconsistent interface and confusing information architecture (versus a design system with a more limited typographic scale)."
• "Limited choice makes typographic design decisions easier and helps with building a consistent user experience."
• "The IBM Carbon-like typographic system might better serve really big teams working on a variety of different products and experiences (including marketing landing pages), while Salesforce Lightning will better fit products and experiences where consistency is more important than visual robustness (most likely not marketing landing pages)."

Key quotes:

• "In design, this concept is applied in the form of an arrangement or presentation of elements in a way that implies importance."
• "By using color, contrast, texture, shape, position, orientation, and size, designers organize elements so that users get a sense of visual importance."
• "Having hierarchy in your design helps differentiate and prioritize visual elements and content so that the human mind gets a sense of what’s more important and what needs to be consumed first."
• "Organizing text hierarchy in this way helps organize messages at a glance, and can entice and direct readers to jump into the lengthier body text."
• "It improves the readability flow of your design as your audience is directed towards information they need to digest first."
• "This is intentional, as the image generates a sense of importance, and then transports you to the headline, which is the first thing you need to digest when reading an article."

Key quotes:

• "Everywhere you look there is typography and it’s our job as designers to learn how to properly use typography to communicate the right message."
• "Originally, the typeface is a particular design of type, while a font is a type in a particular size and weight."
• "When done right, different fonts can really complement each other, create visual hierarchy and help elevate your brand and the message you are communicating."
• "Once you have a good idea of the fonts that you will be using you need to think about how they are going to be used in size, weight, and spacing (kerning and leading) to guide the user as they navigate the page."
• "Always be asking yourself “What should attract the user first?” Knowing that your design needs to communicate a certain message and that all fonts carry a personality, it’s important to make sure that you're sending the right message."
• "In addition to communicating the right message, you should always make sure that the fonts you are using are easily readable at the size they will be displayed in real time."

Key quotes:

• "Appropriate typography speaks for itself setting the right mood and transferring a certain message to users."
• "For example, if a designer chooses a font which looks too fun and silly for a business website, users will hesitate if the company is trustworthy."
• "Mobile typography requires deep attention to the details from an appropriate size of fonts to compelling tracking and line length."
• "Smartphone UI includes clickable text parts and designers need to make sure users manage to use them."
• "Considering all the tiny details in mobile typography, designers can bring valuable products for users."
• "Appropriate white space brings a visual relief to users’ eyes and allows going easily from one word to another, from one line to the next."

Key quotes:

• "Hierarchy helps to create a focal point, gives the user an entry point to start consuming designs, and guides them to the most important information."
• "By considering the user needs as well as the business goals, you and your team can effectively prioritize visual content and make a product stand out and easier to use."
• "Product designer, Jon Yablonski, created an awesome website Laws of UX which is a great reference and collection of the maxims and principles all designers should consider when building their next user interface."
• "The F-Pattern design helps with creating a more balanced visual hierarchy and an intentional user flow."
• "An effective visual hierarchy with a consistent layout helps users navigate a product and directs their eye on what they should focus on."
• "The second level is used for elements that can easily be scanned and help users navigate through content."

Transcript: Hey guys Adrian's muscle here and today we're gonna talk about typography and specifically how to create hierarchy by changing sizes okay so some of you might remember but I I posted a Paul on Instagram asking you guys which tip would you like me to do a tutorial about and you chose this one go big or go home and this is what I'm going to show you guys so let's head right into sketch and as you can see here I have like two blocks of text two lines of text and my first question to you guys would be which one is the title and which one is a subtitle probably you don't know right like if you're like me then you don't know which one is the title one which one is the subtitle here I have another example and now I use the same the same size 64 that is used here 64 but I changed the size of the subtitle to ten pixels and I did it all caps so now as you can see guys this is really clear right now one of the biggest problems that I see in designers that are... See more →