{"id":291823,"date":"2025-11-28T22:02:19","date_gmt":"2025-11-28T22:02:19","guid":{"rendered":"https:\/\/inkbotdesign.com\/?p=291823"},"modified":"2025-12-31T18:53:49","modified_gmt":"2025-12-31T18:53:49","slug":"typography-basics","status":"publish","type":"post","link":"https:\/\/inkbotdesign.com\/typography-basics\/","title":{"rendered":"Typography Basics: The Guide to Rules, Terms &amp; Hierarchy"},"content":{"rendered":"\n<p><strong>Typography Basics: The Guide to Rules, Terms & Hierarchy<\/strong><\/p>\n\n\n\n<p>Most business owners treat typography as an afterthought. You spend weeks agonising over the <a href=\"https:\/\/inkbotdesign.com\/logotype-vs-logomark\/\" title=\"Logotype vs Logomark: Which is Right for Your Brand?\"  data-wpil-monitor-id=\"15664\">logo mark<\/a> or the copy, then slap it into a generic typeface and wonder why the final result looks &#8220;off.<\/p>\n\n\n\n<p>Here is the truth: Typography is 90% of design. On the web, it is <a href=\"https:\/\/ia.net\/topics\/the-web-is-all-about-typography-period\" target=\"_blank\" rel=\"noopener\">95%<\/a>.\u00a0<\/p>\n\n\n\n<p>If you get the typography wrong, your brand not only looks unappealing, but it also appears incompetent.<\/p>\n\n\n\n<p>We are not talking about personal taste here. Typography is not art; it is a form of engineering. It is a system of rules, mathematical ratios, and optical adjustments designed to transfer information from a screen or page into a human brain with the least amount of friction possible.&nbsp;<\/p>\n\n\n\n<p>When you ignore <strong>typography basics<\/strong>, you increase cognitive load. You make your customers work harder to understand you. And in an attention economy, if you make them work too hard, they leave.<\/p>\n\n\n\n<p>This is not a fluff piece about &#8220;expressing your feelings through <a href=\"https:\/\/inkbotdesign.com\/go\/bestfonts\" title=\"Myfonts Bestsellers\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">fonts<\/a>.&#8221; This is a technical breakdown of the mechanics of type, written for entrepreneurs who want their brand to be taken seriously.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What are the Typography Basics?<\/h2>\n\n\n\n<p><strong>Typography<\/strong> is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. It involves selecting typefaces, point sizes, line lengths, line spacing (leading), and <a href=\"https:\/\/inkbotdesign.com\/letter-spacing-guide\/\" title=\"Letter Spacing Guide: Mastering Typographic Finesse\" data-wpil-monitor-id=\"15660\">letter spacing<\/a> (tracking), and adjusting the space between pairs of letters (kerning).<\/p>\n\n\n\n<p>At its core, professional typography relies on three non-negotiable pillars:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Legibility:<\/strong> Can the character be distinguished from others? (A function of the typeface design).<\/li>\n\n\n\n<li><strong>Readability:<\/strong> How easy is it to read words and blocks of text? (A function of how you arrange the type).<\/li>\n\n\n\n<li><strong>Hierarchy:<\/strong> Does the viewer instantly know what is most important? (A function of scale, weight, and position).<\/li>\n<\/ul>\n\n\n\n<p>If you fail at any one of these, you fail at communication.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Anatomy of Type (Stop Calling it a Font)<\/h2>\n\n\n\n<p>Before we fix your documents, we need to agree on terminology. Using the wrong words can make you appear like a novice when briefing a designer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Typeface vs. Font<\/h3>\n\n\n\n<p>These words are often used interchangeably, but they refer to different things.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Typeface:<\/strong> The design itself. The creative concept. (e.g., <a href=\"https:\/\/inkbotdesign.com\/go\/helvetica\" title=\"Helvetica\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Helvetica<\/a>, <a href=\"https:\/\/inkbotdesign.com\/go\/garamond\" title=\"Garamond\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Garamond<\/a>, Roboto).<\/li>\n\n\n\n<li><strong>Font:<\/strong> The physical or digital file that contains the typeface at a specific weight and <a href=\"https:\/\/inkbotdesign.com\/font-psychology\/\" title=\"Font Psychology: Everything You Need to Know\" data-wpil-monitor-id=\"15655\">font style<\/a>. (e.g., <a href=\"https:\/\/inkbotdesign.com\/go\/helvetica\" title=\"Helvetica\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Helvetica<\/a> Bold, 12pt).<\/li>\n<\/ul>\n\n\n\n<p>Think of it this way: The Typeface is the song; the Font is the MP3 file. You &#8220;choose&#8221; a typeface, but you &#8220;install&#8221; a font.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Skeleton of a Letter<\/h3>\n\n\n\n<p>To understand why some typographic design looks &#8220;trustworthy&#8221; and others look &#8220;childish,&#8221; you have to look at the anatomy.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>1. The Baseline<\/strong><\/h4>\n\n\n\n<p>This is the invisible line upon which all letters sit. In <a class=\"wpil_keyword_link\" href=\"https:\/\/inkbotdesign.com\/why-web-design-is-important\/\" title=\"Why Web Design Is Important (And How It Makes You Money)\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"15651\">web design<\/a> and branding, establishing a consistent baseline grid (vertical rhythm) is what separates professional layouts from chaotic ones. If your text floats around without anchoring to a baseline, the page feels unstable.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/08\/what-is-a-Baseline-Grid-in-graphic-design-1024x576.webp\" alt=\"What Is A Baseline Grid In Graphic Design\" class=\"wp-image-286278\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/08\/what-is-a-Baseline-Grid-in-graphic-design-1024x576.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/08\/what-is-a-Baseline-Grid-in-graphic-design-300x169.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/08\/what-is-a-Baseline-Grid-in-graphic-design-60x34.webp 60w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/08\/what-is-a-Baseline-Grid-in-graphic-design.webp 1080w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>2. X-Height<\/strong><\/h4>\n\n\n\n<p>This is the height of the lowercase &#8216;x'. It determines how readable a typeface is at small sizes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/what-is-x-height-in-typography-1024x559.webp\" alt=\"Typography Basics What Is X Height In Typography\" class=\"wp-image-323839\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/what-is-x-height-in-typography-1024x559.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/what-is-x-height-in-typography-300x164.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/what-is-x-height-in-typography.webp 1408w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>High X-Height:<\/strong> The lowercase letters are tall compared to the capital letters (e.g., Helvetica). These are generally more legible on screens and at small sizes.<\/li>\n\n\n\n<li><strong>Low X-Height:<\/strong> The lowercase letters are short and stubby (e.g., <a href=\"https:\/\/inkbotdesign.com\/go\/futura\" title=\"Futura\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Futura<\/a>). These look elegant but become illegible quickly when scaled down.<\/li>\n<\/ul>\n\n\n\n<p><strong>Consultant\u2019s Note:<\/strong> When selecting a typeface for a mobile app or dashboard, opt for a high x-height. If you pick a low x-height font for body copy on a mobile device, your users will squint.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>3. Ascenders and Descenders<\/strong><\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ascenders:<\/strong> The parts of lowercase letters that extend above the x-height (b, d, f, h, k, l).<\/li>\n\n\n\n<li>Descenders: The parts that extend below the baseline (g, j, p, q, y).<br>Why does this matter? If your Leading (line spacing) is too tight, the descenders from the top line will crash into the ascenders of the bottom line. This is called a &#8220;crash,&#8221; and it destroys readability.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/ascenders-and-descenders-in-lettering-1024x559.webp\" alt=\"Typography Basics Ascenders And Descenders In Lettering\" class=\"wp-image-323840\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/ascenders-and-descenders-in-lettering-1024x559.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/ascenders-and-descenders-in-lettering-300x164.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/ascenders-and-descenders-in-lettering.webp 1408w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>4. Counters<\/strong><\/h4>\n\n\n\n<p>The open space inside a letter (like the inside of an &#8216;o', &#8216;e', or &#8216;a').<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Counters:<\/strong> Create a font that feels airy, modern, and legible (e.g., Open Sans).<\/li>\n\n\n\n<li><strong>Closed Counters:<\/strong> Feel tighter and more traditional, but can appear slightly blurred when printed on poor-quality paper or rendered on low-resolution screens.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Classification (The Trust Signals)<\/h2>\n\n\n\n<p>Typefaces are tools. You do not use a hammer to drive a screw. Similarly, you do not use a playful <a href=\"https:\/\/inkbotdesign.com\/different-types-of-fonts\/\" title=\"The 12 Types of Fonts: A Simple Framework for Making the Right Choice\" data-wpil-monitor-id=\"15656\">Script font<\/a> for a legal contract. The typeface you choose signals your intent before the user reads a single word.<\/p>\n\n\n\n<p>This is a core component of <a href=\"https:\/\/inkbotdesign.com\/typography-in-branding\/\">typography in branding<\/a>. Your choice here anchors your <a class=\"wpil_keyword_link\" href=\"https:\/\/inkbotdesign.com\/brand-identity\/\" title=\"Brand Identity: What It Is & How to Build One\" data-wpil-keyword-link=\"linked\" data-wpil-monitor-id=\"15652\">brand identity<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Serif (The Authority)<\/h3>\n\n\n\n<p>Serifs are the little &#8220;feet&#8221; or strokes at the ends of the letterforms.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sub-categories:<\/strong> Old Style (<a href=\"https:\/\/inkbotdesign.com\/go\/garamond\" title=\"Garamond\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Garamond<\/a>), Transitional (<a href=\"https:\/\/inkbotdesign.com\/go\/baskerville\" title=\"Baskerville\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Baskerville<\/a>), Didone (Didot), Slab Serif (Rockwell).<\/li>\n\n\n\n<li><strong>The Signal:<\/strong> Tradition, authority, reliability, establishment. Banks, law firms, and <a href=\"https:\/\/inkbotdesign.com\/versace-logo-design\/\" title=\"The Versace Logo Design: History, Meaning and Evolution\" data-wpil-monitor-id=\"15667\">luxury fashion<\/a> houses use Serifs.<\/li>\n\n\n\n<li><strong>The Science:<\/strong> Historically, it was believed that serifs helped guide the eye along the line in print. On modern high-resolution screens, this distinction is less relevant, but the <em>cultural association<\/em> remains.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"443\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/12\/best-modern-serif-fonts-cormorant-1024x443.webp\" alt=\"Best Modern Serif Fonts Cormorant\" class=\"wp-image-293308\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/12\/best-modern-serif-fonts-cormorant-1024x443.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/12\/best-modern-serif-fonts-cormorant-300x130.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/12\/best-modern-serif-fonts-cormorant-60x26.webp 60w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/12\/best-modern-serif-fonts-cormorant.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2. Sans-Serif (The Modernist)<\/h3>\n\n\n\n<p>&#8220;Sans&#8221; means &#8220;without.&#8221; These <a href=\"https:\/\/inkbotdesign.com\/go\/bestfonts\" title=\"Myfonts Bestsellers\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">fonts<\/a> lack the feet. They are cleaner, simpler, and often more legible on screens.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sub-categories:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Geometric:<\/strong> Based on circles and squares (<a href=\"https:\/\/inkbotdesign.com\/go\/futura\" title=\"Futura\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Futura<\/a>, Avant Garde). They look modern and clean, but are harder to read in long paragraphs because the letters look too similar.<\/li>\n\n\n\n<li><strong>Humanist:<\/strong> Based on the proportions of handwriting (<a href=\"https:\/\/inkbotdesign.com\/design-fonts\/\" title=\"Top 10 Design Fonts of All Time: Timeless Typefaces\" data-wpil-monitor-id=\"15657\">Gill Sans<\/a>, Verdana). These are the most readable sans serifs for body text.<\/li>\n\n\n\n<li><strong>Neo-Grotesque:<\/strong> Neutral and objective (Helvetica, Arial). The corporate standard.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>The Signal:<\/strong> Innovation, clarity, approachability, tech-forward.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/04\/work-sans-and-noto-sans-google-font-combinations-1024x559.webp\" alt=\"Work Sans And Noto Sans Google Font Combinations\" class=\"wp-image-313713\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/04\/work-sans-and-noto-sans-google-font-combinations-1024x559.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/04\/work-sans-and-noto-sans-google-font-combinations-300x164.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/04\/work-sans-and-noto-sans-google-font-combinations.webp 1408w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">3. Script and Display (The Dangerous Ones)<\/h3>\n\n\n\n<p>These mimic handwriting or are designed for billboards.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Rule:<\/strong> Never, under any circumstances, use these for body copy. They are for headlines or logos only. If you write a paragraph in a Script font, you are actively preventing people from reading your content.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/07\/noe-display-font-for-logos-1024x576.webp\" alt=\"Noe Display Font For Logos\" class=\"wp-image-322382\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/07\/noe-display-font-for-logos-1024x576.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/07\/noe-display-font-for-logos-300x169.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/07\/noe-display-font-for-logos.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><strong>The &#8220;Comic Sans&#8221; Warning:<\/strong> We all know the joke, but the principle applies to any inappropriate font. In 2012, researchers at CERN presented the discovery of the Higgs Boson\u2014one of the most significant scientific breakthroughs of the century\u2014using Comic Sans in their slides. Instead of focusing on the physics, the global design community mocked the presentation. <strong>Typography determines your credibility.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3 Foolproof Font Pairings (Steal These)<\/h3>\n\n\n\n<p>Don't know where to start? These Google <a href=\"https:\/\/inkbotdesign.com\/font-combinations\/\" title=\"Ultimate Guide: 13 Best Font Combinations for Serious Brands\" data-wpil-monitor-id=\"15654\">Font combinations<\/a> work for 90% of business use cases.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>The &#8220;Modern Tech&#8221; Duo:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Header:<\/strong> <em>Montserrat<\/em> (Geometric Sans, Bold)<\/li>\n\n\n\n<li><strong>Body:<\/strong> <em>Open Sans<\/em> (Humanist Sans, Regular)<\/li>\n\n\n\n<li><em>Why:<\/em> Clean, legible, and friendly.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>The &#8220;Classic Professional&#8221; Duo:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Header:<\/strong> <em>Playfair Display<\/em> (Serif, High Contrast)<\/li>\n\n\n\n<li><strong>Body:<\/strong> <em>Lato<\/em> (Sans-Serif, Neutral)<\/li>\n\n\n\n<li><em>Why:<\/em> Combines the authority of a serif with the utility of a sans.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>The &#8220;Editorial&#8221; Duo:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Header:<\/strong> <em>Oswald<\/em> (Condensed Sans)<\/li>\n\n\n\n<li><strong>Body:<\/strong> <em>Merriweather<\/em> (Serif, High Readability)<\/li>\n\n\n\n<li><em>Why:<\/em> Merriweather is designed specifically for reading on screens.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Micro-Typography (Spacing is Everything)<\/h2>\n\n\n\n<p>This is where the amateurs reveal themselves. Anyone can pick a font. Only a professional knows how to space it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Kerning (The Space Between Pairs)<\/h3>\n\n\n\n<p>Kerning is the adjustment of the space between two specific characters.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1000\" height=\"600\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2018\/10\/kerning-in-typography-design.png\" alt=\"Kerning In Typography Design\" class=\"wp-image-25271\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2018\/10\/kerning-in-typography-design.png 1000w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2018\/10\/kerning-in-typography-design-300x180.png 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2018\/10\/kerning-in-typography-design-120x72.png 120w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2018\/10\/kerning-in-typography-design-510x306.png 510w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>Digital fonts come with a &#8220;kerning table&#8221; built in, but it is rarely perfect. Certain letter combinations, like AV, Wa, To, or Ty, often leave awkward gaps because of the diagonal strokes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Mistake:<\/strong> Relying on &#8220;Metric&#8221; kerning (the mathematical space in the file).<\/li>\n\n\n\n<li><strong>The Fix:<\/strong> Use &#8220;Optical&#8221; kerning in your design software (<a href=\"https:\/\/inkbotdesign.com\/go\/illustrator\" title=\"Adobe Illustrator\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Adobe Illustrator<\/a>\/<a href=\"https:\/\/inkbotdesign.com\/go\/indesign\" title=\"Adobe InDesign\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">InDesign<\/a>), or manually adjust the space until the <em>volume<\/em> of space between letters feels equal.<\/li>\n\n\n\n<li><strong>Why it matters:<\/strong> Bad kerning is distracting. If the letters T and o in &#8220;Tools&#8221; are too far apart, the brain pauses slightly to process if they belong together. These micro-pauses accumulate, causing reading fatigue.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2. Tracking (The Group Space)<\/h3>\n\n\n\n<p>Tracking is the spacing applied to a <em>range<\/em> of characters (an entire word or paragraph).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"684\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/tracking-in-typography-basics-1024x684.webp\" alt=\"Typography Basics Tracking In Typography Basics\" class=\"wp-image-323838\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/tracking-in-typography-basics-1024x684.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/tracking-in-typography-basics-300x200.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/tracking-in-typography-basics.webp 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Rule:<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>ALL CAPS:<\/strong> Always add tracking (letter-spacing) to uppercase text. Uppercase letters are blocky; they need breathing room to look elegant. 50\u2013100 units of tracking transforms a headline from &#8220;shouting&#8221; to &#8220;sophisticated.&#8221;<\/li>\n\n\n\n<li><strong>Body Copy:<\/strong> Never track out lowercase body copy significantly. It breaks the flow of reading.<\/li>\n\n\n\n<li><strong>White Text on Black Background:<\/strong> Increase tracking slightly. Light spills over into darkness (irradiation), making the letters look fatter. Extra space counteracts this.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3. Leading (Line Height)<\/h3>\n\n\n\n<p>Leading (pronounced &#8216;led-ding') is the vertical space between lines of text.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/what-is-leading-in-typography-1024x576.jpg\" alt=\"What Is Leading In Typography\" class=\"wp-image-272950\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/what-is-leading-in-typography-1024x576.jpg 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/what-is-leading-in-typography-300x169.jpg 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/what-is-leading-in-typography-60x34.jpg 60w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/what-is-leading-in-typography.jpg 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Standard:<\/strong> A standard ratio is 1.2 to 1.5 times the font size.\n<ul class=\"wp-block-list\">\n<li>If your font is 16px, your line height should be roughly 24px (1.5x).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>The Business Impact:<\/strong> If your leading is too tight, users lose their place when scanning from the end of one line to the start of the next. If it is too loose, the lines don't feel like a cohesive paragraph.<\/li>\n\n\n\n<li><strong>Web Reality:<\/strong> On the web, generous line height (1.5 to 1.6) improves accessibility and reduces <a href=\"https:\/\/inkbotdesign.com\/measure-digital-marketing-performance\/\" title=\"How to Measure Digital Marketing Performance\" data-wpil-monitor-id=\"15666\">bounce rates<\/a> on text-heavy pages.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Line Length ( The Measure)<\/h3>\n\n\n\n<p>This is the width of your text block.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Golden Number:<\/strong> 45 to 75 characters per line (including spaces). 66 is widely considered the ideal.<\/li>\n\n\n\n<li><strong>The Failure:<\/strong> Full-width text on a desktop monitor. If a line of text spans 1920 pixels, the eye cannot accurately track back to the start of the next line. This causes &#8220;reading stutter.&#8221;<\/li>\n\n\n\n<li><strong>The Fix:<\/strong> Limit the max-width of your text containers. This is why well-designed blogs have generous <a href=\"https:\/\/inkbotdesign.com\/visual-hierarchy\/\" title=\"You've Got 3 Seconds: Make Visual Hierarchy Count\" data-wpil-monitor-id=\"15662\">white space<\/a> on the sides.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Amateur vs. Professional Typesetting<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Feature<\/strong><\/td><td><strong>The Wrong Way (Amateur)<\/strong><\/td><td><strong>The Right Way (Professional)<\/strong><\/td><\/tr><tr><td><strong>Kerning<\/strong><\/td><td>Auto\/Metric (ignored). Gaps in headlines.<\/td><td>Optical or manually adjusted for headlines.<\/td><\/tr><tr><td><strong>Leading<\/strong><\/td><td>Default (usually 1.2). Text looks cramped.<\/td><td>1.4 \u2013 1.6 for body copy. Breathing room.<\/td><\/tr><tr><td><strong>Line Length<\/strong><\/td><td>Edge-to-edge screen width (100+ chars).<\/td><td>Controlled width (45\u201375 chars).<\/td><\/tr><tr><td><strong>Alignment<\/strong><\/td><td>Centre-aligned paragraphs. Hard to read.<\/td><td>Left-aligned (ragged right). Easy to scan.<\/td><\/tr><tr><td><strong>Contrast<\/strong><\/td><td>Light grey on white. Inaccessible.<\/td><td>High contrast (WCAG AA\/AAA compliant).<\/td><\/tr><tr><td><strong>Hyphens<\/strong><\/td><td>Default hyphenation breaks words badly.<\/td><td>Controlled hyphenation or manually ragged.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Hierarchy and The Grid<\/h2>\n\n\n\n<p>Hierarchy is how you tell the reader's eye where to look first, second, and third. Without hierarchy, a page is just a wall of grey noise.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">The Levels of Hierarchy<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Primary (H1):<\/strong> The Headline. This should be the largest, boldest, or most distinct element. It hooks the reader.<\/li>\n\n\n\n<li><strong>Secondary (H2\/H3):<\/strong> Subheads. These break up the text and allow for scanning.<\/li>\n\n\n\n<li><strong>Tertiary (Body):<\/strong> The main content. It should be comfortable and consistent.<\/li>\n\n\n\n<li><strong>Meta\/Caption:<\/strong> Small details, dates, authors.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"595\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/leading-in-web-design-typography-1024x595.png\" alt=\"Leading In Web Design Typography\" class=\"wp-image-272952\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/leading-in-web-design-typography-1024x595.png 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/leading-in-web-design-typography-300x174.png 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/leading-in-web-design-typography-60x35.png 60w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2023\/10\/leading-in-web-design-typography.png 1400w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Contrast is Key<\/h3>\n\n\n\n<p>Hierarchy is established through contrast. You can create contrast using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Size:<\/strong> Big vs. Small. (The most obvious).<\/li>\n\n\n\n<li><strong>Weight:<\/strong> Bold vs. Light.<\/li>\n\n\n\n<li><strong>Colour:<\/strong> Black vs. Red.<\/li>\n\n\n\n<li><strong>Structure:<\/strong> Serif Headline vs. Sans-Serif Body.<\/li>\n\n\n\n<li><strong>Space:<\/strong> Isolated elements attract more attention.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The Grid System<\/h3>\n\n\n\n<p>Professional typography is never placed randomly. It is hung on a Grid.<\/p>\n\n\n\n<p>A grid is a structure of <a href=\"https:\/\/inkbotdesign.com\/grid-systems-in-graphic-design\/\" title=\"Grid Systems in Graphic Design: Tips for Designers\" data-wpil-monitor-id=\"15663\">columns and rows<\/a> that organises content. Whether it is a 12-column bootstrap grid for the web or a 3-column grid for a brochure, the grid ensures alignment.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Rule of Alignment:<\/strong> Everything on your page should align with something else. Nothing should float arbitrarily. If you align your headline to the left, but your subhead is indented by 20px for no reason, the design feels &#8220;messy.&#8221;<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Web Typography & Accessibility (The Legal Stuff)<\/h2>\n\n\n\n<p>In 2026, typography is not just about print; it is predominantly digital. And <a href=\"https:\/\/inkbotdesign.com\/typography-rules\/\" title=\"20 Typography Rules Every Designer Needs to Know\" data-wpil-monitor-id=\"15653\">digital typography<\/a> carries legal responsibilities.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Accessibility (WCAG Compliance)<\/h3>\n\n\n\n<p>The Web Content Accessibility Guidelines (WCAG) are not suggestions; for many businesses, they are legal requirements.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Contrast:<\/strong> Text must have a <a href=\"https:\/\/inkbotdesign.com\/colour-psychology-in-branding\/\" title=\"Colour Psychology in Branding: The Science of Influence\" data-wpil-monitor-id=\"15668\">contrast ratio<\/a> of at least 4.5:1 against its background. Light grey text on a white background is an accessibility violation.<\/li>\n\n\n\n<li><strong>Scalability:<\/strong> Users must be able to resize text up to 200% without breaking the layout. This means using relative units.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Pixels (px) vs. REM<\/h3>\n\n\n\n<p>Stop using Pixels (px) for font sizes on the web.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Px:<\/strong> A fixed unit. If a user sets their browser default to &#8220;Large&#8221; because they have poor vision, 16px overrides their preference and stays small.<\/li>\n\n\n\n<li><strong>Rem:<\/strong> A relative unit. 1rem equals the root font size (usually 16px). If the user changes their default to 24px, your 1rem text scales up automatically.<\/li>\n\n\n\n<li><strong>The Verdict:<\/strong> Using rem respects the user. Using px is arrogant.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Variable Fonts: The State of Typography in 2026<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"800\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2025\/11\/what-are-variable-fonts-in-web-design-1024x800.webp\" alt=\"Variable Fonts What Are Variable Fonts In Web Design\" class=\"wp-image-323154\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2025\/11\/what-are-variable-fonts-in-web-design-1024x800.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2025\/11\/what-are-variable-fonts-in-web-design-300x234.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2025\/11\/what-are-variable-fonts-in-web-design.webp 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>A major shift has occurred in the last 18 months regarding Variable Fonts (<a href=\"https:\/\/inkbotdesign.com\/variable-fonts\/\" title=\"Variable Fonts Explained: Reduce Bloat and Fix Layout Shifts\" data-wpil-monitor-id=\"15661\">OpenType Font Variations<\/a>).<\/p>\n\n\n\n<p>Previously, if you wanted a Light, Regular, Bold, and Extra Bold version of a font on your website, you had to load four separate files. This slowed down the site speed (Core Web Vitals).<\/p>\n\n\n\n<p>Variable Fonts allow a single file to behave like multiple fonts. You can programmatically adjust the weight, width, and slant on a sliding scale.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Benefit:<\/strong> Faster load times and infinite design flexibility.<\/li>\n\n\n\n<li><strong>Adoption:<\/strong> By 2026, all <a href=\"https:\/\/inkbotdesign.com\/serif-vs-sans-serif\/\" title=\"Sans-Serif vs Serif Fonts: The Typography Debate\" id=\"15659\">modern branding<\/a> projects should be utilising variable fonts for web performance.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">The Mathematical Scale (The Major Third)<\/h3>\n\n\n\n<p>Don't guess your sizes. Use a &#8220;Type Scale&#8221; to ensure mathematical harmony. A popular ratio for the web is the &#8220;Major Third&#8221; (1.250).<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>H1 (Headline):<\/strong> 3.052rem (approx 48px)<\/li>\n\n\n\n<li><strong>H2 (Subhead):<\/strong> 2.441rem (approx 39px)<\/li>\n\n\n\n<li><strong>H3 (Section):<\/strong> 1.953rem (approx 31px)<\/li>\n\n\n\n<li><strong>Body Text:<\/strong> 1rem (16px) &#8211; <em>The Base<\/em><\/li>\n\n\n\n<li><strong>Caption:<\/strong> 0.8rem (12px)<\/li>\n<\/ul>\n\n\n\n<p><em>Tip: Set your base to 16px and use a tool like type-scale.com to calculate the rest.<\/em><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Reality Check<\/h2>\n\n\n\n<p>I once audited a mid-sized financial firm in London. They had spent \u00a320,000 on a website refresh but hadn't updated their typography guidelines.<\/p>\n\n\n\n<p>They were using a <a href=\"https:\/\/inkbotdesign.com\/best-free-fonts\/\" title=\"50 Best Free Fonts for Designers: Elevate Your Designs\" data-wpil-monitor-id=\"15658\">free font<\/a> from Google Fonts that looked &#8220;clean.&#8221; However, they hadn't checked the <strong>Glyph Set <\/strong>. When they expanded into the European market, they realised the font didn't support certain diacritics (accents) or the proper Euro symbol (\u20ac). Their contracts and invoices were printed with &#8220;\u25a1&#8221; boxes where the currency symbol should be.<\/p>\n\n\n\n<p>They had to re-engineer their entire document stack\u2014invoices, website, app, letterheads\u2014because they didn't check the character set of a &#8220;free&#8221; font.<\/p>\n\n\n\n<p><strong>The Lesson:<\/strong> Professional typography is about robust systems, not just pretty shapes. Always check:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Licensing:<\/strong> Do you have the right to use this on a web server? (Desktop licenses do <em>not<\/em> cover web use.)<\/li>\n\n\n\n<li><strong>Language Support:<\/strong> Does it cover all the territories you might expand into?<\/li>\n\n\n\n<li><strong>Weights:<\/strong> Does it have enough weights (Bold, Italic, Light) to build a hierarchy?<\/li>\n<\/ol>\n\n\n\n<p>If you are unsure whether your current brand identity is robust enough, consider reviewing our <a href=\"https:\/\/inkbotdesign.com\/services\/brand-identity\/\">brand identity services<\/a>. It is cheaper to do it right the first time than to fix it later.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Optical vs. Metric Alignment (The &#8220;Invisible&#8221; Skill)<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"559\" src=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/Optical-vs-Metric-Alignment-in-type-1024x559.webp\" alt=\"Typography Basics Optical Vs Metric Alignment In Type\" class=\"wp-image-323841\" srcset=\"https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/Optical-vs-Metric-Alignment-in-type-1024x559.webp 1024w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/Optical-vs-Metric-Alignment-in-type-300x164.webp 300w, https:\/\/inkbotdesign.com\/wp-content\/uploads\/2024\/11\/Optical-vs-Metric-Alignment-in-type.webp 1408w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>This is a rare attribute that separates the pros from the amateurs.<\/p>\n\n\n\n<p>Computer software aligns text mathematically (Metric). But the human eye is flawed. We see round shapes as smaller than square shapes of the same height.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Overshoot:<\/strong> The letter &#8216;O' and the letter &#8216;A' (at the point) must actually be slightly <em>taller<\/em> than a flat letter like &#8216;H' or &#8216;E' to appear the same size visually. Good typefaces have this built in.<\/li>\n\n\n\n<li><strong>Hanging Punctuation:<\/strong> If you have a bulleted list or a quote, the bullet point or the quotation mark should hang <em>outside<\/em> the alignment line. If you align the quote mark with the text, the text block appears visually indented.<\/li>\n\n\n\n<li><strong>The &#8220;Play&#8221; Button Effect:<\/strong> A triangle inside a circle (like a play button) is mathematically centred when the distances are equal. However, visually, it appears too far to the left due to the visual weight of the triangle's base. You have to nudge it to the right to make it <em>look<\/em> centred.<\/li>\n<\/ul>\n\n\n\n<p><strong>Rule:<\/strong> Trust your eye, not the software. If it looks wrong, it is wrong, even if the numbers say it is right.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3 Crimes Against Typography<\/h3>\n\n\n\n<p>If you spot these in your document, fix them immediately.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Widows:<\/strong> A single word left dangling on its own line at the end of a paragraph. It creates a visual hole.\n<ul class=\"wp-block-list\">\n<li><em>Fix:<\/em> Adjust the tracking slightly or rewrite the sentence to pull it back up.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Orphans:<\/strong> A single word or short line at the start of a new column or page.\n<ul class=\"wp-block-list\">\n<li><em>Fix:<\/em> Push more text to the next page to give it company.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Rivers:<\/strong> Ugly vertical gaps of <a href=\"https:\/\/inkbotdesign.com\/layout-design\/\" title=\"Strategic Layout Design: Making Every Element Count\" data-wpil-monitor-id=\"15665\">white space<\/a> that run down through &#8220;Justified&#8221; text paragraphs.\n<ul class=\"wp-block-list\">\n<li><em>Fix:<\/em> Switch to &#8220;Left Aligned&#8221; text.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">The Verdict<\/h2>\n\n\n\n<p>Typography basics are the bedrock of brand communication. It is not about knowing the difference between Arial and Helvetica; it is about understanding how spacing, scale, and hierarchy influence human behaviour.<\/p>\n\n\n\n<p>Bad typography creates friction. It tires the eye, lowers reading comprehension, and signals a lack of attention to detail. In a B2B context, that lack of detail translates to a lack of trust.<\/p>\n\n\n\n<p><strong>Your Next Steps:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Audit your line lengths:<\/strong> Are your blog posts spanning the full width of the monitor? Limit them to a maximum of 75 characters.<\/li>\n\n\n\n<li><strong>Check your contrast:<\/strong> Use a tool like the WebAIM Contrast Checker to ensure you are compliant with the WCAG.<\/li>\n\n\n\n<li><strong>Stop using default spacing:<\/strong> Add breathing room to your body copy (1.5 line height) and tighten the tracking on your large headlines.<\/li>\n<\/ol>\n\n\n\n<p>If you are ready to stop guessing and start engineering a brand that commands authority, you can <a href=\"https:\/\/inkbotdesign.com\/contact\/request-a-quote\/\">request a quote<\/a> for a comprehensive design audit.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Frequently Asked Questions (FAQ)<\/h3>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1764366840113\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What is the difference between a typeface and a font?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>A typeface is the design of the lettering (e.g., Helvetica). A font is the specific file that contains that design (e.g., Helvetica Bold.otf). In modern terms, the typeface is the creative work, and the font is the software you install.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366853617\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">Why is line height important for readability?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Line height (also known as leading) creates white space between lines of text. If it is too tight, the eye struggles to track from the end of one line to the start of the next. Standard web readability suggests a line height of 1.5 to 1.6 times the font size.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366862544\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What is the ideal line length for reading?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>The ideal line length is between 45 and 75 characters per line, including spaces. Lines longer than this cause eye fatigue and &#8220;tracking&#8221; errors, where the reader skips lines or re-reads the same line.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366878776\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">When should I use a Serif vs. a Sans-Serif font?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Use Serif fonts (e.g., <a href=\"https:\/\/inkbotdesign.com\/go\/timesnewroman\" title=\"Times New Roman\" class=\"pretty-link-keyword\"rel=\"nofollow sponsored \" target=\"_blank\">Times New Roman<\/a>, Garamond) to convey tradition, authority, and reliability. Use Sans-Serif fonts (e.g., Arial, Helvetica) for a modern, clean, and accessible look. Sans-serif fonts are generally preferred for digital interfaces.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366900787\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What is kerning, and why does it matter?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Kerning is the adjustment of the space between two specific characters. It matters because inconsistent spacing creates visual &#8220;holes&#8221; in words, distracting the reader. It is most critical in large headlines and logos.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366908324\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What are the rules for mixing fonts?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Limit your design to two (or a maximum of three) typefaces. Choose fonts with contrasting styles (e.g., a Geometric Sans header with a Serif body). Avoid using two fonts that are too similar, as it appears to be a mistake rather than a deliberate design choice.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366920043\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">How does typography affect website accessibility?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Typography affects accessibility through the use of contrast, size, and scalability. The text must have a contrast ratio of 4.5:1 against the background. Fonts should use relative units (rem) so they can be resized by users with visual impairments without breaking the layout.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366931524\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What is the difference between tracking and kerning?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Kerning adjusts the space between two specific letters. Tracking adjusts the spacing across an entire block of text (words, sentences, or paragraphs). You track a whole word; you kern a pair of letters.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366943080\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">Why should I avoid using &#8220;Justified&#8221; text on the web?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Justified text creates straight edges on both sides but often results in uneven gaps between words (called &#8220;rivers&#8221;) in the middle of the paragraph. This disrupts reading flow and is particularly difficult for dyslexic readers to process.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1764366955322\" class=\"rank-math-list-item\">\n<h4 class=\"rank-math-question \">What are Variable Fonts?<\/h4>\n<div class=\"rank-math-answer \">\n\n<p>Variable fonts are a modern font technology that allows a single file to contain multiple variations of a typeface (weight, width, slant). They improve website performance by reducing the number of files the browser needs to download.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div><style>\r\n.lwrp.link-whisper-related-posts{\r\n            \r\n            margin-top: 40px;\nmargin-bottom: 30px;\r\n        }\r\n        .lwrp .lwrp-title{\r\n            \r\n            \r\n        }.lwrp .lwrp-description{\r\n            \r\n            \r\n\r\n        }\r\n        .lwrp .lwrp-list-container{\r\n        }\r\n        .lwrp .lwrp-list-multi-container{\r\n            display: flex;\r\n        }\r\n        .lwrp .lwrp-list-double{\r\n            width: 48%;\r\n        }\r\n        .lwrp .lwrp-list-triple{\r\n            width: 32%;\r\n        }\r\n        .lwrp .lwrp-list-row-container{\r\n            display: flex;\r\n            justify-content: space-between;\r\n        }\r\n        .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n            width: calc(10% - 20px);\r\n        }\r\n        .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n            \r\n            \r\n        }\r\n        .lwrp .lwrp-list-item img{\r\n            max-width: 100%;\r\n            height: auto;\r\n            object-fit: cover;\r\n            aspect-ratio: 1 \/ 1;\r\n        }\r\n        .lwrp .lwrp-list-item.lwrp-empty-list-item{\r\n            background: initial !important;\r\n        }\r\n        .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n        .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n            \r\n            \r\n            \r\n            \r\n        }@media screen and (max-width: 480px) {\r\n            .lwrp.link-whisper-related-posts{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-title{\r\n                \r\n                \r\n            }.lwrp .lwrp-description{\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-multi-container{\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-multi-container ul.lwrp-list{\r\n                margin-top: 0px;\r\n                margin-bottom: 0px;\r\n                padding-top: 0px;\r\n                padding-bottom: 0px;\r\n            }\r\n            .lwrp .lwrp-list-double,\r\n            .lwrp .lwrp-list-triple{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-row-container{\r\n                justify-content: initial;\r\n                flex-direction: column;\r\n            }\r\n            .lwrp .lwrp-list-row-container .lwrp-list-item{\r\n                width: 100%;\r\n            }\r\n            .lwrp .lwrp-list-item:not(.lwrp-no-posts-message-item){\r\n                \r\n                \r\n            }\r\n            .lwrp .lwrp-list-item .lwrp-list-link .lwrp-list-link-title-text,\r\n            .lwrp .lwrp-list-item .lwrp-list-no-posts-message{\r\n                \r\n                \r\n                \r\n                \r\n            };\r\n        }<\/style>\r\n<div id=\"link-whisper-related-posts-widget\" class=\"link-whisper-related-posts lwrp\">\r\n            <h4 class=\"lwrp-title\">You May Also Like:<\/h4>    \r\n        <div class=\"lwrp-list-container\">\r\n                                            <ul class=\"lwrp-list lwrp-list-single\">\r\n                    <li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/scent-marketing\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Scent Marketing: Unleash the Power of Aroma for Your Business<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/calvin-klein-logo-design\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">The Calvin Klein Logo Design Story: Birth of an Icon<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/co-branding\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Co-Branding: Comprehensive Guide to Elevating Your Brand<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/franchise-branding\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Franchise Branding: A Blueprint for Building an Iconic Brand<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/marketing-manager\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">The Brutal Truth About What a Marketing Manager Really Does<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/free-open-source-tools\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Top 10 Free Open-Source Tools for Designers: Creativity on a Budget<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/ui-design-trends\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Top 10 UI Design Trends for 2025 and Beyond<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/social-media-marketing-campaign\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">How to Create a Social Media Marketing Campaign<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/patagonia-logo-design\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">Patagonia Logo Design: The Art of Brand Identity<\/span><\/a><\/li><li class=\"lwrp-list-item\"><a href=\"https:\/\/inkbotdesign.com\/diy-seo-tips\/\" class=\"lwrp-list-link\"><span class=\"lwrp-list-link-title-text\">10 Proven DIY SEO Tips to Boost Your Rankings<\/span><\/a><\/li>                <\/ul>\r\n                        <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Typography is not just about choosing pretty fonts. It is visual engineering. This exhaustive guide covers the terms, rules, and technical details you need to master typography in branding.<\/p>\n","protected":false},"author":1,"featured_media":323837,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[48],"tags":[],"class_list":["post-291823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-brand-strategy","no-featured-image-padding","resize-featured-image"],"acf":[],"_links":{"self":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts\/291823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/comments?post=291823"}],"version-history":[{"count":0,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/posts\/291823\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/media\/323837"}],"wp:attachment":[{"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/media?parent=291823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/categories?post=291823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inkbotdesign.com\/wp-json\/wp\/v2\/tags?post=291823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}