Picking the right type feels like a mystery
Picking the right type feels like a mystery
Picking the right type feels like a mystery
May 24, 2024
Equitable design patterns
Now that designers have variables in Figma to help theme typography in their design systems, how do we create the right balance of contrast and "harmony" when combining multiple typefaces?
Most brands come with an identified typeface usually informed by an established logo form that was selected for its brand “voice”
Websites have an abundance of smaller "interface" copy or “body” content that is rendered at smaller sizes, whose purpose is much more utilitarian.
As our team is building more products to be used by multiple brands with different styles, how do we use these new fancy variables to help us make good choices?
Universal Principles of Typography
Elliot Jay Stocks goes deep into almost every aspect of type design and has several resources on font pairing. Initial takeaways include considering a “superfamily” which provide the widest range of options with similar structure as well as encouraging designers to take the time to consider the sweet spot between “distinction and harmony”.
Get the book
Practical UI
Adham Dannaway has another stellar resource. The guidelines provided suggest laying the foundation of your type system with a single workhorse sans serif typeface for legibility, neutrality and simplicity. The question of a second typeface here depends on the brand, but there is room to add an additional “emotional” typeface for headings.
Get the book
Figma Google Font Pairings
A great resource for some ready-to-go font pairings from Google via Figma. What I like about these pairings is that Google fonts generally have good support for multiple languages helping your designs be more inclusive. (see screenshot)
Takeaways
Our team is continuing to figure things out but we’ve started to lay down a few ground rules based on all the amazing resources out there. Hope others find them useful:
Provide options: Establish a primary typeface or “superfamily” that has a variety of weights and inclusive language support to give you flexibility as you get started.
Create harmony: When considering a font pairing consider the right amount of contrast that’s balanced for the brand tone and usability.
Consider context: Use the right typeface in the right place. Smaller interface text should be functional and while your headings provide you with space to add brand “voice”
Ease adoption: Make your system adoptable and start with a simple semantic variables hierarchy that allows for a separate “type-heading” variable to a compliment a “type-ui” variable for interface copy and/or a “type-body” variable for long form content.
Now that designers have variables in Figma to help theme typography in their design systems, how do we create the right balance of contrast and "harmony" when combining multiple typefaces?
Most brands come with an identified typeface usually informed by an established logo form that was selected for its brand “voice”
Websites have an abundance of smaller "interface" copy or “body” content that is rendered at smaller sizes, whose purpose is much more utilitarian.
As our team is building more products to be used by multiple brands with different styles, how do we use these new fancy variables to help us make good choices?
Universal Principles of Typography
Elliot Jay Stocks goes deep into almost every aspect of type design and has several resources on font pairing. Initial takeaways include considering a “superfamily” which provide the widest range of options with similar structure as well as encouraging designers to take the time to consider the sweet spot between “distinction and harmony”.
Get the book
Practical UI
Adham Dannaway has another stellar resource. The guidelines provided suggest laying the foundation of your type system with a single workhorse sans serif typeface for legibility, neutrality and simplicity. The question of a second typeface here depends on the brand, but there is room to add an additional “emotional” typeface for headings.
Get the book
Figma Google Font Pairings
A great resource for some ready-to-go font pairings from Google via Figma. What I like about these pairings is that Google fonts generally have good support for multiple languages helping your designs be more inclusive. (see screenshot)
Takeaways
Our team is continuing to figure things out but we’ve started to lay down a few ground rules based on all the amazing resources out there. Hope others find them useful:
Provide options: Establish a primary typeface or “superfamily” that has a variety of weights and inclusive language support to give you flexibility as you get started.
Create harmony: When considering a font pairing consider the right amount of contrast that’s balanced for the brand tone and usability.
Consider context: Use the right typeface in the right place. Smaller interface text should be functional and while your headings provide you with space to add brand “voice”
Ease adoption: Make your system adoptable and start with a simple semantic variables hierarchy that allows for a separate “type-heading” variable to a compliment a “type-ui” variable for interface copy and/or a “type-body” variable for long form content.
Now that designers have variables in Figma to help theme typography in their design systems, how do we create the right balance of contrast and "harmony" when combining multiple typefaces?
Most brands come with an identified typeface usually informed by an established logo form that was selected for its brand “voice”
Websites have an abundance of smaller "interface" copy or “body” content that is rendered at smaller sizes, whose purpose is much more utilitarian.
As our team is building more products to be used by multiple brands with different styles, how do we use these new fancy variables to help us make good choices?
Universal Principles of Typography
Elliot Jay Stocks goes deep into almost every aspect of type design and has several resources on font pairing. Initial takeaways include considering a “superfamily” which provide the widest range of options with similar structure as well as encouraging designers to take the time to consider the sweet spot between “distinction and harmony”.
Get the book
Practical UI
Adham Dannaway has another stellar resource. The guidelines provided suggest laying the foundation of your type system with a single workhorse sans serif typeface for legibility, neutrality and simplicity. The question of a second typeface here depends on the brand, but there is room to add an additional “emotional” typeface for headings.
Get the book
Figma Google Font Pairings
A great resource for some ready-to-go font pairings from Google via Figma. What I like about these pairings is that Google fonts generally have good support for multiple languages helping your designs be more inclusive. (see screenshot)
Takeaways
Our team is continuing to figure things out but we’ve started to lay down a few ground rules based on all the amazing resources out there. Hope others find them useful:
Provide options: Establish a primary typeface or “superfamily” that has a variety of weights and inclusive language support to give you flexibility as you get started.
Create harmony: When considering a font pairing consider the right amount of contrast that’s balanced for the brand tone and usability.
Consider context: Use the right typeface in the right place. Smaller interface text should be functional and while your headings provide you with space to add brand “voice”
Ease adoption: Make your system adoptable and start with a simple semantic variables hierarchy that allows for a separate “type-heading” variable to a compliment a “type-ui” variable for interface copy and/or a “type-body” variable for long form content.