Great website fonts and typography will help you to engage the attention of your visitors by making your content clear, legible and aesthetically appealing.
The internet is primarily a text-based communication medium. Our online interactions rely heavily upon written content and carefully crafted words, and it is therefore very important to have fonts on your website that are clear, easy to read and beautiful. This is one of the most effective ways of engaging the attention of your visitors and converting drive-through traffic into sincerely interested readers. On the other hand, if your fonts are difficult to read, your visitors will find it harder to interact with your website and they may become frustrated and leave.
Your typography also has a strong effect upon the overall character and mood of your website, and needs to reflect your website’s personality and purpose. Even though visitors may not be consciously aware of these concepts, they have a significant impact upon the overall impression that your website generates for them. This in turn can make or break their emotional and intellectual connection to your website.
Typography advice from a leading designer
Leading website designer Rafal Tomal starts his visual design process by defining the type and font styles first. Rafal strongly believes that typography should influence the entire website style and advises us to ‘let typography be the foundation element of your design.’
Rafal explains that it can be very useful to find a visual element that you really like and then build the rest of the project around it. For him, the typography is the best place to start.
I start by creating simple styles with one or two headings and short paragraphs. Then, I try to include some other content elements like quotes, lists, links, etc. This gives me a quick brand style guideline that I can base the entire website design on.
After I save it, I start designing the website layout, whitespace, and color scheme for the same project. I keep my typography styles open all the time on another screen for reference. It helps me to keep a consistent-looking design and manage the balance.
The content is my main focus. Since I know what it’s going to look like, I have a better idea how to design the navigation, breadcrumbs, and widgets in the sidebar in order to keep it all well balanced.
It’s like building the engine first and then the body of the car. The content is the engine of most websites.
Please visit Rafal’s blog where he shares excellent and inspiring insights into his website design and typography thoughts, processes and techniques. One such gem is the post in which he shares 3 examples of CSS typography. These examples come fully documented with their CSS style sheets and live demonstrations.
Rafal also generously provides a beautiful and free web style guide template which very clearly shows how his design philosophy and approach to website typography works. Another remarkable post details the development of his typespiration website — a personal project “for all designers … where you’ll be able to find inspirational web font combinations along with ready-to-use CSS codes, color schemes and font families.”
Summing up
Website typography is a highly specialised discipline but one that even beginner website designers and bloggers can benefit from. Great design resources such as those provided by Rafal Tomal are freely available and can serve as valuable inspiration when determining the best combination of fonts to use on your website.
Even if you know nothing about coding and typography, an awareness and appreciation of font styles will really help you to select your next WordPress theme, or to discuss possibilities with your website designer.
Stop the press!
Check out this just in: Rafal Tomal’s latest post on how to design amazing hero banners.
Focus on typography and you can’t go wrong. Thanks for linking to my articles!
You’re welcome, Rafal — and thank you for the great inspiration. Typography is such a fascinating area and it’s great to have your resources available.