The only thing that matters is the data your audience is came for. Design, layouts, make-up and decorations are just your tools to highlight the value.
Imagine you have 30 secs to pitch your data. What would you say? What decision maker need to know? How would you present it? What would you highlight? What would you hide?
That's it. That's the only thing that matters. Delete the noise. Make your audience satisfied.
Actualy, the most effective way to solve your problem
If you find a bug or have a feature request
To discuss a proper way or provide some feedback
Typography forms the backbone of visual hierarchy in the system.
Through deliberate text treatment, content is organized into meaningful blocks and emphasis is placed where it matters most. This approach allows information to be structured and prioritized without excessive reliance on color or decorative elements.
The core principle governing typographic design can be summarized as:
These principles provide a framework for creating clear information hierarchies while maintaining visual restraint. When thoughtfully arranged according to the grid system and using proper spacing, typography naturally leads users through content—letting them focus on meaning rather than design.
There are tons of different standards and approaches to typography and fonts selection. This system sticks to the simplest one: Content is king.
There’s a solid write-up on this in 101
Fonts set the mood. They guide the eye. But they are not the star of the show.
People often ask: “What font should I use?” My answer is always the same — for what?
I’ve spent two decades setting type for longreads that stretched past 15,000 words, in five languages, and across six continents. I’ve watched heatmaps, eye-tracking, bounce rates — and let me say this: typography matters.
A lot. But...
Listen up: typography isn’t some optional flourish you slap on at the last minute. Pick the wrong font—say, Comic Sans for a longread about military conflict—and you don’t need to be a psychic to guess how that’s gonna end. End of story.
⚠️ Warning: If your layout depends on the user noticing the font before they notice the message, you’ve already failed.
Meanwhile, over at Bloomberg, serious and very busy gentlemen drop $2,000 a month on the ugliest UI in the world, a terminal that runs on nobody-cares-what-family-font. Nobody’s begging for cursive serifs or novelty grotesque.
They need speed and clarity, not your designer ego on parade.
Because the content is too valuable to ignore.
That’s your real UX.
A bad font doesn’t just look bad. It feels irrelevant.
If you want to talk about font rules, you’re already in the same boat as all that nonsense about cramming everything “important” into the first viewport. Or the usual garbage like “no more than seven items,” “never mix more than two fonts,” “beware of clashing colors.” Long story short — these are rules made up by clowns for courses aimed at other clowns.
Cut it out. If your content is solid, people will scroll whether it’s front‑loaded or not. People will read it across hundred viewports if it’s worth it. And those who try to dress up weak content with curly fonts and “10 essential shocking titles…” — those are the folks who’ve never read a book without a clickbait title.
Here’s the deal: good typography isn’t a trend—it’s a discipline. Want to make your interface addictive?
This is a guide:
People scroll — if they trust you. And trust isn’t built by flash. It’s built by interest, clarity, and rhythm. Good typography is invisible.
At the end of the day, content is king.
And typography is the throne.
In every type of content, importance is never obvious. Seek the important; highlight the interesting; everything else is noise.
Your job isn’t to impress or show off; it’s to serve the story. Get that right, and your readers won’t even notice the typeface—they’ll just keep reading.
* Bonus Tip: Every solution has a downside. Learn to think about harm, not just benefit. A flashy fix can backfire.
The style system employs flourish carefully selected typefaces, each serving a specific purpose in the information hierarchy:
assets/css/modules/typography/_fonts.scss
--primary-font: 'Fira Sans', sans-serif;
--heading-font: 'Playfair Display', serif;
--code-font: 'Cousine', monospace;
--script-font: 'Caveat', cursive;
|
Primary Font: Fira Sans |
Used for body text and general content. The sans-serif design creates a professional, business-like tone while its slightly playful terminal details add a touch of approachability. With a comprehensive range of weights from thin to extra bold, Fira Sans addresses all typographic needs within the main content. |
|
Heading Font: Playfair Display |
Reserved for headings and titles. Its elegant serifs and strong stroke contrast counterbalance the utilitarian nature of the body text, creating visual interest at key points in the content hierarchy without compromising readability. |
|
Tech Font: Cousine |
Employed for technical information, including code snippets, tables, and data visualizations. Its monospaced character width ensures secondary status in the information hierarchy while simultaneously conveying technical precision and formality. |
|
Script Font: Caveat |
Used for comments and annotations. This handwriting-style font creates a personal touch for notes, asides, and informal remarks that complement the main content. |
Text hierarchy creates instant visual structure. It guides users through information in order of importance, making content scannable at a glance.
The system builds hierarchy using three primary tools: size, weight, and color.
The principle is straightforward: more important information appears larger and darker. Secondary elements use lighter tones to visually recede.
The stronger the contrast between primary and secondary elements, the clearer your structure becomes. This deliberate difference in treatment creates natural reading paths without requiring conscious effort from users.
In every type of content, importance is never obvious. Seek the important; highlight the interesting; everything else is noise.
The stronger the contrast between primary and secondary elements, the clearer the structure.
Always separate semantic groups with whitespace or background shading—never rely solely on layout to imply relationships. This clear delineation helps users immediately understand how information is organized, reducing cognitive load and improving comprehension.
Remember that effective hierarchy isn't about making everything stand out—it's about creating meaningful visual relationships that guide attention where it matters most.