Creating typography system in Figma

Summary

In this video, Nick discusses the importance of typography in UI design, emphasizing that most websites and apps rely heavily on it. He introduces four essential Figma plugins to enhance typography: 'Phone Pair' for pairing fonts effectively, 'Typescale' for creating a visual rhythm, 'Font Changer' for applying custom fonts across the design, and 'For Old Facia' for auditing font usage. These tools help designers make informed artistic choices and ensure consistency in their UI typography.

Takeaways

• 🎨 **Typography Importance**: Good typography is crucial in UI design, as most websites and mobile apps are text-based.
• 🔍 **Font Pairing**: 'Phone Pair' plugin helps in pairing fonts for headings and body text, often using serif for headings and sans serif for readability.
• 🆓 **Free Fonts**: The plugin uses Google Fonts, which are free to use, providing flexibility in font selection.
• 🔄 **Customization**: Users can lock certain font faces and experiment with different pairings for headings and body text.
• 📝 **Text Customization**: The plugin allows changing the actual text to see how copy looks with selected fonts, aiding in design decisions.
• 📏 **Type Scale**: 'Typescale' plugin creates a visual rhythm for typography, with settings for base size and scaling ratio.
• 📐 **Base Size**: Common base sizes are 14 pixels for mobile apps and 16 pixels for websites, affecting the overall type scale.
• 🎵 **Scaling Ratio**: Minor third is a typical multiplier for UI design, while the Golden Ratio can be chosen for more artistic designs.
• 🛠 **Font Changer**: 'Font Changer' plugin allows for bulk replacement of fonts across design layers to align with design choices.
• 🔍 **Visual Audit**: 'For Old Fascia' plugin conducts a design audit, identifying and listing all font names and properties used.
• 📋 **Design Consistency**: The audit helps ensure no fonts are accidentally left unchanged, maintaining consistency across the design.

Q & A

What is the main focus of the video by Nick?

The video by Nick focuses on typography in UI design and discusses four essential Figma plugins to improve typography systems.

Why is typography considered important in UI design?

Typography is important in UI design because most websites and mobile apps are text-heavy, and good typography enhances readability and design quality.

What is the first plugin mentioned in the video, and what does it do?

The first plugin mentioned is 'Phone Pair', which allows users to pair fonts for headings and body text, improving the text's readability.

What type of fonts are typically chosen for headings and body text in UI design?

Typically, a serif font is chosen for headings and a sans-serif font for body text to make the text easier to read.

How does the 'Phone Pair' plugin utilize Google Fonts?

The 'Phone Pair' plugin uses Google Fonts, which are free to use, allowing users to experiment with different font combinations.

What is a type scale and why is it important in UI design?

A type scale is a modular system that creates a visual rhythm for typography. It's important because it helps maintain consistency and hierarchy in UI design.

What are the typical base sizes used in type scale for mobile apps and websites?

The typical base sizes are 14 pixels for mobile apps and 16 pixels for websites.

What is the difference between the minor third and the Golden Ratio in type scale settings?

The minor third is a multiplier used for UI design that provides a subtle change between scales, while the Golden Ratio creates a more drastic change, often used for artistic choices.

How can the 'Font Changer' plugin help in aligning the type scale with custom fonts?

The 'Font Changer' plugin allows users to select all layers and apply a new font face to them, ensuring the type scale is consistent with the chosen custom fonts.

What is the purpose of the 'Font Audit' plugin mentioned in the video?

The 'Font Audit' plugin helps in conducting a visual analysis of the design by identifying the font names and properties used, ensuring no fonts are accidentally left unchanged.

What does Nick suggest as the best approach for choosing parts of the type scale for headings?

Nick suggests that there are no right or wrong choices when deciding which part of the type scale to use for headings; it's about the designer's artistic choices and the specific needs of the design.

Outlines

00:00

🔠 Typography and Figma Plugins

This paragraph introduces the topic of typography in UI design and highlights the importance of good typography for enhancing the user experience. Nick, the speaker, discusses four essential Figma plugins that can improve typography systems. The first plugin mentioned is 'Phone Pair', which facilitates the pairing of fonts for headings and body text, often using serif fonts for headings and sans serif for body text to improve readability. The plugin is appreciated for using Google Fonts, which are free to use, and for allowing users to experiment with different font combinations. The speaker also touches on the ability to lock a font face for headings and choose different pairs for body text, as well as customizing the text to see how the chosen font affects the design.

05:02

📐 Type Scale and Font Audit

The second paragraph delves into the concept of a type scale, a modular system that creates visual rhythm in typography. The 'Typescale' plugin is introduced, which allows users to set a base size and scale ratio, typically minor third for UI design, to generate a type scale system that can be modified. The speaker chooses a base size of 16 pixels for body text and 48 pixels for heading, indicating the flexibility of the plugin to suit different design needs. However, a limitation is noted: the plugin uses Inter font by default, which may not align with a designer's font choices. To address this, the 'Font Changer' plugin is mentioned, enabling users to replace the default font with a preferred one across all layers. Lastly, the 'Font Audit' plugin is highlighted for conducting a visual analysis to ensure consistency in font usage across the design.

Keywords

💡Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In the context of UI design, it plays a crucial role in enhancing the user experience by ensuring that the text is not only functional but also aesthetically pleasing. The video emphasizes the importance of good typography in UI design, stating that most websites and mobile apps rely heavily on it.

💡UI Design

UI Design, or User Interface Design, refers to the process of making interfaces in software or computerized devices with a focus on looks or style and, in some cases, on behavior of user. The video discusses how typography is a fundamental aspect of UI design, affecting the overall look and feel of digital products.

💡Figma

Figma is a cloud-based interface design and collaboration tool used for creating and collaborating on designs for websites, mobile applications, and other digital products. The video mentions Figma as the platform where the discussed plugins are used to improve typography.

💡Font Pairing

Font pairing refers to the process of selecting two or more fonts that complement each other and are used together in a design. The video script discusses a plugin that facilitates font pairing, suggesting using a serif font for headings and a sans-serif for body text to enhance readability.

💡Serif Font

A serif font is a type of font that has small lines or strokes regularly attached to the end of larger strokes in a letter or symbol within the typeface. The video suggests using a serif font for headings to make them stand out.

💡Sans Serif Font

Sans serif is a type of font that does not have the extra strokes on the letters, resulting in a cleaner and more modern look. The video mentions using sans serif fonts for body text as they are easier to read in digital formats.

💡Type Scale

Type scale refers to the system of sizing different text elements in a proportional manner to create a harmonious visual hierarchy. The video explains how a plugin can be used to create a type scale, with settings for base size and scale ratio, which is essential for maintaining consistency in typography.

💡Base Size

In typography, the base size is the default font size from which other sizes are scaled. The video mentions that base size is typically set to 14 pixels for mobile apps or 16 pixels for websites, which is the starting point for creating a type scale.

💡Minor Third

In the context of type scale, a minor third is a musical term that has been adapted to describe a scaling ratio that increases or decreases type size by a factor of 1.2. The video suggests using a minor third for UI design as it provides a subtle and harmonious scaling effect.

💡Golden Ratio

The Golden Ratio is a mathematical proportion that is often used in design to create visually pleasing compositions. While the video mentions it as an option for creating a type scale, it notes that it is less common in UI design due to its more drastic changes between type sizes.

💡Font Changer

Font Changer is a term used in the video to describe a plugin that allows users to select and change the font face of text elements in a design. This is useful for applying a consistent font across different parts of a design or for modifying the type scale to use a specific font.

💡Visual Analysis

Visual analysis in the context of the video refers to the process of examining a design to understand the fonts and their properties used within it. A plugin mentioned in the script, 'for old fascia', helps in conducting this audit to ensure consistency and identify any fonts that may have been overlooked.

Highlights

Nick discusses the importance of typography in UI design, emphasizing that most websites and mobile apps rely heavily on it.

Introduces four essential Figma plugins to improve typography systems.

Phone Pair is the first plugin, allowing users to pair fonts for headings and body text.

Typically, serif fonts are chosen for headings and sans serif for body text to enhance readability.

The plugin uses Google Fonts, which are free to use.

Users can lock a font face for headings and choose different pairs for body text.

The plugin also allows for changing the actual text to see how it looks with the chosen font.

Type Scale is the second plugin, creating a visual rhythm for typography.

Base size is a crucial setting, commonly 14 pixels for mobile apps and 16 pixels for websites.

Type Scale defines the scaling of type, with minor third being a common choice for UI design.

The plugin generates a type scale system that can be modified according to design needs.

Font Changer is the third plugin, allowing users to change the font face of selected layers.

Users can replace the original font with a new one to align with their design choices.

Font Audit is the fourth plugin, used to conduct a visual analysis of font usage in a design.

The plugin identifies and lists the font names and properties used, helping to ensure consistency.

The downside of Type Scale is that it uses Inter, which may not always align with a designer's font preferences.

Nick concludes by thanking the audience for watching the video on typography plugins in Figma.

Transcripts

hello it's Nick and today I'm going to

talk about typography in UI design

most websites and mobile apps are 90 tax

that's why good typography is good

design and in this video I want to talk

about four essential plugins for figma

that allow us to improve typography

systems and phone pair is the first

plugin on our list and as you probably

guess this plugin allows us to pair

fonts

it allow us to choose the different ones

for headings and body text and usually

we go for the serif font for headings

and sounds serif for body text because

it makes the text easier to read

and we can play with the different uh

fonts here one till we find the one that

we like or we can alternatively go to

the old phone pairings and choose the

best from the list and I think I will

choose this one the great thing is that

this plugin uses go phones so they are

free to use and we can also play with

the different combinations for example I

want to lock the

font face this one for the headings and

choose the different pair for only

modifying the body text here so until we

find the best or we can also change the

actual text for example see how our copy

will look like with the font that we

choose for example hello there

add snake and I'm happy to see

so we can find the different pair for

our specific copy

so once we find the fonts that we like

the next thing is to create a type scale

type scale is a modular system that

allows us to create a visual Rhythm for

our phones and this plugin calls

typescale allow us to create this scale

the most important settings here are

base size and scale base size is a

generally 14 pixels or 16 pixels and

they are most commonly used

font size on your web or mobile app and

if you go for the 14 pixels you

typically design mobile app and 16

pixels work best for the websites

typescale defines how much the type will

scales and usually when you design

mobile app or website you go for the

minor third this is basically a

multiplier between different scales in

this scale and if you want to make a

more artistic choice you will likely go

for the Golden Ratio golden ratio

creates a more drastic change between

the sections

but again if you design for UI you

typically go for the minor third because

it works the best for UI design

and once you generate it will generate

the type scale systems that you can

modify and as we discussed I will go for

the body text for

16 pixels body copy and I will choose 48

pixels as a heading head in first and we

can also new to heading

second heading third and adding four

so ultimately it's up to you to decide

what exact part of the scale you will

use for the headings

it's there are no right or wrong choices

so it's ultimately about your design

first and about your artistic choices

but downside of the plugin is that it

uses the different font it uses inter

for the one creates this scale and what

if I want to see how my scale will look

like using my own font and I don't don't

want to go manually and change each

section here there is a way to do that

and I will need to select all my layers

and apply the plugin called font changer

this font changer basically selects the

font face that we want to modify and

allow us to change it to the one that we

choose from a list for example I will go

for the San Francisco Pro and we will

simply replace it so that's it I

replaced the original phone to the new

one and my scale is aligned with my

choices for the fonts

but sometimes we need to conduct a

visual analysis of how many different

ones we use because sometimes we might

accidentally Miss and leave some fonts

unchanged in our system and the plugin

called for old fascia allow us to

conduct a audit of the design and find

the font names used in our design and

along with the properties so as you can

see here it shows us that we use San

Francisco Pro medium for our design but

we also use inter and enter is used for

the this element the one that we didn't

modify when we changed the scale

so these were the four plugins that I

want to discuss today and thank you