Table of Contents
In this post I want to give you set of laws or suggestions you should keep in mind when working with text and also with design in overall. However, most of the laws is focused solely on typography. Some of the suggestions will be more useful in print design while some in web design. Still, make sure to read all of them because in every single one is at least a bit of knowledge that will help you become better designer.
How to Format a Document
Let’s start in outside-in direction or from the big picture to details if you want. The first set of rules we are going to talk about will focus on document (print, or web page) and will deal with typography and style in bigger scale.
#1 Distrust default software settings
Most of the software in your toolbox is not created by designers and your need will vary depending on the industry you are working in. In every case, make sure to at least control the default or current settings of the software you are using. Default setting does not mean the best setting for you. It is more like the best way to set things for the biggest group of users (customers). Don’t believe that you have to follow it just because it was there when you bought it. Always modify and customize the workspace to your needs because you are the one who will work with it.
If you are working with Photoshop, as many of us do, check out this older, but great article on setting Photoshop workspace for web and app design on Smashing magazine because there are many factors you should pay attention to like units of measurement and colors. Don’t skip it or you might find out that your design looks somehow different from you though.
#2 Ensure good contrast between text and background
No matter what type of page or what section you are about to design, creating appropriate contrast between text and background is crucial to make the text readable and legible. Don’t worry, you don’t have to force yourself into B & W mode of thinking (black & white) in order to choose right contrast. If you are well-rounded in color psychology, you can quickly create well-balanced color palette using analogous, complementary, compound, monochromatic or triad colors.
Otherwise there are many great tools to help you. For example, Color wheel created by Adobe, paletton, colorsontheweb, or pages like Colorhexa and COLOURlovers providing various palettes and sets created by design communities. If this is not enough, just use Google to search for another sources and pick the tools you feel more comfortable with.
Note: Whenever you can, that mean in all cases, avoid using pure black (#000, hsl(0,0%,0%), rgb(0,0,0)). This is applicable to design in overall. You might be asking why and here is the answer. Pure black color is not that natural as you could think. Take a look around yourself. You are surrounded by thousands of different shades of colors, most of them are not absolutely black. When you take a look at examples of UI design, the ones based on pure black almost never look as good and natural as the ones based on dark shades.
#3 Avoid chart junk and page junk
What this rule says is to simply avoid including unnecessary data in charts, graphs or pages. In all situations think about information user will want to and also want to see. Even though it might look like a good idea to provide as much data as you can, the result can be disastrous. Too much information can easily clutter the medium and user will not be able to understand it or it can mislead him. So, always think about what are the most important information and provide them as first.
#4 Enforce a consistent style within a document
This is like an omnipresent mantra you probably hear in many associations from various sides. It applies to design and typography as well. One of the factors of great design is consistency. There is no question about it. Medium providing information in consistent and predictable form will always win over chaotic and unordered pile of mess. You typography should be always based on certain plan, not on momentary mood or whatever.
Always create style guide you will follow through the whole project. No excuses allowed. You want to keep everything as consistent as you can so the user don’t have to guess or question anything and just enjoy the experience. This will not only make you a better designer and bring you more users, it will also increase the number of returning users in long-term.
#5 Maintain a visual hierarchy
For those of you who are not familiar with visual hierarchy (I wasn’t a short time ago), visual hierarchy is all about using different presentation style for different kinds of text objects. These objects are headings, body text, captions, quotes, etc. Every single one of these object should have set some style it will consistently follow. It can be font size, font weight, font style, tracking (letter-spacing), leading, indentation and so on. All these type attributes are important because the allow users to understand better what type of content are the reading.
For example, main heading and body text should always have different size. Otherwise, it will be harder to distinct between them and decide which one is more important. He same applies to secondary heading, quotations, italics, centered text, left or right aligned text and more. However, visual hierarchy goes even deeper. It also includes grid system, content distribution and positioning and also media.
You always have to keep in mind how eyes work with chunk of text and what content is more important and has higher meaning (or priority) than other. According to this notion, you then decide on how to style it so it follows the exact order and experience you want. No detailed should be left unquestioned.
When elements are placed close together, people tend to perceive them as a group. This is one of the Gestalt laws called proximity (similarity, continuity, closure, proximity, symmetry, common fate, good gestalt and past experience). The same can be applied vice versa. When you want to help users understand which object is related to what, the easiest way to achieve that is through white space.
Take a blog for example. If you feature number of posts on main page, they all should have some white space between them so they are perceived as individual objects. However, their heading and summary (or caption of text) should use different amount of white space to create illusion of group so user will perceive them as related to each other. Similar philosophy should be applied when designing a website.
Every website consist of number of distinct sections and each of these sections contain some content. To ensure the content will not blend together you should again use consistent amount of whitespace to transform every section into independent group. Doing this, even though you will not provide any headings or anything indicating new section, users will always unintentionally understand it. This law of grouping related elements is used every day on one-page layouts and website and these are the best demonstrations how to approach this law properly.
That’s all for the first part of this series. Today you learned to customize setting of your software, pay attention to contrast, what to include in charts and pages, keeping a consistent style, maintain a visual hierarchy on the page and also to group related elements using gestalt law of proximity.
If you like this introductory part of 33 Laws of Typography series, please share it so other people can learn about typography and design as well. In the next one you are will go into more detailed phase and learn about formatting body text for example. So stay tuned!
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
