Cover Image

Typography: Headings

July 6, 2021 - Reading time: 6 minutes

Actionable UI tips to improve your headings UX.

Headings are one of the most crucial parts of typography. We read and perceive headlines first, among other information on the screen.

The purpose of any heading & headline is to grab our attention, set the story's right tone, and intrigue the brain with value.

In this episode, I want to share my practical tips to help you make effective typography decisions and improve the overall impact of your typography and call to action.

Tip 1—Make your hierarchy dead obvious

Make your hierarchy dead obvious

For most UI projects, you'll need to create a set of headings to use around the project (h1,h2,h3, etc.). You can use tools like 
type-scale.com to do it for you. Or do it manually, relying solely on your perception 👁️, math 🔢, or sense of style 💅.

Any way you do—make it obvious to the reader!

  • Increase contrast between headings to improve their readability and recognition.
  • Larger size/weight contrast will help readers to understand the importance of each piece of your text faster. And as results improve the reading flow for each paragraph.

Tip 2—Don't over-style your headings

Don't over-style your headings

Stay consistent with chosen style. Don't over-style your headings.

  • Build a strong hierarchy with a predictable heading sequence for users to read without breaking the rythm.
  • Don't sacrifice your paragraph contrast. Make the main content as easy to read as the headings.

Tip 3—Use unique line-height for headings

Use unique line-height for headings

Don't rely on the baseline grid when setting up your headings line-height.

Visual-heavy fonts require an individual approach on line-height to help them have a better vertical balance. 

Tip 4—Balance headings with negative letter spacing

Balance headings with negative letter spacing

To better balance wider headings— play around with the negative letter-spacing.

Adjusting the letter-spacing is like adding extra spice. This can make your headings feel more balanced by taking less horizontal space and, as a result, less time for eyes to jump from one text line to another.

Tip 5—Balance all caps headings with letter spacing

Balance all caps headings with letter spacing

You can add extra space between characters for all caps headings to make them more impactful and noticeable. But be sure not to overdo it.

Tip 6—Place line breaks above the headings

Place line breaks above the headings

The purpose of a line break or hr tag is to separate one piece of information from another.

Place separators above the headings to better structurize the reading sequence. Use decorative elements to highlight a certain part of your content.

Tip 7—Not all headings should be bold

Not all headings should be bold

It's okay to lower the font-weight for h1, h2 headings and make them more delicate in style.

Experiment with color & style for secondary headings. Use these types of headings to highlight a piece of crucial information or quotes.

Tip 8—Make sure headings works out of context

Make sure headings works out of context

In UI, headlines are regularly shown out of context.

Design your headline to stand alone and still make sense even without a remainder of the content around. This will help users to perceive the value without additional clicking.

Tip 9—The heading should always match the content

The heading should always match the content

Don't promise something your content can't provide.

Headlines fail when they don’t match the content or can't keep their promises during the read—resulting in a higher bounce rate.

Good headlines always deliver the promised value of content from start to the end, building trust towards the author in the long run.

Tip 10—Headings should 
not be too long

Headings should 
not be too long

Do not exceed over 62 characters!

Search engines tend to ignore links that are over exceed 62 characters. This could decrease the conversion rate in the long run and lower the search engine appeal for your page content.

Tip 11—Use descriptive taglines

Use descriptive taglines

A good tagline can increase site visitors' retention, ensuring they are in the right place by providing context for the headlines.

Add relative tags and helpful information to guide users, save their time and build interest before reading.

Cover Image

Typography: Spacing

June 17, 2021 - Reading time: 6 minutes

Learn how to create and use vertical rhythm in UI design.

I'm starting a new series of designer tips to cover edge-cutting web design topics, such as typography, colors, layout, components, and design systems.

The first volume is fully dedicated to UI typography.  Here you will find all the knowledge to create strong typography for your projects.

Designers use typography as a tool to deliver information pleasantly. Spacing, font size, width, color, and line heights — all elements work together to achieve a better user experience.

In this episode, we'll discuss Spacing. Spacing helps to establish a vertical rhythm and define the relationship in which your typography elements are present. 

A good vertical rhythm is like a good song. It's made with thoughtful pauses and rhythm change to create an interesting flow a user is happy to follow.

Tip 1—Use more space for
 larger titles

Use more space for larger titlesMore space will help to create a better contrast between the headline and a tinted text. This results in better visual balance and readability of your main CTA's.

Tip 2—Use less space for
 smaller titles

Use less space for smaller titlesSmaller headlines should be closer to the paragraph text. Using smaller spacing for small headlines helps highlight an important part of the text without breaking the reading flow.

Tip 3—Use more space 
above the titles

Use more space 
above the titlesThe extra space above the headline will create a pause to separate one piece of text from another. In addition, more space makes the transition from one topic to another more clear.

Tip 4—Define your line spacing

Spacing between paragraphsTo make your text look consistent — set up a universal spacing you'll use as a default one.

The ideal line spacing for most fonts is 30% - 50% of its line-height. For example, if your text line-height is 24pt, the spacing between paragraphs should be 8, 10, or 12pt.

This method is proven good because:

  1. The spacing will always match your font choice.
  2. You can multiply this number and create a spacing system for every typography need. 

Tip 5—Cut horizontal space
 for long titles

Cut horizontal spaceOur eyes are scanning the text in a Z-way pattern. That's why long headlines are so hard to follow until the last word. So don't make users spin their heads to read.

Use less horizontal space, and seek symmetry through logical line breaks to achieve 
eye-catching CTA’s.

Tip 6—Add more space between 
text and image

Space between 
text and imageImages are visually heavier than the text. Adding extra space will help create a balance between vibrant imagery and the context, making it easier to read.

This will help the text not be obscured by visually heavy images or graphics.

Tip 7—Space inside
 the paragraph

Space inside
 the paragraphKeep a consistent spacing inside your paragraph and between its elements. Use a universal spacing for all elements inside the paragraph, such as lists, quotes, tables, or any decorative elements.

Tip 8—Vertical rhythm vs. 
layout grid

Vertical rythm vs. 
layout gridWhen using a grid, it's easy to fall into a trap a solely rely on it to align your text. This will make your text uniformed but not visually appealing.

So f*ck the grid when it comes to typography — use vertical rhythm. 

Instead, work with contrast and stay consistent with spacings to create a memorable rythm that will guide your reader.

Useful resources


Cover Image

UI Grid Best Practices

May 20, 2021 - Reading time: 6 minutes

Make better designs with layout grid tips & tricks.

Space and grid make the foundation of any design. Once mastered and used correctly, the grid helps you to create solid and visually appealing solutions for your designs.

Therefore, I would like to share my tips for mastering the grid in UI design. In this episode, we talk about layout grids. Let's start ✌️

What is a Grid?

The grid helps establish the foundation of any interface. You can think of it as a framework for your layout. The framework helps to organize your UI elements, guide the reader and identify individual parts of your design.

Terminology

UI Grid Best Practices — TerminologyThe grid consists of grid units. The layout is placed upon the grid and has a certain amount of columns. Columns have margins on the left and right, as well as paddings between each column.

Tip 1—Choose numbers wisely

Choose layout numbers wiselyWhile the 12-column Bootstrap like-grid is the most popular choice, it's not mandatory. When choosing a grid, select the one with a number of columns your design truly needs, no less, no more.

Tip 2—Know your constraints

Know your constraintsAlways consider the screen you are designing for. Know how it is handled and operated by others. Use these limitations to your advantage and learn to design with them.

Most common screen resolutions (px)

  • Desktop: 1440x1024
  • Tablet: 768x1024
  • Mobile: 320x640

Horizontal and vertical spacingTip 3— Horizontal and vertical spacing

Consider both vertical and horizontal spacing to make your layout more appealing and consistent.

Shape vertical rhythmTip 4—Shape vertical rhythm

Use the baseline grid to arrange the content and bring visual consistency to your text and layout elements.

Bonus tip—Adjust font line-height to match the baseline grid.

For example: If you choose 4px as a baseline/grid unit, to align text, you will need to set the line-height of the font to a multiple of the unit, which means the line height should be 4, 12, 32, 64, etc.

Tip 5—Use power of the frame & color

Use power of the frame & colorUse framing as a tool to focus your user's attention on a certain layout part. Add additional visual weight in the place where it is needed.

Tip 6—Step out of the grid

Step out of the gridPut certain elements off the grid. Use this breakdown trick to add value and make certain parts of your design stand out.

Tip 7—Adapt your grid

Adapt your gridEnsure your layout is adaptable to common screen sizes, breakpoints and provides a good mobile user experience. Make sure to always check your designs on different screens.

Tip 8—Learn to design without a grid

Designing without the grid is okay for a small project indeed, but for scaling projects, it's mandatory.

Learn to design with a grid and without actually bringing it to your canvas. Observe your layout without the "grid glasses" from time to time to find the most creative solutions for your tasks.

Useful resources

Resources

Plugins