Fonts are beautiful and amazing and have the ability to communicate passion, feeling, and style. Choosing the right font families for your website is an important branding decision that impacts how potential customers will respond to your content.
The advent of Google Fonts gives you the choice of over 800 fonts to include in your website. Most premium WordPress themes allow you to select different Google fonts for menu navigation, headers, body text, and footer text. Looking to add some flair to your site? Plugins like Slider Revolution, used for animated banner graphics, allow you to add custom Google fonts that can dramatically increase the impact of your images.
There are numerous ways to categorize fonts. You’ll find names like Sans-Serif, Serif, Slab, Old English, Novelty, Script, Line, Glyph, Modern, and the list goes on. While descriptive, for many folks the number of categories can be overwhelming. We find it useful to categorize fonts into four high-level categories: Serif, San-Serif, Slab-Serif, and everything else is Novelty/Decorative.
Design Tips for Fonts
Legibility. An easy-to-read website is the most important consideration when choosing fonts and type sizes. Be sure to experiment, and don’t be afraid to go big. We at Luminys made a conscious decision to use really big, centered text on our home page and landing pages to communicate clearly and easily with first-time visitors.
Limit your font families. Restrict your page content to one or two font families, three at most. That would be for a header font and body text. You can also add a high-impact title font if you’ve broken your web pages into sections. We have seen clean, aesthetic websites designed effectively with a single font family.
Experiment with line height. In typography this is called leading, and in CSS it is called line-height. Adding line height can make a page feel more open and readable. You can even experiment with increasing line height and decreasing font size for improved legibility.
Experiment with character spacing. Crunch or expand the space between characters to make text pop, give a feeling of lightness or relaxation or confidence. In typography this is called kerning, and in CSS it is called letter-spacing.
Avoid all-caps. All caps is very difficult to read, so if you use it, use it with intent for short, high-impact, in-your-face captions. Remember, all-caps often reads like you’re yelling at somebody.
Font colors. Avoid pure black, which can make your text look pixelated, but feel free to experiment with various shades of light and dark gray for contrast between headers and text.
Ask yourself, how should people perceive you? As an expert? Or an Artist? An Entertainer? Are you heavy, light, efficient, formal, informal? As you come up with adjectives to describe yourself, you will narrow your search for the right fonts.
Sans Serif fonts – These fonts are clean, minimalist, and usually have more white than ink. Fonts like Ariel, Helvetica, Open Sans, Source Sans, PT Sans are great for communicating knowledge, expertise, authority, confidence. Use these fonts for technical information or explanation.
Serif fonts – You see serif fonts frequently in news print, magazines, novels, and book publishing. These fonts are great for blog-oriented websites, fashion, and display graphics. They tend to have more fill, or color, and may appear to be heavier on the page.
Slab fonts – Slab fonts are like hard-edged serif fonts. These can frequently complement a sans-serif text without the stronger contrast of going with a serifed font. We see these used in navigation and image titles.
Specialty/novelty fonts – These fonts are all over the map. Western, mid-century, retro, vintage, script, handwriting, calligraphy, holiday, the sky is the limit. These fonts don’t work well for body or header text, but are great to add character to images or sliders.
Like fine wine and chocolate, font pairings can really make a website. For a clean, minimalist, aesthetic look, this website was designed with Open Sans for text and PT Sans for headers. Be sure to explore various combinations: sans header/serif body; sans header/sans body; and serif header/sans body. Your industry and your design goals will help guide you.
A couple of helpful websites that focus on font pairings: