Typography in Web Design: A Guide for All Designers
Article by Mat Desjardins
Typography was not an easy thing to incorporate in a website back in the days says pretty much every Graphic Designer with a decent amount of experience in web design.
Luckily, that's a lot different these days! Web designers are using more and more fonts in websites. So much that it is starting to replace hero images and videos as the main way to captivate the user's attention quickly. Getting content to the user efficiently has become paramount in a world where mobile devices is the main means of getting information.
A unique well-made type in a great setting can do a lot for a brand. Obviously we are big advocates of this approach, but even more so, we believe it is a design trend that is bound to last. It may seem new-ish to web design, being a fairly young media but design using mainly type as been around for ages. Ancient Rome and Greece were using type for signage and communication everywhere, it is only natural as web design matures that it tends to shift towards these established paradigms.
Type is your New Hero
Big and bold text as the main design element of your site or app can give a lot of personality and is definitely a great way to communicate your brand’s Tone & Voice. Used in a proper layout or in a creative way, type can be as strong if not stronger than an image or a video, establishing concept and content at the same time. Use bold types for titles, mix romans with italics or sans serifs with serifs in a same text to create interesting design elements to captivate the user.
Here is a few examples we picked up:
Layout, Layout, Layout
There are a couple of trends going on right now concerning type layouts. You can go with extreme layouts which might fall under the brutalism category (which we particularly like) but most of the time a clean layout matched with a clean typeface will go a long way. A decluttered and simple interface using mostly type will make things much easier for the user to achieve his goal on your website or app. Make sure you leave plenty of breathing room for your text — Play with line height, letter spacing, size and contrast to achieve the best possible overall feeling for the user.
Here are a few examples of layouts we really like, from brutal to minimal:
Trending Styles
Type in the interactive world has been through a lot of different trends from pixel fonts to grotesque to monospace fonts and, like the fashion industry, these trends come and go over the years. Starting last year and still going strong this coming year, we are seeing a big usage of display serif and slab fonts. That is the main reason we created Chronos Serif which you can try for free here.
Another trend we are noticing more and more is extended types, especially grotesque. Used in the right way they can really set off your designs (we are actually working on one as we speak). Try outlining them for a more contemporary look!
ALastly, a strong sans serif is really hard to beat when it comes to sending a big message with a bold title. It is a trend that has been here for a couple of years now and is probably here to stay. Most of the designs or ads you will see have sans serif fonts so the rule here to set your designs apart is to use a unique font in a unique way. Make the layout different, clean and let it breathe. Again, kerning, line spacing, size and contrast are all variables you can play with to transform your design into a masterpiece. There are hidden wonders many fail to see in using the right ratio of content vs. space.
Here are a few examples of font styles use for inspiration:
We hope this helps a bit in your journey to become a better designer. Thanks for reading!
Cover image courtesy of Smith & Diction
All our fonts are free to try so don't hesitate to download them and play with them in your designs as much as you like to make them beautiful until you are ready to get that commercial license.
We post frequent updates on what we're currently doing on Instagram.
Fonts featured in
this article
More ↓↓↓(Reading is good
for you)
More ↓↓↓(Reading is good
for you)