— BY REMON — IN Design tips Resources

A curated typeface system

type-system-website

Today, I want to take you behind the scenes of my design process and share the impact of a typeface scale system on my design projects. Believe me when I say this seemingly simple tool has transformed how I approach design.

Let me take you back to the days when I felt lost amidst the sea of font choices. I was grappling with the challenge of maintaining consistency in my designs. With many font sizes and styles at my fingertips, I needed help finding the perfect blend of aesthetics and usability. A type scale system wasn’t just about assigning arbitrary font sizes. It was about creating an symphony of visual hierarchy. Each font size had its role, guiding the user’s eyes effortlessly across the screen. Suddenly, my designs had a rhythm, a flow that spoke to users in a language they understood without conscious effort. Decision-making became efficient, and I spent less time agonizing over font choices and more time on the creative aspects that truly mattered.

95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

Oliver Reichenstein, 2006

Typography is an art form that requires experimentation, iteration, and attention to detail. Take the time to fine-tune your type scale, consider the hierarchy and emphasis within your designs, and seek feedback from others. With practice, you’ll develop a keen eye for typography and create designs that captivate and engage your audience. Typography is like the secret sauce of User Interface Design.

So, are you ready to rock your type-scale game? Let me show you how I do it!

Start small and prioritize what you need

To get started, we’re going to create a typographic scale. It’s a fancy way of saying a range of font sizes that play well together. I’ve got a neat trick for you – start small and prioritize what you need. I first prioritize what I need for the project. I always start with a small list:

  • Headings
  • Body
  • Elements
  • Actions triggers
type-scale-system design
Here you find a shot of a simple breakdown system for the type

Headings
When it comes to headings, I love to go big and bold! They are the rock stars of your design, catching the reader’s eye and setting the tone for the following content. Usually, I start with a headline size that grabs attention, and then I scale it down for subheadings to create a clear visual hierarchy.

Body Text
A comfortable midsize font is preferred for body text, inviting readers to dive into content without straining.

Elements
Tiny design elements like captions and other small elements can have a big impact on the overall design. I make sure they’re small but impactful, using a noticeable yet not overpowering size.

Action triggers
When it comes to those call-to-action buttons, you want them to be friendly and inviting, not screaming at your users.

Whitespace: The Breathing Space
Whitespace is an essential part of a good typography system. It’s not only about the font size, but also the line-height and paragraph spacing. Proper use of whitespace allows your text to have room to breathe, resulting in a pleasant and harmonious reading experience.

type-system-website
Here you see my Type scale system for every project in Figma

Type composition

I have designed a typography composition that would work well for the project. I used this cool new font called Geist and it’s free to download. Definitely worth checking out!

The idea is to ensure that the typography is consistent with the overall look and feel of the project. To achieve this, I used several elements such as H1 heading, H2 heading, body text, caption, and buttons. These elements were chosen to create a cohesive and visually appealing design that will be easy for viewers to understand.

The H1 heading is the main title of the project, while the H2 heading is used for subheadings. The body text is the main content of the project, and the caption is a brief description of the project. Finally, the buttons are used to encourage viewers to take action, such as clicking a link or making a purchase.

typography-composition
Here a screenshot how I test type scaling in composition

Overall, I believe that the typography design composition is crucial for the success of the project, and I’m confident that the elements I’ve used will help achieve the desired results.

Remember, it’s all about finding the right balance, experimenting, and tweaking until it suits your project. So, go ahead and rock that type of scale like a creative guru, and let your designs shine brighter than ever! Once you’ve defined your type scale system, test it across various devices and platforms to ensure it remains legible and visually appealing. Make adjustments as needed to achieve the desired results. A simple constant scale created a much smoother text flow, making the interface intuitive and easy for the user.

Thanks for coming along on this exciting journey. Let’s keep creating, innovating, and unleashing our superpowers until we cross paths again in the next design adventure.


Author picture

Hi! I'm Remon Leijtens

I hope you got value out of my writing. If I can help in some small way on your design journey I’d love to hear it – comment below, email me or tweet at me.

Let's Connect: Dribbble / Instagram / Twitter

Grab my free design library (Notion)


Comments

Add a new comment

Your email address will not be published, Required field are marked*


My best UI/UX Design resources

This is a Notion library, in it you'll find a collection of the Design Basics with the best resources, articles, videos and books. That I have collected over the past 11+ years.

I respect your privacy. You are subscribed to my monthly newsletter. Unsubscribe at any time.