Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Carla Carla

Question about typeface pairing choices on Invision

Hello all! I'm a very curious person who loves to learn about design and understand how certain design choices are made. I'm particularly curious about typograhy choices. I've seen that in this page https://www.invisionapp.com/inside-design/how-to-build-a-portfolio-when-youre-new-to-design/ you use a combination of Eina and Maison Neue. From what I understood, they're both Grotesque Sans Serif typefaces. What I was wondering, what would lead to pair those typefaces? Also, I've read that pairing typefaces from the same classification(both sans or serif) was bad, because they can clash. Is this always true? I would assume that no, if you're using both, they would be a good match. As so, what makes them a good match? Is it because they're both same classification, grotesque?

1

comments

sort by


Michéle (Mikele) De Sousa
InVision ambassador Michéle (Mikele) De Sousa , ambassador
Comment actions Permalink

Hi Carla

Thanks for reaching out to the InVision Community and really appreciate it!

This is a great topic. 

 

Let's answer your questions:

1) What would lead to pair those typefaces?

I will try to answer you as best I can as I was not the designer that assisted in creating the page but I can assume as to the why.
So the theory: When it comes to typography selections there is a process in terms of understanding, research, creating and testing. Personally, I have a process which entails understanding brand personality, what the interface needs to execute, job to be done, the research and development behind the typography selections, create some concepts to showcase execution and testing. One thing I would like to share with you that many unfortunately forget is that yes an aesthetic interface is important but one that meets accessibility standards and assists the person reading the content to reduce cognitive load is more important.

Why you may ask? As the example you sent is an article that has a lot of content for a person to read, what we want to do for the person is have them read without feeling overwhelmed or having reading fatigue halfway into reading the article.

So now to answer the why:
Eina was designed for the University Centre of Design and Art. Eina embodies an educational concept. It holds a typographical standard of A which means Eina is a versatile and multipurpose sans-serif typeface.

So as a header style works well for this execution as the Bold style helps the person reading the article to understand they are reading a header that breaks each section.

As for Maison Neue, taken from the earlier design, Maison, this version incorporates considerations of harmony and flow. This is great for body copy.

So I hope you can see why the selection of these typefaces as for the intended execution will assist in the job to be done.

As both typefaces have license that supports all forms of digital media. This is great for a company that is primarily accessed via the internet on may displays. In conclusion the typefaces use for an article execution are great choices.

2) I've read that pairing typefaces from the same classification(both sans or serif) were bad because they can clash. Is this always true?

It depends on the typefaces. Some really don't work well together because of kerning, the baseline etc but through considerations and testing, one can validate the compatibility of the typefaces selected, for as long as they meet the need and job to be done, should be considered. At the end of the day having two typefaces in an interface to separate headers and body copy has shown great value as the break of typefaces have shown to assist the user in their reading. Having this execution with blogs is also highly recommended to assist the person to read an article quickly and easily.

3) What makes them a good match? Is it because they're both same classification, grotesque?

In this case, because they represent different aspects in terms of execution which if consider is a very clever combination in terms of execution which in the end will help with cognitive load and reading fatigue. As Inside Design represents educating the wider community it is excellent execution which you can expect from the incredible team at InVision.


Hope that was easy to understand and helpful. Please let me know.


With that all said, if you ever need anything in terms of advice or feedback you can always reach out again in future or can direct your questions to me and I will be more than happy to assist you on your journey of learning.

 

To assist you further here are links to

Articles from Inside Design:

To assist with pairing and history of the Typeface(s) you might have in mind, you can use:

 

Thanks again for reaching out and wishing you a great day. 

Stay awesome! 

0

join the conversation

to comment, sign up or sign in.