The Evolution of Typography in Web Design
Web designers used to be limited in amount of web-friendly typography available. In fact, these limitations resulted in many websites having a similar look and feel. Today, typography has evolved. There are many web-friendly fonts available for designers to use, giving designers the freedom to expand their creativity on the web. Now, a website has the possibility to look special and become a real platform for communicating a brand's personality and message.
Proceed With Caution!
More choices doesn’t always mean better. In fact, designers must proceed with caution, because the abundance of choice often leads to bad branding that can be counterproductive if the typography doesn’t connect or resonate with your brand image. Every communication should have a synergistic component that supports the complete brand. Ridpath creative has created a simple guide to help you navigate your use of typography on the web.
A Guide to Typography Usage on the Web
Mobile Dictates Text Size
Because smartphones come in all shapes and sizes, text sizes are a moving target. Responsive design has helped make once traditional web design have a better user experience on a pocket-sized device. Responsive design enables your font sizes to be comfortably read on a desktop computer as well as a smartphone. In many cases that means you will have slightly different styles (CSS) depending on the viewer's screen size. Be sure to test readability while in the design process and keep making adjustments until it feels comfortable to read.
Hue, Value, and Chroma
Why in the world is the vast majority of text black on a white surface? The answer is simple, and following the rule will keep your website visitors happy. Black and white have the greatest amount of contrast possible. Contrast makes type easier to read. Of course, a world with no gray or color would be boring indeed. The goal is to consider the contrast between your text and the color around it. High contrast design is easier to read. IMPORTANT - a different color does not equal contrast. For example, yellow text on an orange background does not equal contrast.
Typographic Hierarchy
Typographic hierarchy applies to any and all fonts you may choose. To make a website visually pleasing yet retain usability, it is critical to set a typographic hierarchy which is then used consistently throughout your website. in simple terms, typographic hierarchy means using larger fonts for headlines and smaller text for body text. Ultimately the typographic hierarchy should also match the context of your text as well.
White Space
Some people think white space means wasted space. I think a better term is breathing room. Your brain does not want to see a wall of text filling up their screens edge to edge. Even with the limited area of smartphone screens, some breathing room is important. Your content, both text, and images need space to define nuggets of information for the brain. There is extensive research on users web reading habits and the key takeaway is that information is digested in bite-sized pieces.
Another element of white space to consider is line spacing. In headlines, look for tighter line spacing. In body text where there are several lines, give the user’s eyes a break by increasing the line spacing. In print design, the starting place was about a 20% additional gap between lines. In web design, I believe that that can be 30-50%. It pains me to mention this, but please make sure your text does not run right up to the edge of the left or right side of the page unless you are trying to do something unique and creative (notice I did not say nice to read).
Ridpath Creative is a favorite website developer in the Kansas City metro area. If your business has a website that was developed before the introduction of the iPhone, or you just want an expert opinion regarding your digital strategy, give us a call at 816-792-9669 or email roger@ridpathcreative.com.