Display typeface

from Collletttivo
designed by Sara Lavazza

3 Styles

3 Weights: Regular to Bold

Best for

  • Headings (display text)
  • Long reading text (body text)
  • User Interfaces (functional text)

License

Free and Open Source

Specialty

A free display typeface that changes its mood dramatically when going from Regular to Bold. See me fine-tuning the typesetting of Billie Eilish lyrics using it.

My Coconat Font Review

Right now, I’m losing myself in The Greatest Billie Eilish song. Man, I love that build-up – it hit me hard and soft! But does the font of the lyrics video really fit? I made a short video exploring it.

Because as I was browsing for Font Friday fonts, free Coconat from Collletttivo stood out to me. Something fascinates me about this display typeface, and it’s the build-up as well that comes with a surprise! So let’s dive into it, learn about its quirks and how to use them. Maybe for expressing parts of the lyrics of that Billie Eilish song better?

Coconat in Regular, Demi, Bold
With each style not only the weight, also the width and contrast changes dramatically

Coconat comes in three weights: Regular, Demi and Bold. However, not only the weight, also the width and contrast change in these three styles. This is something you don’t see that often. The fairly common proportions of the Regular style go wild, turning into eccentric letter shapes, as it gets bolder. You can see best what happens when comparing the extremes. Observe how the typeface develops an oblique stress, dancing on the edge of feeling distorted. Interestingly, the flared terminals don’t really change, but the apertures become more closed and sharper.

Comparing the letters “n” and “c” in Coconat Regular and Bold. Coconat Regular shows Regular proportions, flared terminals, a little stroke contrast and Subtle‹ oblique stress. Coconat Bold is almost 200% wide, shows the same flared terminals, strong stroke contrast and extreme ‹oblique stress.
Comparing Coconat Regular and Bold – observe how the mood shifts from calm to almost aggressive.

Now, what does this mean in practice? For a little copy, the bold style is an unexpected eye-catcher. But this only works in smaller doses, and only in larger sizes. I would not set Coconat much smaller than 20 px. Even in the regular weight, it looks too busy for long reading text.

Am I the greatest, my congratulations, all my love and patience, all my admiration. All the times I waited, for you to want me naked, I made it all look painless, man, am I the greatest!
Pairing Coconat Regular and Bold in body text

So let’s be daring and playful in our typesetting and use Coconat in larger sizes. Express ourselves and that powerful lyrics! Here, the divine lies in the details. I want to go for a blocked layout.

This doesn’t look refined 😬 This text without any adjustments is our starting point.

My changes mostly circle around these three things:

  1. For the first line, I use the Regular style. My emphasis lies on “unappreciated”, which is why I’m making it in bold. But I’ll make it a bit smaller so that it has the same width.
  2. With the next line, “I shouldn’t have to say it”, but that’s not a curled apostrophe. So let’s fix it, also in the last sentence.
  3. Also the kerning of the caps is not ideal. Let’s make it more even and adjust it, more about this here. Sames goes for the last line. It sticks together too much. So I’ll optically adjust it.

Compare the before and after, and you’ll see:

Now, is everything perfect with this font? No. Especially the bold style feels a bit too far off, when it’s not really large. Specifically, the lower case “w” seems too light in way. However, I can accept that it plays with this somehow distorted look. And I think for a poster or the lyrics video, it is more than fine! To me, it feels much more epic and expressive than the current one. Especially in caps.

Font Pairings with Cononat

Coconat is a dynamic, contrasting serif typeface, ideal for large text. If you want something similar for long reading text, I recommend quite similar dynamic sans-serif Commissioner.

Coconat (free)
Coconat (free)
  • Headings
  • Copy
Commissioner (free)
Commissioner (free)
  • Headings
  • Copy
  • UI Text

Learn more about pairing typefaces using the Font Matrix.


What do you think? Do you like Coconat better than what is currently used in the lyrics video? Tell me in the comments!

Typographic power to your inbox

  • Font Friday: I recommend one typeface per week, free fonts included.
  • Type Tuesdays: articles & videos that up your design game.
  • Join 2500+ typography enthusiasts, unsubscribe anytime.
Edition #166, published

3 Comments

    1. It sure is not 😅. It’s 3.6:1, passing WCAG, but it should be more, you’re right. I wanted to make it better, but not too far away from the original, so that not all the attention is going to the text contrast.

  1. Really cool content, Oliver 🙌 I really like both the font and your presentation (style / content).

    Not to mention my book on your shelf. 🙃

Leave a Reply

Your email address will not be published. Required fields are marked *