Communication in web design is almost always text and typography plays a very vital role here. Great typography makes reading effortless and magical while poor typography forces the reader to read.
“More than 95% percent of information on the web is in the form of written language.”
As a designer, I feel that typography is one of the hardest parts of UI Design. Optimizing typography me to optimize any user interface I am working on. There are quite a few rules and theories that need to be kept in mind while doing so. In this blog, I hope to provide a set of rules that helped me improve readability and legibility of all textual content in Hippo CMMS web design!
Font WeightHave you noticed that heavier typefaces are much harder to read than lighter weights of type? So I changed all heavy fonts to a lighter font to have a better legibility.
Spacing I wish I could provide a quick calculator to tell you exactly what the ideal letter spacing. But unfortunately, there is only one rule of thumb. What is it? It is that the bigger the text size the less space you require for it to be legible. The typeface can also sometimes be so open that you need to manually adjust spacing. This is generally a tip required to craft legible and striking headers. When it comes to leading always multiply your font size by at least 1.5. What does that mean? Like in the image below I have multiplied my line height by 1.68 to have a better legibility. i.e for 16px my line height is 27px and sometimes people will prefer 29px for the same.
Color & ContrastDifferent colors are suited to different projects but here’s a quick designer approved tip! Instead of using colors like gray or black always make it a point to pick out your main color. As you can see the colors used i.e. #00b6e0 and #113040 both are the main colors of the website.
HierarchyHierarchy is how a reader will read the content. This is essentially about how a designer can distinguish between header, subheading and body text. This can be achieved by using contrast, differential text sizes, padding, margins and so on. This is an important technique to be mastered to really achieve superlative readability.
ConsistencyThis is one of the most important parts of UI design (at least for me). Repeated element provides unity. The repetition may be positioning, text size, colors, padding, margins, use of rules, background and boxes.
To a reader, typography is a huge deal that they never knew about. Great typography choices by a designer can make a website look professional and polished. Bad typography choices, on the other hand, distract the reader and call attention to themselves in the worst way possible. Thus, it is very important for typography to make text readable and understandable.