Having started out as a graphic designer, primarily working across editorial, packaging and identity design, Louis began to feel somewhat uninspired in the work he was involved in, finding it all a bit too static. “Since I was fascinated by movies and pretty much everything that moves,” he tells us, “I wanted to bring movement to my designs,” a feeling that initiated his transition towards interactivity, leading him to begin designing websites. Including the very site you're on right now, having worked with Pangram Pangram's Founder Mathieu Desjardins on the design and development of our site 😏.

“Back then I designed and developed my websites in Flash,” Louis recalls, “being able to make my designs move and interact with the user was just pretty freaking cool to me 🤯,” he remarks, explaining how far the technology has evolved, and indeed how infinite the possibilities in utilising them are. “Despite all of these new moving parts,” Louis caveats, “there has always been one important constant for me: typography,” the leading motif of his practice and, in fact, what we have discussed with Louis today.

From choosing the right typeface, to bringing typography to life with motion, Louis chatted to us about the dos, don’ts and how-to’s when it comes to utilising typography for digital spaces. Over to you, Louis!

How to: Choosing and pairing typefaces

LP: Choosing the right font pairing is essential to any great web design. When done right, it can significantly add personality to your projects while also ensuring great lisibility. “Should you go with a serif font? How about a mono? Would a sans serif be safer…?” There really isn’t one right answer. Try to use fonts that will best reflect your brand strategy and messaging. Typography has the power to express emotions. For example a robust angular sans serif font will make for a futuristic techie look for your cool new tech product website, while a bubbly and fun typeface will work perfectly well for your colourful candy shop website. In the example below, we chose a beautiful serif font (GT Super Display) with delicate curvatures to elevate with elegance the Home Société website.

When choosing your font pairing, make sure to pick fonts that compliment each other. If they are too similar, you might not get that visually pleasing contrast you’re looking for. Try combining a serif font with a sans serif font, using one for your headers and the other for body copy.

Still not sure where to start? I get it… I mean there are thousands of fonts out there! Gone are the days when you could only use “web-safe” fonts. My advice to you: try, test, experiment! You can download and try out fonts in your designs before actually purchasing them. There are free platforms like Google Fonts and other foundries that offer the possibility of trying out the fonts before buying them. Pangram Pangram being one of them. And did I mention they’re also my personal all-time favourite? Once you’ve found the dream font pairing, make sure to have the web licence and have fun!

How to: Creating typographical hierarchy in web design

LP: Typography can be a powerful tool when giving personality to your project. But it’s also an essential tool when it comes to ensuring proper visibility and contrast between the different elements of your website. A title, a text paragraph, a button, a secondary information… It’s important to find a way to differentiate all of those different elements to facilitate navigation and properly guide the user through their experience. Typography is a great way to give more importance to certain sections, and less to others. Titles should have the strongest visual impact, followed by subtitles, and body copy. Let’s take the Plaza St-Hubert website as an example. The titles are really oversized to give them a lot more importance. Then we have smaller subtitles and even smaller regular text (each one of them in PP Montreal Neue).

For a title, you can use a more expressive font full of character, and sacrifice a little bit on visibility, since it’ll most probably be used in a big way. The title then becomes a graphic element and an expression of the brand (as opposed to just words). For a body copy, however, it’s imperative to make sure that it’s easily readable by all. This means choosing a font that can be read, even when small. My personal favourite long copy font is PP Neue Montreal. Like on the example below for the Karma Foundation website, where it is paired with a serif font (PP Editorial New) for the subtitles and a special font for the big titles (Parabole).

Other than font choice, you can also give more visual importance to some texts by changing their weight (regular vs bold), their colour (one word in blue within a sentence, for example) or putting the text you want to stand out in all caps. (Be careful not to write long paragraphs entirely in caps as that’s also known to affect overall readability). In the Rainbow Registered website, we gave more importance to certain words within a paragraph by changing their colour.

How to: Bringing type to life with motion

LP: Motion plays an important role in every single one of my designs. I use motion to inject life and personality into otherwise static websites, including animated typography! You can animate texts as they arrive on screen, or animated them when the user interacts with an element (like a button, for example). Your text can also be continually moving if you really want to grab the user’s attention. For the Brouillon website, we played around with the word “Brouillon” and gave the user the opportunity to create their own logo when moving the cursor over the letters.

I’m definitely a believer of animated texts on websites to enhance user experience. However, overdoing it (overanimating your texts) can do the exact opposite. You don’t want to overwhelm the user by animating every single block of text. Try animating only the headers when they appear on screen. It will give importance to those texts and make them stand out. As for your paragraphs, you can have them appear in one shot or choose a more detailed animation, like animating each letter individually. That’s exactly what we did for the titles on the Khoa Lê website:

Looking for some great typographies in motion? Check out DIA Studio.

Don’ts: Common mistakes and what to avoid!

LP: Don’t use too many different typefaces on one website! I know… many of them are free, and so many of them are beautiful! But you don’t want your website to look like an all-dressed pizza. Try to limit the numbers of typefaces to 2 or 3 maximum. This will make for a stronger style guide and a more well-rounded website.

One Extra Tip!