If used right, typeface combinations will be a powerful tool to add more style to your web page. Good choice of typefaces will make reading your page easy and peasant. Choosing the perfect combination is finally not that hard, just the matter of experience, exploration, and a good taste.
There is a huge variety of components you should consider, while creating a design of a web page. One of them is web typography. It is one of the most important parts that form the style and attraction of your web page.
Using different typefaces (font families) or (and) combinations of several fonts of one typeface can be very helpful for making a compelling content. It makes your content more structured and distinct. You mark the headers, sub-headers, visually separating them from the main text. It keeps the text’s hierarchy distinct. Using different typefaces is a good way to get the required contrast.
You also highlight the words and phrases, which you want your reader to focus on. This makes the text more readable. And text readability cannot be overestimated. The reader must find your information not only useful and interesting, but also pleasant and easy to read.
Different typefaces can create a definite mood for the whole page or for some specific information. This can be business appearance or casual and playful atmosphere. All in all this is your style!
What can go wrong?
A lame combination of typefaces, fonts and styles can be harmful. Extremely dissimilar combinations will simply push the visitors away. Combination of text sizes and colors must be picked very carefully, because at some extent the impression of your page will be “silly” instead of “cool”. So if the visitors find it unpleasant to perceive the information on your page, most likely they will not continue. They may go on, if you serve them with the most interesting and useful information, but with acid looks. (At least that’s what I would do).
Decisions, decisions…
Choosing the right typeface combination is always a hard choice. There are no strict rules, saying what exact combinations can be used successfully. You can only find some tips from experienced typewriters. Together with your own feelings, you can see what will look neat, what can be applied with caution, and what must be buried in oblivion like the scariest nightmare.
There are thousands of typefaces now, and lots of new ones are being developed at this very moment. This gives numerous combinations and that’s your opportunity. Finding the proper one is a matter of good taste, experience and trial-and-error. So in general it is more of art than craft.
Do not hesitate to explore
Naturally you can use the same or similar combinations that you find in lots of top-grade web pages and make your own impression of the effect as well as the reason for it. Also by browsing through the existing web typography examples, you can learn what combinations should rather be avoided.
Now it’s time for some examples
The whole design of Loudnioses is made in a sketchy style. All the text looks like handwritten with a chalk on a whiteboard or with a color pencil on a paper. It was made using an interesting font “Coming Soon”. The headers are larger and have different color. This gives an easy mood and the atmosphere of a holiday, being much different from a majority of other similar companies’ pages. This page has attracted my attention at once. But you cannot call this design childish, just unusual in a good way. But when they come to “What we did” lists, for example, the font changes to a bit more serious “Gudea”, suggesting a more business approach. These two fonts combine in a quite balanced way.
Looks very stylish. Nothing excessive. Only sans-serif fonts are used. The letters in the logo and menus are very slim thanks to “YanoneKaffeesatzRegular”, the same slim as the mountains at the background and at the logo. Nice move. Main text by “Lucida Sans” is distinctively separated by headers with the same “YanoneKaffeesatzRegular”. Soft color set also contributes much into this design.
The main idea of the web page written in large “Omnes-Pro” font can be found too bulky. But imagine the same page on a tablet or a smartphone. It will perfectly fit there and look very natural. The whole page is made using the same font. This is a good illustration of using only different font scales and sometimes color to make a good distinctive view.
A classical example of combining of serif typeface for main text and sans serif for header can be seen here. The size of a header in ‘Brandon Grot W01 Bold’ font is at the edge after which it will be considered too big comparing with the main text. But since it does not have a huge weight despite its size, it makes a very good contrast and gives a strict mood to the page. The main text is classic and common “Times New Roman”, serif font.
Here we find a combination of “Copse” font and “Homemade Apple” for parts styled as handwritten. “Homemade apple” creates the atmosphere of some mysterious message, an unexpected invitation letter. Perfect for horror films festival. However sans “Copse” font in my opinion does not fit well for this page. I would like to see some sans-serif font with less corners instead, which slightly resembles handwriting as well, but still remains well readable.
Wootten uses a combination of sans-serif “Geogrotesque-SemiBold” for headers and monospace serif font for main text. This text can be considered as too small and not quite readable and as for me resembles the automatic bot e-mail replies. But I like the charm of using the same small monospace font for menu buttons. There is something in it.
“Ostrich sans black” looks quite common while “Ostrich Sans Bold” in the next line attracts one’s attention, marking one single word. Further the “Nimbus-Sans-Condensed” font is used. The contrast is created by the text size and upper case letters. The page creates a vintage atmosphere. Besides it is a great example of ascetic design. And of course the robot in top left corner under assembly while scrolling page is very cool.
An enhancing 8-bit design for the top of the page. “Futura” font has a very common look and supports the mood, set by the page. And even the vintage “Yellowtail” cursive is yet within the 8-bit theme, obviously appearing to consist of pixels. It makes both a contrast and harmonic continuance. What it maybe misses is a text, appearing letter by letter in a comics-style balloon with blinking underscore at its end.
Fonts used here are “Proxima Nova”, “League Gothic” and “Helvetica”. As you can see this is an excellent example of serif and sans serif fonts match. Commonly used combination of sans serif for headers and serif for main text. And all together it looks like an old-fashioned poster. Also the mood is set by background and text colors. What I think is not very fancy is that the links at the bottom of the page are too masked. It is too unobvious that you can click those links.
A combination of several fonts is used here. “Aurea Ultra”, “Helvetica”, and “Franklin Gothic”. Obviously “Aurea Ultra” attracts the most attention by its shape and notable color. As for me it resembles the old school movies or cartoons. Pay attention to the main text color in “Helvetica”. It makes a very slight contrast with the background and may be considered quite pale. But in the complete concept of a web page this solution looks very in place.
Useful tips for choosing typeface combinations
- Apply typeface combinations to add contrast. Do not use very similar fonts close to one another. It will only make confusion
- Always ask yourself, maybe it is too much of contrast? Do I need THAT much?
- Sans serif for headers and Serif for body is a classic decision
- Try to keep it simple. Do not use more than two typefaces at a time
- Make the typeface serve for your style and mood. Keep an eye that it does not discord with the rest of the page. Unless you do it consciously as a special trick to pay one’s attention
- Explore the web designs for typeface combinations. You will find a lot of good examples
- Do not hesitate to show your font choice to other people. Opinion from outside can be very valuable in this case
- Remember that you can use not only font combinations, but scale, style, colors or textures with the same font
- Feel free to experiment and find new enchanting combinations
Combining fonts is always an open field for your imagination and invention. I would appreciate if you shared good examples of typeface combinations that you found in comments. As well as your own ideas about this.
Enjoy!
