The Entrepreneur’s Guide to Design
Design Effective Typography
Ever picked up a book and found it hard to read because of the tiny, cramped type? That's the power of typography. It can make your content inviting or off-putting, clear or confusing. But don't worry, you don't need to be a typography guru to get it right on your website.
1. Why Typography Matters
Typography is the art of arranging type. It's how we present words. A well-chosen font can help convey your brand's personality and ensure your message is clear and readable. So, whether you want to appear professional, friendly, or artistic, the right type can help you make that impression.
Quick Win: Think about your brand's personality. Choose a font that aligns with that. If you're a law firm, a professional-looking serif font might be right. If you're a creative agency, a modern sans-serif could be perfect.
2. Readability is Key
The primary goal of your text is to be readable. You want a font size that's easy on the eyes. A common recommendation for body text is 16 pixels. The space between lines, also known as line-height, should also be generous enough to prevent text from feeling cramped.
Quick Win: Check your website's body text. Is it at least 14 - 16 pixels? Also, consider modifying the line height of your text. This is my rule of thumb: I keep my headlines around 120 - 140% and paragraph text anywhere from 140% - 170% in line height.
3. Contrast and Colors
The color of your text can affect readability too. There should be a good contrast between your text color and background color to ensure easy reading. Remember, your text is there to be read, not just to look nice!
Quick Win: Use an online tool like the WebAIM Color Contrast Checker to make sure your text and background colors have good contrast. Contrast is a good color contrast checker for Figma.
4. Pairing Fonts
Mixing fonts can be a fun way to add visual interest, but too many different fonts can create a chaotic look. A good rule of thumb is to stick to 2-3 fonts: one for headings, one for body text, and maybe one for special highlights. Pairing fonts can get complicated, so check out Typewolf.com for an array of font pairing inspiration.
Quick Win: Review your website. Are you using more than three different fonts? If yes, consider simplifying. Overall, I suggest sticking to just one font.
5. Hierarchy: Guide the Reader's Eye
In any given content piece, not all text is equally important. Typography can help you create a visual hierarchy that guides the reader's eye to the most important elements. Bigger, bolder fonts for headlines; smaller, lighter ones for body text and captions. This can help guide your visitors through your content, making it more engaging.
Quick Win: Look at your website's content. Does the typography guide your visitors to the most important points? If not, think about how you can use size and weight to create a better hierarchy.
Typography might seem like a small detail, but it can significantly impact your website's effectiveness. Now, you can see that it doesn't have to be intimidating. With these quick wins, you can start making your content more readable and appealing today. And remember, the goal is not just to make it look good, but to make it work great!
Design Resources For You
There are a lot of great resources out there to get you started. Many of them are free: here are some resources that can help you find some great fonts.
Google Fonts has hundreds of fonts you can use for free.
Google created a very helpful font pairing resource for Figma.
Fontshare is another great resource with high quality fonts you can use for free.
A good intro to typography resource on Figma
If you pick up a passion for typography and you want to learn more, check out this video.
The 7 Design Principles
-
Design Great CTAs
Design CTAs that convert.
-
Design Effective Typography
Get tangible tips for improving your product’s typography.
-
Use Color with Intent
Color can help introduce your brand, show your personality, and help with conversions.
-
Make Navigation Intuitive
Make it easy for your customers to find what they are looking for.
-
Create Pixel-Perfect Layouts
Build layouts that not only look great but work better for your users.
-
Make the Most of Social Proof
Word of mouth is everything: leverage it.
-
Start with the customer experience first, and work backwards from there
Set your customer experience as your Northstar.