{"id":51410,"date":"2025-10-16T11:46:35","date_gmt":"2025-10-16T08:46:35","guid":{"rendered":"https:\/\/typetype.org\/fr\/?p=51410"},"modified":"2026-05-15T10:14:33","modified_gmt":"2026-05-15T07:14:33","slug":"what-is-typography-in-graphic-design-key-concepts-principles-and-examples","status":"publish","type":"post","link":"https:\/\/typetype.org\/fr\/blog\/what-is-typography-in-graphic-design-key-concepts-principles-and-examples\/","title":{"rendered":"What is Typography in Graphic Design: Key Concepts, Principles, and Examples"},"content":{"rendered":"\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"718\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_cover_eng.gif\" alt=\"\" class=\"wp-image-51450\"\/><\/figure>\n\n\n\n<p>Text is&nbsp;everywhere in&nbsp;design: on&nbsp;websites and in&nbsp;mobile apps, on&nbsp;advertising banners and product packaging, on&nbsp;posters and flyers. Why is&nbsp;typography important? Because well-executed text design helps capture the viewer\u2019s attention, emphasize meaning, and convey a&nbsp;message. Most graphic design tasks are impossible to&nbsp;solve without understanding the basics of&nbsp;typography.<\/p>\n\n\n\n<p>This article is&nbsp;for anyone who wants to&nbsp;learn the main typographic terms, principles, and techniques.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Does the Term \u00ab\u00a0Typography\u00a0\u00bb Mean?<\/h2>\n\n\n\n<p>In&nbsp;its modern sense, typography is&nbsp;the art and technique of&nbsp;arranging type to&nbsp;make written language legible, readable, and appealing when displayed. This includes choosing a&nbsp;font, adjusting its parameters, and organizing the text on&nbsp;the page. The goal of&nbsp;typography is&nbsp;to&nbsp;harmonize textual and graphic elements and to&nbsp;make the design as&nbsp;expressive and user-friendly as&nbsp;possible. It&nbsp;helps create a&nbsp;visual hierarchy, highlight the necessary accents, and guide the user\u2019s attention.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"889\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng.png\" alt=\"\" class=\"wp-image-51407\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng-1024x632.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng-1200x741.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng-768x474.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng-420x259.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_1_eng-600x370.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Where is&nbsp;Typography Used in&nbsp;Design?<\/h3>\n\n\n\n<p>Typography is&nbsp;used in&nbsp;a&nbsp;wide variety of&nbsp;fields\u2014essentially, anywhere graphic design contains textual elements. For example: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Web design (websites, interfaces, mobile apps)<\/li>\n\n\n\n<li>Print materials (books, magazines, newspapers, business cards)<\/li>\n\n\n\n<li>Advertising and branding (logos, outdoor ads, packaging)<\/li>\n\n\n\n<li>Social media (posts, stories, ad&nbsp;creatives)<\/li>\n\n\n\n<li>Infographics, presentations, and much more<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2.png\" alt=\"\" class=\"wp-image-51408\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_2-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Therefore, learning the essentials of&nbsp;typography is&nbsp;useful not only for designers but also for other professionals who work with information.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples of&nbsp;Good and Bad Typography<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Good typography: A&nbsp;website with a&nbsp;clear structure, proper line spacing, and readable fonts.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3.png\" alt=\"\" class=\"wp-image-51409\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_3-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bad typography: Text without margins, a&nbsp;tiny font size, and random font pairings.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4.png\" alt=\"\" class=\"wp-image-51411\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_4-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.nngroup.com\/articles\/how-users-read-on-the-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Research<\/a> by&nbsp;the Nielsen Norman Group shows that users, on&nbsp;average, read only 20\u201328% of&nbsp;the text on&nbsp;a&nbsp;web page. Good typography helps retain their attention and makes the information easier to&nbsp;digest.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Main Elements of&nbsp;Typography<\/h2>\n\n\n\n<p>Now, let\u2019s break down the main typographic terms to&nbsp;understand what elements typography is&nbsp;composed&nbsp;of.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font and Typeface<\/h3>\n\n\n\n<p>The words \u00ab\u00a0font\u00a0\u00bb and \u00ab\u00a0typeface\u00a0\u00bb are often used interchangeably. Even in&nbsp;professional circles, the word \u00ab\u00a0font\u00a0\u00bb is&nbsp;used universally and can mean both \u00ab\u00a0typeface\u00a0\u00bb and \u00ab\u00a0font style\u00a0\u00bb. The confusion is&nbsp;compounded by&nbsp;the fact that there is&nbsp;no&nbsp;universally accepted terminology, and different font designers rely on&nbsp;different interpretations. However, to&nbsp;understand the principles of&nbsp;typography, it&nbsp;is&nbsp;important to&nbsp;grasp the difference between these terms.<\/p>\n\n\n\n<p>A&nbsp;typeface (or&nbsp;type family) is&nbsp;a&nbsp;set of&nbsp;fonts that are stylistically related but have different styles.<\/p>\n\n\n\n<p>A&nbsp;font is&nbsp;the complete set of&nbsp;characters for typesetting, unified by&nbsp;a&nbsp;single style. That&nbsp;is, it&nbsp;is&nbsp;the file itself, the carrier of&nbsp;the type.<\/p>\n\n\n\n<p>A&nbsp;font style is&nbsp;a&nbsp;specific font within a&nbsp;typeface that has certain graphic characteristics distinguishing it&nbsp;from other styles, such as&nbsp;weight, slant, width, and other parameters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_5_eng.gif\" alt=\"\" class=\"wp-image-51412\"\/><\/figure>\n\n\n\n<p>Often, the word \u00ab\u00a0font\u00a0\u00bb is&nbsp;used to&nbsp;refer to&nbsp;both the typeface itself and a&nbsp;specific font style. You can usually understand what is&nbsp;meant in&nbsp;a&nbsp;specific case by&nbsp;the context. For example, when we&nbsp;say that <a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-norms-pro\/\">TT&nbsp;Norms<sup class=\"reg\">\u00ae<\/sup> Pro<\/a> is&nbsp;the font that supports the most languages among other fonts in&nbsp;the TypeType collection, we&nbsp;mean the TT&nbsp;Norms<sup class=\"reg\">\u00ae<\/sup> Pro typeface. And if&nbsp;we&nbsp;suggest using the font <a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-livret\/\">TT&nbsp;Livret Text Regular<\/a> as&nbsp;the most optimal for setting large amounts of&nbsp;text, we&nbsp;mean a&nbsp;specific font style.<\/p>\n\n\n\n<p>You can understand the meaning of&nbsp;these terms more deeply in&nbsp;our <a href=\"https:\/\/typetype.org\/fr\/blog\/font-and-typeface-what-s-the-difference\/\">article<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Font Style, Weight, and Slant<\/h3>\n\n\n\n<p>These concepts relate specifically to&nbsp;the term \u00ab\u00a0font style.\u00a0\u00bb So, let\u2019s take a&nbsp;closer look at&nbsp;this concept first.<\/p>\n\n\n\n<p>A&nbsp;font style is&nbsp;the appearance of&nbsp;a&nbsp;font. Within a&nbsp;single style, all the characters of&nbsp;a&nbsp;font will have a&nbsp;uniform weight, width, or, for example, be&nbsp;slanted. A&nbsp;subfamily can include fonts of&nbsp;different styles, united by&nbsp;a&nbsp;common feature. A&nbsp;typeface, in&nbsp;turn, brings together various subfamilies.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"500\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6.png\" alt=\"\" class=\"wp-image-51413\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6-1024x356.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6-1200x417.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6-768x267.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6-420x146.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_6-600x208.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Weight is&nbsp;the thickness of&nbsp;the character elements relative to&nbsp;their height. Fonts can be&nbsp;light (e.g., Thin or&nbsp;Light styles) or&nbsp;heavy\/bold (e.g., Bold or&nbsp;Black styles).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"500\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7.png\" alt=\"\" class=\"wp-image-51414\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7-1024x356.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7-1200x417.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7-768x267.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7-420x146.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_7-600x208.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Slant refers to&nbsp;\u00ab\u00a0oblique\u00a0\u00bb fonts\u2014these are fonts that are usually drawn as&nbsp;a&nbsp;companion to&nbsp;the original upright style. The glyphs of&nbsp;the characters do&nbsp;not change, they just acquire a&nbsp;slant. They are mainly characteristic of&nbsp;<a href=\"https:\/\/typetype.org\/fr\/fonts\/sans-serif\/\">sans-serifs<\/a>. The original function of&nbsp;oblique fonts was to&nbsp;highlight a&nbsp;specific part of&nbsp;the text or&nbsp;to&nbsp;emphasize information.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"396\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8.png\" alt=\"\" class=\"wp-image-51415\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8-1024x282.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8-1200x330.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8-768x211.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8-420x116.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_8-600x165.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>There are also italics (true italics)\u2014historically, this term denoted cursive fonts, but today it&nbsp;is&nbsp;used more broadly to&nbsp;include both true italics and oblique fonts. These are slanted fonts where the glyphs of&nbsp;the lowercase characters change to&nbsp;a&nbsp;cursive form. They can be&nbsp;created as&nbsp;a&nbsp;separate, full-fledged font, not just as&nbsp;a&nbsp;supplement to&nbsp;an&nbsp;upright style. They are mainly characteristic of&nbsp;<a href=\"https:\/\/typetype.org\/fr\/fonts\/serif\/\">serif<\/a> fonts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"396\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9.png\" alt=\"\" class=\"wp-image-51416\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9-1024x282.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9-1200x330.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9-768x211.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9-420x116.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_9-600x165.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Point Size<\/h3>\n\n\n\n<p>Point size is&nbsp;the height of&nbsp;a&nbsp;font, i.e., its vertical size. It&nbsp;is&nbsp;measured in&nbsp;typographic points (pt) and determines how large the text will appear on&nbsp;screen or&nbsp;in&nbsp;print.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"532\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01.png\" alt=\"\" class=\"wp-image-52023\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01-1024x378.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01-1200x443.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01-768x284.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01-420x155.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_10-15.43.01-600x222.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Sidebearing and Half-Sidebearing<\/h3>\n\n\n\n<p>A&nbsp;half-sidebearing is&nbsp;the distance from a&nbsp;character to&nbsp;the edge of&nbsp;its type block. It&nbsp;can be&nbsp;either positive or&nbsp;negative. The two half-sidebearings of&nbsp;adjacent characters form the sidebearing. This is&nbsp;an&nbsp;important parameter for the letter spacing of&nbsp;the entire font style. It&nbsp;determines how dense or&nbsp;loose the font will appear.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"551\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng.png\" alt=\"\" class=\"wp-image-51418\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng-1024x392.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng-1200x459.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng-768x294.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng-420x161.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_11_eng-600x230.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Leading, Kerning, and Tracking<\/h3>\n\n\n\n<p>Leading (or&nbsp;line-height) is&nbsp;the vertical distance between lines of&nbsp;text, more precisely between their baselines (from the baseline of&nbsp;one line to&nbsp;the baseline of&nbsp;the next). Simply put, it\u2019s what many people know as&nbsp;line spacing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"429\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng.png\" alt=\"\" class=\"wp-image-51419\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng-1024x305.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng-1200x358.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng-768x229.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng-420x125.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_12_eng-600x179.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Kerning is&nbsp;the selective increase or&nbsp;decrease of&nbsp;the space between two characters, determined by&nbsp;the combination of&nbsp;their shapes. This is&nbsp;done to&nbsp;create the most even typesetting possible.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"291\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13.png\" alt=\"\" class=\"wp-image-51420\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13-1024x207.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13-1200x243.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13-768x155.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13-420x85.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_13-600x121.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Tracking (letter-spacing) is&nbsp;the adjustment of&nbsp;the distance between all characters, i.e., the letter spacing. Tracking allows you to&nbsp;uniformly change this interval, making the spaces between letters larger or&nbsp;smaller. The text remains uniform thanks to&nbsp;kerning.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"316\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_14_eng.gif\" alt=\"\" class=\"wp-image-51421\"\/><\/figure>\n\n\n\n<p>You can read more about the difference between these terms and the settings for each parameter <a href=\"https:\/\/typetype.org\/fr\/blog\/kerning-tracking-leading-and-spacing-in-typography\/\">here<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Types and Styles of&nbsp;Typography<\/h2>\n\n\n\n<p>There is&nbsp;no&nbsp;strict classification of&nbsp;typography by&nbsp;direction, but certain approaches can be&nbsp;identified. Let\u2019s look at&nbsp;some of&nbsp;them below.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Classical and Modern Typography<\/h3>\n\n\n\n<p>Classical typography involves the use of&nbsp;traditional <a href=\"https:\/\/typetype.org\/fr\/fonts\/serif\/\">serif<\/a> and <a href=\"https:\/\/typetype.org\/fr\/fonts\/sans-serif\/\">sans-serif <\/a>fonts that have stood the test of&nbsp;time. It&nbsp;is&nbsp;based on&nbsp;principles of&nbsp;symmetry, harmony, and strict proportions. The classical style is&nbsp;particularly popular in&nbsp;book publishing, printing, and corporate documents.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"473\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15.png\" alt=\"\" class=\"wp-image-51422\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15-1024x336.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15-1200x394.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15-768x252.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15-420x138.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_15-600x197.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Modern typography is&nbsp;freer in&nbsp;its forms. Designers use non-standard fonts, bright accents, and an&nbsp;asymmetrical grid. Here, violations of&nbsp;the rules of&nbsp;classical typography are permissible. This approach is&nbsp;common in&nbsp;the digital environment: on&nbsp;websites, in&nbsp;application interfaces, and on&nbsp;social media.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng.png\" alt=\"\" class=\"wp-image-51423\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_16_eng-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Custom and Brand Typography<\/h3>\n\n\n\n<p>Custom typography is&nbsp;the selection of&nbsp;fonts and the formatting of&nbsp;text for a&nbsp;specific project, taking into account its goals and objectives.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"740\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17.png\" alt=\"\" class=\"wp-image-51424\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17-1024x526.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17-1200x617.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17-768x395.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17-420x216.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_17-600x308.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>Brand typography is&nbsp;the application of&nbsp;typographic principles to&nbsp;create a&nbsp;recognizable visual identity for a&nbsp;brand, which includes the selection of&nbsp;unique or&nbsp;the use of&nbsp;custom brand fonts. In&nbsp;this case, typography enhances the existing corporate style and helps to&nbsp;convey the brand\u2019s values.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng.png\" alt=\"\" class=\"wp-image-51425\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_18_eng-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Typography in&nbsp;Web Design and Print Materials<\/h3>\n\n\n\n<p>Web design requires responsive fonts: they must look equally good on&nbsp;screens of&nbsp;different sizes. Other parameters are also important to&nbsp;configure, considering that the page will be&nbsp;opened on&nbsp;different devices. We&nbsp;have discussed in&nbsp;detail how the choice of&nbsp;font in&nbsp;web design affects user perception <a href=\"https:\/\/typetype.org\/fr\/blog\/the-impact-of-fonts-in-web-design-on-user-experience\/\">here<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng.png\" alt=\"\" class=\"wp-image-51426\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_19_eng-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>In&nbsp;the case of&nbsp;printed products, there are also nuances. Not all fonts are suitable for printing due to&nbsp;differences in&nbsp;print quality and the specifics of&nbsp;transferring ink to&nbsp;different surfaces. For example, lines that are too thin may not print, and letters that are too thick or&nbsp;narrow may stick together. You can learn more about working with fonts in&nbsp;book layout from our <a href=\"https:\/\/typetype.org\/fr\/blog\/best-fonts-for-books-how-to-choose\/\">article<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"650\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20.png\" alt=\"\" class=\"wp-image-51427\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20-1024x462.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20-1200x542.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20-768x347.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20-420x190.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_20-600x271.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Principles of&nbsp;Typography<\/h2>\n\n\n\n<p>So, what techniques help make text easy to&nbsp;perceive and visually harmonious? Let\u2019s consider the main principles of&nbsp;typography.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Color and contrast<\/h3>\n\n\n\n<p>When choosing a&nbsp;font color, it&nbsp;is&nbsp;important that it&nbsp;contrasts with the background on&nbsp;which the text will be&nbsp;placed. In&nbsp;addition to&nbsp;the classic option of&nbsp;black font on&nbsp;a&nbsp;white background, there are many other combinations. To&nbsp;check the contrast of&nbsp;colors, you can use a&nbsp;special <a href=\"https:\/\/colourcontrast.cc\/\" target=\"_blank\" rel=\"noreferrer noopener\">service<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"292\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng.png\" alt=\"\" class=\"wp-image-51428\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng-1024x208.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng-1200x243.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng-768x156.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng-420x85.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_21_eng-600x122.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading wp-b 1f40 lock-heading\">Hierarchy<\/h3>\n\n\n\n<p>Headings, subheadings, lists, and accents help the reader navigate the text and find the necessary information more quickly. Therefore, it&nbsp;is&nbsp;important not only to&nbsp;use the right font but also to&nbsp;create a&nbsp;visual hierarchy in&nbsp;the text. For this, you can use oblique fonts, different weights, point sizes, and font styles. A&nbsp;classic combination is&nbsp;a&nbsp;text font and a&nbsp;display font (we&nbsp;have talked about each of&nbsp;these types <a href=\"https:\/\/typetype.org\/fr\/blog\/typography-main-types-and-characteristics-of-fonts\/#kakimi_byvayut_shrifty_klassifikatsiya\">here<\/a>).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"443\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng.png\" alt=\"\" class=\"wp-image-51429\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng-1024x315.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng-1200x369.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng-768x236.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng-420x129.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_22_eng-600x185.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Alignment<\/h3>\n\n\n\n<p>The classic alignment options are left, right, center, and justified. In&nbsp;text page layout, centered alignment is&nbsp;most often used for headings and left alignment for the main text, as&nbsp;it&nbsp;corresponds to&nbsp;the reading direction in&nbsp;the European tradition.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"338\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_23_eng.gif\" alt=\"\" class=\"wp-image-51430\"\/><\/figure>\n\n\n\n<p>On&nbsp;book and magazine covers, posters, and flyers, in&nbsp;packaging design, and so&nbsp;on, you will most often see centered alignment. However, in&nbsp;this case, different alignment options may be&nbsp;appropriate, including non-standard ones. Here, the inconvenience for reading can emphasize the project\u2019s concept, make it&nbsp;more daring and unusual.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"581\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24.png\" alt=\"\" class=\"wp-image-51431\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24-1024x413.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24-1200x484.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24-768x310.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24-420x169.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_24-600x242.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Repetition and Rhythm<\/h3>\n\n\n\n<p>Repetition is&nbsp;one of&nbsp;the basic principles of&nbsp;composition, ensuring the structure and integrity of&nbsp;the visual solution. It&nbsp;is&nbsp;used to&nbsp;create rhythm, emphasize key elements, and unite individual parts of&nbsp;the design into a&nbsp;single system.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"716\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25.png\" alt=\"\" class=\"wp-image-51432\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25-1024x509.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25-1200x597.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25-768x382.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_25-600x298.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Main types of&nbsp;repetition:<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repetition of&nbsp;forms. Using the same geometric shapes or&nbsp;lines in&nbsp;different parts of&nbsp;the layout increases visual consistency.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"360\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26.png\" alt=\"\" class=\"wp-image-51433\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26-1024x256.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26-1200x300.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26-768x192.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26-420x105.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_26-600x150.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Color repetition. Working within a&nbsp;limited palette (usually 3-4&nbsp;shades) helps to&nbsp;build harmonious compositions and enhances stylistic integrity.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"184\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27.png\" alt=\"\" class=\"wp-image-51434\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27-1024x131.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27-1200x153.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27-768x98.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27-420x54.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_27-600x77.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Textural repetition. Repeating certain textural solutions (e.g., a&nbsp;grid or&nbsp;graininess) helps to&nbsp;set a&nbsp;unified character for the visual series.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"354\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28.png\" alt=\"\" class=\"wp-image-51435\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28-1024x252.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28-1200x295.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28-768x189.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28-420x103.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_28-600x148.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repetition of&nbsp;fonts. It&nbsp;is&nbsp;optimal to&nbsp;limit yourself to&nbsp;two or&nbsp;three fonts or&nbsp;styles, assigning their roles: one for headings, another for the main text, and a&nbsp;third for emphasis within the text.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"549\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29.png\" alt=\"\" class=\"wp-image-51436\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29-1024x390.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29-1200x458.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29-768x293.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29-420x160.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_29-600x229.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Repetition of&nbsp;text formatting principles. For example, if&nbsp;you use dots to&nbsp;format a&nbsp;list, use the same format for other lists within the project. Or&nbsp;if&nbsp;you highlight one quote in&nbsp;italics, format other quotes in&nbsp;the same way.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"388\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng.png\" alt=\"\" class=\"wp-image-51437\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng-1024x276.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng-1200x323.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng-768x207.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng-420x113.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_30_eng-600x162.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">How to&nbsp;use repetition correctly?<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Maintain balance. Excessive duplication makes the composition monotonous. It&nbsp;is&nbsp;important to&nbsp;combine repetition with variety.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng.png\" alt=\"\" class=\"wp-image-51438\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_31_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Work with patterns. Repeating patterns can be used as background solutions or decorative accents.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng.png\" alt=\"\" class=\"wp-image-51439\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_32_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apply variations. Repeating elements can be&nbsp;varied in&nbsp;size, saturation, or&nbsp;shade, which creates dynamics and prevents monotony.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng.png\" alt=\"\" class=\"wp-image-51440\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_33_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Proportions<\/h3>\n\n\n\n<p>Proportions in&nbsp;typography concern the ratio of&nbsp;the width and height of&nbsp;letters and characters in&nbsp;a&nbsp;font, as&nbsp;well as&nbsp;the intervals between them, lines, and paragraphs. The correct use of&nbsp;proportions\u2014the ratio of&nbsp;line width to&nbsp;font size, leading (line spacing), and letter spacing\u2014is critical for creating legible and visually appealing texts.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng.png\" alt=\"\" class=\"wp-image-51441\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_34_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Readability and Perception<\/h3>\n\n\n\n<p>Readability is&nbsp;the ease of&nbsp;perceiving not individual letters, but the entire text as&nbsp;a&nbsp;whole. The readability of&nbsp;a&nbsp;font is&nbsp;determined by&nbsp;how comfortable and easy it&nbsp;is&nbsp;for the reader to&nbsp;\u00ab\u00a0glide\u00a0\u00bb over the lines of&nbsp;text without being distracted or&nbsp;\u00ab\u00a0stumbling.\u00a0\u00bb One of&nbsp;the components of&nbsp;readability is&nbsp;the legibility of&nbsp;individual characters.<\/p>\n\n\n\n<p>For typography to&nbsp;work in&nbsp;the user\u2019s interest, you need to&nbsp;approach the choice of&nbsp;font and the formatting of&nbsp;the text comprehensively. The first step is&nbsp;to&nbsp;ensure basic legibility by&nbsp;choosing a&nbsp;suitable font, and then check its readability and configure additional parameters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng.png\" alt=\"\" class=\"wp-image-51442\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_35_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>This is&nbsp;a&nbsp;complex job. We&nbsp;have discussed in&nbsp;detail how to&nbsp;improve the legibility and readability of&nbsp;text in&nbsp;a&nbsp;<a href=\"https:\/\/typetype.org\/fr\/legibility-vs-readability-what-is-the-difference\/\">separate article<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic Rules for Working with Typography<\/h2>\n\n\n\n<p>Let\u2019s consider the main rules that will help you avoid mistakes and make your text functional.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">How to&nbsp;Choose a&nbsp;Font for a&nbsp;Task?<\/h3>\n\n\n\n<p>The main principle is&nbsp;that the font must correspond to&nbsp;the purpose of&nbsp;the communication. It&nbsp;is&nbsp;unacceptable to&nbsp;use a&nbsp;decorative <a href=\"https:\/\/typetype.org\/fr\/fonts\/script\/\">handwritten<\/a> font in&nbsp;a&nbsp;scientific article, and a&nbsp;dry, official <a href=\"https:\/\/typetype.org\/fr\/fonts\/sans-serif\/\">sans-serif<\/a> would look strange on&nbsp;a&nbsp;party flyer.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"589\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng.png\" alt=\"\" class=\"wp-image-51443\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng-1024x419.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng-1200x491.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng-768x314.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng-420x172.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_36_eng-600x245.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>For the main text, it&nbsp;is&nbsp;better to&nbsp;use neutral fonts with good readability (e.g., <a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-travels-text\/\">TT&nbsp;Travels Text<\/a>). They are versatile and suitable for both web and print. For headings, you can choose more expressive fonts with decorative elements. For example, <a href=\"https:\/\/typetype.org\/fr\/fonts\/tt-travels-next\/\">TT&nbsp;Travels Next<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"367\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37.png\" alt=\"\" class=\"wp-image-51444\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37-1024x261.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37-1200x306.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37-768x196.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37-420x107.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_37-600x153.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<p>For a&nbsp;deeper study, we&nbsp;have a&nbsp;<a href=\"https:\/\/typetype.org\/fr\/blog\/how-to-choose-a-font-for-your-brand-design-the-comprehensive-guide\/\">detailed guide<\/a> on&nbsp;choosing a&nbsp;font for a&nbsp;project.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Combining Fonts<\/h3>\n\n\n\n<p>Do&nbsp;not use more than two or&nbsp;three fonts in&nbsp;one project\u2014this will help to&nbsp;avoid clutter and maintain harmony. The rule \u00ab\u00a0less is&nbsp;more\u00a0\u00bb is&nbsp;appropriate here.<\/p>\n\n\n\n<p>For fonts to&nbsp;combine well, it&nbsp;is&nbsp;important that they have both common features and differences. The easiest way is&nbsp;to&nbsp;take different styles of&nbsp;the same typeface: they differ in&nbsp;a&nbsp;number of&nbsp;parameters, but at&nbsp;the same time remain within the same style. You can also use proven classic combinations, for example, serif + sans serif.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Optimal Spacing<\/h3>\n\n\n\n<p>The optimal value for leading is&nbsp;usually in&nbsp;the range of&nbsp;120\u2013150% of&nbsp;the point size. Too little leading impairs readability, and too much makes the text \u00ab\u00a0torn.\u00a0\u00bb<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"446\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38.png\" alt=\"\" class=\"wp-image-51446\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38-1024x317.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38-1200x372.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38-768x238.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38-420x130.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_38-600x186.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Typography and Grid<\/h3>\n\n\n\n<p>A&nbsp;modular grid is&nbsp;a&nbsp;tool that helps to&nbsp;organize a&nbsp;layout using columns, rows, and the spaces between them. It&nbsp;sets the guides along which the designer arranges text, images, buttons, and other site elements. Using a&nbsp;grid helps to&nbsp;make the page predictable and structured.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"718\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng.png\" alt=\"\" class=\"wp-image-51447\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng-1024x511.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng-1200x598.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng-768x383.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng-420x209.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_39_eng-600x299.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Why is&nbsp;Typography Important in&nbsp;Graphic Design?<\/h2>\n\n\n\n<p>Typography affects not only the appearance of&nbsp;text in&nbsp;design but also many other aspects. In&nbsp;particular:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Perception of&nbsp;Information<\/h3>\n\n\n\n<p>Well-configured typography parameters help the viewer to&nbsp;navigate quickly. Studies show that users stay on&nbsp;a&nbsp;site longer if&nbsp;the text in&nbsp;it&nbsp;is&nbsp;structured and user-friendly.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Emotional Impact<\/h3>\n\n\n\n<p>Different fonts have different characters and have different emotional impacts. For example, the team of&nbsp;the online cinema Ivi after a&nbsp;rebranding turned to&nbsp;TypeType\u2014we needed to&nbsp;create a&nbsp;corporate font that would emotionally fit the new image of&nbsp;the company.<\/p>\n\n\n\n<p>To&nbsp;understand whether the character of&nbsp;the font is&nbsp;important for users and whether the emotional perception of&nbsp;different options differs, ivi specialists conducted a&nbsp;study. The results showed that the reaction to&nbsp;different fonts differs. The emotional perception of&nbsp;the more characteristic fonts, sketches of&nbsp;which we&nbsp;created as&nbsp;part of&nbsp;the project, was much brighter than the perception of&nbsp;the standard option that was previously used on&nbsp;the online cinema\u2019s website.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"396\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng.png\" alt=\"\" class=\"wp-image-51448\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng-1024x282.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng-1200x330.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng-768x211.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng-420x116.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_40_eng-600x165.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Improving Communication Efficiency<\/h3>\n\n\n\n<p>Typography helps to&nbsp;highlight key accents, reduce the time spent searching for information, and increase trust in&nbsp;the brand. For example, a&nbsp;company that uses a&nbsp;single corporate font in&nbsp;advertising, on&nbsp;its website, and in&nbsp;its application looks more professional, reliable, and becomes more recognizable. This strategy is&nbsp;used by&nbsp;major brands today.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Typography in&nbsp;graphic design is&nbsp;not just about choosing a&nbsp;beautiful font. It&nbsp;is&nbsp;a&nbsp;system of&nbsp;rules and techniques that helps to&nbsp;assemble graphic and textual elements into a&nbsp;cohesive composition, manage the viewer\u2019s attention, improve the user experience, and enhance communication.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">What to&nbsp;Read and Where to&nbsp;Learn Typography<\/h3>\n\n\n\n<p>Here is&nbsp;a&nbsp;list of&nbsp;literature that TypeType font designers recommend for a&nbsp;deeper study of&nbsp;the topic:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><em>An&nbsp;Essay on&nbsp;Typography<\/em> by&nbsp;Eric Gill <\/li>\n\n\n\n<li><em>The New Typography. A&nbsp;Handbook for Modern Designers<\/em> by&nbsp;Jan Tschichold <\/li>\n\n\n\n<li><em>The Form Of&nbsp;The Book<\/em> by&nbsp;Jan Tschichold <\/li>\n\n\n\n<li><em>Stop Stealing Sheep &amp;&nbsp;Find Out How Type Works<\/em> by&nbsp;Erik Spiekermann <\/li>\n\n\n\n<li><em>The Elements of&nbsp;Typographic Style<\/em> by&nbsp;Robert Bringhurst <\/li>\n\n\n\n<li><em>Designing Type<\/em> by&nbsp;Karen Cheng <\/li>\n\n\n\n<li><em>Typography: A&nbsp;Manual of&nbsp;Design<\/em> by&nbsp;Emil Ruder<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1440\" height=\"555\" src=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41.png\" alt=\"\" class=\"wp-image-51449\" srcset=\"https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41.png 1440w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41-1024x395.png 1024w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41-1200x463.png 1200w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41-768x296.png 768w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41-420x162.png 420w, https:\/\/typetype.org\/fr\/wp-content\/uploads\/sites\/15\/tt_blog_seo_typography_41-600x231.png 600w\" sizes=\"(max-width: 1440px) 100vw, 1440px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Discover what typography\u00a0is, why it\u2019s important in\u00a0design, and how to\u00a0apply its main principles, styles, and rules to\u00a0create visually strong text.<\/p>\n","protected":false},"author":4485,"featured_media":51450,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[184,188],"class_list":["post-51410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-typetype-fonts","tag-work-with-fonts"],"acf":{"show_sidebar":true},"_links":{"self":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/51410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/users\/4485"}],"replies":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/comments?post=51410"}],"version-history":[{"count":5,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/51410\/revisions"}],"predecessor-version":[{"id":52024,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/posts\/51410\/revisions\/52024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media\/51450"}],"wp:attachment":[{"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/media?parent=51410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/categories?post=51410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/typetype.org\/fr\/wp-json\/wp\/v2\/tags?post=51410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}