text alignment example

3/7/2023

5

min. leestijd

Legal design basics

Visualizing Your Contracts: A Guide to Fonts, Colors, and Icons for Legal Design Visualization

Enhance your legal contracts with visual elements! Discover the power of fonts, colors and icons to improve readability, communication and user experience. Get valuable tips and examples in this comprehensive guide.

Bilgehan Arifoglu

Bilgehan Arifoglu

Legal UX Designer

Introduction

Using visually improved contracts and services is essential to impress the client with your design. Our last post in this legal design basics series is about visualizing the contracts.

Why it matters

People drive with emotions. Emotions are feeling of satisfaction. Making legal documents and information more engaging is one one the most important thing you can do. In today's world, the aesthetic is equally important to usability.

Emotion is measured by the satisfaction someone gets from their experience with your product. Think about why you enjoy unboxing videos. Or the difference in emotional satisfaction and experience between buying and using an Apple product versus buying and using a different brand.

Visualizing is a powerful tool for improving communication, reducing misunderstandings, and enhancing the user experience.

Fonts

Fonts are something that makes your client wants to read your contract. Imagine reading a 32-page long contract written in Comic Sans font. 🥶 Even if your content is gold, no one will read your text because of the bad font.

Why it matters:

Good fonts = good reading experience. Choosing the right font for legal documents significantly impacts readability, accessibility, and professionalism. Older generations use Serif fonts such as Times New Roman or Georgia because they are often preferred for legal documents due to their classic and traditional appearance.

But this doesn't mean we must use these fonts to gain trust or heaviness. Rather than using "times new roman," "playfair display," or "space mono," it's good to use "Arial," "Verdana," "Open Sans," "Georgia," "Helvetica," or "Roboto."

image shows the difference between sans-serif and serif font
Both of them are usable and their legibility is often perceived better than other classical fonts such as “times new roman” and “arial.”

You can check out some of the best fonts here:

White Space

White space lets you understand what the transitioning point is. Jumping from one vital article to another article without missing the essential information can be done by using white spaces.

In legal contracts, white space is the area around, and between the text, paragraphs, and other document elements intentionally left blank. White space is essential in legal contracts because it helps to improve readability, comprehension, and overall user experience.

Example of using white-space
Example of using white-space in your text

Line height and Letter Spacing

Line height and letter spacing adjustments are essential in texts because they directly impact the legibility of the text. Well-designed contracts can significantly enhance the overall user experience and comprehension by making the text easily read, visually appealing, and accessible.

example of line height and letter spacing
Line height and letter spacing is very important elements for better readability.
  1. Line height: A line height of 120-150% of the font size is generally considered a reasonable range. For example, if the font size is 16 pixels, a line height of 19-24 pixels would be suitable.
  2. Letter spacing: Avoid letter spacing that is too tight, as it can make the text difficult to read. Similarly, excessive letter spacing can negatively impact readability. A safe letter-space range is usually 0 to 5% of the font size.

Text Alignment

In general, left alignment is better for legal contracts than justified alignment because justified alignment can create uneven word spacing and rivers of white space between words. But often, we use the justified version in our texts because we can block the river feature created by white spaces in our program. Some people try to stop the river feature by adding more words to their contracts, but less is more, so I don't do that. 🌱

example image of text alignment feature
If your justified text is lack of enough word, it can create rivers like this.

Colors: Colors are like the paintbrushes of legal design - powerful and emotive. They can convey messages, emphasize crucial details, and establish visual hierarchy. But, as with any tool, it's essential to use colors thoughtfully and strategically.

🔵 Blue exudes trust, stability, and professionalism, while 🔴 red serves as a warning or alert. You should choose hues that align with the tone and purpose of the document while also being mindful of accessibility for those with color blindness.

Why it matters: Just like an artist painting a masterpiece, you want to apply the right amount of color in the right places. When done right, colors can transform a legal document from a mundane black-and-white agreement into a work of art that inspires trust and confidence. 👩‍🎨

Color pairs can be used to create better documents. Here are the list of websites you can inspire about colors and color theory:

Icons

Icons are simple, recognizable visual symbols that can enhance legal documents' clarity and visual appeal.

Why it matters: One picture is worth a thousand words.

Icons transform complex concepts into basic and navigable paths. A handshake icon can represent an agreement or contract. People tend to give full attention to exclamation marks because they know that piece of information is important.

Some icons that we are using in our contracts.

In legal design, choosing relevant, clear, and consistent icons with the document's tone is crucial.

  • Clarity and Visual Communication: Icons can provide visual cues that help convey meaning and improve clarity in legal contracts.
  • Enhanced User Experience: Including icons in legal contracts can enhance the user experience for the parties involved. Icons can help break down dense text, making the contract easier to navigate and understand.
  • Better Recalling: Icons can aid in recall and memorability. Human brains are wired to quickly process visual information and remember images better than text alone.
  • Universal: Icons can also be helpful in legal contracts or policies with an international audience, where language or cultural barriers may exist.

Do you want to explore more? You can read the rest of the series in the related articles section below.