Top 10 Things You Need To Know About Type
I once read somewhere, “there is no more direct way users will interact with and understand your product than through words.” So rather, your words being context fillers on your screen, they should make your reader feel like they are seeing their oldest friend every time they view it.
But before stepping into the weeds of typography purpose, it helps to start with a bit of research. You should start by better understanding the medium and user you are designing for. Just like an experienced carpenter understands all the properties of wood, a good designer understands the mechanics that make the medium work, accessibility, and the requirements of the users + business. “Look, based on our data, here’s how people think and act, and so here’s why this is a great solution.”
Alright, are you ready to get into the weeds already? Below I provided my tips and tricks to create the best typography experience for your platform or design system. I broke it down by functionality and form (the UX & UI).
1. Know why your font style is living where it is, and why it is there. If you want to provide a feeling for example a quote or italic makes content feel more elegant or classic.
2. Always meet W3C accessibility guidelines. It is simple, know your users and there pain points. For example, if you are building a platform with an older generation make sure you are always designing with AAA Large ( >18pt | >4.5: 1 ) for enhanced contrast.
3. Be Clear and Concise. Always build descriptives for all levels of readers. Sentences should remain under 30 words. Know lower case is the fastest way to read a sentence or a piece of text. When describing actions like a link or a button make it understandable on what you want the user to do, with a specific verb. When there is error messaging, describe, in the present tense, exactly what went wrong and what the possible next steps are for a user to fix the problem.
4. Content should feel normal and relatable. The closer your copy is to the reader’s narrative voice, the more that voice can resonate with them. The more it resonates, the less they have to think about what you’ve said before they respond.
5. Know about standard design principles. Is your content laid out in an F pattern or Z Pattern? Are you setting your content to left-to-right, top-to-bottom?
6. Know the software you are designing in. Do your developers use EMS? Is the intention of the platform to be responsive?
7. Color in type. Color selections should be deliberate and intuitive. Approximately 8% of men and 0.5% of women are affected by some form of color blindness. Therefore primary colors should be related to the brand color, black, or white. And should always be tested for accesiblity. Secondary colors and systematic colors like an error, warning, success should be standard and not make the user cognitive load work overtime, trying to figure out color meanings.
8. Point Size & Hierarchy. Your point size of type should be anywhere ranging from 14-25pt on the web. Hierarchy of type is very important, letting the user know what the priorities are within each screen.
9. Line spacing. Or leading is just as important as font size. Line spacing has an undervalued impact on scan-ability and readability, but more importantly on accessibility. Lead is the property set by “line-height” in HTML code. Line spacing is expressed as a number value or factor of the font size, such as 1.5× or 150%. As an example: 1.5× line height on size 12 text is 18 (by math 12 × 1.5). To meet W3C accessibility guidelines line spacing needs to be at least 150% within paragraphs but most browsers defaults and design tools are only 110% - 120%. Fun history lesson the term “leading” (the print name for line spacing) comes from printing presses when type was manually set with movable metal type letters.
10. Utilize Your Grids. Traditionally for the screen, this has manifested itself in a 12-column grid, often set at 960px wide with 60px columns and 20px gutters. The numbers 960, 60, and 20 may seem arbitrary, but there’s a good logic behind them: 960 is a versatile grid that is divisible by many different numbers (16, 12, 10, 8, 6, 4, and 2).
To sum it up, typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It is the #1 way to communicate to your user what your intentions are for them. UX and UI play a major role in manipulating type for specific users and platforms. Henry Adams once said, “Chaos was the law of nature and order was the dream of man”.
People always favor the order because it makes things more comprehensible. The same works with interfaces. When typography elements are organized and structured, people can easily use an app or a website and feel satisfied with a product.
