Typography in Web Design: 10 Core Principles

1. What is typography in web design and why does it matter?

Have you ever left a website because the text was too small, hard to read, or visually tiring? That’s the power of typography in web design. Typography is the art and technique of arranging type (fonts, sizes, spacing, hierarchy) so content looks good, reads easily, and converts well. For SMEs, typography directly impacts UX, SEO and conversion rate.

In fact, research by NN/g shows users typically read only about 20–28% of on-page content. If the text is hard to read, you lose visitors within seconds. Also, heavy text rendering or slow-loading webfonts can affect Core Web Vitals (LCP, CLS), indirectly impacting SEO rankings. Investing in typography is one of the fastest ways to improve experience and website ROI.

This article offers an A–Z guide: concepts, principles, choosing fonts for Vietnamese, building a responsive type scale, optimizing webfont performance, plus an implementation workflow tailored to Vietnamese SMEs.

2. Core components of web typography

To master typography in web design, get a firm handle on the following:

2.1 Font-family and classification

- Serif: With serifs; good for long-form reading; trustworthy (e.g., Merriweather).
- Sans-serif: No serifs; modern; highly legible on screens (Inter, Roboto, Noto Sans, Be Vietnam Pro).
- Display: Decorative; for standout headings; avoid for body text.
- Monospace: Fixed character width; for code and data.

2.2 Font size and line height

- Body font size should be 16–18px on desktop.
- Suggested line-height: 1.4–1.8 depending on the font.
- Optimal line length: 45–75 characters/line to reduce eye strain.

2.3 Letter-spacing/tracking and kerning

- Don’t increase letter-spacing for Vietnamese body text unless the font is too tight.
- For ALL CAPS, increase slightly by 0.5–1px for readability.
- Kerning: stick with the font’s default; avoid heavy manual tweaks.

2.4 Typographic hierarchy

- Define clear, consistent H1–H6 levels.
- Use color, size, weight, and spacing to guide the eye.
- Avoid more than 3 font families per website.

Insight: Standardizing these foundations helps content, design, and dev teams stay aligned and reduce errors as the site scales.

3. How to choose Vietnamese fonts for SME websites

Good fonts underpin your entire digital identity. For Vietnamese SMEs, prioritize the following:

3.1 Full Vietnamese support

- Check diacritics: ă, â, ê, ô, ơ, ư, đ and tone marks (grave, acute, hook above, tilde, dot below) must render clearly and readably.
- Free fonts with solid Vietnamese support: Be Vietnam Pro, Inter, Noto Sans, Roboto, Merriweather.

3.2 Brand personality and context

- Tech brands: modern sans-serifs (Inter, Be Vietnam Pro).
- Education/long-form reading: friendly serifs (Merriweather).
- F&B/lifestyle: consider display faces for headings but use sparingly.

3.3 Safe font pairing

- Sans-serif for headings + serif for body (or vice versa) to create contrast.
- Example: Inter Bold for headings + Merriweather Regular for body.
- Keep to 2 font families ideally; max 3 to avoid bloat.

3.4 Licensing and performance

- Respect licenses. Avoid cracked fonts (often labeled “SVN ...”).
- Prefer variable fonts to pack multiple weights into one file, reducing requests.
- Use WOFF2 for ~30% smaller files than WOFF (per web.dev).

Takeaway: Choose a robust, readable font set that works across devices and supports Vietnamese before thinking about “decoration.”

4. Building a typography system: scale, grid, and responsive

Don’t size text by gut feel. Create a consistent type scale to ensure uniformity.

4.1 Modular scale

- Pick a base size (e.g., 16px) and a ratio (1.125; 1.2; 1.25).
- Example with 1.2: 16 → 19.2 → 23 → 27.6 → 33.1px for H6 → H1.
- Store the scale in your design system.

4.2 Responsive & fluid type

- Use clamp() so text scales with the viewport:
font-size: clamp(1rem, 2.5vw + 0.5rem, 1.25rem);
- Avoid pure vw for body text as it can be too small on mobile.
- Use rem to respect accessibility settings.

4.3 Baseline grid and spacing

- Establish a 4px/8px baseline for spacing, line-height, and margins.
- Keep pre/post-heading spacing consistent to create reading rhythm.

Insight: A clear typography system lets the content team build landing pages faster and more consistently, accelerating publishing.

5. Quick comparison: Serif vs Sans vs Display vs Mono

Note: Prioritize legibility first, effects later. Good typography is something you “barely notice” because it makes the experience feel natural.

6. How typography affects SEO, UX, and conversions

Typography shapes reading behavior and page performance, indirectly influencing SEO and conversion rates.

6.1 SEO & Core Web Vitals

- Heavy webfonts slow LCP. Use preload, WOFF2, and font-display: swap to reduce FOIT.
- Keep CLS low: avoid changing text sizes after fonts load.

6.2 UX & accessibility

- Color contrast: at least 4.5:1 for body text (WCAG AA).
- Friendly text size: minimum 16px; avoid long ALL CAPS sections.
- Airy line-height helps increase time on page.

6.3 Conversions

- Clear headings + short paragraphs + prominent CTAs improve scroll depth and clicks.
- A/B tests: increasing body size from 14px → 16px often boosts completion rates and internal CTR.

Related: A holistic SEO and Content Marketing strategy will amplify typography’s impact on conversions.

7. Technical checklist for webfont optimization (performance + quality)

Use this checklist to keep pages fast, text crisp, and SEO-friendly:

• Prioritize WOFF2; fall back to WOFF if needed.

• Subset Vietnamese characters: embed only what you use to cut file size.

• Preconnect to fonts.gstatic.com if using Google Fonts.

• Preload critical fonts (headings) with as="font" type="font/woff2" crossorigin.

• Set font-display: swap to avoid invisible text.

• Configure a robust fallback stack: font-family: "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

• Consider Variable Fonts to consolidate weights and reduce requests.

• Avoid icon fonts; prefer SVG for sharpness and light weight.

• Don’t overuse weights; 400/600/700 fit most projects.

Code snippet preload: <link rel="preload" href="/fonts/Inter-Variable.woff2" as="font" type="font/woff2" crossorigin>

Insight: Webfont optimization can trim hundreds of KB, improve LCP, and keep layouts stable, strengthening SEO.

8. Vietnam case study (illustrative) and lessons learned

Here’s an illustrative case study aligned with real SME projects in Vietnam to show typography’s impact:

Hanoi F&B: A weekend promo landing page initially used 3 font families and 6 weights, 14px body text, and low contrast. After an audit:

• Reduced to 2 families (Inter + Merriweather), 3 weights (400/600/700).

• Increased body to 16px, line-height 1.6, contrast reached AA 4.5:1.

• Applied font-display: swap, preloaded headings, subset Vietnamese.

Results (over 4 weeks): time on page up ~18%; primary CTA CTR up ~12%; font payload size down ~40% vs. before.

Note: The figures are illustrative, based on common typography and web performance best practices (web.dev notes WOFF2 can reduce size by ~30%). Actual results vary by industry, content, and traffic. Still, the core rule holds: fewer fonts, higher contrast, clearer rules → easier reading and better conversions.

9. Implementation process for SME web typography

Use this roadmap with your in-house team or agency:

9.1 Audit current state

- Check number of families, weights, file sizes, LCP/CLS, contrast, text sizes.
- Measure: bounce rate, time on page, internal CTR.

9.2 Define goals and brand personality

- Document brand voice: trustworthy, friendly, or energetic.
- Prioritize: long-form readability or high-impact landing pages.

9.3 Design the system

- Choose 2 font families with strong Vietnamese support.
- Define type scale, line-height, and spacing via a baseline grid.
- Standardize H1–H6, body, captions, buttons/CTAs, forms.

9.4 Technical implementation

- Subset + WOFF2 + preload + font-display: swap.
- Use clamp() for responsive typography.

9.5 Testing and optimization

- A/B test body size 16 vs 18px; heading spacing; CTA contrast.
- Track SEO/UX: LCP, CLS, completion rate, CTR.

See the broader website design process to align typography with UI/UX and SEO.

10. Tools, libraries, and suggested fonts

• Google Fonts: free library with CDN hosting.

• Fontsource: self-host webfonts via npm/yarn with better cache control.

• TypeScale (type-scale.com): generate type scales quickly.

• Modularscale (modularscale.com): calculate modular scales by ratio.

• Webfont Loader: control font loading and FOUT/FOIT.

• Font Squirrel: subset generator and webfont formatter.

Recommended fonts with Vietnamese support: Inter, Be Vietnam Pro, Noto Sans, Roboto, Merriweather, Mulish. For characterful brands, consider a licensed display font for H1.

Tip: Always test Vietnamese diacritics rendering on older Windows and Android.

11. Common typography mistakes and how to fix them

• Too many families/weights → Heavy, messy: Reduce to 2 families, 3 core weights.

• Body at 14px with tight line-height → Hard to read: Raise to 16–18px, line-height 1.5–1.7.

• Poor contrast (light gray on white) → Eye strain: Ensure AA 4.5:1.

• Using icon fonts → Blurry/layout shifts: Use SVG symbols/sprites.

• No font-display → FOIT: Add font-display: swap.

• No fallback → Breakage when CDN fails: Add a safe system stack.

• Inconsistent heading spacing → Choppy rhythm: Bind to the baseline grid.

Insight: 80% of issues come from a few recurring mistakes. Check this list before fine-tuning details.

12. Summary and recommended actions

Summary: Typography in web design underpins experience and conversions. Choose fonts with Vietnamese support, build a clear type scale, optimize webfonts, ensure contrast, and keep consistency. This improves readability while supporting SEO and ROI.

Act now:

• 1) Audit current typography (fonts, weights, sizes, contrast, LCP/CLS).

• 2) Standardize H1–H6, body, CTA, and form styles using a modular scale.

• 3) Optimize WOFF2 + subset + preload + font-display.

• 4) A/B test body and CTA sizes to boost CTR and conversion rate.

If you need an implementation process aligned with Digital Marketing and SEO strategy, contact Hoàng Trung Digital. We help SMEs get typography right from the start so your website looks great, loads fast, and converts.