Typography is much more than just text on a page — it forms the core of your design. As a designer, I always approach selecting types from two angles: as a creative adventure and as a technical challenge.

Choosing the right typeface for a company, product, or service is an immensely important task. At that moment, you’re not only aligning with the brand’s identity but also laying the foundation to reinforce the company or service’s brand. Finding the right typeface can be a time-consuming process that often begins with an endless search. During this search, you can get tangled up in the many different typefaces, which, over time, all start to look the same.

In this article, I aim to provide you with the essential background and tools to enhance your typography journey and apply this knowledge to your logo design. We will focus on three key pillars:

1. Font Choice
2. Font Weight
3. Letter Spacing

We will travel back in time to uncover the origins of various typefaces. By exploring different categories, we will illustrate the distinctions with examples and describe the unique characteristics of each category.

Additionally, we will discuss the different font weights and offer advice on when to use each variant. We will delve into letter-spacing and kerning, explaining what they are and how to effectively apply them in your logo designs.

Finally, we will examine how the right typeface choices can significantly influence the impact and success of a brand. With this structured approach, I will show you how to create a logo that is not only expressive but also purposeful and well-thought-out.

Understanding Typography in Logo Design

From the invention of the Gutenberg press in the mid-15th century through the creation of the first Slab Serif in 1815 and the design of the first digital typeface in 1968, the number of available fonts has grown exponentially. Today, websites like WhatFontIs, a font finder platform, catalogs over a million fonts.

So, the one downside of not being born in the 15th century is that your task of choosing the right font has grown enormously. And once you’ve made the right choice out of a million-plus fonts, there are still many pitfalls to watch out for.

Fortunately for us, all these fonts have already been categorized. In this article, we refer to the following four categories: serif, sans serif, script, and display typefaces. But why do we have these categories, and how do we benefit from them today?

Each category has its specific uses. Serif typefaces are often used for books due to their enhancement of readability on paper, while sans serif typefaces are ideal for screens because of their clean lines. Different typefaces also evoke different emotions: for example, script can convey elegance, while sans serif offers a more modern look. Additionally, typeface categories have a rich history, with Old Style Serifs inspired by Roman inscriptions and Modern Serifs designed for greater contrast.

Today, these categories provide a fundamental basis for choosing the right typeface for any project.

As mentioned, different typefaces evoke different emotions; like people, they convey distinct characteristics:

• Serif fonts are seen as traditional and trustworthy;
• Sans Serif fonts are seen as modern and clear;
• Script fonts can come across as elegant and/or informal depending on the style;
• Display fonts are often bold and dynamic.

Historically, typefaces reflected cultural identities, but the “new typography” movement sought a universal style. Designers emphasized that typefaces should match the character of the text, a view also supported by the Bauhaus school.

Different Fonts And Their Characteristics

We have touched upon the history of different typeface categories. Now, to make a good font choice, we need to explore these categories and see what sets them apart, as each one has specific characteristics. In this article, we refer to the following four categories:

Let’s take a closer look at each category.

A serif typeface is a typeface that features small lines or decorative elements at the ends of the strokes. These small lines are called “serifs”.

A sans-serif typeface is a typeface that lacks the small lines or decorative elements at the ends of the strokes, resulting in a clean and modern appearance. The term “sans-serif” comes from the French word “sans,” meaning “without,” so sans-serif translates to “without serif.”

A script typeface is a typeface that mimics the fluid strokes of handwriting or calligraphy, featuring connected letters and flowing strokes for an elegant or artistic appearance.

A display typeface is a typeface designed for large sizes, such as headlines or titles, characterized by bold, decorative elements that make a striking visual impact.

Typeface Persona in Practice

Experts link typeface characteristics to physical traits. Sans serif faces are perceived as cleaner and more modern, while rounded serifs are friendly and squared serifs are more official. Light typefaces are seen as delicate and feminine, and heavy ones are seen as strong and masculine. Some typefaces are designed to be child-friendly with smoother shapes. Traditional serifs are often considered bookish, while sans serifs are seen as modern and no-nonsense.

Based on the provided context, we can assign the following characteristics per category:

• Serif: Bookish, Traditional, Serious, Official, Respectable, Trustworthy.
• Sans Serif: Clean, Modern, Technical, No-nonsense, Machine-like, Clear.
• Script: Elegant, Informal, Feminine, Friendly, Flowing.
• Display: Dramatic, Sophisticated, Urban, Theatrical, Bold, Dynamic.

Let me provide you with a real real-life logo example to help visualize how different typeface categories convey these characteristics.

We’re focusing on ING, a major bank headquartered in the Netherlands. Before we dive into the logo itself, let’s first zoom in on some brand values. On their website, it is stated that they “value integrity above all” and “will not ignore, tolerate, or excuse behavior that breaches our values. To do so would break the trust of society and the trust of the thousands of colleagues who do the right thing.”

Given the strong emphasis on integrity, trust, and adherence to values, the most suitable typeface category would likely be a serif.

The serif font in the ING logo conveys a sense of authority, professionalism, and experience associated with the brand.

Let’s choose a different font for the logo. The font used in the example is Poppins Bold, a geometric sans-serif typeface.

The sans-serif typeface in this version of the ING logo conveys modernity, simplicity, and accessibility. These are all great traits for a company to convey, but they align less with the brand’s chosen values of integrity, trust, and adherence to tradition. A serif typeface often represents these traits more effectively. While the sans-serif version of the logo may be more accessible and modern, it could also convey a sense of casualness that misaligns with the brand’s values.

So let’s see these traits in action with a game called “Assign the Trait.” The rules are simple: you are shown two different fonts, and you choose which font best represents the given trait.

Understanding these typeface personas is crucial when aligning typography with a company’s brand identity. The choice of typeface should reflect and reinforce the brand’s characteristics and values, ensuring a cohesive and impactful visual identity.

We covered a lot of ground, and I hope you now have a better understanding of different typeface categories and their characteristics. I also hope that the little game of “Assign the Trait” has given you a better grasp of the differences between them. This game would also be great to play while you’re walking your dog or going for a run. See a certain logo on the back of a lorry? Which typeface category does it belong to, and what traits does it convey?

Now, let’s further explore the importance of aligning the typeface with the brand identity.

Brand Identity and Consistency

The most important aspect when choosing a typeface is that it aligns with the company’s brand identity. We have reviewed various typeface options, and each has its unique characteristics. You can link these characteristics to those of the company.

As discussed in the previous section, a sans-serif is more “modern” and “no-nonsense”. So, for a modern company, a sleek sans-serif typeface often fits better than a classic Serif typeface. In the previous section, we examined the ING logo and how the use of a sans-serif typeface gave it a more modern appearance, but it also reduced the emphasis on certain traits that ING wants to convey with its brand.

To further illustrate the impact of typeface on logo design, let’s explore some more ‘extreme’ examples.

Our first ‘Extreme’ example is Haribo, which is an iconic gummy candy brand. They use a custom sans-serif typeface.

Let’s zoom in on a couple of characteristics of the typeface and explore why this is a great match for the brand.

• Playfulness: The rounded, bold shapes give the logo a playful and child-friendly feel, aligning with its target audience of children and families.
• Simplicity: The simple, easily readable sans-serif design makes it instantly recognizable and accessible.
• Friendliness: The soft, rounded edges of the letters convey a sense of friendliness and positivity.

The second up is Fanta, a global soft drink brand that also uses a custom sans-serif typeface.

• Handcrafted, Cut-Paper Aesthetic: The letters are crafted to appear as though they’ve been cut from paper, giving the typeface a distinct, hand-made look that adds warmth and creativity.
• Expressive: The logo design is energetic and packed with personality, perfectly embodying Fanta’s fun, playful, and youthful vibe.

Using these ‘extreme’ cases, we can really see the power that a well-aligned typeface can have. Both cases embody the fun and friendly values of the brand. While the nuances may be more subtle in other cases, the power is still there.

Now, let’s delve deeper into the different typefaces and also look at weight, style, and letter spacing.

Elements of Typography in Logo Design

Now that we have a background of the different typeface categories, let’s zoom in on three other elements of typography in logo design:

• Typefaces
• Weight and Style
• Letter-spacing

Typefaces

Each category of typefaces has a multitude of options. The choice of the right typeface is crucial and perhaps the most important decision when designing a logo. It’s important to realize that often, there isn’t a single ‘best’ choice. To illustrate, we have four variations of the Adidas logo below. Each typeface could be considered a good choice. It’s crucial not to get fixated on finding the perfect typeface. Instead, ensure it aligns with the brand identity and looks good in practical use.

These four typefaces could arguably all be great choices for the Adidas brand, as they each possess the clean, bold, and sans-serif qualities that align with the brand’s values of innovation, courage, and ownership. While the details of typeface selection are important, it’s essential not to get overly fixated on them. The key is to ensure that the typeface resonates with the brand’s identity and communicates its core values effectively. Ultimately, the right typeface is one that not only looks good but also embodies the spirit and essence of the brand.

Let’s zoom in on the different weights and styles each typeface offers.

Weight and Style

Each typeface can range from 1 to more than 10 different styles, including choices such as Roman and Italic and various weights like Light, Regular, Semi-Bold, and Bold.

Personally, I often lean towards a Roman in Semi-Bold or Bold variant, but this choice heavily depends on the desired appearance, brand name, and brand identity. So, how do you know which font weight to choose?

When to choose bold fonts

• Brand Identity
  If the brand is associated with strength, confidence, and modernity, bold fonts can effectively communicate these attributes.
• Visibility and Readability
  Bold fonts are easy to read from a distance, making them perfect for signage, billboards, and other large formats.
• Minimalist Design
  Using bold fonts in minimalist logos not only ensures that the logo stands out but also aligns with the principles of minimalism, where less is more.

Letter-spacing & Kerning

An important aspect of typography is overall word spacing, also known as tracking. This refers to the overall spacing between characters in a block of text. By adjusting the tracking in logo design, we can influence the overall look of the logo. We can make a logo more spacious and open or more compact and tight with minimal adjustments.

Designer and design educator Ellen Lupton states that kerning adjusts the spacing between individual characters in a typeface to ensure visual uniformity. When letters are spaced too uniformly, gaps can appear around certain letters like W, Y, V, T, and L. Modern digital typefaces use kerning pairs tables to control these spaces and create a more balanced look.

Tracking and kerning are often confused. To clarify, tracking (letter-spacing) adjusts the space between all letters uniformly, while kerning specifically involves adjusting the distance between individual pairs of letters to improve the readability and aesthetics of the text.

In the example shown below, we observe the concept of kerning in typography. The middle instance of “LEAF” displays the word without any kerning adjustments, where the spacing between each letter is uniform and unaltered.

In the first “LEAF,” kerning adjustments have been applied between the letters ‘A’ and ‘F’, reducing the space between them to create a more visually appealing and cohesive pair.

In the last “LEAF,” kerning has been applied differently, adjusting the space between ‘E’ and ‘A’. This alteration shifts the visual balance of the word, showing how kerning can change the aesthetics and readability of text (or logo) by fine-tuning the spacing between individual letter pairs.

Essential Techniques for Selecting Typefaces

Matching Typeface Characteristics with Brand Identity

As we discussed earlier, different categories of typefaces have unique characteristics that can align well with, or deviate from, the brand identity you want to convey. This is a great starting point on which to base your initial choice.

Inspiration

A large part of the creative process is seeking inspiration. Especially now that you’ve been able to make a choice regarding category, it’s interesting to see the different typefaces in action. This helps you visualize what does and doesn’t work for your brand. Below, I share a selection of my favorite inspiration sources:

• Fonts in Use
• MaxiBestOf
• Typewolf
• Savee
• Font in Logo

Trust the Crowd

Some typefaces are used more frequently than others. Therefore, choosing typefaces that have been tried and tested over the years is a good starting point. It’s important to distinguish between a popular typeface and a trendy one. In this context, I refer to typefaces that have been “popular” for a long time. Let’s break down some of these typefaces.

Helvetica

One of the most well-known typefaces is Helvetica, renowned for its intrinsic legibility and clarity since its 1957 debut. Helvetica’s tall x-height, open counters, and neutral letterforms allow it to lend a clean and professional look to any logo.

Some well-known brands that use Helvetica are BMW, Lufthansa, and Nestlé.

Futura

Futura has been helping brands convey their identity for almost a century. Designed in 1927, it is celebrated for its geometric simplicity and modernist design. Futura’s precise and clean lines give it a distinctive and timeless look.

Some well-known brands that use Futura are Louis Vuitton, Red Bull, and FedEx.

That said, you naturally have all the creative freedom, and making a bold choice can turn out fantastic, especially for brands where this is desirable.

Two’s Company, Three’s a Crowd

Combining typefaces is a challenging task. But if you want to create a logo with two different typefaces, make sure there is enough contrast between the two. For example, combine a serif with a sans-serif. If the two typefaces look too similar, it’s better to stick to one typeface. That said, I would never choose more than two typefaces for your logo.

Let’s Build a Brand Logo

Now that we’ve gone through the above steps, it seems a good time for a practical example. Theory is useful, but only when you put it into practice will you notice that you become more adept at it.

TIP: Try creating a text logo yourself. First, we’ll need to do a company briefing where we come up with a name, define various characteristics, and create a brand identity. This is a great way to get to know your fictional brand.

Bonus challenge: If you want to go one step further, you can also include a logo mark in the briefing. In the following steps, we are going to choose a typeface that suits the brand’s identity and characteristics. For an added challenge, include the logo mark at the start so the typeface has to match your logo mark as well. You can find great graphics at Iconfinder.

Company Briefing

Company Name: EcoWave

Characteristics:

• Sustainable and eco-friendly products.
• Innovative technologies focused on energy saving.
• Wide range of ecological solutions.
• Focus on quality and reliability.
• Promotion of a green lifestyle.
• Dedicated to addressing marine pollution.

Brand Identity: EcoWave is committed to a greener future. We provide sustainable and eco-friendly products that are essential for a better environment. Our advanced technologies and high-quality solutions enable customers to save energy and minimize their ecological footprint. EcoWave is more than just a brand; we represent a movement towards a more sustainable world with a special focus on combating marine pollution.

Keyword: Sustainability

Now that we’ve been briefed, we can start with the following steps:

1. Identify key characteristics: Compile the top three defining characteristics of the company. You can add related words to each characteristic for more detail.
2. Match the characteristics: Try to match these characteristics with the characteristics of the typeface category.
3. Get inspired: Check the suggested links for inspiration and search for Sans-Serif fonts, for example. Look at popular fonts, but also search for fonts that fit what you want to convey about the brand (create a mood board).
4. Make a preliminary choice: Use the gathered information to make an initial choice for the typeface. Adjust the weight and letter spacing until you are satisfied with the design of your logo.
5. Evaluate your design: You now have the first version of your logo. Try it out on different backgrounds and photos that depict the desired look of the company. Assess whether it fits the intended identity and whether you are satisfied with the look. Not satisfied? Go back to your mood board and try a different typeface.

Let’s go over the steps for EcoWave:

1. Sustainable, Trustworthy, Innovative.

2. The briefing and brand focus primarily on innovation. When we match this aspect with the characteristics of typefaces, everything points to a Sans-Serif font, which offers a modern and innovative look.

3. Example Mood Board

4. Ultimately, I chose the IBM Plex Sans typeface. This modern, sans-serif typeface offers a fresh and contemporary look. It fits excellently with the innovative and sustainable characteristics of EcoWave. Below are the steps from the initial choice to the final result:

IBM Plex Sans Regular

IBM Plex Sans Bold

IBM Plex Sans Bold & Custom letter-spacing

IBM Plex Sans Bold & Custom edges

5. Here, you see the typeface in action. For me, this is a perfect match with the brand’s identity. The look feels just right.

Expert Insights and Trends in Typographic Logo Design

Those interested in typography might find ‘The Elements of Typographic Style’ by Robert Bringhurst insightful. In this section, I want to share an interesting part about the importance of choosing a typeface that suits the specific task.

“Choose faces that suit the task as well as the subject. You are designing, let us say, a book about bicycle racing. You have found in the specimen books a typeface called Bicycle, which has spokes in the O, an A in the shape of a racing seat, a T that resembles a set of racing handlebars, and tiny cleated shoes perched on the long, one-sided serifs of ascenders and descenders, like pumping feet on the pedals. Surely this is the perfect face for your book?

Actually, typefaces and racing bikes are very much alike. Both are ideas as well as machines, and neither should be burdened with excess drag or baggage. Pictures of pumping feet will not make the type go faster, any more than smoke trails, pictures of rocket ships, or imitation lightning bolts tied to the frame will improve the speed of the bike.

The best type for a book about bicycle racing will be, first of all, an inherently good type. Second, it will be a good type for books, which means a good type for comfortable long-distance reading. Third, it will be a type sympathetic to the theme. It will probably be lean, strong, and swift; perhaps it will also be Italian. But it is unlikely to be carrying excess ornament or freight and unlikely to be indulging in a masquerade.”

— Robert Bringhurst

As Robert Bringhurst illustrates, choosing a typeface should be appropriate not only for the subject but also for the specific task. What lessons can we draw from this for our typeface choice in our logo?

Functional and Aesthetic Considerations

The typeface must be legible in various sizes and on different mediums, from business cards to billboards. A well-designed logo should be easy to reproduce without loss of clarity.

Brand Identity

Suppose we have a brand in the bicycle industry, an innovative and modern company. In Robert Bringhurst’s example, we choose the typeface Bicycle, which, due to its name, seems to perfectly match bicycles. However, the typeface described by Robert is a serif font with many decorative elements, which does not align with the desired modern and innovative look of our brand. Therefore, this would be a mismatch.

Trends

“Styles come and go. Good design is a language, not a style.”

In this part, we discuss some new trends. However, it is also important to highlight the above quote. The basic principles we mention have been applicable for a long time and will continue to be. It can be both fun and challenging to follow the latest trends, but it is essential to integrate them with your basic principles.

Minimalism and Simplicity

Minimalism in Logo Design remains one of the major trends this year. The most characteristic aspect of this style is to limit the logo to the most essential elements. This creates a clear and timeless character. In typography, this is beneficial for readability and, at the same time, effectively communicating the brand identity in a timeless manner. We also see this well reflected in the rebranding of the fast-food chain Ashton.

Customization and Uniqueness

Another growing trend is customization in typography, where designers create personalized typefaces or modify existing typefaces to give the brand a unique look. This can range from subtle adjustments in letterforms to developing a completely custom typeface. Such an approach can contribute to a distinctive visual identity. A good example of this can be seen in the Apex logo, where the ‘A’ and ‘e’ are specifically adjusted.

Conclusion

We now know that choosing the right typeface for a logo goes beyond personal taste. It has a significant impact on how powerful and recognizable a brand becomes. In this article, we have seen that finding the perfect typeface is a challenge that requires both creativity and a practical approach. With a strong focus on three key aspects:

• Font choice,
• Font weight,
• Letter spacing.

We have seen that finding the right typeface can be a quest, and personal preferences certainly play a role, but with the right tools, this process can be made much easier. The goal is to create a logo that is not only beautiful but also truly adds value by resonating with the people you want to reach and strengthening the brand’s key values.

We also looked at how trends can influence the longevity of your logo. It is important to be trendy, but it is equally important to remain true to timeless principles.

In summary,

Truly understanding both the technical details and the emotional impact of typefaces is enormously important for designing a logo. This knowledge helps to develop brands that not only look good but also have a deeper strategic impact — a strong brand.

“

And for those of you who are interested in diving deeper, I’ve tried to capture the fundamentals we’ve discussed in this article, focusing on good typeface choices, font weights, and letter spacing in a tool huisstijl. While it’s not perfect yet, I hope it can help some people create a simple brand identity that they love.

(yk)

Imagine it’s 2028, and you’re at your projected, suped-up workstation. “Hey AI,” you say, “I need some type options for this page heading…” Before finishing, your AI assistant, affectionately nicknamed TypeMaster3000, eagerly interrupts: “Something bold yet whimsical? Or Perhaps a serif that subtly says, ‘I’m sophisticated but know how to party’?”

You roll your eyes, “Just show me ten options. And no disco serifs this time.”

Gone are the days of clunky, AI-generated fonts that struggled to produce consistent, quality designs. Licensing issues? A thing of the past. The AI of 2028 presents you with multilingual, inventive font families, each glyph crafted to perfection. But perfection isn’t without its quirks.

As TypeMaster3000 rolls out its instantly generated font options, each design seems to have a touch of your recent seaside holiday. There’s Sandy Serif and Desert Island Display.

You sigh. “Less beach, more business, please.”

“Understood,” TypeMaster3000 chirps. “Reverting to corporate mode!”

You spot a typeface you like, and with a tap, the font slots into your design, aligning proportionally and positionally as if it was always meant to be there.

The Evolution of Technology In Typography

Back in the present, the creation of new, professional typefaces remains a meticulous and time-consuming endeavor, even with modern software. Throughout its history, the type industry has consistently been at the forefront of technological evolution, from wood to metal, film, and digital.

Each innovation has transformed type production and broadened access for designers, both in making and using type. Like all industries, we are poised at the base camp of the AI mountain, bracing ourselves for a steep and transformative climb.

Predictions of the medium-term impact of artificial intelligence on type design generally converge around two main scenarios:

1. AI as a collaborative tool (AI as co-Pilot)
   In this scenario, AI assists in the type design process, taking on time-consuming tasks like creating bold versions or italics of a typeface. This would benefit type designers by streamlining their workflow and allowing more room for creative exploration without the burden of repetitive tasks.
2. Fully AI-Generated Fonts (AI as autopilot)
   As with our TypeMaster3000 scenario, AI would independently create fonts in this scenario, likely resulting in a surge of free, enthusiast-prompted typefaces. Initially, these may lack the innovation, consistency, and craftsmanship of professional designs, so the market will likely lean towards more dependable, expertly generated AI fonts.

Over time, however, it is expected that we will gravitate towards autopilot fonts, as even naively prompted AI results (e.g., “Make me a seaside holiday font”) will begin to match, then surpass, human-made efforts. Both scenarios seem like good news for type users, offering a wider variety of fonts. But this change will completely disrupt the type industry.

A Gutenberg-Scale Transformation

Yet, this vision is far from the summit of our AI mountain. While disruptive, it marks a crucial and necessary transition for the type industry towards a groundbreaking future. While the journey may be challenging, AI is poised not just to generate innovative fonts but to fundamentally revolutionise our text communication, paving the way for a new era of dynamic and interactive typography.

Despite previous technological advances, typography actually hasn’t changed much since its invention almost 600 years ago, and much scribal creativity was sacrificed to make text more accessible. The next evolutionary step will be dynamic, context-sensitive typefaces. These would provide more nuanced and precise forms of communication, tailoring text to specific contexts and user needs.

This typographic revolution will significantly benefit our global civilization and should be our ultimate aim.

Current Advances In The AI Revolution

AI image generation, especially in deep learning, is advancing fast. Focussed mainly on pixel-based imagery, it achieves impressive results. These are created using neural networks to manipulate individual pixels, like creating a digital mosaic. Yet vector graphics, integral to font creation, are moving at a slower pace, with only a handful of papers surfacing in 2023.

Vector graphics, defined by Bézier curves, present a more complex challenge for neural encoding due to their algorithmic nature. Yet, there’s growing momentum in adapting language model techniques to this field, showing promise for more sophisticated applications.

One area of notable progress is style-transfer research, where AI learns and applies the style of one image to another. This would be like fusing a Roundhand script style into a modern Sans Serif, creating something like Helvetica with swashes and stroke contrast.

Significant strides are also being made in so-called few-shot font generation tasks, which involve AI learning a font’s style from a few initial characters and then extrapolating it to generate a complete font.

This approach has enormous commercial and creative potential, especially for designing multilingual fonts and those with huge character sets like Japanese and Chinese fonts.

While AI’s potential for producing vector graphics and typography is still in the early stages, the current direction shows a promising future, gradually overcoming the complexities and opening new avenues for designers.

Guiding the Future: The Crucial Role Of Designers In AI Typography

Given this trajectory and the lofty claims of what AI may do in the future, creative professionals are rightly contemplating its short-term implications. Designers are increasingly concerned that their specialised skills, including typography, might be overlooked in a landscape filled with AI-aided enthusiasts.

To preserve our creative integrity and professional effectiveness, it’s crucial for designers to influence the development of AI tools and insist on high design standards to positively shape the future of our industry.

“

Despite initial fears and controversies, Gutenberg’s press became one of history’s most transformative inventions. AI, too, holds a similar potential, but its direction depends on our approach.

The Designer’s Dilemma: Embracing AI While Maintaining Quality

We face a choice: harness artificial intelligence to boost our creativity and efficiency or risk allowing naive automation to erode the quality of our work. Rather than being passive spectators, we must actively steer AI advancements toward quality-driven outcomes, ensuring these tools enhance rather than diminish our design capabilities.

It has been noted that designers can harness AI tools more effectively because they possess a deep understanding of how to construct an idea. But embracing these new tools doesn’t mean relaxing our guard and allowing standards to be set for us. Instead, we should use AI as a springboard for inspiration and innovation.

For example, current AI-generated imagery often yields unexpected results due to a combination of unwieldy text prompts and massive data sets. But it can be an effective tool for inspiration and to spark new ideas.

Holding The Line In AI Typography

In typography, designers will need to be more vigilant when selecting typefaces. A flood of potentially original and inventive amateur fonts may flood the market, requiring more than just surface-level assessment of their quality. Designers will need to check their character sets, spacing, and overall design more carefully.

Using typefaces skillfully is more important than ever, as it will not only make work stand out but also influence industry trends and standards to inspire and guide type designers.

Adapting To AI In Type Design

The development and direction of AI tools don’t need to be solely in the hands of large corporations investing billions into the technology. A positive step forward would be for type-foundries to collaborate, pooling their resources to create a collective AI software model. This cooperative approach would enable them to not only capitalise on AI-driven innovations but also safeguard their unique designs from unauthorised use by others.

Furthermore, research indicates that smaller AI models can sometimes outperform their larger counterparts, opening doors for independent foundries to develop custom, small-scale AI tools tailored to their specific needs.

Designers Shaping the Future: From Static Typography To AI-Driven Innovation

While a wave of mixed-quality amateur fonts is a concern, AI is poised to significantly enhance the quality and innovation of professionally crafted typefaces. In partnership with developers, type designers will lead the next evolution of type.

What we’ve become used to in terms of typography is woefully static, lacking the ability to dynamically adjust to content, context, or reader interaction. At present, our options are limited to changing font styles and incorporating emojis.

“

Historically, scribes were adept at creating text with emphasis and embellishments, enriching the transfer of information. When Johannes Gutenberg invented his printing press, his goal wasn’t to surpass scribes’ artistry but to bring knowledge and information to the masses. Gutenberg succeeded as far as that is concerned, but it left behind the scribes’ nuanced abilities to visually enhance the text, even if the type has evolved creatively along the way.

Typography’s Destiny

The next revolution in typography ought to usher in an era of fluidity, adaptability, and interactivity in textual presentation. The type ought to act more like custom lettering. This shift would significantly enhance the reader’s experience, making written communication more versatile, precise, and responsive to various factors such as:

• Content sensitivity
  Text might change based on the content it’s displaying. For example, changing style and rhythm for the climax of a book or floating playfully when reading an uplifting poem.
• Environmental adaptability
  Text changes in response to different lighting or the reader’s distance from the text.
• Emotional expression
  Incorporating elements that change based on the emotional tone of the text, like color shifts or subtle animations for expressive communication.
• User interaction
  Text could vary depending on the user’s reading speed, eye movement, or even emotional responses detected through biometric sensors.
• Device and platform responsiveness
  We could have text adapted for optimal readability, considering factors like screen size, resolution, and orientation without having to “guess” in CSS.
• Accessibility Enhancements
  Imagine situations where text dynamically adjusts in size and contrast to accommodate young, dyslexic, or those with visual impairments.
• Language and cultural adaptation
  For example, a type could effortlessly transition between languages and scripts while maintaining the design’s typographic intention and adapting sensitively to cultural nuances.

Conclusion: Embracing The Future Of Design

We stand at the threshold of a monumental shift in typography. Like every industry, we’re entering a period of significant transformation. Future scenarios like TypeMaster3000 show how turbulent the journey will be for the industry. But it is a journey worth making to push beyond the barriers of static type, advance our creative capabilities, and foster better communication across cultures.

Change is coming, and as designers, it’s not enough to merely accept that change; we must actively steer it, applying our expertise, taste, and judgment. It’s crucial that we collectively guide the integration of AI in typography to do more than automate — we must aim to elevate. Our goal is dynamic, precise, and contextually responsive typography that transcends the static utility of fonts.

By guiding AI with our collective creativity and insights, we can not only augment our creativity but raise design standards and enrich our entire civilization.

(gg, yk)

You may already be familiar with the CSS clamp() function. You may even be using it to fluidly scale a font size based on the browser viewport. Adrian Bece demonstrated the concept in another Smashing Magazine article just last year. It’s a clever CSS “trick” that has been floating around for a while.

But if you’ve used the clamp()-based fluid type technique yourself, then you may have also run into articles that offer a warning about it. For example, Adrian mentions this in his article:

“It’s important to reiterate that using rem values doesn’t automagically make fluid typography accessible for all users; it only allows the font sizes to respond to user font preferences. Using the CSS clamp function in combination with the viewport units to achieve fluid sizing introduces another set of drawbacks that we need to consider.”

Here’s Una Kravets with a few words about it on web.dev:

“Limiting how large text can get with max() or clamp() can cause a WCAG failure under 1.4.4 Resize text (AA), because a user may be unable to scale the text to 200% of its original size. Be certain to test the results with zoom.”

Trys Mudford also has something to say about it in the Utopia blog:

“Adrian Roselli quite rightly warns that clamp can have a knock-on effect on the maximum font-size when the user explicitly sets a browser text zoom preference. As with any feature affecting typography, ensure you test thoroughly before using it in production.”

Mudford cites Adrian Roselli, who appears to be the core source of the other warnings:

“When you use vw units or limit how large text can get with clamp(), there is a chance a user may be unable to scale the text to 200% of its original size. If that happens, it is WCAG failure under 1.4.4 Resize text (AA) so be certain to test the results with zoom.”

So, what’s going on here? And how can we address any accessibility issues so we can keep fluidly scaling our text? That is exactly what I want to discuss in this article. Together, we will review what the WCAG guidelines say to understand the issue, then explore how we might be able to use clamp() in a way that adheres to WCAG Success Criterion (SC) 1.4.4.

WCAG Success Criterion 1.4.4

Let’s first review what WCAG Success Criterion 1.4.4 says about resizing text:

“Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality.”

Normally, if we’re setting CSS font-size to a non-fluid value, e.g., font-size: 2rem, we never have to worry about resizing behavior. All modern browsers can zoom up to 500% without additional assistive technology.

So, what’s the deal with sizing text with viewport units like this:

h1 {
  font-size: 5vw;
}

Here’s a simple example demonstrating the problem. I suggest viewing it in either Chrome or Firefox because zooming in Safari can behave differently.

If you click the zoom buttons in the demo’s bottom toolbar, you’ll notice that although the page zoom level changes, the text doesn’t get smaller. Nothing really changes, in fact.

The issue is that, unlike rem and px values, browsers do not scale viewport-based units when zooming the page. This makes sense when thinking about it. The viewport itself doesn’t change when the user zooms in or out of a page. Where we see font-size: 1rem display like font-size: 0.5rem at a 50% zoom, font-size: 5vw stays the same size at all zoom levels.

Herein lies the accessibility issue. Font sizes based on vw — or any other viewport-based units for that matter — could potentially fail to scale to two times their original size the way WCAG SC 1.4.4 wants them to. That’s true even at 500%, which is the maximum zoom level for most browsers. If a user needs to zoom in at that scale, then we need to respect that for legibility.

Back To clamp()

Where does clamp() fit into all of this? After all, many of us don’t rely solely on vw units to size type; we use any of the many tools that are capable of generating a clamped function with a rem or px-based component. Here’s one example that scales text between 16px and 48px when the viewport is between 320px and 1280px. I’m using px values for simplicity’s sake, but it’s better to use rem in terms of accessibility.

h1 {
  font-size: clamp(16px, 5.33px + 3.33vw, 48px)
}

Try zooming into the next demo to see how the text behaves with this approach.

Is this font size accessible? In other words, if we zoom the page to the browser’s 500% maximum, does the content display at least double its original size? If we open the demo in full-page view and resize the browser width to, say, 1500px, notice what happens when we zoom in to 500%.

The text only scales up to 55px, or 1.67 times its original size, even though we zoomed the entire page to five times its original size. And because WCAG SC 1.4.4 requires that text can scale to at least two times its original size, this simple example would fail an accessibility audit, at least in most browsers at certain viewport widths.

Surely this can’t be a problem for all clamped font sizes with vw units, right? What about one that only increases from 16px to 18px:

h1 {
  font-size: clamp(16px, 15.33px + 0.208vw, 18px);
}

The vw part of that inner calc() function (clamp() supports calc() without explicitly declaring it) is so small that it couldn’t possibly cause the same accessibility failure, right?

Sure enough, even though it doesn’t get to quite 500% of its original size when the page is zoomed to 500%, the size of the text certainly passes the 200% zoom specified in WCAG SC 1.4.4.

So, clamped viewport-based font sizes fail WCAG SC 1.4.4 in some cases but not in others. The only advice I’ve seen for determining which situations pass or fail is to check each of them manually, as Adrian Roselli originally suggested. But that’s time-consuming and imprecise because the functions don’t scale intuitively.

There must be some relationship between our inputs — i.e., the minimum font size, maximum font size, minimum breakpoint, and maximum breakpoint — that can help us determine when they pose accessibility issues.

Thinking Mathematically

If we think about this problem mathematically, we really want to ensure that z₅(v) ≥ 2z₁(v). Let’s break that down.

z₁(v) and z₅(v) are functions that take the viewport width, v, as their input and return a font size at a 100% zoom level and a 500% zoom level, respectively. In other words, what we want to know is at what range of viewport widths will z₅(v) be less than 2×z₁(v), which represents the minimum size outlined in WCAG SC 1.4.4?

Using the first clamp() example we looked at that failed WCAG SC 1.4.4, we know that the z₁ function is the clamp() expression:

z₁(v) = clamp(16, 5.33 + 0.0333v, 48)

Notice: The vw units are divided by 100 to translate from CSS where 100vw equals the viewport width in pixels.

As for the z₅ function, it’s tempting to think that z₅ = 5z₁. But remember what we learned from that first demo: viewport-based units don’t scale up with the browser’s zoom level. This means z₅ is more correctly expressed like this:

z₅(v) = clamp(16*5, 5.33*5 + 0.0333v, 48*5)

Notice: This scales everything up by 5 (or 500%), except for v. This simulates how the browser scales the page when zooming.

Let’s represent the clamp() function mathematically. We can convert it to a piecewise function, meaning z₁(v) and z₅(v) would ultimately look like the following figure:

We can graph these functions to help visualize the problem. Here’s the base function, z₁(v), with the viewport width, v, on the x-axis:

This looks about right. The font size stays at 16px until the viewport is 320px wide, and it increases linearly from there before it hits 48px at a viewport width of 1280px. So far, so good.

Here’s a more interesting graph comparing 2z₁(v) and z₅(v):

Can you spot the accessibility failure on this graph? When z₅(v) (in green) is less than 2z₁(v) (in teal), the viewport-based font size fails WCAG SC 1.4.4.

Let’s zoom into the bottom-left region for a closer look:

This figure indicates that failure occurs when the browser width is approximately between 1050px and 2100px. You can verify this by opening the original demo again and zooming into it at different viewport widths. When the viewport is less than 1050px or greater than 2100px, the text should scale up to at least two times its original size at a 500% zoom. But when it’s in between 1050px and 2100px, it doesn’t.

Hint: We have to manually measure the text — e.g., take a screenshot — because browsers don’t show zoomed values in DevTools.

General Solutions

For simplicity’s sake, we’ve only focused on one clamp() expression so far. Can we generalize these findings somehow to ensure any clamped expression passes WCAG SC 1.4.4?

Let’s take a closer look at what’s happening in the failure above. Notice that the problem is caused because 2z₁(v) — the SC 1.4.4 requirement — reaches its peak before z₅(v) starts increasing.

When would that be the case? Everything in 2z₁(v) is scaled by 200%, including the slope of the line (v). The function reaches its peak value at the same viewport width where z₁(v) reaches its peak value (the maximum 1280px breakpoint). That peak value is two times the maximum font size we want which, in this case, is 2*48, or 96px.

However, the slope of z₅(v) is the same as z₁(v). In other words, the function doesn’t start increasing from its lowest clamped point — five times the minimum font size we want — until the viewport width is five times the minimum breakpoint. In this case, that is 5*320, or 1600px.

Thinking about this generally, we can say that if 2z₁(v) peaks before z₅(v) starts increasing, or if the maximum breakpoint is less than five times the minimum breakpoint, then the peak value of 2z₁(v) must be less than or equal to the peak value of z₅(v), or two times the maximum value that is less than or equal to five times the minimum value.

Or simpler still: The maximum value must be less than or equal to 2.5 times the minimum value.

What about when the maximum breakpoint is more than five times the minimum breakpoint? Let’s see what our graph looks like when we change the maximum breakpoint from 1280px to 1664px and the maximum font size to 40px:

Technically, we could get away with a slightly higher maximum font size. To figure out just how much higher, we’d have to solve for z₅(v) ≥ 2z₁(v) at the point when 2z₁(v) reaches its peak, which is when v equals the maximum breakpoint. (Hat tip to my brother, Zach Barvian, whose excellent math skills helped me with this.)

To save you the math, you can play around with this calculator to see which combinations pass WCAG SC 1.4.4.

Conclusion

Summing up what we’ve covered:

• If the maximum font size is less than or equal to 2.5 times the minimum font size, then the text will always pass WCAG SC 1.4.4, at least on all modern browsers.
• If the maximum breakpoint is greater than five times the minimum breakpoint, it is possible to get away with a slightly higher maximum font size. That said, the increase is negligible, and that is a large breakpoint range to use in practice.

Importantly, that first rule is true for non-fluid responsive type as well. If you open this pen, for example, notice that it uses regular media queries to increase the h1 element’s size from an initial value of 1rem to 3rem (which violates our first rule), with an in-between stop for 2rem.

If you zoom in at 500% with a browser width of approximately 1000px, you will see that the text doesn’t reach 200% of its initial size. This makes sense because if you were to describe 2z₁(v) and z₅(v) mathematically, they would be even simpler piecewise functions with the same maximum and minimum limitations. This guideline would hold for any function describing a font size with a known minimum and maximum.

In the future, of course, we may get more tools from browsers to address these issues and accommodate even larger maximum font sizes. In the meantime, though, I hope you find this article helpful when building responsive frontends.

(gg, yk)

Welcome to the second part of the guide to typography in fintech. In Part 1, we reviewed the key points to consider when choosing typefaces:

• What is the content of your product? What type of data do you mainly work with?
• Who is your common user, and in which circumstances do they use the product?
• What are the specific points you need to keep in mind? For example, what language support is planned for the future? Or, maybe you need to use some specific glyphs (math or rare currency symbols) in your product.

We also reviewed all font parameters and started investigating how they affect readability and legibility. Now, let’s discuss how to apply them to your designs.

Adjust Texts And Tables

Point Size

When choosing a point size, we need to consider the body text first. Body text is the most massive part of your content, and its style determines design and visual appearance. It’s also essential to remember that x-height might vary slightly from type to type. Therefore, not all typefaces will look the same in the same size, and you will probably need to adjust it.

The general rule is that the size of the screen body text should be 12-16px. But this measurement may change depending on your needs. When you work with investment apps, users should be able to see a large amount of information on a single screen. An appropriate solution here might be to reduce the body text size to 10px but pay attention to legibility. In addition, traders usually want to see big amounts of data on a single screen, without scrolling anything, as it might affect the speed of reaction. We had such a case when a client asked us to make all the body text smaller to fit the screen.

Secondly, consider headings. Try to build a clear content hierarchy that will help users to work with the content. Figure out how many levels of headings you need. Don’t use too many, aiming for three to five levels.

Try to avoid using uppercase capitalization. But if you capitalize headings in uppercase, make them short.

When set in uppercase, the text is less legible. The lowercase text has different shapes, ascenders, and descenders. They help us intuitively recognize letters in context without spending time deciphering them when reading. Uppercase text reduces this recognition because capital letters generally have square shapes. So, the more capitalized text you have in a row, the more time a user needs to read it.

Another tip is to avoid italics, underlining, and other ways to differentiate headings visually unless you’re working on a small visual material and have a strong reason for such expressive typography. If it’s a must, choose a bold font for visual contrast and accents, but use it sparingly.

Text Column

When working with texts, you must determine a suitable length of text lines. Overly long text lines are hard to follow. Generally, the average size is 55-60 characters per line. Following these values will help you keep the text readable.

Line Spacing

The next step is to choose an appropriate line spacing (or leading) for your text. This measurement determines the distance from the baseline to the baseline in a text paragraph. Usually, optimal line spacing equals 120% of body text size, e.g., 12x1,2=14.4 for 12px text. But depending on the circumstances, you can vary this setting between 120% and 145%.

Besides the point size, the width of the column is an important aspect that affects line spacing. Generally, the rule is the wider the text column, the more spacing between lines you need (see the illustration above). For narrow columns, quite tight spacing works well, as you don’t need to follow the long way from the beginning to the end of the line. Also, consider the space between columns: line spacing should not be larger but noticeably smaller, as it will cause confusion and mess. Users should be able to distinguish text blocks from one another easily.

Letterspace And Tracking

In high-quality typefaces, type designers carefully adjust letter spacing so you can use them by default. However, there are several cases when additional settings are required.

First, when setting text in small point size (10px or less), e.g., for captions or tooltips, add some small positive tracking — 1–2% is enough. It helps make the text more legible.

Positive tracking is also needed in lines set in capital letters. Uppercase characters (and their sidebearings) are designed to come before lowercase at the beginning of a word. For this reason, the All Caps setting is usually too tight and requires additional spacing.

Tips:

• Think twice when setting text in uppercase, and don’t do this without a strong reason because it affects legibility.
• Avoid more than three to five words in uppercase.
• For a larger amount of text, choose a typeface with small caps.
• Don’t try to imitate small caps by using capitals in smaller sizes.

Negative tracking might be applied when you use a type in an extremely large point size.

Design The Spreadsheets

A spreadsheet is a complex form of data representation that should have a high level of legibility. Setting up a spreadsheet can be tricky because, in digital products, we work with dynamic data, and therefore, we can only sometimes predict their behavior.

A good practice is to consider all possible corner cases. What if a number has ten digits in the fractional part? Do we really need to show the whole number, or can we shorten it? What if cells contain data of very different lengths? Ask your analyst to consider all possible situations to avoid unpleasant surprises after release.

Here are several core rules to improve your spreadsheet:

Use Monospace (Or Tabular) Digits

Monospace digits are a set of digits with equal space width and central position within them, unlike default ones. It’s the most convenient way to align data precisely, allowing you to place digits in a column one below another. Tabular digits are especially useful in compound products like traders’ watchlists and spreadsheets. They help to keep the layout while values change in real time.

The Open Type format supports this feature and can be enabled in the Type Settings menu > Details in Figma.

Align Numbers By The Right Side Or By A Decimal Separator

Depending on using integers or fractionals, choose the appropriate alignment. The aim is to place digits with the same meaning one below another in a column.

Right alignment allows you to align digits according to their position in the numeral system. It works well if you work with integers.

If you work with fractionals, align by a decimal separator.

Alternatively, fill empty spaces with zero symbols. In this case, columns will align by separator automatically.

When adding additional symbols after values, such as currency or footnote, do it with an overhang.

Choose a suitable alignment for the column’s headings. Usually, the heading is aligned on the same side as the column’s content, and this is the most convenient and fast path for developers when working with dynamic data.

Typesetting numeral data in monospaced figures and suitable alignment provides clear data representation and improves legibility.

“

Use Appropriate Separation Marks

Consider applying different rules to the sign of the decimal separator. Depending on localization, it might be a comma or period: use periods for the US, the UK, Australia, and Canada, and choose a comma if your audience is from European countries, like France, Germany, and so on.

Thousands of separators vary between space, comma, apostrophe, and period, depending on the region. Find out which sign is used in your case and apply your approach consistently.

Pay Attention To Currency Symbols

Note that the appropriate place for currency symbols also varies. The dollar sign and most signs of European currencies usually stand before the value. If you work with a specific symbol, ensure you know the usage rules.

The placement of the euro sign is determined by language. According to the EU Interinstitutional style guide (page 114), the character is placed before value in English-speaking countries, as well as in Dutch, Irish, and Maltese. In all other European languages, the order is reversed.

There are also rare cases when symbols are placed in the decimal separator position, for example, Cape Verdean escudo.

Make sure to place currency codes after value. It is a rule.

Avoid Unnecessary Graphics

Striped backgrounds, lines, and borders are instruments of cell connection that help users follow the line in the spreadsheet. Repetitive striped backgrounds and lines often create visual noise and disturb attention. Make sure you have a solid reason to use it and apply sparingly.

Avoid using bright colors and patterned lines (dashed, dotted, and so on). Lines and borders should be solid and thin, as they are supporting elements that shouldn’t distract from data.

A neat layout is the best way to connect elements (cells) into a solid unit (row). Use the Proximity principle to show a relation between objects.

Making horizontal space between columns tighter than vertical space between rows will help you connect elements intuitively without additional graphic details.

“

Try it before using any extra elements.

Master Accessibility

If you’re a designer, you probably use high-quality screens to see a wide color range. In this situation, it is very tempting to use subtle color shades, pale shadows, and other details to make your product look visually sophisticated.

In real life, the average trading platform user may work in various conditions: on an old computer, on a low-quality screen, or simply in bright sunlight. Do not forget about people with special needs: low vision, color blindness, and so on. It is essential to remember that 90% of your audience will barely notice delicate color schemes and nuances. And this is a reason to take care of the contrast ratio.

Contrast Ratio

Contrast ratio is a numeral value in format X:1 where X may vary from 1 (weakest contrast) to 21 (maximum). 1:1 means comparing colors with no contrast, and 21:1 is obtainable by comparing black and white.

When checking your contrast ratio, you will meet such labels as AA and AAA. These are levels of accessibility, from lower to higher, based on WCAG accessibility standards. According to several factors, such as how broad your audience is, which is the average age of the user, and which possible use circumstances you can predict, you should meet at least AA.

There are different criteria for text and graphic elements for each standard. Each level requires a specific contrast ratio:

• AA: at least 4.5:1 for normal text and 3:1 for bold or large text,
• AAA: 7:1 for normal text and 4.5:1 for bold or large text.

How do you check if your product meets these criteria? You can use one of many online tools, for example, Web AIM contrast checker. There are also plenty of plugins in Figma that you can try.

At Devexperts, we usually create products with dark themes as it gives us more freedom in color choice. Due to our specialization, we often need many colors to highlight various values and functions. It’s easier to pick a color with enough contrast to the dark background and make our products accessible to as many people as possible.

Find That One Typeface

So, knowing these simple steps to consider, it’s time to choose a font for your fintech product. There are plenty of marketplaces where you can purchase licensed typefaces. Check myfonts.com first, as it is the biggest player in this field. Many type foundries and independent designers sell their fonts on this platform.

You can also buy a font directly from the type foundry’s website. This is probably the best idea, as you (or the type designer) will not pay an additional fee to the platform. You can also explore all typefaces by this type foundry and find some more fonts you like for future projects. Here is a list of foundries to check out.

Commercial Type

Commercial Type’s library includes a wide range of typefaces of exceptional quality.

The founders of Commercial Type are Paul Barnes and Christian Schwartz, designers who are well-known for their typeface Guardian Egyptian, created for The Guardian in 2004–05.

Type.Today

Type.Today is a store with an inspiring collection of modern, high-quality typefaces. The project was founded by Ilya Ruderman and Yuri Ostromensky, who are also co-founders of CSTM fonts type foundry.

You might also want to check the other part of the project: Type.Tomorrow, which presents more experimental and crazy typefaces.

Typotheque

Typotheque is a Netherlands-based type design company founded by Peter Bilak in 1999. It has a massive library of retail fonts that may serve any designer’s need. They have plenty of great type-related products in their shop.

Klim

Founded by Kris Sowersby in 2005, Klim type foundry creates custom and retail typefaces. Their work combines deep historical knowledge with a contemporary approach to graphics. Check their blog — it has lots of exciting reading.

Colophon Foundry

Colophon Foundry is a London-based type agency that offers an impressive choice of modern, perfectly executed typefaces. Don’t forget to check trials as well.

I Love Typography

ILT is not only a shop with an impressive collection of accurately-picked typefaces. It is also a blog with lots of great type-related materials on a wide range of topics. Highly recommended!

Grilli Type

Grilli Type is a foundry that offers types with a very modern feeling. Their library is not that wide in amount of typefaces, but each has a vast number of styles. They also provide trial versions for all their faces.

TypeTogether

Established in 2006 by two graduates from Reading University, TypeTogether foundry is concentrated on text typefaces for editorial purposes. Except for that, they have plenty of display retail fonts in their catalog.

If you’re a student looking for a typeface for non-commercial use, check student license support on the website. Sometimes, foundries give scholars good discounts or even offer some fonts for free. There are also trial versions provided, so you can check if the typeface works well for your project before purchasing.

Also, you can try Fontstand. It is a great platform where you can try and rent fonts for a couple of dollars and use them for commercial projects.

At Future Fonts, you can find a great variety of typefaces in progress available for purchase with a good discount. You will also receive all updates for the purchased typeface, which sounds like a great investment!

And finally, if you don’t have a budget at all, there are still some options. For example, Google Fonts have a number of good typefaces which you can use for free for any kind of project. Take a look at IBM Type Family, Open Sans, PT Sans, Inter, or Roboto. These are widely used fonts we all know and meet in various products. For sure, you will find something suitable there.

In any case, do not forget to read the license carefully, and feel free to ask the vendor/type foundry if you have questions.

Conclusion

Finding the right typeface is tricky as a whole. Dividing the process into steps and having the right information at hand will make this journey a design adventure full of surprises. To avoid sinking into unnecessary details, use this guide as a map for your path, and you will never get lost.

That’s it! Hopefully, you’ve found this article helpful for improving your workflow. Explore typefaces, as this is a great and powerful instrument for designers, and stay in touch!

Further Reading On SmashingMag

• “Free Fonts For Interface Designers,” Cosima Mielke
• “How To Use Face Motion To Interact With Typography,” Edoardo Cavazza
• “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols,” Thomas Bohm
• “7 Gorgeous Free And Open-Source Typefaces And When To Use Them,” Noemi Stauffer

(yk)

Hi! My name is Daria, and for the last two years, I’ve been working at Devexperts. I have experience creating various products, from crypto wallets to exchange administration platforms. Our target audience is diverse from professional and non-professional brokers, novice and experienced traders to dealing staff and trade desk operators. All of them use financial tools daily, and some of them — with high intensity.

Сontinuous use of the product under high tension conditions (which is common when we talk about the financial sphere) might cause eyestrain and general weariness. Consequently, users might make poor decisions and become inattentive to details, which will lead to harming their investment portfolios. My goal, as a designer, is to prevent these drawbacks and make daily operations comfortable.

The main designer’s instrument to work with the product is the UI kit, a collection of reusable components, such as controls, color palettes, effects, and text styles. Typography is an important part of it as it defines a text style library and conveys the most valuable and powerful instrument — the information — from platform to user.

To explain my approach to digital product typography, I invite you to go over each step, from research to implementation. Before diving deep, let’s cover the basic terms.

Basic Terminology Before We Begin

A typeface (or a font family) is a range of graphically similar fonts with a common visual idea behind them. For example, Helvetica is a typeface.

A font is part of a typeface. It is a collection of symbols that might differ in weight (Semibold/Bold/Black), might be upright or italic (Regular/Cursive/Italic), have various widths (Narrow/Wide), and so on.

Please keep in mind that these two terms are often interchangeable, even when used by type designers.

Now that we have our basic terms defined let’s go over our suggestions on the workflow when creating or choosing a font for a fintech product.

Step 1: Detect Data Types And User Flows

If you’re a fintech designer in the trading sphere, you’ll mainly deal with spreadsheets. Usually, they represent fundamental page units with data on markets.

Other standard data media include product cards and forms for order entry, cancellation, adjustment, and so on. Product cards provide users with more detailed information on trading instruments, while forms allow users to interact with markets. These interactions are user flows.

What do all these different kinds of information have in common? They’re all displayed as texts. In this case, the core design values are the following:

• An appropriate typeface,
• Working with typography,
• A layout,
• An accurate representation of information.

In the picture above, you can see the example of a platform for exchange administrators with all typical types of data. A spreadsheet displays a list of trades and dozens of their parameters. At the back is an example of a trading instrument card (currency pair) with dynamic quotes that update in real time. The chart displays trade history with prices and volumes, and the Market Depth graph at the right shows the current state of the market — the volume of Buy and Sell orders and their prices.

Now when we have defined the most common types of data in fintech products, let’s zoom in and see what specific circumstances we need to consider in our product.

Step 2: Consider Your Requirements

Best design practices facilitate current requirements and consider potential scenarios of product evolution. When working on a fintech product, you should also consider features such as language support, special characters, and use conditions. Let’s have a look at these spheres and highlight the most considerable points in each of them.

Language Support

Forecasting specific typographical cases at the start of a project might be a great investment for future development. For instance, product localization and translation to various languages is one such case. Should your product support one or multiple languages? If multiple, try to understand the average difference in word lengths.

For example, German words are generally much longer than English ones. Compared to these two, French and Spanish words are somewhere in between. Consequently, French or German versions need more text space in design than the English one, which will cause layout changes.

Many languages also use diacritics (additional typographical signs above and under the letters). These writing systems may require more space between lines to make texts more legible.

Logographic or logosyllabic writing systems are quite the opposite: unlike Latin-based languages, they are usually very compact. Few font families support both hieroglyphic and Latin languages, though. So, if you can’t find an appropriate font for your needs, you’ll have to pick out two different typefaces that will match visually.

Having information on supported writing systems and future localizations will allow you to choose a typeface with all the necessary languages. Contact the product owner or manager to determine which languages may appear in your product. This way, you will develop a design for all corner cases and create a visual system fit for all localizations.

Required Symbols

Another critical aspect to consider from the start is special characters. For example, in the fintech sphere, the designer deals with trading markets and often needs to use a variety of currency symbols, math formulas, and decimals.

There are plenty of ways to find out what glyphs a typeface includes. You can learn this information on Type Foundries websites and typeface marketplaces. Check the type specimen to explore all supported features, glyphs, languages, and characteristics.

If you already have a typeface on your laptop, it’s easy to check glyphs in a Font book if you use macOS or a Character map if you operate Windows.

Below, we have an example from macOS. Select the font and switch to the repertoire preview mode to find an entire spreadsheet.

You can also make use of a font-managing app. One of its perks is the font library management according to characteristics. There are many such apps, so it should be easy to find the one that suits your taste and budget. A good option might be Typeface or FontBase if you’re looking for a free app.

Another challenge with glyphs that awaits you is Figma. Unlike Adobe products, it doesn’t offer a glyph panel. It means you don’t see the full contents of a font and can’t choose a symbol you need directly on Figma. However, you can copy the required glyph from the Font Book or Character map and paste it into your design.

Use Conditions

When you start a new project, consider what type of information it represents and the most common use conditions. For example, if it’s an article, it’s mostly text information with extensive accented quotes, or the text consists of short paragraphs broken down by photos. We presume that the user will most likely read it in a calm setting, as it is the most comfortable way to concentrate on a long text and will need half an hour to finish it.

Let’s review a drastically different case. We’re designing a product for professional use overloaded with data comprising mostly repetitive figures. Users operate various gadgets to work with the data all day in varying conditions. They can get tired and lack attention but must analyze the data and react swiftly.

When we work with fintech products, we mainly work with the second scenario. Our average user deals with numbers and important operations. Investors analyze markets and trade securities, while trade desk operators manage orders. Even a slight hiccup in data performance may cause a great mistake in operations. A carefully selected typeface and precise layout will help you support your user and make their workflow convenient.

Step 3: Discover Typeface Options

Understanding typeface features will help you decide on the most suitable fonts. For this reason, we’ll first break down the categories and characteristics of typefaces.

Classes

Typeface classification has been a subject of discussion for typographers for a long time. (For further information, you can read “The trouble with font classifications” and “Talking about type: from Aristotle to Arial.”) For years the common classification, adopted by Association Typographique Internationale was the Vox-ATypI system, invented by Maximilien Vox in 1954. This system is based on two characteristics of type: visual traits and the historical period of its appearance. It included nine categories that were later expanded to 11 by ATypI.

However, typography has developed dramatically, and this system does not reflect modern type design, as it simply ignores a big part of contemporary typefaces. Most modern typefaces tend to have a mix of characteristics from different historical periods and refer to several categories. The endorsement of this system was withdrawn in 2021, and, at the current moment, the association is working on a new system that would meet needs of modern typographers.

The Vox system might be useful for the exploration of type design history and research if you want to dive deep into this theme. However, for the daily use of a product designer, classification according to visual characteristics rather than historical periods might be more helpful. The division into four abstract meta-groups, based on the Vox system with some additions from modern typeface design, will help you to classify typefaces clearly enough.

Note: If you’d like to dig further, you may want to check other classification systems.

Typeface Proportions

Typefaces fall under two headings: proportional or monospaced, according to the ratio of proportions within the font.

Proportional types have varying widths of letters according to tradition, rules, and the ideas of their designers.

Monospaced fonts, in contrast, comprise characters of equal width. Design of the glyphs in monospaced typeface may vary: wide characters, such as m or w, may have narrow proportions to fit the width. Such thin letters as i or l may have a lot of empty space around or long serifs to fill this space. In any case, the width of each letter, including its space around, will be equal.

Proportional typefaces are natural and traditionally used for daily needs. Monospaced fonts are usually used in specific cases when it is essential to set text in accurate columns with each symbol below the other, such as tables with numerals, sales checks, programming code, and so on.

Characteristics

An essential measurement we constantly work with is the size of a typeface or its x-height. It’s the height of the actual letter in lowercase from the baseline to the mean line that equals character x. Capital height refers to the size of uppercase letters. Small caps are the characters whose height is between lowercase and caps. They are a great instrument for particular cases.

Ascenders and descenders are the elements that go above the mean line and beyond the baseline. The long stem in h is an ascender, and the falling tail in y is a descender.

A counter is an enclosed space inside a letter. For example, in o’s or q’s, the white inner space is a counter.

Serifs are short strokes at the end of stems that differentiate Serif typefaces from Sans Serifs.

An aperture describes to what extent symbols are open. A large aperture means that such letters as c or s are open and have a lot of space between their strokes. When these symbols are tight and closed, the aperture is small. This characteristic specifies legibility: a large aperture helps distinguish similar letters in small sizes, such as c and o.

Contrast is a difference between stroke thickness in vertical and horizontal stems.

These terms are basic but essential for understanding how the characteristics of a typeface affect its legibility. If you want to dig into this word, check out the Monotype terms dictionary.

Step 4: Define The Typeface’s Purpose

All typefaces may be divided into “display” (or “headline”) and “text” groups. However, there are existing cases when typeface works well both as text and display. (For more information, check “Text v. Display” and “Selecting Display Type: Getting Started.”) Both these sides have their character and tone of voice, but they’re meant to be used in different contexts and situations.

Display fonts are better suited for headings, accents, and other cases for large font-size texts. They often have tighter spacing and sophisticated shapes that fade and may cause visual noise in small sizes. But it never hurts to consider the circumstances of use. Users might need more time to recognize a display font with complicated shapes, even in a large size.

High contrast is also a font characteristic of the display role and long ascenders and descenders.

Alternatively, body text fonts have a simplified appearance and a high level of legibility in small sizes. When choosing a typeface for a body text, go for one with low or no contrast. In this case, high contrast will affect readability: thin strokes will cause visual vibration and negatively influence readability. Large aperture and open shapes are also a good choice as they help keep similar letters distinct, such as c and o.

Different graphics in similar letters, such as i, l, and I, help perceive letters, especially without context (when used in tickers, codes, sets of symbols, and so on). Most text fonts have enlarged x-height and counters, a slight difference in heights between lowercase and caps, and short ascenders/descenders. Thus, it saves vertical space for lengthy texts and ensures their legibility.

If you have plenty of data and need to save horizontal space, a font with compact proportions may be a suitable solution. But avoid overly narrow fonts and consider a font size because you might need to enlarge it a little and add positive tracking, i.e., increased letter spacing (for further information about tracking, don’t forget to check Part 2).

Body text in a nice, readable font often needs strong visual accents in your design. You can approach this necessity by differentiating fonts depending on the type of information. For example, you may use Serif for headers and Sans-Serif for body text. The ultimate working solution, though, is to pick a single Font family because it has the same shapes and proportions. For example, IBM Plex has a variety of styles and supports several writing systems.

A typeface name itself can tell you about its purpose. Terms “Text,” “Display,” “Compact,” and “Caption” in the font’s name will help you make the right choice.

In my projects, I usually use Sans-Serif fonts with low contrast for practical reasons. Sans Serif doesn’t have a bright appearance or small details. Consequently, it draws little attention to itself and reduces visual noise, making the text easier to read. As a result, the user quickly receives, understands, and processes information.

Prepare For Part 2!

This article reviewed the key points to consider when choosing typefaces. We also reviewed all font parameters and started investigating how to choose the most suitable font for various scenarios.

The next part will be all about applying the fonts we chose. We’ll discuss how to work with texts and tables and what to pay attention to when handling special characters.

Another major topic will be readability improvement through the length of text lines, line spacing, letter spacing, and tracking.

We’ll also touch upon the topic of color contrast. It goes hand in hand with caring for users with all kinds of needs and work conditions.

Stay tuned!

Further Reading On SmashingMag

• “Measuring The Performance Of Typefaces For Users (Part 1),” Thomas Bohm
• “Typographic Hierarchies,” Alma Hoffmann
• “Fluid Typography: Predicting A Problem With Your User’s Zoom-In,” Ruslan Yevych
• “Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1),” Hannah Milan

(yk)

What is the text over images design pattern? How do we apply this pattern to our designs without sacrificing legibility and readability?

The text over images design pattern is a design technique used to place text on top of images. It is often used to provide information about the image or to serve as the main website navigation. However, this technique can quickly sacrifice legibility and readability if there is not enough contrast between the text and the image. To prevent this, designers need to ensure that the text and the image have a high enough contrast ratio to be legible and readable. Additionally, designers should also make sure the text is positioned in the right place, away from any image elements that might cause confusion, distraction, or make it difficult to read.

“Incorporating text with imagery is a balancing act. To create professional, compelling content, the image and text must reach a visual harmony. At the same time, strong contrast between text and image will increase legibility and will make your content stand out.”

— “Tips for Overlaying Text on Imagery,” Getty Images

In Part 1 of the series, we have reviewed in detail five techniques (using an overlay over the entire image, text with scrim overlay, strips/highlight, copy space, and text over blurred background effect) and now we’ll continue with reviewing in detail five more (frame the image, soft-colored gradients, text styles and text position, solid color shapes, use of colored backgrounds). In the end, I will also provide you with a long list of useful tools and resources related to this accessibility topic.

Frame That Image

Another simple design technique you can try is by framing the image in a flat-colored shape that includes your text. This kind of style is mostly used in thumbnails and cards.

Examples From The Wild

• July Fund

• ABL Space Systems

Additional Resources On This Topic

• Bento Grids
  Bento Grids is a nice curated collection of tiles-based layouts (that were initially popularized by Apple). The main idea behind this is to present the key takeaways in a visual and easy-to-consume way. Bento layouts are great for showcasing brand identity, summarizing product features, and much more.
• Godly → Websites → Grid style
  A large collection of some of the best grid-style websites.
  

Soft-colored Gradients Technique Over Images

When black or white gradients don’t work well, you can use the soft-colored gradients text over image technique. These soft-colored gradients are created when two or more different colors are blended to create a soft and gentle transition from one color to another. They are commonly used on websites and page designs to make them look modern and creative.

Examples From The Wild

• Porto 128

• Perfect Day

Additional resources on this topic

• Gradient Maker (by Angry Tools)
• CSS Gradients Generator (by Designstripe)

Play Around With Text Styles And Text Position

Achieving the 1.4.3 success criterion might be difficult even if we have used some of the techniques outlined in the examples above, or when any combination of those techniques still fails. In such cases, one of the safest options is to play around with text styles and with the text position outside of the image.

Various text styles (bigger or smaller text; emphasize, low-key, bold, regular, or light text style; playing with margins and letter spacing, etc.) and combining these text styles in different ways may help you achieve a powerful impact with regards to your design while not sacrificing any accessibility. You can also position your text to the left or right, the top or bottom, and you’ll have an accessible and visually appealing website or app.

This technique is great if you combine your text styling techniques and play around with the images. With text positioned outside of the image, you have control over how to make it more accessible by using real text that can be zoomed in to maximum for those people who may have trouble reading small text on the screen or for those who wish to use their voice assistants.

Examples From The Wild

• Bolimówek

• My Toronto Condo

• Scribely

Additional Resources On This Topic

• “Design Considerations: Text on Images,” by Chris Coyier (CSS Tricks)

Play With Solid Shapes

Using only simple shapes can make a lot of difference. Play around with solid shapes by creating strong harmony between the color of your text and the background colored shape. Once you learn how to balance the text styles and the colors, the readability of the text will greatly improve.

Examples From The Wild

• The Female Gaze

• Pantoute

Additional Resources On This Topic

• “The psychology behind shapes and colors,” by Rob Postema (UX Collective)
• “Apply color theory to your designs,” by Pranav Ambwani (UX Collective)
• “Your ultimate guide to background design” (Canva Design)

Ditch The Image And Just Use Colored Backgrounds

In case you cannot fulfill the 1.4.3 success criterion, you have the option of replacing images with colored (uniform color) or gradient (two or more colors) backgrounds. This technique facilitates screen readers to read actual text instead of images, hence enhancing accessibility for visually impaired users. Furthermore, using this technique, you can adapt the text to meet your user’s preferences, optimize it for various screen sizes, and even adjust the size or zoom level without compromising its quality.

Furthermore, with this technique, you can easily customize real text according to the user’s requirements, such as colors or styles, and much more. It might be difficult to achieve this criterion in certain circumstances, but giving users an option to customize those things instead of using images would be better for everyone involved, and that is why this technique does not require much effort on your part at all.

Examples From The Wild

• Bou

• Studio 5B

• Koryun

Additional Resources On This Topic

• CSS Gradients Generator (by Designstripe)
• “How to add a gradient overlay to text with CSS,” a tutorial by Sarah Fossheim

Just Use The Actual Text!

Lastly, while all of these design techniques will help you make the text over images more accessible, I still think that using the actual text is the way to go.

Providing special care to ensure that text over an image remains perfectly readable and accessible is a must, and, as you have seen in sections 1 — 10 of the article, there are plenty of design techniques for that purpose. But again, if you want to make your website or mobile app accessible right from the start, why not simplify things a bit and do it properly? Use real text, make sure there is plenty of contrast between the text and the background, and make your website or app accessible to everyone.

Using text over images provides a combination of benefits, and yet it has some limitations. Text placed over images is harder to read for visually impaired users, especially at smaller text sizes, because the content gets more compressed. There are also some accessibility requirements for different colors under the WCAG 2.1 guidelines. If you have trouble implementing the success criterion mentioned in the design techniques we’ve presented, ditching everything and just using real text will do the trick.

Conclusion

As with any new design trends popping out in different places, we need to make sure that what we’re creating is not only pretty but is also helping our users. Always consider the accessibility aspect to be “baked in” right from the start rather than being an afterthought in your design process.

In any case, if someone asks you why the real text is better to use rather than text over images or images of text, here are a few key things to remember:

• Real text can be zoomed in to any size without distortion and pixelation, and (what’s also very important) it can be read by assistive tech software.
• Additionally, you can easily increase the contrast of the text, which will help your users access the content easier.
• With actual text, you have the freedom to create your own styling and make use of CSS to format the text elements. I can highly recommend you to read the very detailed hands-on tutorial on how to use CSS styling, “Handling Text Over Images in CSS” by Ahmad Shadeed.

Thank you for joining me in this accessibility journey. We covered many design techniques that will hopefully help you work better with accessible text over images. And if you have some additional tips or advice to share — please do so in the comment section below, or ping me on Twitter (@humbleuidesigns)!

Further Reading: Tools & Resources

Useful Accessibility Tools

• Should I Use Carousel?
• Test Your Background Image Accessibility
• Rainbow Contrast Checker
• Tanagaru Contrast Finder
• Optimal Overlay Finder
• TPGi Color Contrast Checker
• Colorable
• Spelll
• Contrast
• Juliette
• Accessibility And Interactions Documentations Annotation Kit

Accessible Carousels

• “Creating An Accessible Image Carousel,” by Aleksandr Hovhannisyan

Accessible Images

• “Why Is It Important for Accessibility to Use Actual Text Instead of Images of Text?” (Bureau of Internet Accessibility)
• “Ensure High Contrast for Text Over Image,” by Aurora Harley (NN/g Nielsen Norman Group)

Accessible Text over Images through CSS and HTML

• “Handling text over images in CSS,” by Ahmad Shadeed
• “Design Considerations: Text on Images,” by Chris Coyier (CSS-Tricks)

Accessible Text and Typography

• “10 Typography Tricks to Make Your Text Much More Readable,” by Igor Ovsyannykov (Creative Market)
• “The UX Designer’s Guide to Typography,” by Molly Fitz-Patrick (IxDF)

Guides for Accessible Documentation And Annotations

• “A Designer’s Guide to Documenting Accessibility & User Interactions,” by Stéphanie Walter
• “Accessibility Guidelines,” by Ana Valjak (Figma Community)

WCAG Reference

• 1.4.3 Contrast (Minimum)

Working with Color

• “The psychology behind shapes and colors,” by Rob Postema (UX Collective)
  Design influences the way we perceive the world, the way we feel, and the choices we make. To communicate to your target audience effectively as a designer, having knowledge of the psychological principles of human behavior (revolving around the use of shapes, colors, typography, and compositions) can be very helpful.
• “Apply color theory to your designs,” by Pranav Ambwani (UX Collective)
  Color is a very strong tool that we can apply to solve many design challenges. Since color plays such a major role in shaping the aesthetics and usability of websites, changing a single color can change a user’s perception of the same design.
• “Your ultimate guide to background design” (Canva Design)
  The background design you choose can dramatically change your design and make your graphics feel complete. Colors can be used as overlays to enhance brand awareness amongst your audience, while images don’t need to just sit alongside your graphic elements — they make for excellent backgrounds when placed correctly. Backgrounds are the backbone of great design!
• “Tips for Overlaying Text on Imagery” (Getty Images)
  Pay attention to color, contrast, and brightness; blur the imagery; weigh your text correctly; put more thought into your image; utilize the image’s perspective to your advantage — this and several other tips, combined with some examples, are shared in this concise and practical article.

Color Contrast and Accessibility (Smashing Magazine)

• “Color Contrast And Why You Should Rethink It,” by Cathy O’ Connor
• “Improving The Color Accessibility For Color-Blind Users,” by Adam Silver
• “Your Image Is Probably Not Decorative,” by Eric Bailey
• “The Realities And Myths Of Contrast And Color,” by Andrew Somers
• “The Underestimated Power Of Color In Mobile App Design,” by Nick Babich
• “Accessible Images For When They Matter Most,” by Carie Fisher
• Smashing Magazine’s selection of Accessibility, Usability, and UX topics.

(yk)

What is the text over images design pattern? How do we apply this pattern to our designs without sacrificing legibility and readability?

The text over images design pattern is a design technique used to place text on top of images. It is often used to provide information about the image or to serve as the main website navigation. However, this technique can quickly sacrifice legibility and readability if there is not enough contrast between the text and the image. To prevent this, designers need to ensure that the text and the image have a high enough contrast ratio to be legible and readable. Additionally, designers should also make sure the text is positioned in the right place, away from any image elements that might cause confusion, distraction, or make it difficult to read.

“Because images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the contrast between the text and the background is too low.”

— Aurora Harley, “Ensure High Contrast for Text Over Images” (NN/g Nielsen Group)

Before going forward, here are some useful resources (on how you can apply these techniques in practice with HTML/CSS) that are worth checking out:

• “7 Rules For Creating Gorgeous UI - Part 2,” by Erik Kennedy
• “Handling Text Over Images by CSS,” by Ahmad Shadeed
• “Design Considerations: Text On Images,” by Chris Coyier
• “How Spotify Makes Text On Images Readable,” a Twitter thread by Addy Osmani

How To Design A Text Over An Image

Admittedly, when I was starting my design career, and I had very little accessibility knowledge, one of the main things I used in my designs was the text over images design pattern, without me knowing that I was hurting my users who have low vision.

“A picture says a thousand words. But sometimes, images alone won’t work. This is why typography still proves to be a vital aspect of design despite the focus on more visual content. Remember that the need for visual content does not tell you to stop adding text to your designs — it simply reminds you to do so in the most tasteful and stylish way possible. And, of course, readability should not be sacrificed in the name of design. You can’t add text that people can barely understand, then argue that it’s a piece of art. Sending a message that cannot be deciphered defies the purpose of what you’re doing.”

— Igor Ovsyannykov, “10 Typography Tricks to Make Your Text Much More Readable”

Yet accessibility is a key aspect of design, and working with typography is one of the cornerstones of UX design. There are many typography principles that will help you create user-friendly designs. In the following sections of the article, you will learn more about how you can improve your design without sacrificing the accessibility aspect and how to combine text and images better.

According to WCAG Success Criterion 1.4.3, make sure that your text on images should meet the minimum contrast of

• 3:1 for large text (text bigger than 18 pt normal, or text bigger than 14 pt bold);
• 4.5:1 for body text (text lower than 18 pt normal, or text lower than 14 pt bold).

Ensure that a minimum visual contrast ratio of 4.5:1 is maintained between the text and its background. This minimum contrast ratio should also be maintained in the case of images of text.

— “Understanding Success Criterion 1.4.3: Contrast (Minimum),” W3.org

Using An Overlay Technique Over The Entire Image

Overlays are colored layers such as overlay light, overlay dark, dark gradients, or colored overlays. As a general rule, overlays are used to make images stand out less or to act as a background for the text so that it has better readability and contrast.

Examples From The Wild

• Strong App

• Huston Engineering

• Della Vite

Additional Resources On This Topic

• Optimal Overlay Finder
  An accessibility tool that calculates the ideal opacity to use against your image so that the contrast meets the WCAG 2.1 Success Criterion
• Color Accessibility Workflows, Geri Coady
  A book that will teach you what color accessibility is and why it matters

Text With Scrim Overlay

The scrim design technique uses a semi-transparent, lightweight, and semi-opaque gradient layer that helps text appear more readable against various backgrounds.

According to Google Material Design, “Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent.” They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

Scrims can be applied in a variety of ways, including the following:

• Darkening or lightening the surface and its content.
• Reducing the opacity of the surface and its content.

Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.

— Google Material Design

Furthermore, you can explore this technique by using different colors besides black or white colored layers.

Examples From The Wild

• On Running

• Solanco School District

• Soto Gardens

Additional Resources On This Topic

• Scrim That Figma Plugin
  Quickly add a scrim over a selected layer in Figma Design with the Scrim That plugin with just one click.

Strips/Highlight Technique

The strips/highlight is one of the simplest design techniques that you can apply to your design. Add a semi-transparent black (or dark-colored) rectangle strip over the image along with your text, or you can be bolder and use different colors instead. But always make sure that the colors you selected for the fonts and the graphic elements have a lot of contrast against the background!

Examples From The Wild

• Mode

• Cantos

• Estea

Additional Resources On This Topic

• Google Material Design — Legibility Standards
  All text should be legible and meet accessibility standards. The Web Content Accessibility Guidelines (WCAG 2.0) level AA requires a 4.5:1 color contrast between text and background for normal text and 3:1 for large text. To learn more about color, contrast, and accessibility design, read this chapter on Material Design Accessibility.
• “Accessible Text on Images: Nail the Contrast Ratio”, Rodney Lab
  Creating accessible text on images on a website page is not easy. First, there are all the usual accessibility concerns when adding an image to your site. For example, you need to make sure the image has an alt text which describes the image well for partially sighted visitors. But then, you also need to remember to leave the alt text empty if the image is included for decorative purposes only. Next, as with any other text on your site, you need to make sure that the contrast level between the text color and the background color is high enough. And there’s more! This article dives into all these little details.
• Web Accessibility Guidelines v1.0 (Carnegie Museums of Pittsburgh)
  Find colors that provide maximum contrast, including enough contrast between content and the background, so that text and non-decorative images are legible for anyone with low vision or color deficiencies. Best practices include: taking care of the 4.5:1 (3:1) ratio, (not) using only color as an indicator, and taking into account color blindness.

Find And Use That Space (Copy Space)

Yes, use that space to position your text, but first, make sure the space is passing the minimum contrast ratio. Space provides the perfect location for your text, especially when you balance and harmonize all the elements between the image and text.

Copy space is an area of an image that is less busy and usually has enough contrast to give you space to write or put your text on.

Examples From The Wild

• Rockwell Group

• Green IT Solution

• Villa Boisserée

Additional Resources On This Topic

• “Using Space to Create a Simple and Effective Design,” Carrie Cousins Sometimes the most effective design technique involves nothing at all, and it is quite intentional. Space can be one of the greatest tools in your design kit. It can make text easier to read, bring focus to certain parts of the design and help create an overall mood or feel. In this article, you will see some great uses of space and how they contribute to both simple and effective design schemes for different websites.
• “The Secret to Commercial Photography: Copy Space,” Great Escape Publishing
  Commercial photography is everywhere in our lives. Every time you drive down the highway with its rows of billboards, leaf through the glossy pages of a magazine, or visit a website with banner advertisements, you see commercial stock photography. This article explains one very important concept that helps photos sell: copy space. Copy space is an area of an image that is less busy, which means an advertiser can add text without obscuring critical parts of the photograph and choosing a stock photo becomes more manageable when the photographer has copy space in mind from the get-go.

Text Over Blurred Background Effect Of The Entire Image

Blurring an image with a variety of blurred background styles, such as blurring the entire image, or adding a blur effect to highlight only the main subject, can bring focus into your text layered on top of the image, tone down the “busy” feeling of the image, and also add more dimension and depth to the visuals.

The blurred background design technique is widely used for hero headers when combined with a bold, impactful typeface.

Examples From The Wild

• HLK Agency

• Tion Renewables

Additional Resources On This Topic

• “Blurred Text & Images In HTML CSS (Simple Examples),” W.S. Toh
  A quick tutorial on how to create blurred text and images with CSS only.

Conclusion

Thank you for joining me on this accessibility journey. So far, we covered five key techniques when designing text over images: using an overlay over the entire image, text with scrim overlay, strips/highlight, copy space, and text over blurred background effect. In the following article of the series, we will review five more — frame the image, soft-colored gradients, text styles and text position, solid color shapes, and use of colored backgrounds — and I will also share with you a few additional useful tools and resources. Stay tuned!

Further Reading On SmashingMag

• “Accessible Images For When They Matter Most,” Carie Fisher
• “The Realities And Myths Of Contrast And Color,” Andrew Somers
• “Designing Better Links For The Web,” Slava Shestopalov
• “Designing for Accessibility: Best Practices for Closed Captioning and Subtitles UX,” Vitaly Friedman

(yk)

Not every project has the budget to spend a lot of money on fonts. But that doesn’t mean that typography needs to play a secondary role when the budget is tight. The variety and quality of free and open-source fonts out there is impressive and enables everyone to use beautiful, well-crafted typefaces.

In this post, we compiled some free fonts that we came across and that you probably haven’t spotted before. Some of them shine with their flexibility, some put a special focus on readability, and others are a great choice if you want to make a bold statement. As different as the fonts are, they all have one thing in common: You can use them for free in both personal and commercial projects. A huge thank-you to the wonderful type designers and contributors for making their fonts available to all of us! 👏🏼👏🏽👏🏾

Recursive

Built to maximize versatility, control, and performance, Recursive is a five-axis variable font that can go from Sans to Mono. Taking full advantage of variable font technology, it gives you full flexibility.

Recursive allows you to choose from a wide range of predefined styles or dial in exactly what you want for each of its axes: Monospace, Casual, Weight, Slant, and Cursive. Inspiration came from single-stroke casual signpainting to give the font a flexible and warmly energetic look, making it a great fit for data-rich-apps, technical documentation, code editors, and much more. Designed by Stephen Nixon, with contributions from Lisa Huang, Katja Schimmel, Rafał Buchner, and Cris R Hernández.

Yrsa & Rasa

The type families Yrsa and Rasa have a different approach than other type projects. They build upon the existing typefaces Merriweather and Skolar Gujarati to produce two entirely new type families that span different writing systems.

Yrsa supports over 92 languages in Latin script and has a special focus on properly shaping the accents in Central and East European languages. Rasa supports a wide array of basic and compound syllables used in Gujarati. Both type families include five weights and are intended for continuous reading on the web. Perfect for longer articles in online news, magazines, or blogs. Designed by Anna Giedryś and David Březina.

Space Grotesk

Space Grotesk is a proportional sans-serif typeface variant based on Colophon Foundry’s fixed-width Space Mono family. It retains the idiosyncratic details of the monospace while optimizing for improved readability of non-display sizes.

Space Grotesk includes four weights and open-type features like old-style and tabular figures, superscript and subscript numerals, fractions, and stylistic alternates. Latin Vietnamese, Pinyin, and all Western, Central, and South-Eastern European languages are supported. Designed by Květoslav Bartoš for Florian Karsten Typefaces.

Figtree

Figtree combines friendly curved shapes, a simple monolinear construction, a high x-height, and slight taper into a charming geometric typeface that ensures maximum readability.

Figtree comes in seven weights, ranging from Light to Black, and includes typographic finesses such as fractions, monospace numbers, and scientific inferiors. Minimal but not stiff, casual but not silly, the typeface beautifully manages to maintain a crisp, clean feeling. Designed by Erik Kennedy.

Reforma

Reforma is a versatile font family designed for long-form reading. Commissioned to celebrate the centenary of the university reform of the Universidad Nacional de Córdoba, Argentina, the typeface had to convey four premises: plurality, intellectual heritage, versatility, and free availability.

After three years of work, 20 font styles were born that work harmoniously in different contexts. They are grouped into three subfamilies — from a classic serif to a modern sans-serif and an intermediate hybrid style with flare serifs — and are available in three weights plus an ultra-black companion set for headings. Reforma beautifully manages to strike the balance between tradition and novelty while staying super-versatile. Designed by Alejandro Lo Celso, Jorge Ivan Moreno Majul, Francisco Galvez Pizarro, Francis Ramel, and Oscar Yañez.

Hanken Grotesk

If you’re looking for a versatile sans-serif typeface inspired by the classic grotesques, Hanken Grotesk might be right down your alley. It shines with a friendly, distinguishable look and is equally suitable for small text and headings.

Nine weights are available, ranging from Thin to ExtraLight, Light, Regular, Medium, SemiBold, Bold, ExtraBold, and Black. Each weight comes with matching italics. A modern classic designed by Alfredo Marco Pradil.

Grenze

Grenze combines the best of two worlds. As a hybrid between Roman and Blackletter styles, it transports a sense of boldness and texture while at the same time offering the readability of classical typefaces.

The family includes nine weights (Thin, Extra Light, Light, Regular, Medium, Semibold, Bold, Extra Bold, and Black) with matching italics. To respond to different needs, Grenze comes with some useful advanced features such as ligatures, ornaments, extended language support, and various figure sets. Designed by Renata Polastri and the Omnibus team.

Fira Sans

Originally designed as a system font for Mozilla’s FirefoxOS, the humanist sans-serif Fira Sans grew into a versatile open-source typeface that stays readable across screen qualities and sizes.

Fira Sans is available in 18 styles, including nine weights and accompanying italics. The package also includes a mono-spaced variant. Designed by Carrois Apostrophe in cooperation with Erik Spiekermann.

Atkinson Hyperlegible

Certain letters and numbers can be hard to distinguish from one another for low-vision readers. Atkinson Hyperlegible is here to change that. Named after Braille Institute founder J. Robert Atkinson, the typeface focuses on letterform distinction to increase character recognition and improve readability.

Recognizable footprints, differentiated letterforms, unambiguous characters, and exaggerated forms are some of the techniques that optimize readability and give the typeface its distinctive look. Atkinson Hyperlegible includes four fonts, with two weights (Regular, Bold, Italics, Italics Bold). Thanks to accent characters, 27 languages are supported. Designed by Braille Institute of America.

Anek

The multi-script typeface Anek tells a very special story. It covers nine Indian languages plus Latin and was created through a collaboration of twelve type designers working across eight cities in India. The design of each script is deeply rooted in its typographic culture, while the different scripts live together in visual harmony.

All Anek fonts share visual similarities like circles and circular shapes, robust letter structures, and delicate joineries. With 40 styles per set, Anek is one of the few Indian variable display fonts with such a large set of weight and width styles. Designed by Sarang Kulkarni, Girish Dalvi, Noopur Datye, Hanif Kureshi, Maithili Shingre, Yashodeep Gholap, Divya Kowshik, Aadarsh Rajan, and Shuchita Grover.

Source Sans

Designed by Paul D. Hunt, Source Sans is Adobe’s first open-source typeface family. The sans-serif draws inspiration from classic grotesques and is characterized by a visual simplicity that works equally well in long-form texts just like as short labels in user interfaces.

Source Sans comes in six weights (ExtraLight, Light, Regular, SemiBold, Bold, Black) plus matching italics. The fonts offer wide language support for Western and East European languages, Vietnamese, Pinyin romanization of Chinese, and Navajo. A modern classic.

Beattingvile

If you’re looking for a font to give your project a personal, hand-made touch, Beattingvile by Garisman Studio is worth checking out.

The multilingual script font features stylistic alternates, swashes, and ligatures and is perfect for all projects where you want to make a statement that is a bit bolder. Perfect for headings, branding, label design, logo type, quotes, and much more — both on screen and in print.

Disket Mono

Monospace fonts often have a technical feel to them, waking connotations of coding editors or typewriters. Disket Mono is a bit different. The font strikes a perfect balance between the inspiration it draws from geometry, grids, and architecture and using soft corners for a more tactile, personal feel.

Disket Mono comes in two weights (Regular and Bold) and supports twenty languages. A beautiful display font, designed by Mariano Diez.

Srbija Sans

Srbija Sans is a neo-grotesque sans-serif typeface with a geometric look. It gets by without any decorative details, but when you look more closely, you’ll notice how small design decisions improve readability and give the clear shapes a warm and natural touch.

The typeface includes 315 glyphs, supporting Latin and Cyrillic, and featuring accents and ligatures, mathematical symbols, and currencies. Srbija Sans was designed by Vedran Eraković and Studio Metaklinika for the National Tourism Organisation of Serbia.

The League Of Moveable Type

The League of Moveable Type opened its doors back in 2009 when designers were just gaining the ability to put custom fonts on the web. The project’s mission has stayed the same since day one: to raise the design standards of the web.

Micah Rich, maintainer of the foundry, cares deeply about good typography and empowering everyone with great design skills. That’s why the catalogue only features carefully-picked open-source fonts — 17 at the moment. You can use them for free however and wherever you want.

Google Fonts

It’s certainly not an insider’s tip but always a great place to look for free fonts: Google Fonts. The library features more than 1,400 open-source font families for more than 135 languages, plus icons for common actions and items.

By the way, if you want to dive deeper into the principles of typography or delve into all of the artistic and technical aspects of modern typesetting and font technology, the Google Fonts Knowledge library is a treasure chest of typography wisdom.

Wrapping Up

Do you have a favorite free font that isn’t listed in the post? Let us know in the comments below. We’d love to hear about it!

(vf, il)

When I wrote my previous tutorial about the extended use of the CSS clamp function, I was surprised by the drawback of zooming of text in fluid typography.Thanks to Adrian Bece and Adrian Roselli, I now know that this problem is known as a WCAG Failure Under 1.4.4 Resize Text (AA).

But what does this exactly mean?

“When people zoom a page, it is typically because they want the text to be bigger. When we anchor the text to the viewport size, even with a (fractional) multiplier, we can take away their ability to do that. It can be as much a barrier as disabling zoom. If a user cannot get the text to 200% of the original size, you may also be looking at a WCAG 1.4.4 Resize text (AA) problem — check out Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize text.”

— Adrian Roselli

The prominent example that demonstrates the problem is a simple demo from Adrian Roselli’s article, “Responsive Type and Zoom.” Make the viewport width to 800px and see how text gets smaller while zooming to 220%. If you continue zooming, the text will begin to increase again, but will never reach its 2× increase in size (browsers currently have a zoom limit of 500%).

When I started to study this question intently, I found out that there is no solution at the time as well as detailed explanation. The great recommendation is:

“If you are going to use responsive typography techniques anyway, you must test it by zooming. Zoom across devices, across browsers, across viewport sizes (not everyone surfs full-screen), and across viewport orientations.”

— Adrian Roselli

So, if you want to be sure that the user will be able to zoom in the text to at least 200% of original size, you should make a huge amount of tests. In this article I propose the solution how to predict the mentioned WCAG Failure at the stage of development. And I am not sure that my findings will guarantee the 100% absence of the problem, but I am sure that it will be helpful to avoid developers from rough errors in the real use cases.

Not Responsive Typography

So, what is really going on when users try to zoom the web page? The answer to this question is very simple: All modern browsers assume that pixel is stretchable. Therefore, the screen size “effectively” decreases on zooming.

Note: This article was written a few months ago, and OMG, Firefox now zooms pages correctly. The screen size doesn’t “effectively” decrease as you zoom in, but it is constant. Thus, the problem described in the article is still relevant for Chrome, Opera, but not for Firefox. So, while reading, you may find different behavior of the examples depending on the browser.

When we try to zoom the page to 200% of its original size, the pixel becomes twice as large in height and width. So, look at the code below:

p {
  font-size: 16px;
}

Without zooming, we will see a text of this paragraph as text of some “visual-size”. Due to different physical size of pixels for different devices, this “visual-size” will change from one device to another. Really, if your 42-inch TV has a resolution of 1920×1080 pixels, then it contains 2073600 pixels, and your 6.1-inch iPhone 13, for example, has a resolution of 2532×1170 pixels and contains a whopping 2962440 pixels. Let introduce some coefficient k that is proportional coefficient between “visual-size” (what we see on screen) and “font-size” (what we set in CSS):

$$(1)\quad visual\_size=k * font\_size$$

This coefficient depends on type of screen. But as we will see below, it does not effect on a final result.

Now let’s try zoom in and see what happens.

As we can see, the "visual-siz"e of the text monotonically increases while zooming, and we can describe this by introducing the "zoom-coefficient" (browser zoom) as the following:

$$(2)\quad visual\_size=k * zoom\_coefficient * font\_size$$

The "zoom-coefficient" is equal to 1 for the original size (without zoom in), 2 — for 200% of browser zoom, 3 — for 300%, and so on, and "zoom-coefficient" < 1 when we zoom out. Now we can introduce and calculate a "visible-zoom" coefficient, which is a measure of the real visible increasing (decreasing) of a size of the text, as ratio:

$$\begin{eqnarray} (3)\quad visible\_zoom&=&\frac{\textrm{size what we see while zooming}\,(zoom\_coefficient\ne 1)}{\textrm{size what we see without zooming}\,(zoom\_coefficient=1)}=\nonumber \\ \\ &=&\frac{(k * zoom\_coefficient * font\_size)}{(k * font\_size)}=zoom\_coefficient \nonumber \end{eqnarray}$$

As we can see from equation (3), the "visible-zoom" is equal to browser "zoom-coefficient". That is, to double the text size ("visible-size" of text), we need to simple apply browser 200% zoom in. So, the mentioned WCAG Failure Under 1.4.4 Resize Text (AA) will never be observed in the case of not responsive typography (constant font size).

Fluid Typography

So, what happens in the case of responsive typography? In the mentioned simple demo one can find the following record in CSS stylesheet:

h1{
   font-size: clamp(1rem, -0.875rem + 8.333333vw, 3.5rem);
(*)
}

It is an example of fluid (responsive) typography. Fluid typography give us the possibility to change text smoothly with viewport width. The widespread implementation of such concept in CSS stylesheet is to use a clamp function. Using clamp you can smoothly change "font-size" between "min-value" and "max-value" in the given range of viewport width (from "start-width" to "end-width").

In such the case, when font-size value depends on viewport width, equations (2) and (3) can be easily modified. In these equations we should take into account two facts:

1. "font-size" depends on (function of) "viewport-width", so "font-size" = "font-size"("viewport-width");
2. The value of viewport width depends on "zoom-coefficient".

The second fact is not so obvious like the first one. But we should remember that under zooming the viewport width “effectively” decreases. So, we will have the following transformation when zooming:

$$(4)\quad viewport\_width\rightarrow\frac{viewport\_width}{zoom\_coefficient}$$

Using relation (4), equation (3) take the following form:

$$\begin{eqnarray} (5)\quad visible\_zoom&=&\frac{k * zoom\_coefficient * font\_size\left(\frac{viewport\_width}{zoom\_coefficient}\right)}{k * font\_size\left(\frac{viewport\_width}{zoom\_coefficient=1}\right)}=\nonumber \\ \\ \
&=&\frac{zoom\_coefficient * font\_size\left(\frac{viewport\_width}{zoom\_coefficient}\right)}{font\_size\left(viewport\_width\right)} \nonumber \end{eqnarray}$$

Equation (5) and a simple criterion (“minimum 200% zoom requirement”):

$$(6)\quad visible_zoom\ge 2$$

can be used to check whatever users can get text to 200% of its original size for the available range of browser zoom (up to 5 or 500% nowadays) for the any value of viewport width. On a practice, it is better to create some 3D plot in coordinates "visible-zoom" — "viewport-width" — "zoom-coefficient" or corresponding contour map. Such visualization is an easy way to estimate the extent of the problem if it exists.

Example: Let’s apply equation (5) to analyze the simple demo from Introduction. At first, we can reassemble the (*) record for better understanding of the parent behavior (what developer specified in). Here we will assume that browser’s default font size is 16px. The influence of browser default font size on our conclusion will be discussed latter. Keeping in the mind clamp("min-value", "responsive-value", "max-value") function record form, we have from (*)"min-value" = 1rem = 16px, "max-value" = 3.5rem = 56px. Taken into account that viewport width is equal to 100vw, we can write two equations to determine "start-width" and "end-width":

-0.875rem + 0.08333333 \* "start-width" = 1rem;  
-0.875rem + 0.08333333 \* "end-width" = 3.5rem.

From these equations one can find that "start-width"= 22.5rem= 360px, and "end-width" = 52.5rem=840px, or represent the result graphically:

To obtain the calculated dependency of "visible-zoom" on "zoom-coefficient" at 800px of viewport width where anomalous behavior is observed, we can use equation (5) with fixed value of “viewport-width” = 800px and plot the corresponding curve (by Plotly JavaScript Open Source Graphing Library). Here you can see the result:

The "visible-zoom" and "zoom-coefficient" are represented on graphics by percentage. So the 100% value mean the original size. As you can see, the observed anomalous behavior, when text becomes smaller as the zoom increases, is well reproduced. Moreover, it is shown that "visible-zoom" coefficient will never reach the value of 200%. Its maximum value is about 150% by applying the maximum possible 500% browser zoom.

But what happens at other values of the viewport width? To explore this question one can create a 3D plot or corresponding projected contours:

As you can see, when the font size of the text is determined by the (*) record, "visible-zoom" is less than 200% (grey color) when zooming for the wide range of the viewport values — from about 650 to 1680px. According to the data, this range for screen resolution is still very popular. Given the above, it is very likely that users will have a problem while zooming. MinValue, maxValue, startWidth, endWidth constants in Codepen define the behavior of font size shown in Fig.4. You can change it to test your own cases.

So, using the equation (5) and the graphs built with it, we were able to easily explain the observed anomalous behavior of the font size while zooming.

Browser Default Font Size

Let’s analyze the influence of browser default font size on the fulfillment of “minimum 200% zoom requirement” on the example of simple demo. Here one can change a value for browserDefaultFontSize variable from 16 to another values and see the changes. Figure 5 shows the result for browserDefaultFontSize = 16, …, 28 (px).

As you can see there is nothing but a “stretching” along “viewport-width”-axis only. By increasing of browser default font size, we just move the area of viewport widths where “minimum 200% zoom requirement” is failed. The main peculiarities of the text font size changing when zooming remain the same.

Media Queries

Above we considered the case where there no media queries influent on text font size. It is time to analyze what will change in the opposite case? It is strongly recommended to use relative units in media query condition (read this article by Zell, for example). In such the cases, there will no difference how to define the fluid typography — using media queries or not. (You can find the algorithm how to specify an any complicated behavior of responsive font size without media queries in my previous tutorial.)

Now we can describe a usage of equation (5) for different cases:

1. Without media queries — one can directly apply the equation (5).
2. With media query/queries (features are in em, recommended), “font-size” depends on viewport width as:

$$\begin{eqnarray} (7)&\quad& font\_size(viewport\_width)=\nonumber\\[5pt] &=&\left\{\begin{array}{cc} function_1 (viewport\_width),\,viewport\_width>breakPoint_1,\nonumber\\[3pt] function_2 (viewport\_width),\,breakPoint_1>viewport\_width>breakPoint_2,\nonumber \end{array}\right. \end{eqnarray}$$

• You can exclude it by using the algorithm proposed in my previous article and return to pt. 1;
• For given "viewport-width" and "zoom-coefficient", we should transform the equation (7) to use as numerator in equation (5) like:

$$\begin{eqnarray} &\quad& font\_size\left(\frac{viewport\_width}{zoom\_coefficient}\right)=\nonumber\\[5pt] &=&\left\{\begin{array}{cc} function_1\left(\frac{viewport\_width}{zoom\_coefficient}\right),\,\frac{viewport\_width}{zoom\_coefficient}>breakPoint_1,\nonumber\\[3pt] function_2\left(\frac{viewport\_width}{zoom\_coefficient}\right),\,breakPoint_1>\frac{viewport\_width}{zoom\_coefficient}>breakPoint_2,\nonumber \end{array}\right. \end{eqnarray}$$

It is your choice how to use equation (5), but I recommend to reduce the task to pt. ¹⁄₂(i).

It should be noted that we did not consider operating system zoom here. When user applied it this will also affect on “effective” screen size. As a result, the "zoom-coefficient" should be represented as a product of browser and operating system zoom. Such influence on final prediction will be similar to the case of changing browser default font size.

Conclusion

Now we are able to predict the behavior of text size changing while zooming to avoid the WCAG Failure Under 1.4.4 Resize Text (AA). Equation (5) and “minimum 200% zoom requirement” (6) give us an easy way to anticipate a problem on the stage of development and analyze it. Due to a variety of possible dependencies for a text font size on viewport width that developer can implement, there is no general solution of a problem. But you can slightly change the input parameters and view the predictions. In most cases, such corrections will give the desired result. We should make a choice in favor of completely eliminating possible problems with text scaling.

(vf, yk, il)

This article is sponsored by Extensis

This article is ideal for your lunch break. It highlights seven quite straightforward (dare I even say simple) graphic communication problems. I then expand on them, showing the problem, remedy, and what can be learned. It will give you an insight into accessibility, also the easily looked-over area of access structures, and usability showing that they are a major factor in so many things, like design, communication, technology, objects, and systems. But we are not done there — I will also help you think about some new ways to make your designs much better and help you consider some aspects that you have never even considered before on your current projects, right now, today.

Adding A Basic Scroll Bar To A User Interface Menu Makes Items Easier To Find And Use

If we look at the menu by clicking on the Fonts drop-down menu in Microsoft Word Mac version 16 or any version of Microsoft Word, we can see that everything looks normal:

There is a list of fonts installed on the computer in alphabetical order. However, when we go to perform a task using the menu, like going to the font Verdana at the end of the list, we have to move our mouse all the way down to the bottom of the menu list, then hover over the down arrow, then wait 3 or 4 seconds, or more, until it gets to the bottom of the menu, near V, before we can select Verdana. Yes, we could also type the font name at the top, but maybe you are not sure what font you want to use or what it is called.

Problem

It takes many seconds to get to a font that is below B or at the end of the list; the current solution does not allow quick access. Furthermore, if you make a mistake, or your mouse goes off the menu, or if you are not able to control the mouse cursor that well, it will cause the menu to close, and then you have to start this interaction all over again, because if the mouse goes off or clicks out of the menu, it closes it. These issues are certainly not ideal for most of us who are busy and who want to get things done quickly and efficiently, like designers.

The problem of not having a scroll bar is often experienced in website vertical or side-navigation menus (sidenavs). The side-navigation menus might not even need to have a scroll bar, as the content inside the menu is not larger than the vertical screen height. However, if the website or smartphone browser is made a lot shorter vertically in height, there is often no scroll bar shown. So, you cannot scroll to the end of the side navigation’s content within the menu, and you might not even know to try to scroll more vertically, as no scroll bar is shown. Not ideal or great, hey?

Solution

One of the things that would be really easy to do, and is found a lot in software user interfaces and websites, is to add a simple scroll bar to the right of the font menu. How difficult is that to do? Not very. This would allow users to scroll more quickly to the font they want, reducing the time to find and select a font in the menu by at least half (50%). Why do they not do this? I am not really sure.

What Can We Learn?

If the software developers and user interface designers used a scroll bar to the right of the font menu, it would allow users to find any font much quicker, increase workflow productivity, reduce stress, confusion, and enable a much quicker and better interaction. Audit, test users, and find out what people want to do, or else you cannot be sure you have effectively designed the thing. Maybe you are not even aware of the ways users want to use your design, communication, object, or system. That is why it is so important to understand the following:

• What people will want to do with your thing;
• Different people will want to use your design, information, and communication in different ways;
• Different people will want to achieve different things.

Better Font Software = Faster, Easier, And Better Results

As another example, if we compare font organizing software like Font Book on a Mac or the Fonts option in Control Panel on Windows. Yes, we have these two types of software, but do you actually use them to install fonts, or do you install them manually by copying the font files into the Fonts folders? Do you use them to view, compare, and get information about fonts? Can you use this software to manage, organize, and share fonts for your design team? Probably not, as they lack the features.

Well, the creative folks at Extensis have created just what you need: Connect Fonts. It is clearly better than Font Book on a Mac or the Fonts option in Control Panel on Windows for a number of reasons:

• It has a better display of a font’s glyphs;
• It shows the name of the glyph, Unicode value, and Glyph ID;
• It has a better grid display, QuickType, Waterfall, ABC 123, and punctuation (many of these options are not available in Font Book);
• Connect Fonts is a more advanced and technology-advanced software than Font Book on a Mac, or the Fonts option in Control Panel on Windows.

Here are additional features not offered by Font Book on a Mac or the Fonts option in Control Panel on Windows:

• Use a font vault that is a single, secure, managed repository for all your fonts;
• Sort options for all fonts (Name, Postscript Name, Type, Foundry, Class, Family, Version, Font Sense, Classification, Activation, Favourites, Date Added, Location);
• Add Google Fonts;
• Manage Adobe Creative Cloud fonts;
• Zoom in and out;
• All glyph panels and search;
• Glyph information (Name, Unicode, Glyph ID, Keystrokes);
• View categories of glyphs (Entire Font (123 Glyphs), Alphabetic Presentation Forms, Basic Latin, Combining Diacritical Marks, Currency Symbols, Cyrillic, General Punctuation, Geometric Shapes, Greek and Coptic, Latin Extended Additional, Latin Extended-A, Latin Extended-B, Latin-1 Supplement, Letterlike Symbols, Mathematical Operators, Number Forms, Spacing Modifier Letters, Superscripts and Subscripts);
• Desktop and online in browser versions, both connected;
• Cloud libraries and synchronize fonts;
• Setup team libraries across desktop and online versions;
• Share any digital files and documents;
• Font analytics and reports;
• Full admin account settings;
• Very useful for large organizations to control fonts available for use and to manage permissions and rights;
• Add tags.

Also:

• Works with Adobe Creative Cloud, Sketch, Affinity Designer/Photo/Publisher;
• View and preview fonts (Tile, QuickType, Waterfall and customized Waterfall, ABC 123, and punctuation).

Use ‘Access Structures’ To Excel Your Communication Success

An annual review gives interested people information about the business, charity, or organization, promotes what they do, and showcases what they have done in the last year to shareholders and other interested people. We designed an annual review (a printed publication showcasing a charity’s achievements, news, and financial activities for the year) more than ten years ago.

Problem

One of the standout issues that we soon realized from reading, laying out, and designing the annual review, was that there were many mentions of different towns within a country, mentioned throughout the text in the annual review, that the charity supports and works with. However, there was no easy or obvious way to know where they were or how to envisage where they were.

Solution

What was missing that the client had not done or envisaged in the past? A map on the inside back flap of the publication showing where the different towns were within the main country. It is not rocket science — maybe even just good old common sense.

What Can We Learn?

Can you see what we are doing? We tried to envisage and dig out what people will want to do with the thing and see if there is anything we can do to make the communication better, more accessible, and usable, and to better describe and help people to use the annual review. The annual review could have been an electronic PDF or HTML — the same problems exist whatever media. But would you have envisaged or thought about adding a map that the client never even thought about or even asked for? Sometimes, designers have to go the extra mile and push the boat out for their clients in need.

This issue of making information easier to understand and consciously helping people to understand and use it by adding clever features, in this case, a map, has to do with the area of accessibility. It could easily be considered usability because it makes the information and publication more usable; however, it is more about the area of accessibility. Being even more precise and specific, it has to do with things called access structures, as highlighted in 1979 by information designer and educator Robert Waller who runs the Simplification Centre and who has been the Professor of Information Design between 2007–2011 at the well-known Department of Typography & Graphic Communication at the University of Reading in the United Kingdom, just outside London. In the JS Party (Episode #36) podcast Suz Hinton, Safia Abdalla and Kevin Ball have also highlighted that there is more to accessibility than a disability people may have, and what devices they may use to help them.

Access structures are not commonly talked about in the now huge and popular world of accessibility. Yes, we talk of people, their physical issues (vision impairment, aging, dyslexia, physical disabilities, and so on), or what supportive devices they may use to make things easier (magnifying glass, screenreader, vision impairment stick, and so on), or even what legal issues and implications there might be because of bad accessibility. But we rarely talk about adding elements like access structures to help people with their content comprehension, processing and reading style strategies, such as:

• Browse;
• Skim/preview;
• Search/scan;
• Intense study;
• Review.

And to just expand a bit more (if I may?), maybe you have used the audio hosting website SoundCloud. Among many of its great features, it has a search option just the same as any other search option, a horizontal box, then a search button (so nothing unusual or out of the ordinary here yet). It allows users to search through the whole website and content rather than having to go through and read millions of web pages (well, you knew that anyway). Expanding a bit more, when you search, it of course, returns the search results in a vertical list, just like a search on Google, Microsoft, and Twitter. However, on the left of the search results webpage are some really interesting and very useful search refinement options, as follows:

• Everything
  The user’s search term searches through everything and the below.
• SoundCloud Go+ tracks
  If selected, will only search through this offline and ad-free listening service from Soundcloud. There are then two further sub-search filter options:
  • Added any time,
  • Any length.
• Tracks
  Apply user’s search to just audio content. There are then three further sub-search filter options:
  • Added any time,
  • Any length,
  • To listen to.
• People
  Apply user’s search to just people, for example, user/profile account names. There are then nine further sub-search filter options that somehow seem to know the countries associated with your search:
  • Location. (9 country names associated with your search.)
• Albums
  Apply user’s search to albums, for example, collected tracks within a grouped album option. They are then filtered by tag options:
  • Electronic,
  • Techno,
  • Hip-Hop & Rap,
  • Drum & Bass,
  • House,
  • Ambient,
  • Electronica,
  • Dance & EDM,
  • Deep House.
    
• Playlists
  Apply user’s search to user-curated playlists collection, once again with the previous filter by tag options:
  • Same as previous.

So, you might think, well, this is all fairly standard and default stuff. However, not only is a user able to search for something; they are then given many very handy and useful sub-access structures that are very helpful in allowing them to further refine and edit their search term. I cannot stress how useful and important this is. This is basically the definition and whole bowls of what design, accessibility, usability, information, and communication are together.

Think about it. What would you do, and what would the result be if you could only perform a search, i.e. just search for something and then had no further refinement options? Users would not able to further refine what they are trying to do and achieve.

Providing An Electronic Business Card Increases The Chance Of Being Contacted And Getting New Business

I run a graphic communication design and text editing business in the United Kingdom called User Design, Illustration, and Typesetting, working for book publishers and also other types of organizations. We also do information design, user testing, website design, and research. We contact quite a lot of art, design, and production managers at U.K. book publishers, and one of the things we realized about seven years ago, is that they get a lot of emails every day from people offering the same services and making the same inquiry as us.

Problem

We realized that we need to increase the chance and any chance of our business’s details being used and spread, at and within their organization, and by whatever communication method they use, typically a computer, from staff-to-staff or colleague-to-colleague, to ultimately increase the chance of them contacting us (this is the goal anyway while the reality is another matter, but keep reading).

Solution

What we did, and it is really simple and easy to do (but we hardly ever see anyone do it), we made a link available to a digital business card in PDF, PNG, RTF, and vCard formats, on our homepage and contact us webpages. Do you provide a business card on your website, portfolio, or client’s website? Probably not. It is these types of things we need to try and realize and find out as designers because it improves the chances of communication success, and the ultimate end objective that was to get people to make an inquiry and contact us (an action).

What Can We Learn?

By making our main contact details more easily available and reusable, and in different electronic formats, it makes it quicker and easier to share and exchange our details, and also in different types of software (remember, not all of us like to use the same software program or system) thus leading to more chance of people in organizations contacting us (well, I have already said that three times). Would you have thought of this? How can you apply this to the project you are currently working on? Furthermore, the next important question is how can you measure if it is working and having an impact, or indeed if it is not? It is very important in design and communication to actually know the following:

• What is working and what is not;
• What areas could be optimized and what areas could be better;
• Or what areas are not working well and are underperforming.

Basing design success measurements on what people think or feel is highly subjective, and soooooooooo last century.

“

The Fastest Internet Speed In 2022 Is Still 4 kbps

Current times in 2022 are challenging throughout the world (there is no denying that). Over the last few years, we have noticed the truly awful impact, performance, and results of websites for users, because of lazy loading images, infinite scroll, and content shifting on page load to save on internet data bandwidth usage — both on the user’s end and server-side (that delivers the website).

Problem

In essence, lazy loading means that an image or content will not be loaded until it becomes available or requested by the user in the visible screen area. Because of this lazy (late) loading, users frequently have to wait a few seconds for content to load, even with today’s amazing technology.

Infinite scroll is essentially the same principle as lazy load images, but the non-visible vertical webpage content not in the screen’s visible screen area, is not loaded until you scroll down. Lazy load can also be used with painful pagination features (like go to page 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 as seen on large e-commerce websites and as Vitaly Friedman has outlined in his article, “Perfect Infinite Scroll UX”).

Content shifting on page load basically refers to a mixture of lazy loading content (text, images, and webpage layout) being delayed and loaded late, causing the content, when it does load, to load late, shifting the vertical and horizontal height of the web page’s content, cause elements and call-to-action buttons to shift and move around, as also highlighted by Michael Scharnagl on Smashing Magazine. This issue is especially problematic if you are trying to work quickly on a slowish or sluggish machine or device. However, not even a fast machine seems to make a difference regarding this issue.

All of these three issues create really bad user interactions, especially with longer-length web pages, although they are promoted and regarded as good webpage performance techniques.

Solution

Give people the content when it should be there and when they need it, as fast as you can. I understand that for very long webpages, some off-visible screen lazy loading and infinite scroll could be beneficial to save on unnecessary loading of content. But for everything else, just give it to users as fast as possible experience. We have incredible technology these days, and let’s not over-design and overthink.

What Can We Learn?

It could be said that when using lazy loading or infinite scroll in 2022, we are still dialing up with 4 kbps modems just like we did back in the year 2000. The amount of times and the delivery of information and images is the same: very, very slow. Nothing has changed. We are still looking at blank or block-colored images waiting for them to load… while 20 years of the internet have passed. The average speed of a computer and mobile internet in 2022 is 30.78 mbps, and we are still getting the same performance as in the year 2000 — as if on 4 kbps modems. User experience is what matters, not technical wizardry.

Total Overload Of User’s First Website Interaction

Problem

Another example of bad usability is webpages that have very demanding first-visit user requirements. I am sure you all experience and struggle with the following on a daily basis (maybe you are even doing it now, arghhhh go away cookie policy box? Yes, no?):

1. Cookie policy “accept/deny warning box” pops up when you 1st visit a webpage that distracts and blocks natural use.
2. Email newsletter box pops up asking if you want to subscribe. That is another thing you have to do, even before you have started to use and read the webpage!
3. A “do you want to receive update/news notifications” box appears.
4. “Do you want to allow or block access to your physical location” box appears.
5. Another box appears asking if you want to save 50% if you order in the next three days.
6. A chat box appears asking if you want to chat with someone [well, maybe, but not at the moment].
7. Then, finally, a “do you want to save your password” box appears.

Solution

Do not overcomplicate the 1st interaction with your thing. It is a bit like comparing it to bumping into someone when you are in a hurry and have to go, and all they keep doing is talking to you and telling you their life story. If people find their 1st interaction with you displeasing, they will turn away. If you have to provide options like cookie warning boxes, email newsletter subscribe boxes, and other notifications, leave them optional or in a place that everyone knows they can visit, like a universal options link or button in the top right of a webpage, where they can customize and setup these things, as they like.

What Can We Learn?

All of this creates a hard-to-use and over-demanding graphic communication. That distracts, over-complicates, and creates extra barriers to information that are very costly for your business or organization because it increases the chance of your users leaving and rejecting your item. Say goodbye to your users and customers in less than 3 seconds. It gives your brand a bad feeling and experience, and maybe they decide not to order something through your website. These are the everyday realities of bad usability because of your over-demanding and difficult-to-use design, information, and communication. It is not difficult:

• Think about how people will want to use your design.
• Make it as easy and least demanding as possible.
• Test with them in real time.

Clothing Measurement Sizes On Fashion E-commerce

The next example has to do with measurements such as millimeters (mm), centimeters (cm), and inches (in). It doesn’t bring that much confusion with it, but surprisingly, it can still cause quite a lot of confusion and problems worldwide.

Problem

Measurements such as millimeters (mm), centimeters (cm) and inches (in) may not seem that interesting, but if you were to try to order a polo t-shirt online, you’ll notice that it may take you longer to do than expected. By measuring the width between your armpits across your breast area to get your bust (chest) circumference, and you may have measured 60 cm on the front, and you have to multiply this number by 2 for the whole circumference of 60 cm (front) × 2 (front and back) to get a result of 120 cm.

Let’s say you finally find a polo t-shirt that you really like on a French clothing e-commerce website. You choose the color of the polo t-shirt you like and search for your size (we know that it is 120 cm, this sounds like we’re back in a Maths class, bear with me), but the only available sizes from that French clothing company are the following:

• 2 – XS
• 3 – S
• 4 – M
• 5 – L
• 6 – XL
• 7 – XXL
• 8 – 3XL
• 9 – 4XL
• 10 – 5XL
• 11 – 6XL

The above measurements are a bit helpful but certainly not accurate. They are not accurate because there is still no measurement information in millimeters, centimeters, or inches. However, below the information above is a link titled Size guide. Okay, let’s give that a go and see what it does. A slide-in panel appears, and there is a drop-down list with the following information:

• 2 – XS = (bust circumference: 87 cm/34 in, pant waist circumference: 73 cm/28 inch).
• 3 – S = (bust circumference: 90–93 cm/35–37 in, pant waist circumference: 77–81 cm/30–31 in).
• 4 – M = (bust circumference: 97–101 cm/38–40 in, pant waist circumference: 85–89 cm/33–35 in).
• 5 – L = (bust circumference: 105–109 cm/41–43 in, pant waist circumference: 93–97 cm/36–38 in).
• 6 – XL = (bust circumference: 113–117 cm/44–46 in, pant waist circumference: 101–106 cm/39–42 in).
• 7 – XXL = (bust circumference: 121–125 cm/48–49 in, pant waist circumference: 111–116 cm/44–46 in).
• 8 – 3XL = (bust circumference: 129 cm/51 in, pant waist circumference: 121 cm/48 in).
• 9 – 4XL = (bust circumference: 134 cm/53 in, pant waist circumference: 126 cm/50 in).
• 10 – 5XL = that now, strangely, in the Size guide slide-in panel seems to say 1XG = (bust circumference: 139 cm/55 in, pant waist circumference: 131 cm/52 in).
• 11 – 6XL = that now, strangely, in the Size guide slide-in panel seems to say 2XG = (bust circumference: 144 cm/57 in, pant waist circumference: 136 cm/54 in).

Are you starting to get a headache? I told you, keep reading and we will find the remedy!

Our bust (chest) circumference, as we know, is 120 cm, so it seems by the information in the above Size guide panel, that this size (entry):

• 7 – XXL = (bust circumference: 121–125 cm / 48–49 in, pant waist circumference: 111–116 cm/44–46 in).

It is going to be a really good and safe size (because it is slightly larger than 120 cm by 1–4 cm). So it seems that there is no problem here, and in fact, the website has given good and flexible information because measurement sizes have been provided in three different measurements: cm, mm (can be worked out quite easily), and in.

Another related question is whether all clothing websites display their polo t-shirts measurement like the French clothing company above. Well, no. Here is an example from a British clothing company, and we are going to use our pre-measured bust (chest) circumference, which we know is 120 cm once again, to order a different polo t-shirt from the British clothing company. So I have selected a polo t-shirt from the British clothing company’s e-commerce website, and the sizes that it gives are:

• 36
• 38
• 40
• 42
• 44
• 46

If we look at the drop-down list information from the French clothing company, we really cannot see anything that says 36, 38, 40, 42, 44, 46. However, once again, there is a View guide link on this British clothing website, so we click that, and see what happens (as it might be able to give us some more information).

Two options are available:

• Top half (bust, chest),
• Bottom half (waist).

We want the Top half (bust, chest) option because we measured the distance from armpit-to-armpit, then multiplied by 2 to give our total circumference in cm, as previously. The tables say:

Top half (bust, chest)

We have to remember that the only available sizes in this polo t-shirt are 36, 38, 40, 42, 44, and 46. So it would seem 46 is the largest size they offer, and the circumference in cm of 46 (inches circumference) is 117 cm circumference. As you can see, 117 cm is not large enough. There is not enough flex (leeway) in this size because we know that our already measured armpit-to-armpit circumference in cm is 120 cm.

Solution

The French clothing company provided a good range of measurements in 2 measurements, inches and cm. The British clothing company, however, provided two tables, and it would be more advisable to actually not offer users the second table because it is basically a whole range table for all their clothing and is not valid for the polo t-shirt we selected, where only 36, 38, 40, 42, 44, 46 were available (yes, it is confusing). If we really want to clarify even more, the initial sizes of 36, 38, 40, 42, 44, and 46 would maybe be better written like this:

• 36 in (92 cm), 38 in (97 cm), 40 in (102 cm), 42 in (107 cm), 44 in (112 cm), 46 in (117 cm).

Then there is much less misunderstanding, and users can relate the values better to their information and size.

What Can We Learn?

Yes, we can learn a lot. The interesting points to note are that the French clothing company’s website offered fairly useful and practical information. The British clothing company initially gave us six measurements in inches (36, 38, 40, 42, 44, 46) that made no sense to us, but when we went to the View guide link, we were able to decode the two tables, although it really was not made blatant (obvious enough) that this range only goes up to 46 inches bust (chest) circumference. And in fact, there were two tables provided, and it could have been very easy to read the second table (one below) and see that there is a size of XXL (119–124). Since the table has been provided, it will be available in XXL (119–124), but, of course, it is not for the polo t-shirt we selected.

Only give information relevant to the product and task, and remove any information that is not applicable or useful, especially when dealing with measurements. Furthermore, and you are going to like this if you are a designer or working in sales, if we consider the further-down-the-line consequences, you could very easily, as people do:

• Make an order thinking the size will be alright when really it is not (we have all done this, hey).
• Type in all your details.
• Pay for it.
• Wait for it to be delivered (maybe missing a day of work, or picking it up from somewhere else, as no one was in where you live).
• Try it on, and it does not fit.
• Get packaging to return it to them undamaged.
• Complete another refund/return form.
• Do more paperwork.
• Send it back to them (maybe missing a day of work, so someone can pick it up from where you live or travel to a post/courier office).
• Check your bank account over the next 30 days to see if you have been refunded.
• Oh, I forgot, what about writing the postal address that the return needs to go to? Do you write it on the front in a pen, print out an A4 page, then sellotape it on, or do you do something else?

As you can see, user errors and mistakes are very time-consuming for the users themselves, and even more costly for the supplier of the product who has to process the return, i.e. giving them masses of more work to do. Good design makes a lot of sense for all involved.

Concluding Observations, What Did We Learn From All Of The Examples?

The results of getting good at the accessibility and usability issues previously mentioned are:

• Be a better designer;
• Designs will work better for people;
• Enable people to achieve what they want to with your design and information;
• Designs will increase business success;
• Designs will reduce task interaction time and will allow users to achieve what they want to do faster;
• Reduce stress, confusion, and unnecessary work;
• Increase customer loyalty and quality perception of the brand.

What We Have Explored And Learned In This Article

• Microsoft Word Font Menu
  Rather than accepting a design and what is there, we understood and found out how people will want to use the thing. We then looked at a very simple solution to make this as quick and efficient as possible. It leads to increased workflow speed, productivity, better actions, and a reduction in time, stress, and confusion.
• Font Software
  We saw default operating software that lacked needed features.
• Map In An Annual Review
  We found out, explored, and understood how people are going to use the thing, interface, content, or system. We then provided a very simple map that improves access to the content to allow easier and more chance of comprehending the information, and to increase the chance of people doing what we intend and enabling it to happen more easily.
• Electronic Business Card On Websites
  We were able to increase the chances of people doing something (in our case, to contact us) by thinking about how we could make that easier to do by providing different electronic files to help people do this.
• Modern (considered) good practice web performance techniques
  Current-day website design performance methods, like lazy load and infinite scroll, are rendering websites to load at 4 kbps speeds that we had around the year 2000, that is 22 years ago. This makes websites difficult to use and interferes with the user’s original intention and goal.
• Total Overload Of User’s First Interaction
  We saw many websites requiring a user’s first interaction to deal with, sometimes, 13 option settings and sorting, before they even get a chance to engage and complete their original task. Showing a high amount of information overload and digital information pollution.
• Seemingly Straightforward And Assumed Easily Usable Information
  When it comes to information, even seemingly very mundane and standard information (if it is not designed, communicated, and provided to users in a logical and easy way) creates masses of problems and work for all involved (as was the case in the online polo t-shirt ordering examples).

Ways To Come Up With New Accessibility And Usability Ideas, For Your Current Project Right Now!

How can you simplify (I mean really reduce) the work, energy, and tasks for users to complete and get something done?

• Reduce complexity and demands (for instance, by not bombarding them with options, notifications, and things to sort out, even before they have started their originally intended task).
• Reduce steps, stages, and clicks.
• Strengthen and reduce the complexity and unnecessary difficulty in design, communication, user interfaces, and systems.
• Ask for feedback and try to get good-quality questionnaires.
• Conduct real-time diagnostic user testing.

How would you make your design and information more obvious and easier to access, find, process and scan through for users?

• Search options on a website (enabling people to search through all of your content)?
• Sitemap or index (allow people to quickly find what they are looking for)?
• Navigation menu for a website or contents page for a publication (allows people to get an overview of all of the website or system content).
• Add a map, graph, or data visualization (to help people envisage and see the content in better and different ways)?
• Make the content available as audio (either online or able to transfer to a portable physical device)?
• Could you use heading hierarchy levels like heading 1, heading 2, or heading 3, bullet lists, boxes, or icons to split up, better chunk, and highlight information?
• Do you provide your communication in a range of different medias like online, print, audio, video, braille, large print, and easy read (that will increase the chances of it being used and being used in different people’s most ideal format?).
• What about a conclusion, summary, or recap after a lot of information to help reprocess and reinforce the main points from lengthy content?
• What kind of navigational elements could you use or introduce to help users move and navigate around your system: running heads, breadcrumb navigation, go to the top link, scroll spy elements, where you are a feature, progress indicator, grid or list of thumbnails to give a whole overview?
• How can you help and make users discover and enjoy more of your hopefully useful content and information?

How can you understand, envisage and get to know more about people and their requirements?

• Find out, think, explore, ask and watch people using the thing.
• Ask users and find out what they want to do with your thing.
• How can you make it easier for them to do what they want and achieve what they want as quickly as possible?
• Do user testing and set people tasks to do and see where they struggle and if they can do it within a reasonable amount of time.
• Learn about different people’s needs, like people who are aging, dyslexic, with vision, physical or hearing issues.
• Find out about different categories of people by reading about user personas.
• Better sectioning or navigation features.

How can you provide the information people may want in different formats to allow better and easier use of your information?

• Maybe: HTML, SMS, RTF, PDF, VCARD, TXT, XML?
• How can you allow people to customize your website, interface, or system:
  • If people use your website or system a lot, maybe they would like to customize the colors, typeface, or layout to avoid boredom.
  • How could you deliver age-specific or more fitting and relevant content (text and images) to this category of users, or other age categories of users?
  • How could you allow people to customize your website so they can use it how they wish and use it in their most ideal presentation?

I hope you enjoyed the issues raised and how tools like Extensis can help you and your team be more productive than what is offered by default operating system software. The article also shows some of the advanced strategies and methods (well, maybe not that advanced!) that we have been using here for the last 20 years. Accessibility and usability are not difficult. Get back to work…

(yk, il)

Simply defined, the concept of typographic hierarchies refers to the visual organization of content in terms of their relative importance. In other words, the manner in which we organize the text, the headers, the subheaders, the columns, the paragraphs, the callouts, and others on the page or space signify their importance.

That sounds easy enough, right? Yes, it does. The problem is that visually accomplishing this is more challenging than it sounds, especially for those unfamiliar with the nuances of typography. Everything in typography behaves like a domino effect causing a chain reaction of changes by the designer. That is why when a client asks for a “small change,” it is never small and never linear. Typography is symbiotic. Each element contributes to the other, even in a very small way.

These two words: typographic and hierarchies are not familiar concepts to those outside our field. In fact, even in the art and design field, fellow artists do not necessarily understand typographic hierarchy. The term typographic refers to matters related to typography: type choice, sizes, weights, how far or close we set the letters, and others. The term hierarchy refers to levels of priority or importance: what comes first, second, and third. Thus, when these two terms are put together, we mean to arrange content in levels of importance with the intention of communicating to the reader.

Choosing typefaces, arranging content in terms of visual importance, and organizing elements (title, subtitles, body copy, images, space, and so on) on the page evoke responses from the reader. When things are in competition on a page, we might feel confused. We all have a sense of it, and we can even recall moments of disgust when we see a printed note with bloody type or a website in which the typography is all jumbled up. However, learning to use typography is elusive. It is a matter of constant practice and honing visual acumen.

While it is true that the advent of the computer to our field has expedited the design and printing process, it is also true that typographic proportions do not look the same when looking at things online versus printing. The relationship between the reader and their monitor differs from the relationship between the reader and anything printed, whether hand-held or seen at a distance.

To provide an example, let me share my experience with typography. Before becoming a designer, I graduated with a BA in Art Education. I understood color, research, composition, contrast, drawing, images, sketching, painting, and so on. When I went back to school to study design and specifically graphic design, I was lost.

My biggest challenge was that I could not see the letters as something other than the semantic symbols of language. Questions constantly flooded my mind. For instance, “What do you mean that the letters have a grid? What do you mean I am doing too much? And what is too much? How is this too big?” The questions were endless and excruciating. My beginner’s typography was, to put it mildly, a prime example of what not to do. I did not know any better, but I also did not understand any better.

My “aha” moment came when another instructor explained to me that typography was like auditioning for a part in a play that I wanted really badly. She suggested that I enunciate the words as if I was playing in the theater. Mind you, I had no experience in theater whatsoever but somehow, the idea resonated with me. It was then that I realized, in a very experiential way, that typography was the spoken language in visual form.

That, somehow, the letters, words, titles, typeface choices, size, weight, color, spacing — all conspired together to emanate a visual language. The page was the stage. The letters, words, titles, paragraphs, and so on were performers on that stage. Another instructor used to say that the typographic hierarchy was like a ballet company where only one was the prima ballerina, and everything else bowed to her. Having a cultural background where music and dance were vital, I started to get the idea.

After I made it into graduate school, my exploration of typography intensified, leading to my thesis work. My graduate thesis combined two things that were special to me: dance, specifically ballroom dancing, and my newfound love for typography. To develop a body of work for my thesis, I used one of my classes’ undergraduate projects — Typographic Hierarchies. Since then, I have been teaching typography and hierarchy using this project.

The typographic hierarchies project is based on two books by professor Rob Carter from Virginia Commonwealth University. These books are Typographic Design: Form and Communication and Experimental Typography. The latter is out of print now. The objective of the project is to isolate six basic variables to establish a typographic hierarchy. These variables are:

• Proximity or space,
• Weight,
• Size,
• Size and weight,
• Color,
• Visual punctuation.

When we look at a typographic composition, a poster, a brochure, or a web page, what we see is the application of these variables together. We don’t often think of dissecting the composition in front of us to say, “How many sizes are there?” Even as designers, we are not accustomed to dissecting design work. Imagine a non-designer, even less, right? Yet, when we come to school or start as designers, we are all non-designers and need to retrain our brains to look at content as a relationship of shapes in a context, format, or space.

In this article, we will discuss the variables mentioned above, learn how to look at each differently, and in turn, design pieces by intentionally modifying each variable to create a typographic hierarchy effectively. Let’s get started with proximity or space.

Note: These are studies done in a university class intended to expose the students to a series of compositional exercises. These exercises will provide students with a skill set to innovate and push the boundaries when appropriate. It will also help them to acquire a good understanding of compositional parameters. Therefore, use your discernment and consider the project’s needs when applying and/or breaking these principles and variables.

Proximity Or Space

This variable requires us to briefly discuss the grid. The grid is an underlying tool that helps us organize elements on a page. It is so foundational that there are books dedicated to it. For example, the book by designer and design educator Timothy Samara, titled Making and Breaking the Grid is one of the most eloquent discussions of it.

A Short Discussion About The Grid

A grid is simply an underlying structure used to organize elements in a context. This context can be a page, printed or web, an app, a brochure, a poster, a book, a newspaper, a building, furniture, and so on. Though this article is not a study of the grid, it is important to understand that the variables we will learn work within a grid. A grid allows us to break up the space into modules or smaller chunks like pieces in a puzzle that must come together to create the bigger picture. There are usually two ways to approach the application of a grid: predetermined or improvisational (also known as a visual or linear association).

Predetermined Grid

A predetermined grid is the division of the space into a certain amount of columns. There is even a one-column grid, also commonly called a manuscript grid (commonly seen in wedding invites and perhaps the first page of an article in a magazine).

We can keep adding columns to our grids and have two, three, four, five, and sometimes more. Software such as Adobe InDesign, Affinity Publisher, and others come equipped with the ability to determine what type of grid we want to use. It is usually easy to spot the grid used in a design piece. For example, if we look at a web page, we can usually spot the type of grid used — two, three, or four columns.

Perhaps the best examples of predetermined grids come from Modernist design and the Swiss Typography schools of thought.

Later on, Post Modern typography came along. Characterized by the juxtaposition of graphic elements, typography, and page use in a more organic way, it sought to find alternative typographic organizational arrangements. John Choi, a former student at NYUAD, wrote on the blog NYUAD Types of Art the following:

“Postmodern typography would be born out of the rejection of the modernist idea that certain forms, due to their inherent characteristics, are able to perform certain objective functions such as neutrality or legibility.”

As a result, the grid became a more organic and playful tool.

Improvisational Grid

Alternatively to a predetermined grid, an improvisational grid can be used. An improvisational grid is created when we lay down one element, perhaps in a very large size, and use it to extend its lines to organize elements around it. Thus, visual alignments or associations are emphasized or highlighted by placing elements following invisible lines emanating from them. For example, the image below does not feature the traditional vertical and horizontal modules that are common on a column grid. The image and the pattern created for the Evince Diagnostics logo at the top are the foundation for the organization of the type on the banner.

It is one of the funniest ways to create hierarchy because it allows for playful and unexpected results. However, it calls for attention to detail and sensitivity to the composition as a whole. Thus, it is both easy and difficult to master. It is frequently achieved by a large letter, but it can also be done with images or graphics.

Now that we have a basic understanding of the grid, let’s discuss our first variable or principle of hierarchy — proximity — in more detail.

Proximity

Proximity refers to the relative distance between elements, right? An easy metaphor is to think of friends, close friends, and strangers. The closer the friend, the closer the distance. The stranger the person, the farthest we stand from them. Our proximity or space shrinks or grows depending on our familiarity with things or people. Because it is usually easier for the students to refer to it as space, we will refer to proximity as space throughout the article.

When we discuss or think of space in a typographic hierarchy, we refer to things like space between letters, words, titles, paragraphs, margins, and how and where we place elements on the page.

In order to really understand proximity or space, we need to set some limits:

• All type has to be 8-12 point size depending on the typeface;
• It all has to be one size (even the titles);
• No color;
• A grid should be used from two to five columns, or an improvisational grid can be used. Please note that though we discussed the use of an improvisational grid based on size, when we leave elements at the same size, an improvisational grid can be used based on space or alignments.

The goal of this variable is to explore only the distance between any elements we choose and where we place our paragraphs and titles. You might be wondering, “how does space work in relation to typographic hierarchies? To answer this question, we will discuss some examples.

In the example above, we have a set of instructions, How to Fold a Crane, written by Chrissy Pk. As we can see, the columns of text are diagonally arranged. The grid, then, has been set before any other element has been placed on the page. By using diagonals, we create a sense of movement and energy around the composition.

Repetition of the title has been applied to create a sense of framing the page, and it serves to anchor the eye. Otherwise, we might feel that our eyes want to wander away from the page. Having the title repeated creates a kind of loop around the page and helps us keep our eyes contained. The type size is all consistent. The sense of movement and hierarchy comes from the title set in uppercase. To indicate each new step, instead of numbers or bullets, space and upper case letters in the first three words of the sentence are used.

Below are two analyses of the grid. The first one lets us see that the designer has probably divided the page into a four-column grid. In the second example, we can see that the diagonal grid has been applied over the four-column one.

To summarize what we see in this example:

• We can use diagonal columns in place of vertical columns.
• We can use uppercase to create a sense of hierarchy.
• We can add spaces between items that follow a sequence instead of numbers or bullets.
• We can repeat one element as long as it supports the purpose and conceptually keeps our eyes and mind focused on the subject.

In my experience, my students find that thinking of only the space or proximity is the hardest aspect of this study. But it is all about looking at the paragraphs, sentences, columns, and pages as shapes. If we think of each component in the example above as only shapes, we will see something like this below:

The page, space, and background, whether two or three-dimensional, is a shape. It can be a rectangle in portrait or landscape orientation or something more circular, or something organic like the shape of a guitar like this one titled MTV Unplugged, First Edition by Sarah Maralkey published in 1995:

The text in one of the spreads follows the gentle curve of the book:

If we consider the area we are using to organize our design as a shape, then the rest is a matter of subdividing that space in interesting ways. Thus, we always need to take the format into consideration.

Here is an interesting example of how to use a simple two-column grid:

As we move forward to the next variables, it is essential to note that how we treat the space will continue to be something we experiment with. We do not leave it behind. Let’s see how only changing the weight (bold versus regular + space) changes things around.

Weight

Weight refers to changes in the typeface as bold, regular, italic, heavy, medium, and so on. In this variable, we keep the sizes all even. In other words, we do not change the size at all.

It is worth mentioning that a typeface with no weight options will not be helpful in our exploration, as well as funky or heavily ornamental typefaces. Those are great for one instance or for display purposes such as a poster. However, in creating a hierarchy, it is best to stick to typefaces with well-proportioned shapes and multiple font options in their family.

In the image above, the layout is more traditional — a two-column grid with the text aligned to the left. The bold weight is used on the word Fold on the title and in the rest of the content each time the word Fold is used. This visual detail helps with establishing a conceptual and visual connection as well as a hierarchy. It is a visual reminder that these instructions are about learning to fold a crane.

In the following example, we have a much less traditional layout. The designer used a circular grid to subdivide the format or the space in the composition. The bold weight is more delicate here since the typeface is also more delicate. The text’s organization resembles a clock. The design requires more participation from the reader as they would need to turn the page around.

In addition to our first summary, we can add the following:

• We can use organic shapes to subdivide the format.
• We can follow a logical system to establish a visual hierarchy: bold a word and consistently bold the same word throughout the text.

Now, let’s move on to applying size but without weight.

Size

We understand that size refers to, well, sizes. How large or small the font used is displayed. For the purposes of this exercise, we will limit ourselves to three sizes, and we will refer to them in categories:

• Body copy
  Depending on the typefaces’ x-height, anywhere from 8 points to 12. Never over 12.
• Titles
  Here you can have some fun and play with contrast — very, very large. Anything over 14 points is considered a display, but you will find that it is still too small to make an impact.
• Subheaders or accents
  Depending on what sizes you are using for the titles, you can select something in between the body copy size and the titles.

Something worth mentioning: these parameters are not solely mathematical. There is much to learn about how things look (regardless of size) once something is printed.

Along those lines, let’s discuss a note about titles. The best way to think of titles is to see them as a group of little cousins or a group of best friends who are really tight. The spaces (again, proximity) you create between each word on the title affect how the title is seen. In other words, do the words go together? If so, should there be a gap? This will become more clear in the discussion of the examples below:

We can see how the designer decided to create a sense of upward direction by setting the title along the column pointing towards the beginning of the text. The designer not only used size to create emphasis on the word CRANE but cleverly led the reader to the top. The rest is pretty straightforward, as we can see — using bullet points and space between the steps to conform to the sequential nature of the content.

Here we have three sizes used following the expected pattern (title, numbers to indicate sequence, and the text). But, notice how the numbers are not the same size as the text. They are a size in between the title and the text, indicating read the title first and then read in order.

In addition to the items we have added to our summary, we can add the following:

• We can set one word of the title much larger than the rest.
• We can direct the reader with the title to the beginning of the content by setting the title in an upwards orientation.
• We can set numbers slightly larger than the text to indicate the reading order.

Now we will discuss variables in combination.

Size And Weight

We start here by combining two variables and still using proximity to create a hierarchy. We are still limiting ourselves to three size changes. In terms of weight, we can change the weight of words we think need to be seen but are not as important as the title or things like that. We can certainly make a word very large and bold. But, as you are experimenting, keep an eye on the balance of the page. Are things too heavy on one side? Is the page too busy on one side versus the other?

Size and weight experimentation also allow you to start playing with an improvisational grid. When making a letter or word really large, you may use it to establish visual alignments from it.

The example below is a page from a calendar I designed last Christmas holiday. Calendars are a great playground to explore sizes and weights. In this instance, I opted for the number of the month, the largest element on the page, while also increasing its weight, but right under the name — April — is very light or thin, creating a nice contrast between the two. The year is smaller but bold, as bold as the number above it. Though the contrast is sharp, the three pieces together create a nice typographic unit working together to create the focal point of the piece. The right side is the list of the month’s dates in bold. The holidays are stated in lightweight.

Of particular note is that if you notice, the words April and 2022 are tucked in under the vertical line of the number. This typeface has serifs (the little eyelashes at the bottom of the number). I aligned the two words under the number within its serifs. By doing this, I reinforce the visual alignment and implied vertical lines of the number.

In addition to the items we have added to our summary, we can add the following:

• We can make a word very large on the page. If you go big, go big.
• We can bold the largest element. Though not always necessary, it can sometimes create a nice and juicy hierarchy.
• We can create units or groupings by keeping the type contained within an imaginary box.
• We can use visual alignments or improvised grids to reinforce the typographic grouping.

With what we have learned so far, we will move on to color.

Color

Discussing color can be an article all by itself. There are many resources available both online and printed about color. Indeed, here are a few Smashing articles by Cameron Chapman covering the subject more broadly:

• “Color Theory For Designers, Part 1: The Meaning of Color”
• “Color Theory For Designers, Part 2: Understanding Concepts And Color Terminology”
• “Color Theory for Designers, Part 3: How To Create Your Own Color Schemes”

In this article, however, we will focus on how color enhances or emphasizes hierarchy, how it helps to create a composition that keeps the eye inside of itself, and how it helps the eye navigate the page. For these reasons, when studying this variable, we limit the use of color to two or three colors. By limiting the use of color, we can focus on how it helps to establish a hierarchy in typography.

Factors That Affect The Use And Application Of Color

I do not mean we use color arbitrarily. It is important to read the content to establish a sense of the article. In other words, let’s assume we are designing a leaflet for a school-aged children’s birthday party. We would probably use vibrant colors and convey a sense of fun. Alternatively, if we are designing a leaflet for hospital patients with instructional material, perhaps the colors we use might be less vibrant, softer, and aimed to provide a sense of calm. There are usually three essential aspects to consider when using color and designing in general:

• Content,
• Audience,
• Context.

The audience determines not only how the content is written but also the typefaces, sizes, weights, and overall design of the content. The context of the content also determines how we design: is the content meant to be read at a distance, as in a poster, or is the content meant to be read closer to us, as in a mobile device or a book? Because color affects how we perceive the content, we must become familiar with that content. Thus, reading the content given to us by our clients helps us make smart design decisions.

Now that we discussed factors that are important for the use of color, let’s look at examples of the use of color as it pertains to this exercise:

In the example above, we can see how all the colors and attention have been dedicated to the title. It has also been added to the name of the author of the instructions, but because of its small size, it does not create conflict. The layout takes advantage of once making everything on the title large; it creates a nice pocket of space where the instructions can be easily tucked in. In this way, even though there is no color used on the body copy, it does not matter because we have no choice but to land our eyes on the beginning of the text.

Above, we see how the background has been turned black. Once you read the title and read a little bit of the text, it makes sense. The text has a pessimistic and somber tone to it. Thus, no cheerful colors. With that, notice how the column of text is concentrated to the right side, creating asymmetry, once again creating a sense of visual instability to enhance the text’s meaning.

Below is a greeting card for Mother’s Day in the United States. I designed this card to honor my best friend’s mom. Though I am using a picture, it is used in a way that helps the text come together in the lowercase a. The lowercase a is the largest element on the page. Its bowl or empty space creates a nice place to tuck something in — a picture, pattern, letters, and so on. The rest of the letters are capitalized, but the lowercase a continues to be the focal point. We can also notice that there are four sizes here. I broke the rule of using only three sizes… but it does not feel that there is competition. The colors are vibrant because, in this case, Cuquin was a vibrant person, and the colors are needed to honor her.

In addition to the items we have added to our summary, we can add the following:

• We can use color to convey personality and tone.
• We can break a rule as long as it works within the system we have established and does not compete with the focal point.
• We can create spaces within the letters or words to tuck in text, patterns, or pictures.

Our last variable to discuss is visual punctuation. Let’s take a look at how everything comes together in this variable.

Visual Punctuation

A common question I often hear from my students is, “What is visual punctuation?” We see it all the time but don’t think about it. Visual punctuation refers to the use of lines, shapes, symbols, and other geometric elements to enhance the hierarchy. Remember, the goal is always to enhance the hierarchy and help the reader’s eye move around the space.

Let’s see some examples of how visual punctuation is actually frequently used and applied in typographic compositions:

The example above uses visual punctuation in the form of the crane to cleverly point to the title. Then it repeats the use of white in the text at the beginning of the instructions. The similarity established creates unity, and the word FOLD pulls our eye back to the top. Notice how the designer also bolded the beginning of each instruction. We saw this before in the weight discussion. The use of the bold weight on each instruction helps us move from one to the other sequentially. It also helps to signal each new step without numbers.

The above example was designed to undermine the sometimes unnecessary rules and regulations that we find in places of worship. The point is not to follow all the rules but rather to focus on the object of affection. Here, a visual point is made to emphasize the conceptual point:

Circles are a great way to call attention to something. And so are the dotted lines. In this example, the dotted and playful line is colored in the same color as the circle on the top left. It points to the new number in the address aligned or set on the imaginary line the base of the number 2 provides. The rest of the address is provided following the same color palette. It creates a type of triangular movement from the top left to the middle right to the bottom left. Notice the sizes too. The numbers are the largest item on the card. There is a nice relationship between the numbers and the top left circle.

In addition to the items we have added to our summary, we can add the following:

• We can and should use visual punctuation to enhance the meaning, the concept, or the message.
• We can use only one color and one shape.
• We can also use more than one color to create a hierarchy.

Now that we have discussed all the variables, it would be a good idea to see them all used together.

All Variables In Examples

We have discussed the variables of proximity, weight, size, size and weight, color, and visual punctuation. Take a look at the following examples and see how many you can identify:

Like these, we can find more examples of the variables used together. In fact, they are used and applied so ubiquitously that we don’t really see them independently from each other. When starting out with typography, it is a good idea to isolate what we see. This is true for any discipline: isolate and then combine them. Learn each one well and then start adding and mixing.

The poster below was designed for a youth program called Empowered. It was a research-based project led by Dr. Krista Mehari with the goal of empowering marginalized young teens to make effective and productive decisions. When she asked me to work with them, we had several brainstorming sessions. The Watch, Wave, and Wait is a poster intended to help the kids memorialize the process of dealing with emotions. In this poster, I broke some rules. While still sticking to the three sizes rule, I managed to create a pattern using repetition of the outline words mimicking the internal thought process we engage in when upset: calm down, calm down, or counting or something similar.

Your Turn!

At this point, after reading this article, you might want to give this process a try. If so, I have prepared a simple table for you to use. Below are some instructions:

• Pick content that isn’t too long. For example, a two-page editorial would be too long. But a set of ten-step instructions would be better suited. An excerpt from an essay would be good too.
• Do not use letter-size pages. Think smaller: eight inches by eight inches format would be best. We do this to focus on the content and not feel strange if the page does not look “full.” Your sketches, which should be small, will also be square.
• Always do your sketches. Always do sketches first. It is the best way to literally think outside the box since you are outside the box, that is, the computer. Do as many sketches as you can think.
• For each of the variables, sketch several. Maybe think of four options for each.
• Then, take the best two or three for each variable and put them on the computer.
• When you print, and you should always print to “see” how the proportions are working, use crop marks to cut the page.
• Once you have printed them, tape them to a wall away from you. But tape them upside down. It is the best way to assess proportions, space, hierarchy, balance, tension, and so on.
• After you do this, revise them on the computer, print them again, and tape them upside down again.
• Once you are certain you have attained a good typographic hierarchy, you can make a small booklet out of them. Below you can see the booklet my former student Anh Dang did for her project, How to Fold a Crane. Or you can create a virtual flipbook showing your masterpieces!

And you needn’t stop there. As you get comfortable with the process, perhaps you want to try designing a poster. Or tackle that two-page editorial layout? Give it a try!

Conclusion

So far, we have seen how these six variables can powerfully transform the content in any format. It is all about how creative we are about organizing things within the parameters. After all, that is what design is about — creative solutions within a set of parameters. The more you practice, the better you get at something, right?

This old adage has proven itself to be true consistently. It applies to typography and anything design. Fine-tuning our senses comes with exposure and repetition. Take any opportunity to design and establish a hierarchy. Even small things like a business card can look incredible when you add a contrast of space, weight, size, size and weight, color, and visual punctuation. If we think about it, we are exposed to these variables daily and constantly. We just don’t look at them as isolated variables that can affect the entire composition. But they do. And once we know how to use them, we can push the boundaries and create pieces with more impact and intention.

Below I am listing resources to look at for more inspiration.

Resources

• Freebie to help you experiment (see below)
• I Love Typography
• I have a very healthy and juicy Pinterest board on all things typography
• Typotheque
• Carnegie Mellon Swiss Posters Collection
• “The Elements of Typographic Style Applied to the Web,” a practical guide to web typography
• Web Design Experiments, Jen Simmons
• Typography 101
• “How to Structure an Effective Typographic Hierarchy,” Cameron Chapman
• “Typographic Hierarchy,” Ilene Strizver

(vf, yk, il)

Fluid typography is getting a lot more popular, especially since the clamp() math function is available in every evergreen browser. But if we’re honest, it’s still a lot of mathematics to achieve this. You can use tools such as utopia.fyi, which are fantastic. But in large projects, it can get messy pretty fast. I’m a big fan of readable and maintainable code and always want to see what my code is doing at a glance. I’m sure there are many more of you like that, so instead of adding a full clamp() function inside of our code, maybe we can make this a bit more readable with Sass.

Why Should We Use Fluid Typography?

Usually, when designing for different screen sizes, we use media queries to determine the font size of our typographic elements. Although this usually gives enough control for the more conventional devices, it doesn’t cover all of the screen sizes.

By using fluid typography, we can make the typography scale more logically between all sorts of different devices.

“

This is now possible in all evergreen browsers because of the clamp() function in CSS. It is perfect for the job and reduces our media query writing, thus saving us a bit of file size along the way.

How Exactly Does This clamp() Function Work For Typography?

In short, the clamp function looks like this:

clamp([min-bound], [value-preferred], [max-bound]);

This takes into account three numbers: a minimum bound, preferred value, and a maximum bound. By using rem values, we can increase the accessibility a bit, but it’s still not 100% foolproof, especially for external browser tools.

If you want a more in-depth explanation of the math, I suggest you read this post from Adrian Bece “Modern Fluid Typography Using CSS Clamp ”. Aleksandr Hovhannisyan also has an extremely detailed approach that he explains in “Creating a Fluid Type Scale with CSS Clamp” on the way to a similar result with more advanced features, such as using Sass maps.

However, there is a bit of a problem. When you read those clamp functions inside your CSS, it’s still hard to see exactly what is happening. Just imagine a file full of font sizes that look like this:

clamp(1.44rem, 3.44vw + 0.75rem, 2.81rem)

But with a little help from the sass function, we can make these font sizes much more readable.

What Do We Want To Achieve With This Simple Sass Function?

In short, we want to do something like this: We have a minimum font size, from the moment our breakpoint is larger than 400px, we want it to scale it to our biggest font size until the maximum breakpoint is reached.

The minimum and maximum font sizes are covered quite easily. If we want a minimum font size of 16px (or 1rem) and a maximum font size of 32px (or 2rem), we already have the two parts of our clamp function:

clamp(1rem, [?], 2rem)

Creating A Basic Automated Fluid Function

This is where things get tricky, and I suggest you follow the article by Adrian Bece, who gives a great in-depth explanation of the math behind this.

In short, the equation is the following:

(maximum font-size - minimum font-size) / (maximum breakpoint - minimum breakpoint)

Let’s get ready to do some mathematics for this to happen in Sass, so let’s create our fluid-typography.scss function file and start by adding sass:math and the function with the values we’ll need:

@use "sass:math";

@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
 
}

Now, let’s add the calculation for the slope inside of our function with some sass:math:

@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
 $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
}

To get a value we can work with, we’ll need to multiply our slope by 100:

$slope-to-unit: $slope * 100;

All that is left is for us to find our intercept to build the equation. We can do this with the following function:

$intercept: $min-size - $slope * $min-breakpoint;

And finally, return our function:

@return clamp(#{$min-size}, #{$slope-to-unit}#{$unit} + #{$intercept}, #{$max-size});

If we call the created sass function in our scss, we should now get fluid typography:

h1 {
   font-size: #{fluid(1rem, 2rem, 25rem, 62.5rem)}
}

A Note About Units

In most cases, we will be using a viewport width when it comes to fluid typography, so this makes a good default. However, there are some cases, especially when using the clamp() function for vertical spacing, where you want to use a viewport height instead of width. When this is desired, we can change the outputted unit and use a minimum and maximum breakpoint for the height:

h1 {
   font-size: #{fluid(1rem, 2rem, 25rem, 62.5rem, vh)}
}

Updating The Function To Make The Calculations Feel More Natural

We got what we need, but let’s be honest, most of the time, we are implementing a design, and it doesn’t feel natural to pass our viewports as rems. So, let’s update this function to use pixels as a viewport measurement. While we’re at it, let’s update the font sizes so we can use pixel values for everything. We will still convert them to rem units since those are better for accessibility.

First, we’ll need an extra function to calculate our rem values based on a pixel input.

Note: This won’t work if you change your base rem value.

@function px-to-rem($px) {
    $rems: math.div($px, 16px) * 1rem;
    @return $rems;
}

Now we can update our fluid function to output rem values even though it gets pixels as input. This is the updated version:

@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
    $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
    $slope-to-unit: $slope * 100;
    $intercept-rem: px-to-rem($min-size - $slope * $min-breakpoint);
    $min-size-rem: px-to-rem($min-size);
    $max-size-rem: px-to-rem($max-size);
    @return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}

Now we can use the following input:

font-size: #{fluid(16px, 32px, 320px, 960px)}

This will result in the following:

font-size: clamp(1rem, 2.5vw + 0.5rem, 2rem);

At first glance, this seems perfect, but mostly that’s because I’ve been using very simple values. For example, when clamping to a maximum value of 31px instead of 32px, our rem values won’t be so rounded, and our output will get a bit messy.

Input:

font-size: #{fluid(16px, 31px, 320px, 960px)}

Output:

font-size: clamp(1rem, 2.34375vw + 0.53125rem, 1.9375rem);

If you’re like me and find this a bit messy as well, we could round our values a little bit to increase readability and save some bytes in our final CSS file. Also, it might get a bit tedious if we always have to add the viewport, so why not add some defaults in our function?

Rounding Our Values And Adding Some Defaults

Let’s start by adding a rounding function to our Sass file. This will take any input and round it to a specific amount of decimals:

@function round($number, $decimals: 0) {
    $n: 1;
    @if $decimals > 0 {
        @for $i from 1 through $decimals {
            $n: $n * 10;
        }
    }
    @return math.div(math.round($number * $n), $n);
}

Now we can update our output values with rounded numbers. Update the function accordingly. I would suggest setting at least two decimals for the output values for the most consistent results:

@function fluid($min-size, $max-size, $min-breakpoint, $max-breakpoint, $unit: vw) {
    $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
    $slope-to-unit: round($slope * 100, 2);
    $intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2);
    $min-size-rem: round(px-to-rem($min-size), 2);
    $max-size-rem: round(px-to-rem($max-size), 2);
    @return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}

Now the same example as before will give us a much cleaner result.

Input:

font-size: #{fluid(16px, 31px, 320px, 960px)};

Output:

font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);

Adding A Default Breakpoint

If you don’t feel like repeating yourself, you can always set a default breakpoint to your function. Try updating the function like this:

$default-min-bp: 320px;
$default-max-bp: 960px;

@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) {
    // ...
}

Now, we don’t need to repeat these viewports all the time. We can still add a custom breakpoint but a simple input such as:

font-size: #{fluid(16px, 31px)};

Will still result in:

font-size: clamp(1rem, 2.34vw + 0.53rem, 1.94rem);

Here is the full function:

@use 'sass:math';

$default-min-bp: 320px;
$default-max-bp: 960px;

@function round($number, $decimals: 0) {
    $n: 1;
    @if $decimals > 0 {
        @for $i from 1 through $decimals {
            $n: $n * 10;
        }
    }
    @return math.div(math.round($number * $n), $n);
}

@function px-to-rem($px) {
    $rems: math.div($px, 16px) * 1rem;
    @return $rems;
}

@function fluid($min-size, $max-size, $min-breakpoint: $default-min-bp, $max-breakpoint: $default-max-bp, $unit: vw) {
    $slope: math.div($max-size - $min-size, $max-breakpoint - $min-breakpoint);
    $slope-to-unit: round($slope * 100, 2);
    $intercept-rem: round(px-to-rem($min-size - $slope * $min-breakpoint), 2);
    $min-size-rem: round(px-to-rem($min-size), 2);
    $max-size-rem: round(px-to-rem($max-size), 2);
    @return clamp(#{$min-size-rem}, #{$slope-to-unit}#{$unit} + #{$intercept-rem}, #{$max-size-rem});
}

A Final Note: Be A Happy Clamper For All users Out There

If you followed this little tutorial and were amazed by it, you might want to add this clamp() method for everything, but there is an important side note when it comes to accessibility.

Note: When you use vw units or limit how large text can get with clamp(), there is a chance a user may be unable to scale the text to 200% of its original size.

If that happens, it is WCAG failure. As Adrian Bece mentioned, it’s not 100% foolproof. Adrian Roselli has written some examples on this, which you might find interesting.

We can use this method today because of the great browser support. By being smart on the usage, I’m sure it can be a beautiful addition to your upcoming project or as an upgrade to a previous one.

(vf, yk, il)

Media queries are a great concept. Building a complex structure in an HTML document and adapting it for various devices is not often possible without them (for the moment at least). Here we will talk about the fact that one of the drawbacks of fluid typography, namely the appearance of a large number of media queries, can be avoided. Or, at least, the number of records in @media rule can be reduced.

The advent of vw and vh relative units, the calc function, and later the min, max, clamp functions in CSS gave us a lot of power. An exhaustive review of Modern Fluid Typography Using CSS Clamp has been recently published by Adrian Bece. I advise everyone to get acquainted with it.

The advantages of the clamp function are obvious. We can define a change, for example, of a font size in a certain range of viewport (screen size) and, at the same time, limit it by maximum and minimum values. In such a simple case, we automatically (thanks to clamp) do not need to use media queries for changing sizes on breakpoints.

So, the following block in the CSS:

.block{
 font-size: 2rem;
}
@media (max-width: 1200px) {
 .block{
   font-size: calc(-1rem + 4vw);
 }
}
@media (max-width: 800px) {
 .block{
   font-size: 1rem;
 }
}

…can be easily replaced using clamp with a single line:

.block{
 font-size: clamp(1rem, -1rem + 4vw, 2rem);
}

But what if we need to set a more complex behavior which is determined by variety of unique behavior on different ranges of the screen width? Look at the following modified code:

.block{
 font-size: calc(-4rem + 8vw);
}
@media (max-width: 1200px) {
 .block{
   font-size: calc(-1rem + 4vw);
 }
}
@media (max-width: 800px) {
 .block{
   font-size: calc(0.5rem + 0.8vw);
 }
}

Can the clamp help us again?

Let’s take a closer look: from simple to complex.

Brief Digression Into Mathematics

As we all know, there is only one way to draw a straight line through two points. There are several ways to write equations to define the straight line. Below, it will be convenient for us to write the equation in the form:

$$(1)\;\;\; y=y_0 + k*x$$

where y₀ is a point of intersection of the line with the Y-axis (fig.1), k parameter defines the slope of the straight line to the X-axis and represents the growth/fall rate. Using the following canonical representation of the equation of a straight line:

$$\frac{y - y_1}{y_1 - y_2}=\frac{x - x_1}{x_1 - x_2}$$

It is easy to connect the y₀ and k parameters with the coordinates of the two points that belong to this line:

$$(1a)\;\;\; k=\frac{y_2 - y_1}{x_2 - x_1} ,\;\;\; y_0=y_1 - k*x_1$$

It should be noted that in such problems it is convenient to define the input parameters (point coordinates) in pixels. But at the output the relative unit rem is preferable. We should also remember the fact that viewport width is equal to 100vw (this follows from the definition of vw unit). So, in equation (1) we must replace x variable by just 100vw. Hence, we’ll have:

$$(1b)\;\;\; y=y_0 + k*100vw$$

Now it becomes clear the origin of expressions like 1rem + 2.5vw as one of the arguments of clamp or calc function. The first term (1rem) is the y₀ parameter expressed in relative units (rem), and the second one (2.5vw) is the parameter k multiplied by 100vw since x=100vw. The choice of such units — relative unit (rem) for values of output variable and viewport unit (vw) for screen size — has been made due to accessibility and responsiveness, respectively.

So, now we know how to determine the parameters in the equation of the form (1) or (1b) of a straight line drawn through two points. This will be used in the next section.

Main Formula Derivation For General Case

Now we’ll try to obtain an equation for F(x) function that will follow the behavior of property in general case (fig.2). Some information below may be omitted for readers who do not like pure math. You can look at the final equation (3) and the simple example for explanation how to use it.

Let’s look at fig. 2a (below). As you can see from the figure, the behavior of the property is determined (tabulated) by N points with coordinates (x_i, y_i). Let f_i(x) be a function that defines the straight line drawn through (x_i, y_i) and (x_i+1, y_i+1) points. We have (N-1) such functions (fig2b). So, how to get a general F(x) function that will be exactly equal to f_i(x) function on the corresponding [x_i, x_i+1] range, notably completely repeat the behavior of property from fig.2?

Let’s define the collection of functions g_i(x) as:

According to clamp function definition:

Let’s sum the g_i(x) functions, and denote the result as G(x) function, $G\left(x\right)={\sum }_{i=1}^{N-1}{g}_i\left(x\right).$

Now we can calculate the values of this function for different ranges of x variable:

or

for

It follows that G(x) function is equal to corresponding f_i(x) function for each [x_i, x_i+1] ranges, after deduction of Const constant term, or…

Equation (3) represents the final result and is the solution to the problem.

Several remarks should be made here:

• If we have the range with y_i= y_i+1 then f_i(x)= y_i, and clamp(y_i, y_i, y_i) = y_i properly. This fact will give us some simplification in the final expression for F(x) function.
• If we have the range where the y_i>y_i+1 inequality is satisfied, then we should write the corresponding g_i(x) function in the following form:

… because of clamp function definition.

• Let’s consider the ranges where х<х₁ and х>х_N. From equation (3) it follows that the values of property inside these ranges will be constant and equal to y₁ and y_N, correspondingly. We can do nothing and leave it like that. But in these intervals, I prefer that the values continue to change according to the same laws as in the [x₁, x₂] and [x_N-1, x_N] ranges. Therefore, g₁(x) and g_N-1(x) functions should be written not by clamp function but through min or max functions depending on the increasing or decreasing of the values in the given ranges. If we take the behavior of the property from fig.2 as an example, then we will have the following two redefinitions:

• It is possible to set an abrupt change in the property. In this case, the maximum difference between х_i and х_i+1 is set to 1px (fig.3) or, which is even more convenient in practice, even less than 1px.
• Obviously, the more complex (more ranges) the behavior of the property is, the longer the resulting function will be and vice versa.
• Because of the possible complex structure of the function by equation (3), it must be used as an argument of the CSS calc function in the CSS stylesheet.

Simple Example

Let’s simulate the following simple case. We have a header with a logo and menu items on some page. For mobile devices we need to create a hamburger menu. In this case, the font size of menu items, for example, is equal to 18px at 1920px of screen size and decreases to 12px at the viewport width of 768px. In the range from 320px to 767.98px of viewport width, the font-size is fixed at 20px (fig 4a.). This behavior of font size can be described by equation (3). Let’s start.

1. We need to calculate the parameters for f₁, f₂ and f₃ lines according to equation (1a) for its representation in the (1b) form. For f₁ function we have (using the coordination of 1 and 2 points):

So, using equation (1b):

The same procedure for another two lines gives us:

and

and

2. Now we can construct the g_i functions using equation (2):

3. The last term (constant) in equation (3) can be determined:

4. Desired form of equation (3) is…

or, in the final form:

5. Final record in CSS file will be (by remark 6):

.block{
 font-size: calc(clamp(0.75rem, 19200.75rem – 40000vw, 1.25rem) + max(0.75rem, 0.5rem + 0.5208333vw) – 0.75rem); 
}

… and is fully equivalent to:

.block{
 font-size: calc(0.5rem + 0.5208333333vw);
}
@media (max-width: 767px) {
 .block {
  font-size: 1.25rem;
 }
}

Evaluations for modeling right margin behavior (see fig. 4b) give the following equation (everyone can verify this):

You can check this example here:

Another Example

The following dependence of padding:

.block {
 padding: 3rem;
}

@media (max-width: 1199px) {
 .block {
  padding: 2.5rem;
 }
}
@media (max-width: 991px) {
 .block {
  padding: 2rem;
 }
}
@media (max-width: 767px) {
 .block {
  padding: 1.5rem;
 }
}
@media (max-width: 575px) {
 .block {
  padding: 1rem;
 }
}

… can be also easily replaced by:

.block {
 padding: calc(clamp(1rem, -14398.5rem + 40000vw, 1.5rem) + clamp(1.5rem, -19198rem + 40000vw, 2rem) + clamp(2rem, -24797.5rem + 40000vw, 2.5rem) + clamp(2.5rem, -29997rem + 40000vw, 3rem) - 6rem);
}

So, equation (3) gives us the possibility to describe any arbitrary behavior of the property depending on the viewport width. And it should be pointed out, we achieved this by completely eliminating the use of media queries.

Obviously, formula (3) can be used to describe not only the font size, but also every other property whose dimension is a unit of length. This limitation is due to a limitation in CSS itself, namely the lack of support for mathematical operations on values that have dimensions. For example, we cannot calculate something like (2px*6px)/4px in CSS at the date. I hope that such restrictions will disappear in future, and the equation (3) will be applied to properties specified as a percentage or dimensionless.

Also, it should be noted that it makes sense to apply the equation (3) only when the dependence is more complex than in primitive cases shown below:

1. Continuous unlimited change, the behavior is determined by two points only, k parameter of f function can be positive, negative or even zero (see fig.5a, k>0, for example). Instead of the equation(3) we use a function of the form calc(f(x)). A font size of some text that monotonically changes with viewport width can be as an example.
2. Behavior is determined by three points, for k parameters of f₁ and f₂ functions the inequality k₁>k₂ is satisfied (see fig.5b, k₁>0 and k₂<0, for example). In such case, min(f₁,f₂) function should be used instead of equation (3). A font size of some text that monotonically changes with viewport width to a certain value and then keeps a constant value can be used as an example.
3. The same as the second case, but the inequality k₁<k₂ is satisfied (see fig.5c, k₁<0 and k₂>0, for example). In such case, max(f₁,f₂) function should be used instead of equation (3).

Everyone can write their own mixin or function based on the equation (3) or use my implementation as CSS functions that take into account the above remarks and primitive cases.

You can also find a simple example with the flex structure here. In this example, the width of flex elements is calculated using the equation (3). This is an attempt to avoid media queries with such a commonly used transformation — initially the width of each of the four flex items is set to 25% (convert to px units, of course), and then, as the viewport width decreases, it changes to 50%, and then to 100%. It even seems possible to take into account the value of gap, and make it also responsive.

But the example will break as soon as there is a vertical scroll. To avoid example breaking and to compensate for scrollbar, we can replace vw units by % in expressions for width of flex elements. But while CSS restrictions do not allow us to use the equation (3) directly for values given in percentages, it is better to abandon such idea.

Summary

I’d like to mention that the idea was just to proving the possibility of such an approach, and the suitability of its application is your own choice. Of the obvious disadvantage of this approach, I have to highlight that the resulting code becomes less readable. The advantage is that media queries remain solely for describing the logic of changes while adaptive, structural changes and are not clogged with technical lines of changing font sizes, paddings, margins etc.

Editor’s note: It would be fantastic to build up a little tool that would allow developers to define changes and construct these complex queries in no time. Still, the maintainance would become quite a hassle — unless we use a Sass-mixing for it, maybe? We kindly thank Ruslan for taking the time to work on this, and oh my, what a journey it was!

Acknowledgements

Thanks to Evgeniy Andrikanich and his YouTube channel “FreelancerStyle” for creation of free high-quality educational content (HTML, CSS, JS).

Sources

• “Responsible Property By One Line” (in Russian)
• “Modern Fluid Typography Using CSS Clamp,” Adrian Bece

(vf, yk, il)

In the first part of this article, we saw that measuring and comparing typefaces is not a simple task. Testing it (subjectively or objectively) also depends on the context — which can be very tricky. We saw how important it is to keep the typographic design parameters and variables the same to get a more accurate result while testing different typefaces.

"Did you miss out on it? Don’t worry! Take a look at the first part of this article here so you can get all the context you need to fully enjoy it."

Measuring, comparing, and testing typefaces may guide your project decisions towards a more accessible and highly legible typeface. Let’s dive into the specifics of typeface aspects so you can get the best out of your tests. So what aspects of typefaces could we measure?

Aspects Specific To The Typeface Itself For Extended Reading Typefaces

Ascender And Descender Height In Relation To X-height

• Validation:
  There seems to be some truth in a larger x-height and medium-length ascenders and descenders being ideal.
• Description:
  The most efficient typefaces with the best ratio of x-height and cap-height seem to be Wayfinding Sans Pro and Johnston Underground with an x-height between 67% to 69% of the cap height. Learn more about it in Ralf Hermann’s (director of Typography.Guru paper, “Does A Large X-Height Make Fonts More Legible?.”
• Measurement:
  Millimeters.
• Measure quality type:
  Strong (objective).

Aesthetic Quality In Relation To Other Similar Typefaces

• Validation:
  There would probably be other typefaces that the typeface would be similar to or would fit with, so how well does it compare?
• Description:
  Expert review or opinion.
• Measurement:
  Not good, okay, very good.
• Measure quality type:
  Weak (subjective).

Aesthetic Quality In Relation To Historical Revival Or Similarity

• Validation:
  There would probably be other typefaces that the typeface would be similar to or fit with. Therefore, how well does it perform when compared to other typefaces that are considered to be historically well done or have been revived well?
• Description:
  Expert review or opinion.
• Measurement:
  Not good, okay, very good.
• Measure quality type:
  Weak (subjective).

Character, Symbol, And Language Support

• Validation:
  To find out how usable the typeface is, for different characters, symbols, languages, and information types.
• Description:
  We know character and symbol support, like for maths and different languages, is desirable and needed.
• Measurement:
  Numerical score or tick list against features and languages.
• Measure quality type:
  Strong (objective).

Kerning

• Validation:
  To find out how well the typeface has been kerned — because kerning leads to better and more legible typography.
• Description:
  A kerning test based on the example below, from Veronika Burian and José Scaglione’s — directors of the font foundry TypeTogether — article “Quality type: How to spot fonts worth your money.”

• Measurement:
  Not good, okay, very good. Percentage value, maybe. Precise numerical score based on a standard test.
• Measure quality type:
  Strong (objective).

Accessibility (Children)

• Validation:
  We know that accessible characters and symbols lead to better, more legible, and easier-to-read typography.
• Description:
  Infant characters as in my paper “Letter and symbol misrecognition in highly legible typefaces for general, children, dyslexic, visually impaired and aging readers — 2019 fourth edition.”

• Measurement:
  Numerical score based on the number of characters and symbols. Research and design effort based on not good, okay, very good.
• Measure quality type:
  Strong (objective).

Accessibility (Dyslexia)

• Validation:
  Dyslexic characters as in my paper “Letter and symbol misrecognition in highly legible typefaces for general, children, dyslexic, visually impaired and aging readers — 2019 fourth edition” and Robert Hillier’s (typeface designer and academic) PhD “A typeface for the adult dyslexic reader.”

• Description:
  Numerical score based on the number of characters and symbols.
• Measurement:
  Research and design effort based on not good, okay, very good.
• Measure quality type:
  Strong (objective).

Accessibility (Vision Impairment)

• Validation:
  Visually impaired characters as in my paper “Letter and symbol misrecognition in highly legible typefaces for general, children, dyslexic, visually impaired and aging readers — 2019 fourth edition.”

• Measurement:
  Numerical score based on the number of characters and symbols.
• Description:
  Research and design effort based on not good, okay, very good.
• Measure quality type:
  Strong (objective).

Aspects Specific To The Reader/User For Extended Reading Typefaces

Comprehension

• Validation:
  To find out how much and how well information is absorbed, retained, and recalled from a typeface or different typefaces.
• Description:
  This is a very difficult area to measure, and I would like to explain why:
  1. Not everyone will be able to recall accurately everything they know or do not know in an exam or in test questions;
  2. What people say they know, fail to communicate, and what they actually do in the real world are very different things. Just because some cannot recall something or write it in an exam paper, it does not mean they do not know it.

“Many previous reading studies investigated the effect of typography on reading speed. But we know that faster speed does not always equate to better comprehension. In fact, better comprehension is often associated with slower reading speed.”

— Sofie Beier (legibility expert), “Bringing together science and typography”

• Measurement:
  A paragraph of text, or pages of text and information, followed by questions or set the users tasks to do based on the information.
• Measure quality type:
  Weak (subjective).

Speed

• Validation:
  To find out how much, or how much more, they can read compared to what is considered normal/average from a typical typeface.
• Description:
  This is another very difficult area to measure, let me explain why. I could quickly scan a single page of a book and, in theory, have read all the content in about 6 seconds (because I have scanned my eyes across all the text quickly). Although, just because I have, in theory, read (or scanned) the text, it does not necessarily mean I have understood or absorbed it. However, the result would be taken into consideration — and there would probably exist clear and strong differences in performance between comparing a script typeface (like Snell Roundhand) against a highly legible typeface (like the Unit typeface). So the Unit typeface would be much easier and quicker to read than Snell Roundhand.
• Measurement:
  Eye-tracking (time, speed, and behavior) recording and data collection.
• Measure quality type:
  Strong (objective).

Facial Muscle Activation

• Validation:
  The zygomatic muscle activity (which controls smiling) is positively associated with positive emotional stimuli and a positive mood state.
• Description:
  By placing tiny sensors over certain facial muscles, one can measure the minute changes in the muscles’ electrical activity, which reflects changes in muscle tension. Facial EMG (electromyography) studies have found that activity of the corrugator muscle (which lowers the eyebrow and is involved in producing frowns) varies inversely with the emotional valence of the presented stimuli and reports of mood state. You can see in the academics John Cacioppo, Lauren Bush, and Louis Tassinary’ paper “Microexpressive facial actions as a function of affective stimuli: Replication and extension” and in the academic Ulf Dimberg’s writing “Facial electromyography and emotional reactions.”
• Measurement:
  Use an electromyography (EMG) sensor placed on top of a muscle to measure the amount of electrical current in the muscle. You get frequency readings.
• Measure quality type:
  Weak (subjective) and maybe strong (objective).

Character, Symbol, Or Word-finding Test

• Validation:
  To find out how quickly they can find information.
• Description:
  The participants were asked to locate a specific character in a text with a color pen. The specific character was shown at the bottom of the sheet for easy referral. The response times were recorded. Find out more about this method in the academic Brian Sze-Hang Kwok’s paper “Legibility of medicine labels.”
• Measurement:
  A numerical score of correct and incorrect.
• Measure quality type:
  Strong (objective).

Searching A Phrase Test

• Validation:
  To find out how quickly readers can find information.
• Description:
  The participants were required to locate a phrase in the context of a medicine label. The specific phrase was shown at the bottom of the sheet for easy referral. The response times were recorded. Find more about this method in the academic Brian Sze-Hang Kwok’s paper “Legibility of medicine labels.”
• Measurement:
  A numerical score of correct and incorrect.
• Measure quality type:
  Strong (objective).

Read-Aloud

• Validation:
  To find out if there are any issues or obvious difficulties between different typefaces, or different classifications of typefaces, and maybe weights (like thin, extra bold, italic or condensed).
• Description:
  The subject producing a reader protocol is requested to read the text aloud and to immediately express any thoughts about the document. More about this method can be seen in the academics Leo Lentz’s and Henk Pander Maat’s paper “Reading aloud and the delay of feedback.”
• Measurement:
  Notes and recordings based on not good, okay, very good, and notes of specific problems.
• Measure quality type:
  Weak (subjective).

Think-Aloud

• Validation:
  To find out if there are any issues and if any issues can be highlighted or discovered.
• Description:
  Get people to perform certain specific tasks while using the document to vocalize the person’s thinking. From academics Leo Lentz’s and Henk Pandar Maat’s paper “Reading aloud and the delay of feedback.”
• Measurement:
  Notes and recording based on not good, okay, very good, and notes of specific problems.
• Measure quality type:
  Weak (subjective).

At-A-Glance

• Validation:
  To find out if they can correctly identify a word, letter, or symbol and not misread it as another word, letter, or symbol in a quick response environment.
• Description:
  Typefaces were individually sized to a height of 4 mm using the letter “H” as the reference. Participants viewed the monitor at a distance of approximately 70 cm. Participants’ distance to the screen was measured at the start of the session using a tape measure. Each individual trial followed the same sequence of presentation: a large fixation rectangle signifying the start of the new trial (400 ms), a masking stimulus composed of non-letter characters (200 ms), the stimulus of interest (variable timing, according to staircase rules as described above), a second masking stimulus of non-letter characters (200 ms), and then a response prompt (up to 5000ms). You can see more about this method in the paper “The great typography bake-off: comparing legibility at-a-glance,” by Ben Sawyer’s (academic), Jonathan Dobres (academic), Nadine Chahine (typeface designer), and academic Bryan Reimer’s.
• Measurement:
  A numerical score based on the number of characters or symbols. The time measure is also checked.
• Measure quality type:
  Strong (objective).

Questionnaire

• Validation:
  People’s opinions, preferences, thoughts, concerns, views, likes, and dislikes.
• Description:
  Question asking, interviews, and real-time observations.
• Measurement:
  Notes and recordings.
• Measure quality type:
  Weak (subjective).

The Radner Reading Charts

• Validation:
  Test the person’s vision accuracy and acuity with a typeface.
• Description:
  The Radner reading chart is a highly standardized multilingual reading test system. The result of the collaboration is a standardized, valid, and reliable reading test system available in numerous languages. The reading chart consists of sentence optotypes, which are optimized reading test items (standardized by construction), and statistical selection. Sentence optotypes consist of short sentences that are highly comparable in terms of the number of words (14 words), the word length, the position of words, the lexical difficulty, and the syntactic complexity. Language-specific characteristics were considered, as were the number of letters and syllables per word, line, and sentence. Get to know more from the legibility experts Sofie Beier and Kevin Larson’s paper “How does typeface familiarity affect reading performance and reader preference?”

• Measurement:
  Correct or incorrect response. Note the point of failure or incapability to proceed anymore.
• Measure quality type:
  Strong (objective).

Legibility (Misrecognition)

• Validation:
  To find out if they can correctly identify a letter, number, word, or symbol and not misread it as another letter, word, or symbol.
• Description:
  As in my paper, “Letter and symbol misrecognition in highly legible typefaces for general, children, dyslexic, visually impaired and aging readers — 2019 fourth edition.”
• Measurement:
  Score for correct or incorrect identification. Time measure check also.
• Measure quality type:
  Strong (objective).

Legibility (At A Very Small Typeface Size)

• Validation:
  To push a person’s eyesight to the maximum and see what happens at a very small size.
• Description:
  At small sizes, less than 8pt, for instance.
• Measurement:
  x-height size measurement preferred over pt size. Also, maybe a rating of difficulty and time to read like: easy, reasonable, and hard.
• Measure quality type:
  Strong (objective).

Legibility (Distance)

• Validation:
  To see when a letter, symbol, or a word becomes unreadable and how far away it can be read or not recognized anymore.
• Description:
  In Robert Waller’s (information designer) article “Comparing typefaces for airport signs” he says that you could use a screen, physical sign, or printed paper to display a word, letter, or symbol. A person needs to stand far away and then get closer to the display until they can correctly identify the word, letter, or symbol. If a screen is being used, the person can also be at a fixed distance from the screen and then you can make the word, letter, or symbol bigger on the screen, until they can correctly identify it. This would give us a legibility score and distance measurement in relation to the correct identification. The first presented character was the letter “d.” As identified in Miles Tinker’s book Legibility of print, this character is one of the most easily recognizable letters. The purpose of this first exposure was to locate the individual vision threshold. The participant was placed at a distance of 10 meters from the screen and asked to move slowly forward until the presented letter was at the threshold of being identifiable. This was the distance at which the individual participant was tested — varying from 4.5–9 meters (with an average of 6 meters) from the screen. You can read more about this method in Sofie Beier (legibility expert) and Kevin Larson’s (legibility expert) paper “Design improvements for frequently misrecognised letters.”
• Measurement:
  Measurement in mm, cm or m.
• Measure quality type:
  Strong (objective).

Legibility (Rotated Information)

• Validation:
  To push a typeface and person’s eyesight to the maximum and see what happens at these extreme angles. Also, these angles are common in VR (virtual reality) software and products.
• Description:
  At an angle: -45 degrees horizontally left and +45 degrees horizontally right, -45 degrees vertically up and +45 degrees vertically down.

• Measurement:
  Legibility test (character, symbol, word) test.
• Measure quality type:
  Strong (objective).

Legibility (Degrading, Distortion, And Blurring)

• Validation:
  To push a typeface and person’s eyesight to the maximum and see what happens under these extreme conditions.
• Description:
  Legibility degrading test as in Ralf Hermann’s (director of Typography.Guru) paper “Designing the ultimate wayfinding typeface.”

• Measurement:
  The score for correct or incorrect identification. Time measure was also checked.
• Measure quality type:
  Strong (objective).

Appeal (Typeface Fitting Subject And Content)

• Validation:
  How well does it fit and suit the content?
• Description:
  An appeal concerning the content, as an example, for content on gardening, when a slightly more organic, chiseled, and wavy typeface might communicate and fit the content better.
• Measurement:
  Score based not good, okay, very good.
• Measure quality type:
  Strong (objective).

Appeal (User Feedback and Responses In Relation To Other Typefaces They May Know)

• Validation:
  How well does it fit and suit the content?
• Description:
  Appeal in relation to the typeface itself. What does the user say they like or dislike about this typeface in relation to other typefaces they use and know about? This method could produce interesting observations and data, albeit highly subjective.
• Measurement:
  Notes and recordings.
• Measure quality type:
  Weak (subjective).

Fixation Duration

• Validation:
  How quick or lengthy does the eye have to fixate to understand the information?
• Description:
  Fixation duration is a period of time when the focus of the participant’s gaze is relatively still on an area and taking in information about that which is looked at, as in the academics Ivan Burmistrov, Tatiana Zlokazova, Iuliia Ishmuratova, and Maria Semenova’s paper “Legibility of light and ultra-light fonts: eyetracking study.”
• Measurement:
  Milliseconds (ms).
• Measure quality type:
  Weak (subjective) and maybe strong (objective).

Saccadic Amplitude

• Validation:
  To find out what behavior, movements, or patterns are happening.
• Description:
  Saccadic amplitudes are a quick simultaneous movement of both eyes, like when you are reading a line of text. In this method, we monitor what happens with saccadic eye movements when reading, as in the academics Ivan Burmistrov, Tatiana Zlokazova, Iuliia Ishmuratova, and Maria Semenova’s paper “Legibility of light and ultra-light fonts: eyetracking study.”
• Measurement:
  Degrees (°).
• Measure quality type:
  Weak (subjective) and maybe strong (objective).

Aspects Specific To The Users’ Environment And Situation

Light

• Validation:
  To see how a typeface performs in lighting conditions and see how people respond in the lighting conditions.
• Description:
  Low light or good light condition and see how it affects the information and performance.
• Measurement:
  The score for correct or incorrect identification. Time measure is also checked. The light strength is measured in lumens (lm).
• Measure quality type:
  Strong (objective).

Stress

• Validation:
  To find out how typefaces would work better or worse, under stress and high-pressure situations, with quick stressed eye movements.
• Description:
  Setup situations such as: booking a ticket and going through an airport, doing tasks after they have finished a 6-hour working day, or reading or doing tasks late at night — when it is more likely that they will be more tired.
• Measurement:
  Accuracy and efficiency of users’ actions. Maybe blood pressure or heart rate testing.
• Measure quality type:
  Weak (subjective).

OpenType Variable Fonts And Real-Time Responsive Features

• Validation:
  Whereas a single non-variable font does not essentially change or alter itself, variable fonts can, and can be given settings to instruct them to work in different technological environments.
• Notes and Description:
  Variable fonts have the ability to alter and modify themselves in real-time to different screen sizes, media query responses, user customisations and environments. Variable fonts can utilise different aspects such as: weights, width, italic, slant, optical size and grade, to change and adapt, to help them work better in different and changing situations.
• Measurement:
  Assessment (legibility, readability, comprehension, user preference) in relation to the changing circumstances. [Many measurement types in this area, too many to mention, but see other areas in this paper for aspects applyable.]
• Measure quality type:
  Weak (subjective) and maybe strong (objective).

Time Pressure

• Validation:
  To find out how typefaces would work better (or worse) under time pressure and quick stressed eye movements.
• Description:
  Setup situations like finding information within a certain timeframe, booking a taxi very quickly, or finding something in a telephone directory.
• Measurement:
  Time measuring. Maybe a blood pressure test.
• Measure quality type:
  Weak (subjective).

In Diverse Situations (Driving In A Car At Distance On A Road Sign Or Airport Sign)

• Validation:
  To push a person’s vision (length of view) and agility and see how typefaces respond.
• Description:
  To test the extremes of people’s vision and ability, like driving in a car and reading a road sign where distance and orientation are factors. How does weather affect information and communication?
• Measurement:
  In meters, centimeters, or millimeters.
• Measure quality type:
  Strong (objective).

Aspects Specific To Technology For Extended Reading Typefaces

Range Of Weights

• Validation:
  It is always appreciated and helpful to use a typeface with a range of weights.
• Notes and description of measuring type:
  Range of weights offered.
• Measurement:
  Numerical score in the amount of weights.
• Measure quality type:
  Strong (objective).

On-screen Rendering And Hinting

• Validation:
  Bad hinting and screen rendering leads to hard-to-read on-screen typography and illegibility.
• Description:
  Analyze by taking a screengrab (then zooming-in), or by using a zoom-in device (magnifying glass), then analyzing the hinting.
• Measurement:
  A score based on not good, okay, and very good. Also, use 3 different types of screens (low-resolution, HD and 4k+).
• Measure quality type:
  Strong (objective).

Font File Size

• Validation:
  Larger font sizes can take up more bandwidth, especially across larger websites, and be slower to load initially in a webpage’s first content paint.
• Description:
  Look at the file size of the font.
• Measurement:
  The file size (kb) would give a score, although this measure is certainly not very useful, as there is no escape from a typeface with a large symbol and language support, which cannot really be made any smaller in file size.
• Measure quality type:
  Strong (objective).

OpenType Features/Variable?

• Validation:
  If a typeface has more desirable features (such as small caps, different number styles, ligatures, and so on), it makes the typography better and typographically more usable.
• Description:
  A typeface is better if it has the features required by users and information.
• Measurement:
  Numerical score or tick list of features.
• Measure quality type:
  Strong (objective).

Specific Typographic Design Variables Affecting Performance

Typographic Design

• Validation:
  They affect typeface and typographic communication.
• Description:
  Tracking, leading, kerning, typeface weight, line length, word spacing, condensed weight, typeface size, typeface color, OpenType features.
• Measurement:
  Various possible (must be controlled and precise, as mentioned in Ralf Hermann (director of Typography.Guru) paper “What makes letters legible?”).
• Measure quality type:
  Weak (subjective) hard to measure accurately.

What Would Typeface Performance Measurements, Results, And Scores Potentially Look Like?

A data table, infographic, or some kind of graph could be used?

Scientists And Designers Needing To Work Better Together

Sofie Beier (legibility expert) in her paper “Letterform research: An academic orphan” touches upon the different issues and constraints designers and academics have faced in the past:

“To produce findings that are relevant for the practicing designer, scientists benefit from consulting designers in the development of the experiments. While designers can contribute with design skills, they cannot always contribute with scientific rigor. Hence, researchers will profit from adopting a methodological approach that ensures both control of critical typographical variables and scientific validation. An interdisciplinary collaboration where scientists provide valid test methods and analysis and designers identify relevant research questions and develop test materials, will enable a project to reach more informed findings than what the two fields would be able to produce in isolation.”

— Sofie Beier in Letterform Research: An Academic Orphan

To recap, designers have tended to produce information lacking scientific rigor in the past. In contrast, scientists produce information that is hard to understand — with equations and lacks practical application. So both sides, whichever you are on, have their weaknesses and lack expertise.

Am I Making Typeface Designers’ Job Harder?

It is not my aim to make a typeface designer’s job any harder. It is commonly known that any typeface takes at least one year of hard work. The typeface designer Martin Majoor states that he designed the Questa typeface at irregular intervals over the course of 7 years. I have nothing but respect for typeface designers and the amazingly hard job they do. In fact, I have so much respect for the time and difficulty of designing a typeface, that I refuse even to try to attempt the task.

What Now?

• Research into what is legible and what characteristics make letters and symbols more legible, go to the library and research online. For example, the academic journal Visible Language has all journals available for free on their website. There is some incredible research and work done, that was done more than 50 years ago;
• Speak with people and speak with other typeface designers;
• Avoid designing and releasing typefaces done, expressed, and designed on your own;
• Test typefaces, try to do the test accurately and try to compare what you are designing with another typeface, to see where there are weaknesses and strengths in testing results with people and in different contexts and environments. How is it working (or not working) better than another typeface and in different contexts and environments?
• Test typefaces with different categories of people in different contexts and environments;
• Make your findings, design intentions, and tactical fixes available for free, as part of the typeface release, as a publication, or as some kind of central public list (like on GitHub), so we can start better and get to where we need to be quicker;
• Maybe a completely new typeface might not be as good of an idea as you think. Maybe extension, improvement, or modification to an existing typeface might be smarter. New is not automatically better.

Conclusions

Do we, as users and designers, really need to assess typefaces and find out how they perform? Is it necessary? Well, whatever your thoughts are, in 2022, with a mass of typefaces available and 100s of years of designing and manufacturing typefaces, it is time to consider this topic. I think the time has come, and we are there. This is especially true for highly legible typefaces, some kind of measure or measures — even if new typefaces got released and they only had one performance measure (or say three), that would be a start.

We may also need some cross-measurable tests that are used, so everyone tests against the same (or as near as) thing. Because, as previously mentioned, if someone tests their typeface against a sans serif (like Arial), then another person tests their typeface using another typeface (like Helvetica), the data will not be cross-comparable. And furthermore, what typographic design and typesetting values the two people use, would most definitely be different, but actually, it would be highly desirable and more accurate if they were the same.

I hope I have made your life more difficult and more confusing! Maybe I have asked a lot of pointless questions? Furthermore, in theory, just because a typeface does not score well (or score just as well as another typeface) does not necessarily mean it is an ineffective or bad typeface. It just means that, in theory, it may not score as well as another typeface in the same context. Nor does it mean that it would not perform well in reality. What did I say? I told you this was a difficult area!

To confuse things even more, legibility expert Kevin Larson, academic Richard Hazlett, usability expert Barbara Chaparro and academic Rosalind Picard in their paper “Measuring the aesthetics of reading,” found that, when the typeface was set with no OpenType features in a normal body text paragraph (as typically found in a book), the users could read faster and understood more of the text. In other words, there were no ligatures, no small caps, no old-style figures, no real fractions, and no real superscripts and subscripts. I am not saying you should start typographically undesigning, disregarding years of best practice knowledge, but it goes to show that few things are certain in graphic communication.

Acknowledgements

Alma Hoffmann (editing and feedback), Kevin Larson (feedback), Karel van der Waarde (extensive comments and feedback), and Erik Spiekermann (feedback).

Further Reading

• “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols,” Thomas Bohm
• “A Reference Guide For Typography In Mobile Web Design,” Suzanne Scacca
• “7 Gorgeous Free And Open-Source Typefaces And When To Use Them,” Noemi Stauffer
• “Exo 2.0, A Contemporary Geometric Sans Serif Font (Freebie),” Vitaly Friedman

(ah, vf, yk, il, nl, mrn)

Our focus is on typefaces for reading large amounts of text and information in the most efficient, legible, pleasurable, comprehensible, and effective way possible. For instance, typefaces used for a novel, an academic paper in a journal, or a lengthy online article like this one that uses the Elena typeface, that you are reading now on this webpage. The questions that we will explore are:

• How well do typefaces for extended reading actually work?
• How well does a typeface work and perform against another similar typeface?
• How would we test to see if there is any difference between a good sans serif and a serif typeface with users?
• What would the world’s most ideal, best practice and design research-driven highly legible serif, sans serif, and slab serif possibly be like? What characteristics and themes would be most advisable, and do we need a central public list of aspects and features?
• There is both the aesthetic and functional aspect to a typeface, but what is the functional aspect, and how can it be investigated and measured?
• How good is a new typeface, and how good is it compared to a similar typeface designed in previous years?

Should typefaces be measured? There is no simple answer. The short answer: yes. The long answer: it is a difficult and imprecise task. We will discuss the pros and the cons, and I will show you what things are involved and how we could go about doing it.

A Very Short Introduction To Typefaces

For 100s of years, we have enjoyed using typefaces. These compiled systems for letters and symbols, which are representations of sounds and information, get a lot of use and are a large part of graphic communication.

The first movable type machine, and therefore the first printing press, was created by a man named Bi Sheng, who lived in Yingshan, China, from what we believe to be 970–1051 AD — over four full centuries before Johannes Gutenberg was even born. The moveable type, sculptured in a lead-based alloy — which is essentially metal blocks of letters and symbols that can be moved, arranged, and used for mass printing — was Johannes Gutenberg’s contribution. Fast forward to the early 1960s, phototypesetting systems appeared. These devices consisted of glass disks (one per typeface) that spun in front of a light source, which exposed characters onto light-sensitive paper. Later on, in the 1980s, type started to be used in a digital context in computers. And today, we still have type in a digital context, but it travels through cables, wirelessly on smartphones, and in virtual reality glasses in 3D.

There are many different classifications of typefaces. To name a few: sans serif, serif, slab serif, script, handwritten, display, ornamental, stencil, and monospace. In a way, technology also created new typeface classifications. Today, we even have mixed typefaces with elements of serif and sans serif, such as the Luc(as) de Groot’s typeface TheMix. This diversity adds to the difficulty and complexity of defining and testing typefaces.

Reasons To Measure The Performance Of Typefaces?

Because technology has made it possible to design typefaces easier than ever before, we seem to be reinventing “different types of wheels” that already get the job done. However, rather than reinventing these typefaces, maybe we can get some objective measures, learn from what works and what does not work, and then design objectively better wheels (typefaces).

If your aim is to produce a new typeface based on historical exemplars, tradition, or design, then fine, this is what you will be aiming for. Alternatively, if you want to do something new and expressive, or that has never been done before, then fine, of course. However, some contexts, situations, and users need and demand highly functional typefaces.

As I briefly mentioned, measuring a typeface’s effectiveness is difficult. Since many new typefaces are not supplied with any objective concrete testing data, how do we determine how well they work and where they succeed or fail?

Should We Measure The Typeface Alone, And/Or The Context And Environment That The Typeface Is Used In?

When considering the questions above, we can see that this is a large and complex issue. There are many different types of information, situations in which information is used, types of environments, and there are many different categories of people. Here are some extreme examples:

• A person who is elderly trying to read road signs, driving home at night;
• An accountant doing a large amount of numerical calculations for a million-pound/dollar company, needing to turn around the work in 30 minutes;
• A young person learning to read for the first time, sitting in the back of a car full of people on bumpy roads;
• A person with dyslexia trying to read and complete their evening class assignment.

Measuring Typefaces And The Resulting Performance Data

One of the reasons why measuring a typeface’s effectiveness is difficult is that we cannot accurately measure what goes on in people’s minds. Many factors are invisible, as Paul Luna — a professor at the University of Reading’s Department of Typography & Graphic Communication — mentions in this video Paul Luna on the typographer’s task. In addition, Robert Waller, information designer at the Simplification Centre states:

“Legibility research has a long history (going back to the 1870s). A wide range of issues has been studied, including type size, line spacing, line length, typestyle, serifs, and more. However, as Buckingham in New data on the typography of textbooks pointed out relatively early on, these factors interact in complex ways, apparently unrecognizable by many researchers. Indeed, in recent times a consensus has grown that the interaction of variables in type design is so complex that few generalizable findings can be found (see a longer review in Robert Waller’s “Typography and discourse”).”

— Robert Waller in Comparing Typefaces For Airport Signs

Furthermore, Ralf Hermann, director of Typography.Guru in his article says:

“Doing scientific studies to test which typefaces work best in this regard, is almost impossible to do. For a proper test setup you would need to modify one parameter while keeping every other parameter unchanged. But setting a letter or word in different typefaces can not be considered as “changing one parameter”, because a typeface consists of dozens of relevant parameters like x-height, weight, contrast, width — just to name a few. So scientific tests for typeface legibility are often full of flaws. Very often the typefaces are set at the same point size, but as every graphic designer should know, the point size does not reflect the actual size of the letters in print or on-screen. So if you come across a scientific legibility study that compares typefaces set at the same point size, don’t even bother to read on!”

— Ralf Hermann at What Makes Letters Legible?

The observations expressed in these quotes demonstrate that testing typefaces involves many complex factors. Because of this complexity, it has to be carefully controlled and modified, but it may not even be worth the effort.

Consistency And Variables

When testing typefaces or a selection of typefaces against another, we need to keep the typographic design parameters and variables the same, so we do not introduce or change the previously tested type settings. One example is the difference between the typefaces’ x-height’s (the height of a lowercase x) of any two typefaces we are testing. It is unlikely that they will be the same, as x-heights differ greatly. Thus, one of the two typeface x-height’s will seem to be larger in size, although it may be the same point size in the software. I will show you more about typographic variables under the section “Specific Typographic Design Variables Affecting Performance” in the second part of this article.

Robert Waller mentions in “The Clear Print standard: arguments for a flexible approach” that “although both point size and x-height are specified, it is the point size (pt) that is most commonly quoted — and point size is a notoriously imprecise measure.” It is, however, more effective and accurate to set an x-height measurement and set the typefaces being compared to that same x-height measurement. The x-height using point sizes actually results in different sizes — and does not look inconsistent between different typefaces.

Notice on the 1st line that we can see that both typefaces are set to 26 pt in Adobe InDesign. However, if you look at the tops of the “erdana” you can see that they go slightly above the line, so the Verdana typeface is, in essence, larger than the Info Display typeface, even when they are both typeset at 26 points. On the 2nd line, both typefaces have been typeset to a consistent and accurate measurement of an x-height of 5.5 mm. Notice that while the x-height is the same for both typefaces on the 2nd line, it gives a different point size for each typeface. This is why point size is not an accurate way to measure typeface size and for testing and comparing two or more typefaces.

Additionally, how you use and typeset the typeface in the actual typographic design and layout (line length, typeface size, color, spacing, leading, and so on) is probably more important than the actual typeface used. Thus, you could use one of the world’s most legible typefaces, but if you typeset it with a leading of -7 points and a line length of 100 characters, it would be rendered nearly useless.

As you can see, we can’t use a singular factor to measure typefaces. Instead, we need to address multiple factors within the design system. They all have to work well together to bring an ideal and effective final presentation.

Do We Need To Decide On A Base Default Typeface To Standardized Test Typefaces Against?

I would like to make things more complicated. (Remember when I told you this article had some difficult and complex issues?) So as an example, let’s say that we want to test a serif typeface against another serif and then again a sans serif against another sans serif. One would think that one of the two serifs or one of the sans serifs would perform better than the other, right? Well maybe, but not quite. Now, let’s say that we have the previous person testing two serif typefaces and two sans serif typefaces. What would happen if someone else did the same test but then tested their serif and sans serif against a different serif and sans serif typefaces that the 1st person used. Well, the result is simply that two people tested a serif and a sans serif typeface against different serif and sans serif typefaces, and they are not cross comparable.

So, the question is: should we, as a community, decide on base typefaces to test against? So, for a serif, it is quite popular and common in academic journals to test against Times New Roman. So, for sans serif, Arial is again another popular base typeface typically used to test another sans serif against. Then for monospace, Courier?

Last but not least, we have 2 people previously testing typefaces, but what typographic design and typesetting settings and variables did they use? Once again, even more inconsistency is introduced because they would most definitely test their typefaces with different typographic designs and typesetting settings. Do we need to set a base/default typographic design and typesetting, so everyone tests and measures against the same thing?

The Difference Between Near-identical Typefaces: Two Brief Discussions

There are many typefaces, and many of them are very similar or are nearly identical to previous or contemporary versions available. Here are some examples:

• Neue Haas Grotesk (1956), Helvetica (1957), Arial (1982), Bau (2002), Akkurat (2004), Aktiv Grotesk (2010), Acumin (2015), Real (2015);
• Frutiger (1976), Myriad (1992), Monotype SST (2017), Squad (2018), Silta (2018);
• Collis (1993), Novel (2008), Elena (2010), Permian (2011), Lava (2013).

Note: For more information, see my article “No more new similar typefaces for extended reading, please!”

If we look at a typeface like Garamond, we can see that there are many versions of Garamond — all with slightly different interpretations of what the ultimate or most accurate version of Garamond is. Furthermore, they are all designed for slightly different uses, contexts, and technological choices:

Typeface designers and foundries supplying these versions of Garamond say theirs is the best, but which one is right? They were all designed for slightly different contexts and technological times. It would be interesting to find out what the performance differences are between these very similar typefaces.

Furthermore, if we compare a typeface like Minion Pro (which is quite robust and sturdy) against a typeface like Monotype Baskerville, we can observe that Minion Pro has more consistent stroke widths and slightly less personality than Monotype Baskerville. In contrast, Monotype Baskerville has more variance in stroke width, with more of a posh and sophisticated personality than Minion Pro. Therefore, how would these differences affect their performance? Perhaps there is no one right answer to these questions.

I certainly feel, in 2022, that we, as designers, researchers, and academics, have certainly built up some fairly sensible and reasonable conclusions based on previous research and previous arguments over the last years. Nevertheless, the questions seem to remain around — what are the characteristics that make typefaces work a little bit better, and what would be “more advisable?”

Kai Bernau’s Neutral Typeface

Neutral, a typeface designed by Kai Bernau, is an interesting example of how an ideal utopian legible typeface might look and be like. We can see in the image below that Bernau has analyzed the fine and very subtle characteristics that are common in neutral typefaces, such Univers, Helvetica, TheSans, and so on.

The term “neutral” basically refers to a typeface design that does not say much or does not say anything and that has a very “no style/anonymous” feel and voice — like the color grey. Think of it like speaking to someone with little personality or who has a not-obvious personality. In his design, Bernau is attempting to find out what an almost merged letter skeleton of all these neutral typefaces would look like when comparing all these typefaces.

Kai Bernau’s Neutral typeface began as a graduation project at KABK (the Academy of Art, The Hague), taking inspiration from typefaces that seem ageless, remain fresh and relevant even decades after they were designed. His project was constructed based on a set of parameters derived by measuring and averaging a number of popular 20th-century sans serif fonts (like Helvetica, Univers, Frutiger, Meta, and TheSans), trying to design the ultimate “neutral” font. It is a very interesting idea that builds on previous best practices to find an optimal solution. This is much more like the conceptual typeface design that we need to see in the future. For more, see the “An Idea of a typeface” article by Kai Bernau.

Can A Utopian Highly Legible Typeface Exist?

Bernau’s typeface aims for neutrality and utopian legibility. However, if I asked the question: what would the world’s most legible sans serif, serif, or slab serif typeface look like? How much better than a typically good highly legible sans serif, serif, or slab serif typeface would it be? Furthermore, is it even worth the effort?

Whatever your thoughts are, it is the designer’s job to design things that work and read well. Adding to this conversation, Sofie Beier (a legibility expert) says:

“In the history of design, there are many examples of designers proposing an “ideal typeface”. The fact is that there is no optimal typeface style. A thorough literature review shows that typeface legibility varies significantly depending on the reading situation.”

— Sofie Beier in Bringing Together Science And Typography

Perhaps, we should consider developing a central list of the elements, research, data, sources, and aspects to create legible and usable typefaces, so we can easily choose? This may lead to better typeface design decisions, choices, and better typefaces in the future.

Changing The Change: From What To What?

Another reason why we need to measure typefaces and know how well they work is highlighted by David Sless, information design pioneer and director of the Communication Research Institute in Australia, in his article “Changing the change: from what to what?”:

“Change is good. Design is all about change; bringing something into the world that didn’t exist before; changing from an undesirable to a desirable state of affairs; improvement; progress! And now we are even changing the change! […]

Benchmarking is that part of the design process where you ask how an existing system is performing against agreed performance requirements set at the scoping stage of the design process. Putting the matter simply, if you change something and then claim that the change is an improvement, you need to have some before and after measurements. […]

Much design work… is redesign rather than design from scratch. An important part of redesign is to ask: where are we right now? What is the current performance of this design? What is happening in the world now which we don’t want to happen, or we’d like to change? Where do we want to go? What do we want to achieve here? […]

So I’m all in favour of change, even changing the change. But we need to know what we are changing from. […]

Unless we look carefully at what we are doing now before making a change, we might throw out some good bits.”

— David Sless

This is one of the reasons we need to measure typefaces and know how well they perform. That way, when we design new ones in the future, we can learn from past data and then use that knowledge in future typefaces, rather than relying on a bit of research and personal self-expression.

Redesigning typefaces makes us end up in the same place (whether good or bad), and we are not necessarily making and designing better typefaces. Although typeface design provides us with both the aesthetic appeal to meet the functional needs, it is the functional need and its functional aspect that is frequently missing.

With the thoughts mentioned above, I would like to raise another debate, because I know that typographic discussions and debates are usually beneficial and productive for all involved.

Are Typefaces Tools, Software, Objects, Products Or What?

This is a question that is not easily answered. It depends on what position you decide to take. Kris Sowersby, director of Klim Type Foundry argues that typefaces are not tools in his article “A typeface is not a tool”:

“In theory, designers could perform all of their typesetting jobs with the same one or two typefaces. But they don’t. I can almost guarantee this comes down to aesthetics. They choose a typeface for its emotive, visceral and visual qualities — how it looks and feels. Designers don’t use typefaces like a builder uses a hammer.

The function of a typeface is to communicate visually and culturally.”

— Kris Sowersby

Though Sowersby points out a functional aspect, he makes no mention that typefaces are used to achieve certain and precise responses and effects from users’ behaviors and emotional responses. For example, I might choose typefaces specifically because of their legibility — when a typeface is considered legible and easy-to-read by people with less-than-good eyesight. And so a well-designed typeface (or tool) is crucial.

Another reason I may choose a typeface is to bring a certain “more ideal” and to bring a “more specific” response and behavior from people. So, I may also choose a typeface as a tool for better communication with specific audiences. This is similar to why we choose a hammer over another, even though they all do the same job. There are 100s of different types of hammers, but builders do seem to have an “emotional favorite.”

In addition, typefaces can be more or less legible on different screens and monitor resolutions because they can be rendered with varying degrees of quality and sharpness.

Let us move on to a more precise and probably more important aspect, and that is testing data value.

The Two Types Of Testing Data: “Subjective” And “Objective”

When testing, there are two types of testing data: subjective (meaning mainly coming from a personal view and opinion) and objective (coming from a result from reality or the ability to do or not do something). They are valuable in their own ways. However, an objective measurement may be more desirable. It is important to know the difference between the two. Below is a brief description of both as it applies to our topic:

• A subjective measure:
  A user says: “I can read this typeface better.” This may be the case and what the person feels. However, if the measurement, in this case, is “better,” then the questions are: how much better, what kind of a measure and how accurate a measure is “better,” and how much better (than what) is it? However, what one person likes may not be what another one likes. Is it better because I said so? They may not be able to describe or know why they like it, but they just say: “I like it.” Because this measure is based on what the person feels, it is not accurately measurable.
• An objective measure:
  A user identified a letter correctly and within a certain timeframe. The data is either correct or incorrect, they could or could not do it, and they did or did not do it in a measurable recorded time span.

Kevin Larson, principal researcher on Microsoft’s Advanced Reading Technologies team, explains:

“While I generally agree with you on the importance of objective data, and most of my work has collected reading speed measures of one kind or another, I think there can be interesting subjective data.”

— Kevin Larson

David Sless also states in his article “Choosing the right method for testing:”

“The first is that inexperienced, untrained, or misguided information designers ask the wrong questions: what do people think of my designs? Which of my designs do they prefer? What must my artifact look like? What information must my artifact contain? The second reason is that asking the wrong questions about the design, leads inevitably to certain ways of asking questions — methods of testing which give inadequate answers.”

— David Sless

David Sless continues the discussion by adding [slightly reworded and edited by me]:

“Attitude and opinion surveys, preference tests, expert opinion, and content-based design, are based on the wrong questions and are highly subjective because they come from people’s views, knowledge build-ups and preferences… The right, or much better, more easily measurable and more accurate question, is based on user performance, setting them tasks to do, then using diagnostic testing to see if they can or cannot do the tasks, and making any notes, possibly recording how long it took them to do it. A far more useful question to ask before you design a new information artifact or redesign an existing one is: what do I want people to be able to do with this artifact?”

In summary, the most important question is: what do we want the users to do? Based on the previous examples and discussions in this article, we can see that not all data or information gained is necessarily useful or accurate.

What Do We Want People To Do With Highly Legible Typefaces?

Consulting Sless’ article “Changing the change: from what to what?” again:

“A far more useful question to ask before you design a new information artifact or redesign an existing one is: what do I want people to be able to do with this artifact?”

— David Sless

Let’s try to outline what we want people to do with highly legible typefaces for extended reading, like reading large amounts of information, effectively and precisely:

• We want them to be able to recognize what each letter, word, and symbol is;
• We want the typeface to reflect and fit the content and message for the typeface to enhance and support it;
• We want them to understand, absorb and comprehend as much of the information as possible;
• We want to encourage, sustain and enable high motivation levels when looking at and reading the text;
• We want them to maybe form a bond with the text and typography, feeling that the information is high quality, respectful and worthy;
• We want to tire them as little as possible;
• We want to provide typography in the most efficient way, such as leading, tracking, kerning, typeface size, color, line length, hyphenation, capitalization, and word spacing;
• We want different categories of people — like people with vision impairments, people with low vision or very bad eyesight, people with dyslexia or aphasia, or who have specific letter requirements, like children learning to read — to at least have letters and symbols designed to support or fit their needs as best as possible. We want to allow accessibility via OpenType or stylistic options with the typeface, so they are available to use if needed. These points could be extended to language support as well.

More Coming Up In Part 2

Let us dive into more of these amazing complex issues (as I said they would be) in the second part of this article — Measuring The Performance Of Typefaces For Users (Part 2). We will look deeply at how we can test typefaces, how to get the best out of every aspect of the process, and more!

Further Reading

• “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols,” Thomas Bohm
• “A Reference Guide For Typography In Mobile Web Design,” Suzanne Scacca
• “7 Gorgeous Free And Open-Source Typefaces And When To Use Them,” Noemi Stauffer
• “Exo 2.0, A Contemporary Geometric Sans Serif Font (Freebie),” Vitaly Friedman

(ah, vf, yk, il, nl, mrn)