If you are new to the world of WordPress and Web Fonts you may have wondered what serif and sans-serif fonts are all about. Don’t worry, the designer isn’t speaking a secret language – the difference between the two types of fonts is very easy to understand, and can make a huge difference if you know when and how to use them correctly.
To help you understand I will be using fonts from Google’s Web Font directory, aka, “a dream come true for designers and developers alike” (each font comes with customizable options as well as ready to use CSS).
Let’s start with the Serif font. Serifs are semi-structural details found on the endpoints in type. For example, a capital “I” will be rendered with 2 crossbars.
You will find serif fonts in a wide variety of printed work as it is easier to read. “Why”, you ask? Serifs make letters more distinctive and easier for our brains to process quickly. Serif fonts are used widely for lengthy text in printed books, newspapers and magazine. However, they do have their time and place when it comes to web design. I’ll touch on that a bit later.
Alternatively, a sans-serif font means “without serif”. Sans-serif fonts will not have the serifs at the end of the strokes. In print, sans-serif fonts are often used as titles and headlines rather than the body text. It is more common to find sans-serif fonts used for text displayed on screens. This is because lower resolution digital screens can have trouble displaying the intricate details of a serif font.
Still, as screen resolution increases so does the use of serif fonts in web design, which as a designer, I very much appreciate. The combination of the two can make for a beautiful juxtaposition in your design. Sometimes a simple font change can negate the need of a graphic entirely because the text alone is enough.
How many fonts should I be using in my design?
Too many fonts, and too many styles can really upset a design so try limiting yourself to around two fonts. Ideally, one sans-serif and one serif. I personally allow an exception of a third font if it is a “decorative” font – you’ve probably seen those twirly, hand-written, scratchy type fonts – those would be considered decorative. You should stick to using these very minimally and for things like titles and pull quotes – never body text.
Now the fun part, I’m going to share with you some of my favourite Google Font Combinations as well as the links so you can start playing with them in your own design.
Playfair & Lato
Merriweather & Source Sans Pro
Montserrat & Cormorant Garamond
Quicksand & Fauna One Regular
To conclude, I hope I have inspired you to start combining your own serif and sans-serif fonts with your new found type knowledge! Always remember this: the best font combinations allow the website content and message to be showcased in its fullest potential. Don’t overlook the importance of Typography in web design, and don’t be afraid to break some rules once you understand them!
