Typography 101: It’s about much more than choosing a font
Typography has one plain duty before it and that is to convery information onscreen.
No argument or consideration can absolve typography from this duty.
A digital work which cannot be read becomes a product without purpose.
Creating Emotional Impact with Typography
Typography creates emotional impact.
Typography serves functional purpose.
Appropiate typography choices create
- Readability
- Accesibility
- Usability
- Visual balance
All of which work together to form effective, understandable visual communication.
Choosing a font isn’t typography
Anyone can choose a font. Typography isn’t about choosing fonts.
It’s about purposefully combining letterforms to create optimal reading experiences which deliver appropriate emotional impact. Utilizing size, weight, space and style combinations to establish visual order, signal relationships and enhance understanding.
Typography has a lot to do with pattern recognition.
The importance of Proper Alignment, Leading and Kerning
Justified or right-aligned paragraphs are easier to read than centered paragraps as there’s a common starting point for all phrases. Every single line starts at the same place.
Parahraphs shouldn’t be center-aligned.
The space between letters is called kerning. Kerning is critical to legibility, readability and comprehension.
Leading is the space between lines of text. It’s also called line height. Increasing the leading makes text easier to scan and read, which makes comprehension a lot faster as well. It also serves to visually group related chunks of information.
Seven Rules for great Typography
2 typefaces maximum
This means no more than 2 font families. Character widths ans weights of each font should be complementary to the other.
Avenir and Georgia have similar character widths; this creates visual harmony. Kerning is also similar.
At the same time, font pairings need to have some visual difference; otherwise there’s no reason to use the second font.
Limit line width
When line lengths are too wide, the eye has to work a lot harder to track the text following and finding the beginning of the next line.
This makes reading and comprehension more difficult and much slower.
The common standard is 60 chars per line. For mobile devices it’s 30-40 chars per line.
Choose readability
Text will be used at various sizes in your UI, from headlines to body text to form labels to…
As such, the typefaces you choose have to be readable at all of those sizes.
Not to mention the fact that users will view your design on different devices with different screen sizes and resolutions.
Your typefaces should have enough weight that letterforms don’t degrade at small sizes.
Choose legibility
Make sure all letterforms are clearly distinguishable in your typeface.
Beware of “L”s that look like “I”s
Some fonts have poorly specified kerning as well, which can make an “r” next to an “n” look like an “M”. Or an “f” and “I” look like an “H”.
Use space between paragraphs
Visual breaks between paragraphs give the eye a place to rest; that rest actually speeds understanding and comprehension.
A widely-cited study found that good use of white space between paragraphs (an in the left and right margins) increases comprehension by almost 20%.
Generously spaced content is easier to focus on - and easier to process.
Increasing the space between lines of text (leading) makes those lines easier and faster to read. Leading should be at least equal to half the character height.
Align text elements in layout using baselines
When you have multiple text elements on a single screen, they should all share points of common alignment.
Even if those chunks are unrelated, alignment helps keep the layout ordered and makes it easy and quick to scan.
Use styles to visually differentiate content
Wheen choosing a typeface, you want one that has at least 3 styles: regular, italic and bold.
Use those styles in your design to differentiate between types of content. Sometimes this removes the need for more than one font entirely - every leve of information can be signified with styling.
Five Rules for choosing imagery
Make sure the image serves a purpose
Make sure you truly understand what that purpose is.
What message will it send?
How will it support or reinforce the content? How will it guide or instruct?
Focus on people (not things)
We’re wired to recognize and connect with our fellow humans. You want people to see themselves using what you’re promoting.
So an image of one of us using a product will always carry more resonance than an image of just that product.
Images of people looking away from the camera tend to work best - because that makes it easier for viewers to imagine that they’re that person.
Cropping can change meaning
How you crop an image has a dramatic impact on how it’s perceived.
Never go for the cheap shot
Especially if it’s sexist. Or demeaning. Or in any way reduces its human subject to an object. Not only is that shallow and in poor taste it’s also quickly forgotten.
Don’t forget the power of illustration
It’s easy to forget that illustration can be much more impactful than photography.
Particularly when the subject is something we see a lot - as as a result are numb to.
Illustration can be more relevant and appropiate to its content; it can provide powerful emotional support to editorials.
Imagery DOs and DON’Ts
https://material.io/guidelines/style/imagery.html
https://stocksnap.io
DO show an actual person when the reference to that person is specific.
DO use illustration when specificity isn’t possible or doesn’t apply.
DO look for images that represent and tell realistic stories.
DON’T use posed, staged stock images that feel faked and unemotional
DO if you’re referencing a specific product, show that specific product.
DON’T default to generic, literal stock photos.
DO use color and composition to create a focal point that communicates meaning.
DON’T make the user hunt for the hidden meaning(s) in your image.
DO use images with only a few meaningful elements, with minimal distractions.
DON’T obscure the point of focus, which also obscures meaning and diminishes power.
DO strive for clear visual focus, which communicates that concept at a glance DONT use photos whose lack of focus makes the image meaningless
DO build a narrative, imply an interesting, informative story. DONT use images without context; these don’t convey mood, brand and context.
DO show a product and people in the context of a real-world situation DONT show a product and its user disassociated from that context; It’s not interesting.