Quick note from me
Typography in your portfolio does 2 things: it helps recruiters understand your work, and it shows you can design with intention. When fonts are hard to read or spacing feels off, hiring teams notice. They might not say it out loud, but messy typography makes them question your attention to detail.
Today, I've invited Weronika, a graphic designer who will break down 6 principles that'll help you get this right. Simple rules you can apply today to make your portfolio work harder for you. Here we go.
Story outline
Principle 01: Make your message clear
Principle 02: Choose the right font type for your project
Principle 03: Master spacing for better readability
Principle 04: Design for your audience and purpose
Principle 05: Keep it simple and readable
Principle 06: Learn the rules, then break them wisely
Principle 01
Make your message clear
Typography is how you arrange letters using size, font style, spacing, and layout. Good typography must be easy to read and look good. Even great fonts fail if used poorly.
Use typography strategically:
Different fonts create different feelings
Good combinations help users understand your message
Typography shares information and adds visual interest
Always choose options that are easy to read
In today's busy world where users decide in seconds whether to pay attention, good typography stops your work from getting lost and helps it stand out.
Principle 02
Choose the right font type for your project
Fonts are grouped by their features to help you pick the right one. The three main types are:
Serif fonts (like Garamond)
Have decorative lines on letter edges
Look elegant and classic
Work best for books, magazines, and printed materials
Sans-serif fonts (like Lato)
Clean and simple with no decorations
Easy to read on screens
Best for websites, captions, and digital content
Script fonts (like Kunstler)
Look like handwriting
Add personality but harder to read
Use for artistic or personal projects, not marketing
Match your font type to your project's needs and where people will see it.
Principle 03
Master spacing for better readability
Good spacing makes text easy to read. Here's what to control:
Tracking: space between all letters
Too tight: text looks cramped
Too loose: letters fall apart
Keep it balanced for smooth reading
Kerning: space between two specific letters
Adjust manually when letters look awkward together
Use it in headlines and large text where spacing shows most
Leading: space between lines
Too tight: text feels squashed
Too loose: text looks scattered
Best practice: set line spacing to 120-150% of your font size (example: 12pt font = 14-18pt line spacing)
Point size: the height of your letters
Stays consistent for all letters in the same font and size
Adjust these settings based on your project, but always prioritize readability.
Principle 04
Design for your audience and purpose
Match your typography to who will read it:
Older readers need clear fonts with larger sizes
General adults allow more creative choices
The right font creates atmosphere; the wrong one disrupts it
Build clear hierarchy by organizing text from most to least important:
What should readers remember?
What's the main message?
Show importance through size, weight (bold/regular), and placement
Principle 05
Keep it simple and readable
Limit yourself to two different fonts per project:
Too many fonts look messy
Make sure your two fonts are clearly different
Similar fonts suggest indecision
Check your contrast:
Text must stand out from the background
Use tools like Contrast Color Checker to verify readability
Principle 06
Learn the rules, then break them wisely
Master the basics before experimenting:
Breaking rules works when done intentionally
Know why a rule exists before ignoring it
Use proven tools and font libraries, but always check licenses first
⭐️ Guest spotlight
Weronika is a graphic designer and educator
Designer and educator with over 10 years of experience. Owner of a graphic design studio, blogger, and author of a Graphic Design Course. She passionately combines design, marketing, and new technologies. She supports other creatives in Poland in their career development through courses, training, and consultations.
🫶 Together with Framer
Create a free custom domain with Framer
A custom domain shouldn’t decide whether someone hires you. But in reality, some hiring teams do notice it.
And if you’re a freelance designer, it matters even more. You’re not just showing work, but building a business. Your online presence becomes part of how people assess trust and professionalism.
Framer just made this easier.
When you upgrade your site to a yearly plan, you now get a free custom domain for the first year. You choose the domain and Framer connects it automatically. No setup, no technical steps.
You’ll find it in Project Settings → Domains → Claim a free custom domain
Ready to build your portfolio on Framer? Start today
Want help with your UX portfolio? 🎁
Build your UX Portfolio with this course
Book a portfolio strategy call with me
Questions? Reply directly.
Keep designing ✨
Aneta
