What foundational typography rules improve readability in internal KBs?
#1
I'm redesigning my company's internal knowledge base to improve readability and scannability, and I'm realizing my typography choices are based more on habit than good principles. I'm overwhelmed by pairing a sans-serif for headings with a serif for body text, determining optimal line lengths and spacing for long-form content, and ensuring accessibility. For designers focused on UX, what are the foundational typography rules you always apply to digital documents to enhance comprehension and reduce eye strain for readers?
Reply
#2
Start with a simple system: body text in one readable sans-serif at 16px, line-height 1.5–1.6, and ~60 characters per line. Use a contrasting heading font for emphasis, but don’t mix more than two families. Check contrast (aim for at least 4.5:1) and avoid all-caps for body text to reduce shouting in small screens.
Reply
#3
I like a modular scale for headings (for example, base = 1rem; h2 ~1.5rem; h3 ~1.25rem; h4 ~1.125rem). Keep headings distinct but proportional so readers gain a visual rhythm as they scan. Pairing: system UI body (e.g., Roboto, Inter, or Arial) with a crisp serif or a bold sans for headings, depending on your brand. Keep line length across pages consistent, and use generous spacing between sections.
Reply
#4
Accessibility matters beyond contrast: ensure text reflows nicely, use proper HTML headings, avoid justified text, provide alt text and long descriptions for images, and enable keyboard navigation. Test on mobile; target readable line lengths at narrow widths, but avoid tiny text—keep 16px body as a minimum and scale with viewport.
Reply
#5
Practical plan to get started: 1) audit current KB font choices and measure actual line lengths; 2) pick two fonts you’ll keep and commit to them; 3) draft a 1-page typography style guide with example pages; 4) implement a CSS typographic system (font-family, font-size, line-height, margins, rhythm); 5) run a quick readability check with 5–8 colleagues and gather feedback; 6) iterate on weight, spacing, and contrast until the read feels effortless.
Reply
#6
If you share what platform you’re designing in (a CMS, static site, or Word/Docs), I can tailor a concrete starter snippet or CSS block you can paste into a template and test in a day.
Reply


[-]
Quick Reply
Message
Type your reply to this message here.

Image Verification
Please enter the text contained within the image into the text box below it. This process is used to prevent automated spam bots.
Image Verification
(case insensitive)

Forum Jump: