<\/a><\/li>\r\n
1. What is Typography?<\/h2>\r\n\r\n\r\n\r\n
Typography<\/a> is the art of styling and arranging text. Be it for a poster, a book, product packaging, a website, or a business card; typography is a crucial pillar of graphic design, determining how text is displayed and perceived by the reader.<\/p>\r\n\r\n\r\n\r\n Typography considers the typeface and font that should be used\u2014for example, Times New Roman, size 12, bold\u2014as well as things like colour, spacing, alignment, and line height. <\/p>\r\n\r\n\r\n\r\n Such choices impact how legible the information is, how effectively it\u2019s communicated, and how it fits into the overall design. Typography also helps to build a strong brand identity. <\/p>\r\n\r\n\r\n\r\n Typography and graphic design<\/a> are not the same thing. Rather, typography is a subset of graphic design\u2014it\u2019s one of several elements that graphic designers use to communicate with their target audience and create meaningful, visually appealing designs.<\/p>\r\n\r\n\r\n\r\n Graphic design is all about visual communication. It uses elements such as colour, type, shapes, and images to bring a concept to life and communicate certain messages or ideas. Typography relates to how graphic designers style text within a graphic design project.<\/p>\r\n\r\n\r\n\r\n Take a look at our AND learner, Bibin S\u2019 type-based poster projects<\/a> which he undertook during his PG Diploma course in Graphic Design<\/p>\r\n\r\n\r\n\r\n Typography is the art of styling and arranging text, and there are several different elements a graphic designer must consider throughout this process. <\/p>\r\n\r\n\r\n These include:<\/p>\r\n Let\u2019s explore each element in detail. <\/p>\r\n\r\n\r\n\r\n Typefaces and fonts both determine how text is styled\u2014but they are not the same thing.<\/p>\r\n\r\n\r\n\r\n The typeface <\/strong>you choose defines the shape and style of each individual letter, number, or character. Times New Roman, Arial, and Comic Sans are all examples of typefaces. <\/p>\r\n\r\n\r\n\r\n The font <\/strong>you use determines how your chosen typeface is implemented. It allows you to vary the weight and size of the characters within a typeface. For example, you might select Arial as your typeface and then apply it in size 12, bold font. <\/p>\r\n\r\n\r\n\r\n Typefaces fall into three main categories:<\/p>\r\n\r\n\r\n Serif typefaces<\/strong> have a decorative line or flick coming off of the main strokes of each character. Examples of serif typefaces include Times New Roman, Garamond, Courier New, Baskerville, and Georgia.<\/p>\r\n<\/li>\r\n Sans-serif typefaces <\/strong> don\u2019t have the decorative lines or flicks that serif typefaces have. Examples include Arial, Roboto, and Verdana\u2014all those modern, easy-to-read typefaces that you typically find on websites and apps.<\/p>\r\n<\/li>\r\n Script typefaces <\/strong>mimic the style of cursive handwriting or calligraphy. They\u2019re typically curly and flowing, and not as easy to read as serif and sans-serif typefaces. As such, they tend to be used in small doses and mainly for decorative purposes. Examples include Lobster, Pacifico, and Handlee.<\/p>\r\n<\/li>\r\n<\/ul>\r\n\r\n\r\n Kerning is the space between two individual characters\u2014for example, the space between the letters \u201ct\u201d and \u201cy\u201d in the word \u201ctypography\u201d. <\/p>\r\n\r\n\r\n\r\n Often, graphic designers must adjust the spacing between individual character pairings because different characters vary in width. The letter \u201ct\u201d is narrower than \u201cy\u201d, for example. Some character pairings may naturally leave too much or too little space in between\u2014in which case, kerning is required to create visual harmony and balance.<\/p>\r\n\r\n\r\n\r\n Kerning is also important for readability. If there\u2019s not enough space between two letters, it may appear that those letters are touching, which can make them difficult to distinguish and read. <\/p>\r\n\r\n\r\n\r\n While kerning adjusts the space between individual pairs of characters, tracking is the process of adjusting the space between all characters in a word or block of text. <\/p>\r\n\r\n\r\n\r\n Decreasing the tracking\u2014i.e. reducing the spacing between characters in a text block\u2014makes that block of text appear \u2018tighter\u2019 or more compact. Increasing the tracking adds more whitespace, making the block of text appear \u2018looser\u2019 or more open. <\/p>\r\n\r\n\r\n\r\n Tracking helps to create visual balance and ensure that text is easily legible. <\/p>\r\n\r\n\r\n\r\n Leading, or line height, is the vertical space between two lines of text. The term leading (pronounced \u201cledding\u201d) comes from the printing industry, where strips of lead were traditionally used to separate lines of text on a manual printing press. <\/p>\r\n\r\n\r\n\r\n In a Google Doc, you have the option to adjust the line spacing for your text. You can select from standard options such as single spacing, double spacing, 1.15, or 1.5, or choose your own custom spacing. That\u2019s an example of leading in action.<\/p>\r\n\r\n\r\n\r\n Just like tracking and kerning, leading ensures visual balance and readability.<\/p>\r\n\r\n\r\n\r\n Those are the main elements of typography. Now let\u2019s consider the rules and principles that guide typographers and designers in their work. <\/p>\r\n\r\n\r\n\r\n When working with typography, designers must consider certain rules and principles. These ensure that text is easy to read, aesthetically pleasing, and effectively conveys the intended message. <\/p>\r\n\r\n\r\n\r\n In graphic design, different elements are arranged to create a visual hierarchy\u2014with more important features given more visual emphasis and prominence. Hierarchy also applies to typography, with each piece of text styled based on its importance. <\/p>\r\n\r\n\r\n How to establish visual hierarchy through typography:<\/strong><\/p>\r\n When it comes to styling the text throughout a design project, consistency is key. Even if you\u2019re experimenting with playful typeface pairings or going for a more unconventional aesthetic overall, you still want to create visual harmony and keep certain aspects of your typography cohesive. <\/p>\r\n\r\n\r\n\r\n How to achieve consistency in typography design:<\/strong><\/p>\r\n\r\n\r\n Contrast doesn\u2019t only create visually engaging designs. In the context of typography, contrast is critical for ensuring that text is easily legible. And, when used strategically, it can also help to establish a visual hierarchy. <\/p>\r\n\r\n\r\n\r\n How to create and use contrast in typography:<\/strong><\/p>\r\n\r\n\r\n Whitespace (or negative space) is the empty space between and around different elements on the page. Whitespace is crucial for achieving a clutter-free design, ensuring that text is easily legible, and signalling to the reader which groups of text belong together and should be perceived as such. <\/p>\r\n\r\n\r\n\r\n How to use whitespace in typography:<\/strong><\/p>\r\n\r\n\r\n Alignment determines the positioning of text in relation to the page or screen margins (or invisible grid lines). <\/p>\r\n\r\n\r\n\r\n Text can be left aligned, always beginning at the left margin; right aligned, sitting up against the right margin; justified, stretching across to both the left and right margins; or centre aligned, with each new line of text starting in the middle of the page. <\/p>\r\n\r\n\r\n\r\n Alignment impacts how people consume the information on the page and creates a sense of visual balance. <\/p>\r\n\r\n\r\n\r\n How to apply the alignment principle:<\/strong><\/p>\r\n\r\n\r\n The definition of \u201cgood typography\u201d will vary from one project to the next. Typography choices and applications that work well in one context may not necessarily be appropriate for another. For example, typography design for a book will have different requirements than, say, typography design for a website.<\/p>\r\n\r\n\r\n\r\n So what are the markers of good typography? What best practices should you bear in mind? Let\u2019s take a look. <\/p>\r\n\r\n\r\n\r\n Good typography is about rendering every single piece of text clear, legible, and accessible to the reader. <\/p>\r\n\r\n\r\n\r\n You can check this box by creating sufficient colour contrast, leaving plenty of white space, and adjusting the leading, tracking, and kerning of your text. <\/p>\r\n\r\n\r\n\r\n It\u2019s also essential to choose typefaces and fonts that will be legible in the given context. For example, script typefaces are fine for one or two words (such as a headline or a logo), but sans-serif typefaces are more appropriate for large chunks of body text. <\/p>\r\n\r\n\r\n\r\n You\u2019ll also need to think about where and how your text will be displayed. Are you designing typography for digital, print, or both? How versatile does your typography need to be? What materials will your text be printed on, and\/or what devices might it be viewed on? <\/p>\r\n\r\n\r\n\r\n Your goal is to make typography choices that prioritise readability in any context. <\/p>\r\n\r\n\r\n\r\n Good typography doesn\u2019t simply respect the overarching brand identity\u2014it helps to shape and convey it. <\/p>\r\n\r\n\r\n\r\n When choosing and styling a typeface, think about the brand values and characteristics you want to convey, as well as the mood you want to evoke in your target audience. <\/p>\r\n\r\n\r\n\r\n Consider how a typeface like Creepster might be perfect for a poster advertising a horror movie, but completely off-brand for a medical website. Likewise, Arial might be ideal for a professional ebook but would fail to convey the elegance of a luxury cosmetics brand. In that context, a typeface like Bellefaire in italic font might be more suitable. <\/p>\r\n\r\n\r\n\r\n Good typography ultimately has one main job: to effectively communicate a message to the target audience. <\/p>\r\n\r\n\r\n\r\n You know you\u2019ve achieved this when your chosen typeface is on-brand and evokes the right mood, all text is easily legible, and you\u2019ve established a clear visual hierarchy of information. <\/p>\r\n\r\n\r\n\r\n Is the reader able to access all the necessary information within your design? Are they drawn to the most important information first? Is it easy for them to find, and read, what they\u2019re looking for? <\/p>\r\n\r\n\r\n\r\n If you can answer \u201cyes\u201d to all these questions, then you\u2019ve officially mastered the art of good typography! <\/p>\r\n\r\n\r\n\r\n In this guide, we\u2019ve covered the fundamental elements, principles, and best practices you\u2019ll need to know when working with typography. If you\u2019re keen to continue learning about this fascinating discipline, there are lots of brilliant resources out there to help you. <\/p>\r\n\r\n\r\n\r\n Here are some of our favourite books, blogs, and tutorials for learning about and practising typography:<\/p>\r\n\r\n\r\n If you\u2019re learning typography because you want to become a graphic designer<\/a>, consider a full graphic design program. A high-quality course will cover typography design for digital and print, as well as all the additional skills you\u2019ll need<\/a> to land a job in the field\u2014such as the fundamentals of visual design, communication and branding, essential graphic design tools<\/a>, and, of course, how to build your graphic design portfolio<\/a>. <\/p>\r\n\r\n\r\n\r\n Not sure where to start? Dip your toe in with this selection of free graphic design courses<\/a>, or consult our comparison of the best paid graphic design programs<\/a>. <\/p>\r\n\r\n\r\n\r\n Here are some additional resources and recommendations that will surely be useful in learning more about graphic design – the industry, career prospects, and much more:<\/p>\r\n\r\n\r\n <\/p>\r\n Note: All information and\/or data from external sources is believed to be accurate as of the date of publication.<\/p>\r\n <\/p>","protected":false},"excerpt":{"rendered":" Typography is a fundamental pillar of graphic design. It determines how text is styled, arranged, and displayed within a given context\u2014be it on a website, in a book, or on a giant billboard. Typography isn\u2019t just about aesthetics, though. More importantly, it ensures that text is legible, accessible, and on-brand, enabling you to effectively communicate […]<\/p>\n","protected":false},"author":6,"featured_media":6729,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[24],"tags":[31],"class_list":["post-3851","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-graphic-design","tag-emily-stevens"],"acf":[],"yoast_head":"\nI. Is typography the same as graphic design?<\/h3>\r\n\r\n\r\n\r\n
![](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image7.gif\")
<\/figure><\/a>\r\n\r\n\r\n\r\n2. What are The Key Elements of Typography?<\/h2>\r\n\r\n\r\n\r\n
\r\n
I. Typefaces and fonts<\/h3>\r\n\r\n\r\n\r\n
\r\n
![\"Examples](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image3-653202861a028-1024x450.webp\" "\\"Examples")
<\/figure>\r\n\r\n\r\n\r\nII. Kerning<\/h3>\r\n\r\n\r\n\r\n
III. Tracking<\/h3>\r\n\r\n\r\n\r\n
IV. Leading<\/h3>\r\n\r\n\r\n\r\n
![\"Example](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image1-65320284af6db.webp\" "\\"Example")
<\/figure>\r\n\r\n\r\n\r\n3. What are The Fundamental Rules and Principles of Typography? (And How to Apply Them)<\/h2>\r\n\r\n\r\n\r\n
![\"Typography](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image6-6532028a7b8ff-1024x683.webp\" "\\"Typography")
<\/figure>\r\n\r\n\r\n\r\nI. Hierarchy<\/h3>\r\n\r\n\r\n\r\n
\r\n
II. Consistency<\/h3>\r\n\r\n\r\n\r\n
\r\n
III. Contrast<\/h3>\r\n\r\n\r\n\r\n
\r\n
IV. Whitespace<\/h3>\r\n\r\n\r\n\r\n
\r\n
V. Alignment<\/h3>\r\n\r\n\r\n\r\n
\r\n
4. What Makes Good Typography? Typography Design Best Practices<\/h2>\r\n\r\n\r\n\r\n
I. Ensure that all text is clear and easy to read<\/h3>\r\n\r\n\r\n\r\n
II. Align with the brand identity and evoke the right tone<\/h3>\r\n\r\n\r\n\r\n
![\"Creepster,](\"https:\/\/www.andacademy.com\/resources\/wp-content\/uploads\/2023\/08\/image4-65320287111ae-1024x401.webp\" "\\"Creepster,")
<\/figure>\r\n\r\n\r\n\r\nIII. Communicate effectively with your audience<\/h3>\r\n\r\n\r\n\r\n
5. Learn More About Typography<\/h2>\r\n\r\n\r\n\r\n
\r\n
6. Next Steps<\/h2>\r\n\r\n\r\n\r\n
\r\n