Create your own Design System: Chapter Typography
Hey, fellow product designer! Remember our chat about the design system? I’m excited to follow up on that and kick off a brand-new series of stories. This time, we’re diving into the nitty-gritty of creating your design system. (If you missed the last story, you can catch up by clicking here.)
Now, since my expertise leans heavily toward web applications, our focus will be on developing a web-based design system. We’re taking it nice and easy, step by step. So, let’s get started! Our first topic for today is the foundation — and what’s more foundational than typography? We’re going to cover the typography basics and guide you on how to set up typography for your designs. Stick around, it’s going to be a typography-tastic ride! 🎨📐
Basics of Typography
Typography is like the personality of your design. It’s not just about the words themselves, but how they’re presented — the fonts, sizes, spacing, and alignment all play a crucial role in conveying the right message.
Typeface
The first thing to consider is the typeface or font. There are two primary categories: serif and sans-serif. Serif fonts have those little decorative lines at the edges (like Times New Roman), and they often feel more traditional and elegant. Sans-serif fonts are sleek and clean, with no decorative lines (think Arial). Choosing the right typeface sets the tone for your design.
Font Size
Font size is all about legibility and hierarchy. Headings should stand out, so they’re usually larger and bolder. Subheadings are a bit smaller, and body text tends to be even smaller for comfortable reading. Finding the right balance between different font sizes is crucial for creating a clear hierarchy in your content.
Line Height (Leading)
The space between lines of text is called line height or leading. Proper line height makes reading more comfortable and prevents text from feeling cramped. If the lines are too close, it’s hard to read, and if they’re too far apart, it can disrupt the flow. Aim for a line height that’s around 1.2 to 1.5 times the font size.
Letter Spacing (Tracking) and Word Spacing (Kerning)
Letter spacing is the space between individual characters, and word spacing is the space between words. Adjusting these spacings can affect the overall readability and aesthetic of your text. Tighter tracking can give a modern and sleek look, while wider spacing can enhance readability, especially for longer paragraphs.
Alignment
Text can be aligned in different ways — left, right, center, or justified. Left-aligned text is the most common and easiest to read, while centered text can add a touch of elegance. Right-aligned text is less common and can create a unique visual flow. Justified text lines up both the left and right edges, but it can sometimes result in awkward spacing, so use it carefully.
Consistency
Consistency is key to a polished design. Stick to a limited set of typefaces and font sizes across your design system to maintain a cohesive look. This consistency helps users recognize your brand and feel comfortable interacting with your content.
How to setup up typography in the design system (Figma)
As discussed in the previous story, I’ve taken the initiative to craft a Figma file that you can use as a point of reference. To delve into the detailed steps and visual flow, simply click on this link, and it will take you directly to the Figma file. This resource is designed to provide you with a visual representation that can greatly aid your understanding of the process.
For Figma file : Click here
Step:1
Define Typeface(s)
Choose the typefaces that best represent your brand’s personality and cater to your design’s goals. Select a primary typeface for headings and a secondary typeface for body text, if needed. Make sure these typefaces are easily accessible and web-safe.
For free fonts: https://fonts.google.com/
Establish Font Sizes
Determine a set of font sizes that will be used consistently throughout your design system. This should include sizes for headings (h1, h2, h3, etc.), subheadings, and body text. Consider responsive design principles to ensure your typography looks great across different devices and screen sizes.
While setting up the font size remeber “Less is better” add extra sizes if needed
I prefer to keep the font setup minimal in order to uphold a clean consistency and clear hierarchy.
After selecting your favorite typeface follow these setup to decide on font size easily with Figma plugins
Plugin used: Typescales
Run this plugin, you will get this screen
I like to explain one by one from this screen
Base size
it refers to the primary font size that serves as a starting point for defining other font sizes within the scale.
Scale
It refers to the set of incremental steps or ratios that dictate how font sizes increase or decrease as you move up or down the hierarchy. These steps create a systematic progression of font sizes that maintain harmony and visual balance within a design system.
Typically, a type scale is constructed using a scale factor, which is a multiplier applied to the base font size to generate other font sizes. The scale factor is usually a value like 1.2, 1.5, or 1.618 (the golden ratio). The choice of scale factor influences the relationship between different font sizes and plays a role in establishing a sense of proportion and hierarchy.
For instance, using a scale factor of 1.25 (Major third), if the base font size is 16px, the typographic scale might look like this:
- Base Size: 16px
- Large Text: 16px × 1.25 = 20px
- Subheadings: 16px × 1.25 × 1.25 = 25px
- Headings: 16px × 1.25 × 1.25 × 1.25 = 31px
Each step in the scale is a multiple of the previous size, creating a coherent progression of font sizes that makes it easy to establish a hierarchy in your typography.
The choice of scale and scale factor should align with your design’s objectives and the visual aesthetic you’re aiming for. A smaller scale factor will result in more modest increments between sizes, while a larger scale factor will lead to more significant differences. It’s a balance between clear differentiation and maintaining a visually pleasing transition.
Line Height
Line height, also referred to as line spacing, is the vertical space between lines of text within a paragraph or block of content. It’s an essential typographic parameter that directly influences the readability, legibility, and visual appeal of text.
When designing a line height for your typography, consider the content type (body text, headings, captions), the typeface being used, and the overall aesthetic of your design. Generally, a line height of around 120% to 150% times the font size is a good starting point for maintaining readability while offering an aesthetically pleasing layout. However, adjustments can be made based on your design’s specific needs and target audience.
- For Heading: Use 120% of line-height
- For Base text and below: Use 150% of line-height
These are recommendations, not a final go, tweak them if you need
Scales
Scales are like no of font size above your font size and below your font size
Step:2
After creating the font sizes, We need to create text styles in Figma
Text styles in Figma are a way to define the font, size, color, and other properties of text in your designs. They can be used to create a consistent look and feel across your designs, and to save time by applying the same formatting to multiple text layers.
- Use a naming convention that makes sense for your project. This will help you quickly find the styles you need.
- Create a library of text styles that you can use across multiple projects. This will save you time and ensure that your designs have a consistent look and feel.
- Use text styles to create a hierarchy of text. This will help your users to scan your designs and find the information they need quickly.
- Experiment with different text styles to see what works best for your project. There are no right or wrong answers, so have fun with it!
To speed up the process of text-style creations we can also use plugins to make our life easier
On click of the text frame and clicking run, this plugin will create a text style in Figma with ease
Step:3
We need to document these to convey to stakeholders (There is a separate chapter in our series for documentation😉)
Documentation might not steal the spotlight, but it’s the secret sauce that makes design systems rock:
- Consistency: Keeps our style on point, no matter who’s working on what.
- Efficiency: Speeds things up by guiding devs and designers, cutting out confusion.
- Onboarding: Newbies get up to speed faster, thanks to clear guidelines.
- Collaboration: Bridges the gap between designers, devs, and everyone else.
- Future-Proofing: Guides us as we evolve, making updates smoother.
- Troubleshooting: Helps us troubleshoot and fix issues like a pro.
- Knowledge Sharing: It’s like a design wisdom vault we all can tap into.
- Scale: As we grow, it empowers others to use our system like champs.
In short, documentation isn’t just paperwork — it’s the superhero cape of our design system. Let’s make it legendary! 📖🦸♂️🦸♀️
There is Plugin to document text styles called Typography Style Guide
Bravo! You’ve successfully forged your unique text styles for your design system. A hearty congratulations are in order! Now, brace yourself for what’s next — we’re about to embark on an exploration of colors and icons. Once we’ve got the foundational knowledge locked in, we’ll jump into the thrilling arena of crafting components and experimenting with variants in your design system. Your journey’s looking exciting — keep up the splendid work!
Do follow in the medium for following stories in series🤠
