Achieving Good Typography

It has been said that 90% of design is typography. This means that no matter how well balanced or beautiful a layout is, poor marriage of font types can spoil the design of a website. Good web design doesn’t happen by chance and neither does good font marriage.

Before we proceed with the 4 useful tips to achieve good typography, below is a glossary of terms to help with the design lingo.

Serif- Type with decorative finishing (e.g. Times New Roman)

Sans Serif- Geometric. Easy to read type with no attachments (e.g. Roboto)

Script- Curly fonts which link together letter to letter (e.g. Parisienne)

Hierarchy- The balance of type (i.e. Order of what you read by importance)

Here are the 4 useful tips to achieve Good Typography:

1.Use of lines

01-lines

Source: https://www.behance.net/gallery/18781465/Samsung-Club-des-Chefs

Sans serif fonts offer strong geometric lines and are great to use over images, as they help with legibility.

Applying a bold font can complement a short word nicely. When used in the centre, it will also anchor your design. Balance hierarchy by ensuring your focal words are prominent. Use a bigger font size for the word(s) which you want to draw attention to.

2.Use of contrast

02

Source: https://dribbble.com/shots/2182766-Buck-Wild-Concept/attachments/402487

Round and narrow typefaces offset nicely against each other. Remember to appropriately space out the narrow wording to give it extra room to breathe.

Applying a solid frame around your text will help to contain it. For consistency, ensure that the weight of the box corresponds with the thickness of the typeface you use.

3.Legibility

03

Source: http://arcticwild.com/

Take an elegant approach to your design by using a serif font.

When using text over an image, apply a transparent black overlay on the image so that the text can be read. Also, make sure that the text is placed in a clear space on the image so that the text would not be invaded by the feature in the image.

4. Take advantage of descenders

04

Source: http://laurenledbetter.com/delight/

If your text offers a descender (‘g’), take advantage of it. Creep a word underneath (‘college ministries’) aligning it with the ending stroke of the word above.

Apply an element such as a swirl behind the text so as to create a radial effect, helping to draw focus on the text. The swirl would also help to bring the attention away from the descender.

Conclusion

Good typography is achieved by how well a message is supported and reinforced. Understanding the goals of your text is important, so that you can employ the correct elements and typefaces in order to convey your message across.

References

http://www.creativebloq.com/typography/pro-tips-flawless-typography-5132670

https://blog.kissmetrics.com/typography-guide/

http://practicaltypography.com/what-is-good-typography.html