--- title: "Top 10 Principles of Typography in Design" url: "https://pixelstreet.in/blog/top-10-principles-of-typography-in-design/" author: "Khurshid Alam" published: "2024-08-14" updated: "2025-04-24" categories: ["Branding"] words: "2777" cited_sources: "12" publisher: "Pixel Street" description: "Find 10 principles of typography in design and readability to create visually appealing, effective layouts and make your designs stand out" machine_view: "https://pixelstreet.in/blog/ai/top-10-principles-of-typography-in-design/" license: "Quotable with attribution to pixelstreet.in" --- # Top 10 Principles of Typography in Design Typography writing likes to open with a statistic: over 1,400 creative visuals are made every minute, so yours will get lost unless you master type. I went looking for whoever counted them. There is no study, no publisher and no method behind that figure anywhere I can find it, which is why you will not read it here as though it were a fact. That is the recurring problem with typography advice. A lot of it is folklore that survived because it sounds like it ought to be true. I run [Pixel Street](https://pixelstreet.in/web-design-company-kolkata), a design and branding studio in Salt Lake, Kolkata, and we set type for brands including Coca-Cola, ITC and Marico. So I have a working interest in knowing which of these rules are load-bearing and which are just repeated. My short answer: hierarchy, contrast, spacing and alignment decide whether a layout works, and you can fix most bad typography by attacking those four in that order. Typeface choice matters far less than designers like to believe. And the single most quoted rule in the field, that serifs read better in print and sans-serifs read better on screen, has no research behind it. I explain why below. Everything that follows is either something we use on client work or something with a named source attached to it. ![Attack a broken layout in this order: hierarchy, then contrast, then spacing, then alignment. Typeface choice sits outside the sequence — a branding decision wearing a legibility costume, and not where the damage happens.](https://pixelstreet.in/blog/diagrams/top-10-principles-of-typography-in-design-four-levers.svg) ## **What is Typography in Design?** Typography is the art and technique of arranging type so that written language is legible, readable and worth looking at. Legible means a reader can tell the letters apart. Readable means they can get through a paragraph without effort. Those are two different problems, and most briefs I receive conflate them. It is also the cheapest lever on the page. Changing a typeface costs nothing. Changing line length, line spacing and hierarchy costs nothing. Either will do more for a layout than another round of colour exploration. ![Principles of Typography:](https://pixelstreet.in/blog/media/2024/08/Principles-of-Typography-300x152.png) ## Key Elements in Typography Four elements do most of the work, and they are the vocabulary the rest of this post assumes. ### Typefaces and Fonts Typefaces and fonts are often used interchangeably, but they refer to different aspects of text styling. - **Typefaces** define the overall design and shape of each letter, number, or character. Examples include Times New Roman, Arial, and Comic Sans. - **Fonts** refer to the specific implementation of a typeface, including its size, weight, and style. For instance, using Arial at 12pt in bold is a specific font. Typefaces fall into three main categories: #### **Serif Typefaces** Serif typefaces feature decorative lines or “serifs” at the ends of each character stroke. They read as traditional and formal, and they dominate printed books. **Examples:** Times New Roman, Garamond, Baskerville, Georgia. #### **Sans-Serif Typefaces** Sans-serif typefaces do not have the decorative lines found in serif fonts, giving them a cleaner and more modern appearance. They dominate screens — though not for the reason everyone gives, which I will come to. **Examples:** Arial, Roboto, Verdana. #### **Script Typefaces** Script typefaces mimic cursive handwriting or calligraphy. They are typically used for decorative purposes and are less readable than serif or sans-serif fonts, making them suitable for headings, logos, or invitations. **Examples:** Lobster, Pacifico, Handlee. #### **The serif-versus-sans readability rule has no study behind it** Every typography guide I have read says serifs are more readable in print and sans-serifs more readable on screen. This rule is repeated everywhere and I can find no study behind it. Aries Arditi and Jianna Cho tested the question directly in [_Vision Research_ in 2005](https://doi.org/10.1016/j.visres.2005.06.013), using a purpose-built typeface whose only variable was serif size. Reading speed showed no effect of serifs at all, either in rapid serial presentation or in continuous reading. They did measure a very small legibility gain on text that was tiny or far away, and they were careful to attribute it to the extra letter spacing serifs impose rather than to the serifs. Their stated conclusion was no difference in legibility between typefaces differing only in the presence or absence of serifs. [Alex Poole](https://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/) reached the same place after reviewing more than fifty empirical studies for his master's research, published in 2008. Serifs may well do something, he concluded, but they sit so far from the mechanics of reading that the effect is not worth measuring. What does move legibility, per that same body of work, is x-height, counter size, letter spacing and stroke width. Those are the four things to compare when you are deciding between two faces. Serifs are an aesthetic and tonal choice, which is a perfectly good reason to make one. It is just not a readability reason, and you should stop selling it to clients as though it were. ![The rule that serifs read better in print and sans-serifs on screen has no measurement behind it: Arditi and Cho found reading speed showed no effect of serifs at all. What does move legibility is x-height, counter size, letter spacing and stroke width.](https://pixelstreet.in/blog/diagrams/top-10-principles-of-typography-in-design-serif-myth.svg) **So how I actually choose:** - **Serif**: when the brand needs to sound established, editorial or expensive, and in long-form settings where that tone is doing real work. - **Sans-serif**: when the brand needs to sound plain and current, and at small interface sizes, where a generous x-height and open counters survive bad rendering. - **Script**: sparingly, and almost never below display size. A script that is charming at 60px is unreadable at 14px. ### Kerning Kerning refers to the adjustment of space between two individual characters in a word. It ensures that the spacing between characters is visually balanced. - **Purpose:** Kerning prevents characters from appearing too close together or too far apart. The space between “A” and “V” in “AVOID” is the classic case. - **Tight kerning:** Used in logos and headings for a compact, deliberate appearance. - **Loose kerning:** Applied at large sizes where more space reads as open and unhurried. ### Tracking Tracking is similar to kerning but applies to the spacing between all characters in a word or block of text. - **Purpose:** Tracking changes the overall texture of a block of text, tighter or looser, rather than fixing one awkward pair. - **Tight tracking:** Suitable for large blocks of print text where space is limited. - **Loose tracking:** Used where text is sparse, on posters and banners, to open the composition out. ### Leading Leading (pronounced “ledding”) is the vertical space between lines of text, also known as line spacing. - **Purpose:** Enough space between lines stops the eye dropping into the wrong one on the return sweep. This is the single most common fault I see in client-supplied layouts. - **Tight leading:** Footnotes, captions and other dense blocks where space is limited. - **Loose leading:** Body text, and anything the reader has to stay in for more than a few lines. ## **10 Principles of Typography (and how to apply them)** Ten principles, in the order I would attack a broken layout. ### **Hierarchy: Guiding the Eye** Hierarchy in typography is about arranging text elements so that the most important information stands out. This guides the reader’s eye through the content in a logical order. **How to Apply:** - **Use Different Font Sizes:** Headlines should be bold and larger, subheadings slightly smaller, and body text the smallest. For example, in a blog post, you might use 24px for headings, 18px for subheadings, and 14px for body text. - **Emphasize with Styles and Weights:** Apply bold or italic styles to highlight important words or phrases. For example, using bold for product names in a catalog draws attention to them. - **Use Color and Spacing:** Highlight key information by using a different color or adding more space around important elements. For instance, using a bright color for a call-to-action button makes it stand out. ### **Contrast: Make it Pop** Contrast in typography refers to using differences in fonts, sizes, weights, and colors to make your text stand out. **How to Apply:** - **Font Contrast:** Use a bold font for headings and a regular font for body text to create a clear distinction. For example, pairing a bold serif font for headings with a light sans-serif font for body text can make your design dynamic. - **Color Contrast:** Dark text on a light background, or vice versa, enhances readability. For example, using white text on a black background for a minimalist website gives a modern look while maintaining readability. - **Size Contrast:** Make headings significantly larger than body text to ensure they catch the reader’s attention. For instance, in a flyer, you might use 36px for the title and 12px for the details. ### **Consistency is Key** Consistency in typography means using the same fonts, sizes, and styles throughout your design to create a cohesive and professional look. **How to Apply:** - **Limit Typeface Use:** Choose one or two typefaces and stick with them. For example, use one typeface for all headings and another for body text in a design. - **Uniform Sizing:** Maintain consistent font sizes for similar text elements. For example, all H2 headings should be the same size across your website. - **Consistent Styling:** Ensure that the same styles (bold, italic, etc.) are applied uniformly. For instance, all quotes in a presentation should be italicized for a uniform appearance. ### **Alignment: Order and Organization** Alignment keeps your text neat and organized, ensuring that your design is visually appealing and easy to follow. **How to Apply:** - **Left Alignment:** This is the most common and easiest to read, making it ideal for most text. For example, use left alignment for paragraphs in a newsletter. - **Centered Alignment:** Works well for titles and short blocks of text. For example, centering the main heading on a poster draws attention to it. - **Right Alignment:** Useful for specific design purposes, like aligning a signature or a caption. For instance, aligning the date and author’s name to the right on a formal letter can add a professional touch. - **Justified Alignment:** A clean edge on both sides, paid for with uneven word spacing. It survives in newspapers and magazines because those columns are narrow and professionally hyphenated. On the web it is a mistake. WCAG 2.2 lists unjustified text among the conditions of [Success Criterion 1.4.8](https://www.w3.org/TR/WCAG22/#visual-presentation), and we do not ship justified body copy. ### **Readability and Legibility** Readability and legibility are crucial for ensuring that your text is easy to read and understand. **How to Apply:** - **Choose a plain typeface for body text:** Arial, Georgia and Helvetica are all fine, and so are a hundred others. The thing to check is not the category but the drawing: a large x-height, open counters, and letterforms you cannot mistake for each other at 14px. Set a paragraph in it and read the paragraph. - **Adjust Kerning and Leading:** Ensure there is enough space between letters (kerning) and lines (leading) to avoid crowding. For instance, increasing line spacing in a dense text block makes it more readable. - **Avoid Decorative Fonts for Body Text:** These can be hard to read in long passages. For example, while a script font might look elegant in a logo, it’s better to use a simpler font for the main content. - **Set the measure deliberately:** WCAG 2.2 Success Criterion 1.4.8 puts numbers on this: no more than 80 characters or glyphs per line, and line spacing of at least space-and-a-half within paragraphs. Read the criterion precisely, though. It asks that a mechanism be available for the reader to reach those values, not that your stylesheet ship them by default, and it sits at Level AAA, so it is a target rather than a legal floor. It is still the only line-length figure in this field that traces to a standards body. The famous alternative, 45 to 75 characters with 66 as the ideal, is not a research finding. It comes from Robert Bringhurst's _The Elements of Typographic Style_, and it is one very good typographer's judgement rather than a measured result. The measured results are less tidy. Dyson and Haselgrove, in the [_International Journal of Human-Computer Studies_ in 2001](https://doi.org/10.1006/ijhc.2001.0458), found that a medium measure of about 55 characters supported the most effective on-screen reading, while readers actually got through long lines faster and lost some comprehension doing it. Speed and comprehension pull in opposite directions, and no single number settles it. ### **Spacing: Let Your Text Breathe** Kerning and leading are defined above. What matters here is that spacing is the lever most designers reach for last and should reach for first, because it is the one that costs nothing and shows immediately. **How to Apply:** - **Fix leading before you fix anything else.** Cramped lines make a competent typeface look cheap, and no amount of typeface shopping will rescue them. - **Margins and padding:** Give a block of text more room than feels necessary. Nobody has ever complained that a page breathed too much. - **Space between blocks should encode meaning.** If two paragraphs belong together, put them closer together than the ones that do not. Grouping by proximity does work that borders and boxes only pretend to do. ### Scale Scale in typography refers to the size relationship between different elements in your design, which helps create hierarchy and guide the reader through the content. **How to Apply:** - **Varying Sizes:** Use different scales for headings, subheadings, and body text to establish importance. For example, a title might be set at 48px, subheadings at 24px, and body text at 16px in a web design. - **Proportional Relationships:** Ensure that the size differences are proportional and not too extreme. For instance, in a business card, your name might be 14px, while your job title is 10px, creating a clear distinction without overwhelming the design. ### **Typeface Choice: Understand Fonts and Typefaces** Fonts and typefaces are fundamental elements of typography that set the tone for your design. **How to Apply:** - **Purpose and Tone:** Choose a typeface that aligns with the purpose of the text. For example, use a serif typeface like Times New Roman for formal documents to convey tradition and reliability. - **Audience Consideration:** As per the principles of typography you must consider who will be reading the text. For a children’s book, a playful, rounded typeface like Comic Sans might be appropriate, while a tech blog might benefit from a sleek sans-serif like Roboto. - **Medium:** Adapt the typeface to the medium, but for the right reason. Garamond suits print because it was cut for print and its fine strokes hold up at high resolution. A face with a generous x-height suits a phone because small sizes and inconsistent rendering punish anything delicate. That is an argument about resolution and stroke weight, not about serifs. #### **Pairing Fonts: A Perfect Match** The reliable move is a serif for headings against a sans-serif for body text, or the reverse. It works because the two faces are obviously different rather than nearly the same, and near-the-same is what makes a pairing look like an accident. Two typefaces is a design. Three is usually a compromise nobody wanted to argue about. Beyond that you are not pairing, you are collecting. **Examples of Good and Bad Pairings** ![Principles of Typography: Font Pairings](https://pixelstreet.in/blog/media/2024/08/Font-Pairing-300x251.png) - Good Pairing: A serif font for headings and a sans-serif font for body text can create a balanced and readable design. - Bad Pairing: Two decorative fonts used together can clash and make the text difficult to read. ### **Color: Adding Life to Text** ![Principles of Typography: Colors and Emotions](https://pixelstreet.in/blog/media/2024/08/Colors-and-their-Emotions-300x251.png) Color in typography adds emotion and emphasis to your design and can greatly influence readability. **How to Apply:** - **Color Palette:** Stick to a simple color palette to avoid distractions. For example, using a combination of black, white, and one accent color can create a clean and professional look. - **High Contrast:** Ensure that there is a high contrast between text and background. For example, dark blue text on a light gray background can be easy to read and visually pleasing. - **Psychological Impact:** Consider the psychological effects of color. For instance, using red for warnings or urgent notices can convey a sense of urgency, while green might be used to indicate success or go-ahead signals. ### Grids A grid is the structure everything else aligns to. It is what stops a layout from being a set of individually reasonable decisions that do not add up. **How to Apply:** - **Use Grids to Align Elements:** Align text blocks, images, and other elements to a grid to ensure a balanced and organized layout. For example, in a magazine layout, using a 3-column grid can help evenly distribute content and create a clean design. - **Maintain Consistency Across Pages:** Grids help maintain a consistent structure across multiple pages, such as in a multi-page brochure. This consistency makes the design look professional and polished. - **Create Visual Flow:** Use grids to create a visual flow, guiding the reader’s eye through the content. For example, placing key information along the grid lines ensures that it catches the reader’s attention first. ## **Get Better at Typography with These Pro Tips** These overlap deliberately with the principles above. They are the working shorthand, the version I would say out loud over someone's shoulder rather than explain. ### **Justify Left** Align text to the left rather than centring or justifying it. Every line then starts at the same edge, and you avoid the rivers of white space that full justification opens up in narrow columns. This is the rare rule of thumb a standards body has actually written down: WCAG 2.2 asks that text is not justified. ### **Use One Font** Stick to a single font for your designs. Mixing fonts can be tricky unless you’re sure they complement each other well. Master one font before experimenting with others. ### **Skip A Weight** When changing font weights, make noticeable jumps (like from light to bold). Small changes can be hard to spot, so go for more contrast to make important elements stand out. ### **Double Point Size** When changing point sizes, double or halve the size for different text elements. For instance, use 15 pt. for body text if your headline is 30 pt. This creates a clear hierarchy. ### **Align To One Axis** Keep your type aligned to a single grid line or axis, whether it’s vertical or horizontal. This consistency helps maintain a clean and organized layout. ### **Pick Any Font** Given the research above, the honest version of this tip is that a competently drawn typeface will not be your problem. Helvetica, Garamond and Futura have each survived decades of professional use. Pick one and spend the saved hours on hierarchy and spacing, which is where the damage actually happens. ### **Group By Using Rules** Use lines or shapes to group related information. This helps make the design look more organized and coherent. ### **Avoid The Corners** Don’t place elements right at the edges or corners unless it’s intentional. Allow for negative space to keep your design breathing and uncluttered. ### **Mind The Gap** Spacing is key. Avoid forced justification and pay attention to gaps, widows (single words on a line), and orphans (lines or words separated from their paragraph). Consistent spacing makes for cleaner text. ### **Be Bold or Italic, Never Regular** Use bold or italic styles to emphasize text rather than relying on regular weights. This adds variety and emphasis where needed. These rules will help you create clean, effective typography in your designs. ## **Bonus: 5 Best Typography Tools & Resources** ### **Adobe Fonts** [Adobe Fonts](https://fonts.adobe.com/) offers a vast library of high-quality typefaces that are fully integrated with Adobe Creative Cloud. It’s perfect for designers looking for a variety of fonts for print and digital projects. **USP:** Extensive Library & Seamless Integration ### **Google Fonts** Google Fonts provides a large collection of open-source fonts licensed for commercial use, which is why a large share of the web is set in them. Two web-specific notes, because this is where studios lose hours. First, loading. Google's own [web.dev guidance](https://web.dev/articles/font-best-practices) is that `font-display: optional` is the most performant option, holding the text render for no more than 100ms, and that `swap` is the choice if the web font matters more — with the caveat web.dev attaches to it, that you then have to deliver the file early enough not to cause a layout shift. Second, variable fonts. The popular claim is that one variable file always beats two static ones. Web.dev says the opposite by default: a variable font carries many styles, so it typically has a larger file size than an individual static font, and it only pays off if you are genuinely using several weights or widths. If your site uses regular and bold, ship two static files. **USP:** Free & Web-Optimized ### **Font Squirrel** [Font Squirrel](https://www.fontsquirrel.com/) curates a selection of free, high-quality fonts that are legally licensed for commercial use. It’s a go-to resource for designers needing premium fonts without the cost. **USP:** High-Quality Free Fonts ### **WhatFont** WhatFont, the browser extension by Chengyin Liu, names what a page is set in with one click and shows the styles applied to that text, without anyone having to open dev tools. Watch for imitators with near-identical names in the extension stores. I use it more for auditing our own live sites than for admiring anyone else's. **USP:** Easy Font Identification ### **Butterick's Practical Typography** Typekit Practice still shows up on lists of typography resources. Typekit stopped existing as a brand on 15 October 2018, when Adobe renamed it Adobe Fonts, and the Practice site is now frozen: navigation that says "Use Typekit" and articles that stop years ago. A resource list that still sends you there has not been reread in a long time. [Practical Typography](https://practicaltypography.com/) by Matthew Butterick is what I send junior designers instead. It is free to read, now in its second edition, reader-supported and ad-free since 2013, and it makes decisions rather than listing options, which is exactly what someone learning type needs. **USP:** Free, opinionated and actually maintained ## **Conclusion** If you take one thing from this, take this: stop optimising the typeface and start optimising the arrangement. Hierarchy, measure, line spacing and alignment are where the reading experience is won, and all four are free to fix. Typeface choice is a branding decision wearing a legibility costume. The second thing is a habit rather than a rule. Be suspicious of any typography advice that arrives without a name attached to it. The serif-versus-sans readability rule is the biggest one in circulation, but it is not the only one, and the test is always the same: ask who measured it, and go and read them. If you are applying this to a brand rather than a page, typography is most of what a wordmark is, so read it next to our [step-by-step logo design process](https://pixelstreet.in/blog/logo-design-process/) and the wider [branding process](https://pixelstreet.in/blog/complete-branding-process/). For the layout side, the companion piece on [white space in web design](https://pixelstreet.in/blog/white-space-in-web-design/) covers the spacing decisions this post only touches. And if the WCAG criteria above are what brought you here, they sit inside a much larger set of obligations we cover in our guide to [website accessibility compliance](https://pixelstreet.in/blog/website-accessibility-compliance/). At [Pixel Street](https://pixelstreet.in/web-design-company-kolkata) we design and build for brands including Coca-Cola, ITC and Marico, from a studio in Kolkata. If your type is doing less work than it should be, that is a fixable problem, and usually a cheap one. ## Sources - [Adobe / Font Squirrel / Google - vendor pages checked directly](https://fonts.adobe.com/) - [Adobe Typekit](https://practice.typekit.com/) — published 2013-06-19 - [Alex Poole (review conducted 2003 for MSc research; published on author's site)](https://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/) — published 2008-02-17 - [Arditi, A. & Cho, J., 'Serifs and font legibility', Vision Research 45(23), 2926-2933 (Elsevier)](https://doi.org/10.1016/j.visres.2005.06.013) — published 2005-11-01 - [Chrome Web Store / Chengyin Liu](https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm) — published 2024-03-04 - [Dyson, M.C. & Haselgrove, M., International Journal of Human-Computer Studies 54(4), 585-612 (Academic Press)](https://doi.org/10.1006/ijhc.2001.0458) — published 2001-04-01 - [Matthew Butterick](https://practicaltypography.com/) — published 2013-01-01 - [Robert Bringhurst, The Elements of Typographic Style (Hartley & Marks), section 2.1.2](https://www.inkwell.ie/typography/bringhurst.html) — published 1992-01-01 - [TechCrunch](https://techcrunch.com/2018/10/15/typekit-is-now-adobe-fonts-and-part-of-all-creative-cloud-plans/) — published 2018-10-15 - unattributed - no primary source located (quoted in full in the article) - [W3C, Web Content Accessibility Guidelines 2.2](https://www.w3.org/TR/WCAG22/#visual-presentation) — published 2024-12-12 - [web.dev (Google)](https://web.dev/articles/font-best-practices) — published 2021-03-17 --- Published by Pixel Street — https://pixelstreet.in/. Human view: https://pixelstreet.in/blog/top-10-principles-of-typography-in-design/ · Machine view: https://pixelstreet.in/blog/ai/top-10-principles-of-typography-in-design/