Flutter Kanpur
When I started working on the Flutter Kanpur website, I had a very simple understanding of typography.
For me, typography meant just two things:
Increase the font size if it looks small.
Make it bold if it's a heading.
That was it.
Whenever I needed a title, I would write something like:
font-size: 48px;
font-weight: 700;
If I needed another heading, I would again write:
font-size: 24px;
font-weight: 700;
For buttons:
font-size: 16px;
font-weight: 500;
It worked.
The UI looked fine.
So I never questioned it.
Then I Opened the Figma Design...
While implementing the Flutter Kanpur website, I noticed something interesting.
The designers weren't using random font sizes.
Instead, they had a complete Typography System.
There were predefined styles like:
Display (H1)
Display (H2)
Display (H3)
Heading 1
Heading 2
Label 1
Label 2
Paragraph 1
Paragraph 2
Each one had its own font size, weight, and purpose.
At first, I thought,
"Why not just write the CSS directly?"
But the more I worked on the project, the more I realized why design systems exist.
The Problem With Hardcoding
Imagine you're building a website with 50 or even 100 pages.
On every page, you write:
fontSize: "48px"
Tomorrow, the designer says:
"We want every section title to be 52px instead of 48px."
Now imagine changing that in hundreds of places.
That isn't just time-consuming.
It's also easy to miss a few components, making the UI inconsistent.
That's when I understood something important.
Professional projects don't style text directly.
They create reusable design tokens.
My First Typography Utility
Instead of hardcoding font sizes everywhere, I created a dedicated typography utility.
export const typography = {
display1: {
fontSize: "60px",
fontWeight: 700,
}, ...............
Now, instead of remembering font sizes, I only need to remember meaningful names.
typography.display1
is much easier to understand than
fontSize: "60px"
The Biggest Mindset Shift
Earlier, I used to think:
Typography is about making text look good.
Now I think:
Typography is about creating consistency.
Every developer on the team follows the same rules.
Every page looks consistent.
Every future change becomes easier.
One update.
Entire application updated.
What I Learned
This small implementation taught me something much bigger than typography.
I learned that scalable frontend development isn't about writing more CSS.
It's about creating systems that make development easier for everyone on the team.
Typography was my first step toward understanding Design Systems, and honestly, it completely changed how I look at frontend architecture.
Typography isn't just about text. It's about creating a language that keeps an entire product consistent.