Are you ready to become a typography pro? Let\u2019s begin!<\/p>\r\n\r\n\r\n\r\n Typography is the art of designing, styling, and arranging letters and text. It considers how each individual letter looks, as well as the spacing between letters, between words, and between entire lines of text. <\/p>\r\n\r\n\r\n\r\n When you open a Google Doc, you have some control over how you style the text in your document. You can select from a range of fonts, you can adjust the size of the text, and you can tweak the spacing between each line and paragraph. If you\u2019ve ever done that, you\u2019ve already dabbled in typography!<\/p>\r\n\r\n\r\n\r\n Of course, typography can, and does, get a little more complex than selecting fonts in a Google Doc. In the context of graphic design<\/a>\u2014and indeed any type of design\u2014typography helps to shape the brand identity, to effectively communicate important information, and to add visual appeal. <\/p>\r\n\r\n\r\n\r\n Throughout this guide, we\u2019ll break down the elements, concepts, and principles that designers use when working with typography. But first, let\u2019s consider why typography matters in the first place. <\/p>\r\n\r\n\r\n\r\n Typography isn\u2019t just about making words look beautiful. It serves an important purpose in communicating information, ensuring that text is clearly legible, and shaping a strong visual brand. <\/p>\r\n\r\n\r\n\r\n Typography matters because it:<\/p>\r\n\r\n\r\n Communicates important information to the reader.<\/strong> If you\u2019re browsing through a website, picking up food products in the supermarket, or reading a menu in a restaurant, all the text you encounter has been styled and arranged to present that information in a specific way. That\u2019s typography in action!<\/p>\r\n<\/li>\r\n Affects readability and accessibility.<\/strong> Typography has a direct impact on how easy the text is to read. Effective typography ensures that text is clear and legible, presenting information in a way that\u2019s both comfortable and accessible. Poor typography choices, on the other hand, can render the text illegible\u2014an incredibly frustrating experience for the person trying to read it!<\/p>\r\n<\/li>\r\n Helps to establish a visual hierarchy. <\/strong>The way you style text on a page or screen can help you to accentuate and emphasise the most important information, directing the reader\u2019s attention to the text you want them to read first. This helps to create a visual hierarchy, influencing how the reader consumes your designs.<\/p>\r\n<\/li>\r\n Creates a strong, memorable brand.<\/strong> Just like colour, logos, and imagery, typography is an essential tool for expressing brand identity. Consider how Comic Sans feels playful and youthful, while Cambria feels more elegant and sophisticated.<\/p>\r\n<\/li>\r\n Adds visual appeal.<\/strong> Typography is functional, but it\u2019s also an art form. Choosing the right fonts, weight, and spacing all play a role in creating visual harmony and generally ensuring that the overall design is aesthetically pleasing.<\/p>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n Now we know why typography is important, let\u2019s explore some common typography use cases.<\/p>\r\n\r\n\r\n\r\n You\u2019ll find examples of typography in websites and apps, marketing materials (both printed and digital), as well as posters, books, and magazines. <\/p>\r\n\r\n\r\n\r\n Typography is also used in logo design, product packaging\u2014for example, on food labels or cosmetics\u2014and on the design of t-shirts, hats, tote bags, and other merchandise. <\/p>\r\n\r\n\r\n\r\n Here are some examples of typography in books: <\/p>\r\n\r\n\r\n Source:<\/em> Thalia<\/em><\/a><\/p>\r\n\r\n\r\n\r\n Here\u2019s an example of typography in web design: <\/p>\r\n\r\n\r\n\r\n Source: <\/em>Elf Cosmetics<\/em><\/a><\/p>\r\n\r\n\r\n\r\n Now let\u2019s get into the key elements of typography and clear up some confusion around certain terminology. <\/p>\r\n\r\n\r\n\r\n You\u2019ve likely heard the words \u2018typography\u2019, \u2018typeface\u2019, and \u2018font\u2019 used interchangeably\u2014but there are distinctions to be made. <\/p>\r\n\r\n\r\n\r\n Typography <\/strong>is the art and process of styling and arranging type (i.e. text). It involves choosing the typeface, font, size, weight, alignment, and spacing\u2014generally determining how the text will be styled and formatted. In short, typography refers to the discipline as a whole. <\/p>\r\n\r\n\r\n\r\n Typeface <\/strong>refers to a particular style of lettering. Each typeface comprises a set of design features or characteristics that determine how letters, numbers, or characters will be styled. For example, whether or not the letters are styled with or without serifs (an extra line or stroke at the end of a letterform), as well as the weight, balance, spacing, and height difference between letters within the typeface. Examples of typefaces include Times New Roman, Arial, Helvetica, and Comic Sans. <\/p>\r\n\r\n\r\n\r\n Font <\/strong>refers to how your chosen typeface is applied. The weight and size of your chosen typeface will vary depending on your chosen font. You might choose the typeface \u201cArial\u201d and then apply it in bold, size 12, italic font. <\/p>\r\n\r\n\r\n\r\n So, in the application of typography, designers first choose the typeface(s) they\u2019ll use throughout their designs. They can then vary how the typeface is applied by choosing different fonts. <\/p>\r\n\r\n\r\n\r\n Consider how you style text in a Google Doc. In the drop-down menu, you can select your typeface\u2014Helvetica Neue, Arial, Roboto, and so on. Click the arrow next to the typeface and you can select your font\u2014light, normal, bold, etc. <\/p>\r\n\r\n\r\n\r\n In the screenshot shown, Helvetica Neue is our typeface and \u2018Normal\u2019 is our font:<\/p>\r\n\r\n\r\n\r\n Now we\u2019ve explained the difference between a typeface and a font, let\u2019s explore the concept of typefaces even further. <\/p>\r\n\r\n\r\n\r\n There are three basic categories of typeface: serif<\/strong>, sans-serif<\/strong>, and script<\/strong>. <\/p>\r\n\r\n\r\n\r\n The word serif literally means \u201cline\u201d or \u201cstroke of the pen\u201d. Serif typefaces feature these decorative little lines or \u201cflicks\u201d at the end of the main strokes of each character. For example, when you select the Times New Roman typeface, the capital letter \u2018T\u2019 is embellished with these extra strokes. <\/p>\r\n\r\n\r\n\r\n Examples of serif typefaces include Times New Roman, Garamond, Courier New, Baskerville, and Georgia.<\/p>\r\n\r\n\r\n\r\n Sans-serif typefaces are, quite literally, without serifs. Unlike serif typefaces, they don\u2019t feature the extra little strokes. Sans-serif typefaces are typically modern, bold, and easy to read. As such, you\u2019ll find that most websites, apps, and digital designs use a sans-serif typeface. <\/p>\r\n\r\n\r\n\r\n Examples of sans-serif typefaces include Arial, Helvetica, Roboto, Verdana, and Tahoma.<\/p>\r\n\r\n\r\n\r\n Script typefaces mimic cursive handwriting or calligraphy. They\u2019re typically looped and flowing, just like traditional handwriting. The letters within a script typeface can be connected, semi-connected, or unconnected (a bit like joined-up and unjoined handwriting). Script typefaces aren\u2019t as easy to read as serif and sans-serif typefaces, so they tend to be used for decorative purposes only.<\/p>\r\n\r\n\r\n\r\n![\"Graphic](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image6-6531f4f826729-1024x685.webp\" "\\"Graphic")
<\/figure>\r\n\r\n\r\n\r\n What is typography?<\/h2>\r\n\r\n\r\n\r\n
![](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/07\/image6.gif\")
<\/figure><\/a>\r\n\r\n\r\n\r\nWhy does typography matter and what purpose does it serve?<\/h2>\r\n\r\n\r\n\r\n
\r\n
Applications and examples of typography<\/h2>\r\n\r\n\r\n\r\n
![\"Example](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image11-6531f4fcab092.webp\" "\\"Example")
\r\n <\/figure>\r\n <\/div>\r\n ![\"Example](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image1-6531f4f4f0e98.webp\" "\\"Example")
\r\n <\/figure>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n\r\n![\"Example](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image14-6531f4ffe0c71-1024x526.webp\" "\\"Example")
<\/figure>\r\n\r\n\r\n\r\n\r\n![\"Use](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image9-6531f4fa6a753-1024x398.webp\" "\\"Use")
<\/figure>\r\n\r\n\r\n\r\n\r\nThe difference between typography, typeface, and fonts <\/h2>\r\n\r\n\r\n\r\n
![\"Different](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image8-6531f4f8dc2f8-1024x563.webp\" "\\"Different")
<\/figure>\r\n\r\n\r\n\r\nThe 3 basic typeface classifications: Serif, sans-serif, and script<\/h2>\r\n\r\n\r\n\r\n
Serif <\/h3>\r\n\r\n\r\n\r\n
![\"Times](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image2-6531f4f6047ab-1024x280.webp\" "\\"Times")
<\/figure>\r\n\r\n\r\n\r\nSans-serif<\/h3>\r\n\r\n\r\n\r\n
![\"Ariel](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image12-6531f4fe2530e-1024x275.webp\" "\\"Ariel")
<\/figure>\r\n\r\n\r\n\r\n Script<\/h3>\r\n\r\n\r\n\r\n
![\"Lobster](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image3-6531f4f622942-1024x226.webp\" "\\"Lobster")
<\/figure>\r\n\r\n\r\n\r\n![\"Text](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image5-6531f4f6e49df.webp\" "\\"")
<\/figure>\r\n\r\n\r\n\r\n