Subscribe to our monthly dose of design. No spamming, we promise.

Back to

White space is to be regarded as an active element, not a passive background.—Jan Tschichold

Schiele in Vienna—The Form of a Signature

Array of: Dublin

Type+Vienna, Serving #2

Type+Vienna, Serving #1

Array of: Amsterdam

Avoid These 4 Layout Lapses on Your Website

Posted by | on

While surfing web sites daily, we can encounter all sorts of letters and letter arrangements, some of which are good, and some of which are not so well on point. As we have previously discussed , typography is a crucial part of website design and should not be overlooked, but rather treated with special care and attention. However, there are certain mistakes that happen most frequently in the website design. Any tiny typographic mistake can have a large impact on the overall design so first let’s take a look at some of them that occur from a macro typographic standpoint.

1 | No visual hierarchy

Good visual hierarchy ensures proper communication between the elements of the page. This way we define user interaction, we lead them around the page. With poor visual hierarchy, user gets confused and has trouble finding information. If user can’t find information needed in a short time span, they will leave your website and look somewhere else. Make sure that the navigation is visible and easy accessible and that you have visually structured all your information into categories ranging from those that are most important to those that are the least important. You can test your website’s visual hierarchy simply by blurring it and checking which elements stand out. Once you do that, you can go back and fix/redesign visual hierarchy.

2 | Line length too long

Optimal line length for the paragraph of text is 55-70 characters (66 being ideal) including spaces. This is the most pleasing line length for the human eye and everything above is too tiresome. This number of character in digital media works well for laptops, PCs and tablets, but it is different when it comes to mobile phones. Having 60-70 charactes in one line on a size of a mobile phone screen would mean that the font size would be too small. In these cases, we can refer to newspaper line length. It is about 35- 45 characters per one line. This way font size is optimal for reading paragraphs.

3 | Leading too small

If your paragraph appears to be ‘too black’ and crowded, it is probably that your leading is too small. Trying to save some space by not using enough leading (space between baselines of paragraph) will just result in users avoiding to read it. Make sure there is enough space between the baselines, but not too much. If there is too much space, it will appear as if paragraph is falling apart and is hard to read since it would be harder to follow the next line. Find optimal leading, it works different with different fonts. What you want to achieve is that you can read through paragraph effortlessly and without noticing any of the type elements.

4 | Not enough contrast between text and background

Your text and background should have healthy amount of contrast. If you are doing monochrome design with white background, it is easy to check the contrast. Avoid having text color anywhere below 75% of black. This of course, has a lot to do with the font you choose since every font has its own ‘color’ so that percentage might change. But in general, text that appears to grey or too light is hard to read just as it is hard to read text that is too black since it its to harsh on our eyes. If you are having black background  and white font, make sure there is not a lot of text since it is hard for eyes to read in such an environment. In case your are using color black ground and/or colored font, check your contrast by putting jpg of the website in grayscale. If it does not work in black and white, it will not work in color.

These were some of the most frequent mistakes on websites that are not hard to fix but can take some time. Making this ‘minimal’ changes will have great effect on your website. Try playing with these elements and see how it drastically changes your design and your interaction with it.


About Zrinka Buljubasic

Zrinka Buljubasic

Zrinka is a type designer working as a Lead designer at Agilo. Type@Cooper 2015 graduate. Has BA in Visual Communication Design and MA in Type Design from Art Academy of Split, Croatia.

Read all posts by .