Designing a beautiful layout is not just about choosing the right color/style or picking the most fitting image format. It’s also about choosing fonts that work well for your website’s topic (and are readable to users’ eyes).
To elaborate more about the important role of fonts in web design, I’m beginning a series on fonts this week, tackling the chief issue I have with modern fancy fonts: legibility. What’s the use of using a pretty or nifty font if no one can read what it says, after all?
Why Focus on Legibility?
- A site’s logo should be easily read and understood
- Content and navigation should be easily distinguished
- Headings and subheadings should be emphasized, but not overdone
If we want users to stay on our sites and enjoy the text content we’ve written, we need to make it easy to read our sites. Thus, legible fancy fonts, fonts that are decorative and yet still readable, should be at the top of our design list.
Where ARE Some Fancy Legible Fonts?
After doing a thorough search on my favorite font resource, DaFont.com, I found five fonts each in several fancier categories that meet my criteria for legibility, which is the following:
- Each letter is distinguishable from others
- Not too thick
- Not completely obscured by flourishes
Each font has been previewed using the text “crooked glasses” in lowercase letters, set to “medium” size. Some previews have had to be shrunk to fit in the content space.
Cartoony Fonts
Groovy Fonts
Finesse (has been shrunk slightly to fit)
Curly Fonts
Daisy Mae (has been shrunk slightly to fit)
Barely-There Fonts
White Tie Affair (has been shrunk slightly to fit)
Seraphim (has been shrunk slightly to fit)
Retro Fonts
Odalisque (has been shrunk slightly to fit)
Stripes Caps (has been shrunk to fit)
Odd Fonts
Ground Round (has been shrunk to fit)
What beautiful fonts you chose! Very nice, I’ve download a number, lol. Jinx, White Tie Affair, Stripes Caps…nice!
Useful fonts, thank you! I will add some of these to my collection of fonts used in the 80s:
http://www.psd-dude.com/tutorials/resources/80s-font.aspx