Your design skills are solid, but something makes your work look amateur. 90% of the time? It's typography.
- 2 fonts max — use weight, size, and spacing for variety instead of adding typefaces
- 4.5:1 contrast min. — #999 on white fails WCAG; #333 on white is your safe bet
- 1.5× size ratio between heading levels creates real hierarchy (not the 4px difference you're using now)
- Every mistake on this list is fixable in under 5 minutes once you know what to look for
- Most "bad design" isn't bad creativity — it's bad typography choices that scream inexperience
The good news: Every mistake on this list is fixable in under 5 minutes once you know what to look for. Most "bad design" isn't bad creativity — it's bad typography choices that scream inexperience.
This guide covers the 8 foundational mistakes that instantly signal amateur work, plus 3 advanced issues that separate good designers from great ones.
This guide assumes you know basic terminology. If you're just starting out, read our complete typography guide first to build your foundation.
Mistake #1: Using Too Many Fonts
The threshold: 2 fonts = clean, 3 fonts = risky, 4+ fonts = amateur hour.
I see this constantly with designers who just discovered Google Fonts. The excitement of having 1,400+ typefaces at your fingertips leads to the "I'll use them ALL" syndrome. Your business card shouldn't look like a ransom note.
The trap: You want to create visual variety, so you add another font. Then another for emphasis. Then a script font because it looks elegant. Suddenly your design has 6 typefaces competing for attention and zero hierarchy.
Here's what actually creates variety without adding fonts:
- Font weights: Use Regular, Semibold, and Bold from the same family
- Size differences: Scale your type dramatically (16px body, 48px headlines)
- Spacing adjustments: Letter-spacing and line-height create rhythm
- Color variation: Different shades of the same font add visual interest
The one exception: You can use 3 fonts if the third is a display font used ONLY for logos or rare accent moments. But it should appear sparingly — think 2–3 times maximum per design.
Strict rule: 2 font families maximum. One for headers (Lexend Deca, Montserrat, Poppins), one for body text (Inter, Open Sans, Source Sans Pro). Use different weights within each family to create hierarchy.
Delete fonts one by one from your design until it feels cleaner, not emptier. If removing a font makes the design worse, that font was actually doing work. If it makes no difference? It was clutter.
Need help choosing which fonts work together? Check out our font pairing guide with 50+ proven combinations.
Mistake #2: Poor Contrast (The Light Gray Epidemic)
Every designer goes through this phase: You discover that light gray text (#999999 or #CCCCCC) looks "sophisticated" and "minimal." So you use it everywhere.
Then real users try to read your design in daylight. Or on a cheap monitor. Or they're over 40 with normal age-related vision changes. And your "sophisticated" design becomes an illegible mess.
The math that matters:
| Color on White | Contrast Ratio | Result |
|---|---|---|
| #999999 | 2.8:1 | FAIL (needs 4.5:1 minimum) |
| #666666 | 5.7:1 | PASS |
| #333333 | 12.6:1 | EXCELLENT |
The "mobile in sunlight" test is brutal but honest: If you can't read your design while sitting outside at Starbucks, it fails. Aesthetic minimalism shouldn't sacrifice accessibility.
Test with WebAIM's contrast checker: Paste your hex codes and instantly see if you pass WCAG standards.
Body text minimum: 4.5:1 contrast ratio.
Large headings (18pt+): 3:1 contrast ratio minimum.
When in doubt, go darker. #333333 is almost always better than #999999. You can still create visual hierarchy without sacrificing readability — use size, weight, and spacing instead of fading text into oblivion.
Want the full breakdown on how contrast fits into typography hierarchy? We cover it there.
Mistake #3: Weak Hierarchy (Everything Looks the Same Size)
You set your H1 at 28px and your H2 at 24px. Technically they're different sizes, but your reader's brain registers them as "basically the same."
The problem: A 4px difference is too subtle. You need dramatic size variation to create clear visual hierarchy. Minimum ratio between heading levels should be 1.25×, but 1.5× is better for actual clarity.
Why designers resist this: Fear of being "too bold" or "too dramatic." But here's the truth — readers aren't analyzing your font sizes, they're scanning for information. Weak hierarchy forces them to read everything to find what matters. Strong hierarchy lets them skim efficiently.
Common offender: "Minimal" design blogs where everything is 14–16px. The result? Visual mush. Nothing stands out, so nothing gets read.
The squint test never lies: Squint at your design until it blurs. Can you still identify the most important elements? If everything looks like gray blocks of uniform size, you have a hierarchy problem.
Use a type scale calculator: Tools like TypeScale.com let you input your base size and ratio, then generate consistent sizes for all heading levels.
Recommended starting point (Perfect Fifth scale, 1.5× ratio):
| Element | Size |
|---|---|
| Body text | 16px |
| H4 | 24px |
| H3 | 36px |
| H2 | 54px |
| H1 | 81px |
Bold your headlines IN ADDITION to sizing them larger. Size + weight creates unmistakable hierarchy.
Test: Squint at your design. If the most important elements aren't immediately identifiable, increase the size difference. For the complete framework, see our typography hierarchy guide.
Mistake #4: Wrong Line Length (Full-Width Paragraphs)
You're designing on a 27" monitor with 1920px width. So you let your paragraphs span the full width of the screen. That's 120+ characters per line.
Your reader's eyes physically can't track that distance efficiently. They lose their place returning to the next line. Reading becomes exhausting.
The science: Eye-tracking studies consistently show readers struggle after 75 characters per line. The optimal range is 45–75 characters — enough to feel comfortable, not so much they get lost.
How to measure: Use your browser's inspector tool (F12), highlight a typical line of body text, and count the characters. If you're over 75, you have a problem.
Too short is also bad: Line lengths of 20–25 characters create choppy reading with constant line breaks. It feels fragmented and annoying.
Desktop: Cap line length at 75 characters (roughly 650–700px for 16px text). CSS solution: max-width: 650px; on your article content or text containers.
Mobile exception: 30–40 characters is fine on mobile because screen width naturally forces shorter lines. Don't try to hit 65 characters on a phone — it's impossible without microscopic text.
Reality test: Read your own content. If you lose your place mid-paragraph, your lines are too long. Never let paragraphs span full browser width on large screens.
Mistake #5: Insufficient Line Height (Text Cramped Together)
Default browser line-height is 1.2. That means if your text is 16px, there's only 3.2px of space between lines. Your text looks cramped, readers lose their place jumping between lines, and readability tanks.
Why designers do this: You're trying to fit more content "above the fold." But cramming more text onto the screen through reduced line-height is false economy — nobody reads text that's painful to look at.
The relationship between line length and line height: Longer lines need MORE line height (1.7–1.8) to stay readable. Shorter lines can use less (1.5) because the eye doesn't travel as far.
Headlines are different: They can be tighter (1.1–1.3 line-height) because they're short and meant to be punchy. A six-word headline doesn't need breathing room — a six-paragraph article does.
| Element | Line Height | When to Use |
|---|---|---|
| Body text (standard) | 1.5–1.6 | Lines under 70 characters |
| Body text (long lines) | 1.7–1.8 | Lines over 70 characters |
| Headlines | 1.1–1.3 | Short, punchy headings |
How to adjust:
- CSS:
line-height: 1.6;(unitless value scales with font size) - Figma: Select text layer → Design panel → Auto layout → Vertical spacing
- Canva: Select text box → Spacing → Line spacing slider
Test: If readers lose their place between lines, add more leading.
Mistake #6: All-Caps Overload (The Luxury Brand Trap)
All-caps text reduces reading speed by 10–15%. We read by recognizing word shapes — all-caps removes shape variation, forcing letter-by-letter reading.
- Buttons ("SUBSCRIBE NOW")
- Navigation labels ("ABOUT" / "CONTACT")
- Category tags ("TUTORIAL" / "CASE STUDY")
- Short headlines (3–5 words maximum)
- Paragraphs (exhausting to read)
- Sentences (slow and frustrating)
- Anything over one line (painful)
The "luxury brand" trap: Designers think all-caps looks elegant and sophisticated. High-end fashion brands use it constantly. But they're optimizing for brand image, not readability — and they can afford to sacrifice usability for aesthetic.
You probably can't.
Default to sentence case for all content. Reserve all-caps ONLY for buttons, navigation labels, and short eyebrow text (category names above headlines).
Never use all-caps for paragraphs or multi-line headlines. Ever.
If you need emphasis, use bold or color instead — both are more effective and don't destroy readability.
When you DO use all-caps: Add letter-spacing of +50 to +100 (CSS: letter-spacing: 0.05em;) to improve legibility. All-caps with default spacing feels cramped. More on when bold and caps work in our typography in branding guide.
Mistake #7: Display Fonts in Body Text
Display fonts at 48px+ are beautiful, eye-catching, and dramatic. Display fonts at 16px are illegible noise.
The problem: Those gorgeous decorative details that make a font stunning at large sizes turn into distracting visual clutter at small sizes. Thin strokes disappear on screens. Tight letter spacing becomes cramped. Poor x-height makes lowercase letters unreadable.
The "this font is so pretty I want to use it everywhere" trap: You find a stunning display typeface with elegant serifs or unique character shapes. It looks perfect at 60px. So you use it for body text too, and suddenly your content is painful to read.
Display fonts are designed for impact at large sizes. Body fonts are designed for extended reading at small sizes. These are opposite goals requiring different design decisions.
- Thin strokes disappear or blur on screens
- Decorative details become distracting noise
- Poor x-height (height of lowercase letters) makes text look microscopic
- Tight default spacing feels cramped and hard to scan
Display fonts: Headlines and logos ONLY (24px minimum size).
Body text gets workhorse fonts optimized for readability: Inter, Open Sans, Source Sans Pro, Lato, Roboto. Need help choosing? Our font pairing guide has 50+ proven combinations.
Checklist for body fonts:
- Does it have Regular + Bold weights? (Minimum requirement)
- Good x-height? (Lowercase letters shouldn't look tiny)
- Open counters? (Check if spaces in "e" and "a" are clear at small sizes)
If no to any of these = display font only.
Test: Set your "pretty" font at 16px in a paragraph. If you squint to read it, wrong choice. Body text should be invisible — readers should absorb content without noticing typography.
Mistake #8: Not Testing on Real Devices
Your typography looks perfect in your Figma mockup on your 27" iMac with Retina display. Then you check it on your friend's Samsung phone in bright sunlight and realize half your text is unreadable.
The reality: Typography in design software ≠ typography in real browsers on real devices.
Anti-aliasing differences: macOS renders fonts beautifully with subpixel smoothing. Windows renders them chunkier with ClearType. What looks elegant on your Mac might look clunky on your client's PC.
Font rendering engines vary: Safari, Chrome, and Firefox all render fonts differently. Even on the same device, your typography will look different across browsers.
Screen quality matters: Your 4K Retina display shows fonts with incredible clarity. A cheap 1080p TN panel from 2015 shows them blurry and jagged. If 30% of your audience is on budget monitors, you need to design for that reality.
Minimum test matrix:
| Device | Why It Matters |
|---|---|
| iPhone Safari | iOS renders fonts differently than Android |
| Android Chrome | Most common Android browser |
| Mac Safari/Chrome | Your design probably looks best here |
| Windows Chrome/Edge | Where reality sets in |
Test both Retina and non-Retina displays if possible. The difference is dramatic.
Check in different lighting conditions: dim room, bright sunlight, office fluorescents. Your gray text might work indoors but disappear in daylight.
Use BrowserStack or Lambda Test if you don't have access to physical devices. Emulators don't show true font rendering — you need real browsers on real operating systems.
Rule of thumb: If 20%+ of your audience can't read your typography properly, choose a different font or adjust your weights and sizes.
BONUS: Advanced Mistakes (After You've Fixed the Basics)
Once you've nailed the 8 foundational mistakes above, these advanced issues separate competent designers from masters. Most readers won't notice these problems — but other designers will.
Advanced Mistake #1: Poor Kerning in Headlines
The issue: Letter pairs like "WA," "To," "Ty," and "VA" have awkward gaps that scream "I didn't manually adjust this."
Why it matters: Kerning is invisible when done right, glaringly obvious when ignored. It's the typography equivalent of a typo in your portfolio.
The fix: Manually adjust kerning for any headline over 24px. In Figma/Illustrator, use optical kerning as a starting point, then fine-tune problem pairs by eye. For all-caps headlines, add +50 to +100 tracking globally, then adjust individual pairs.
Advanced Mistake #2: Orphans & Widows
The issue: A single word dangles on the last line of a paragraph (widow) or a single line appears at the top of a new column/page (orphan). Looks sloppy and unfinished.
Why it matters: It shows you didn't finalize your layout. Professional designers eliminate these before publishing.
The fix: For widows, adjust column width, add/remove a few words, or force a line break earlier. For orphans, adjust spacing or add content to pull more lines onto the new page. In InDesign, use non-breaking spaces (Shift+Cmd+Space) to keep phrases together.
Advanced Mistake #3: Wrong Font for the Context
The issue: Using a delicate thin font at 14px on mobile (invisible), or a decorative script for legal terms (unprofessional), or Comic Sans for... anything.
Why it matters: Font choice must serve both brand AND medium. A gorgeous thin serif that works in print at 12pt becomes illegible on a phone screen at 16px. Understanding typography psychology helps you match fonts to the right context every time.
The fix: Test fonts at actual size and context. Body text on mobile needs medium weight minimum. Luxury doesn't mean thin — it means appropriate. When in doubt, show your design to someone 6 feet away. If they can't read key information, wrong font.
Run through this before publishing any design:
The 8 Core Mistakes:
- Using 2 or fewer font families
- Contrast ratio 4.5:1+ for body, 3:1+ for headlines
- Clear hierarchy (1.5× ratio minimum between levels)
- Line length capped at 75 characters max
- Line height 1.5–1.8 for body text
- All-caps only for labels/buttons (never sentences)
- Display fonts in headlines only (24px+ minimum)
- Tested on iPhone, Android, Mac, Windows
Advanced Level:
- Manually kerned headlines (especially letter pairs)
- No orphans/widows in final layout
- Font appropriate for medium and context
Stop Making These Mistakes Today
These 8 mistakes separate amateur designs from professional work — and the 3 advanced mistakes take you even further.
The good news: They're all fixable in under 5 minutes once you know what to look for. Most "bad design" isn't bad creativity — it's bad typography. Fix these issues and your work instantly levels up.
- Run through the Quick Fix Checklist on your current project
- Bookmark this guide (you'll reference it constantly)
- Master the fundamentals with our complete typography guide
- Level up your typography in branding skills
Your typography should be invisible — readers should absorb your content without noticing the typography choices. These fixes get you there.
