Web Design Error

Small White Text - Black Background

👎  White space or blank space is one of the most undervalued tools of graphic design. White space provides contrast, as well as a resting place for reader's eyes, as they move through the document. White space can take many forms: The open area around a headline. The dynamic power of a headline may be enhanced more by the extra white space around it, than by larger type. The page margins of an advertisement or document. Wider margins direct the readers' eyes to the center of the page. The vertical space between columns of text. The wider the columns, the more space needed between them. The space created by uneven line endings of text. This space relieves the monotony of large blocks of evenly measured text. Paragraph indents and extra line spacing between paragraphs. These small but effective increments of space can open up a page layout. Space between lines of text. Tightly packed lines of text darken the page. A sink or a drop is a band of white space at the top of a page. It draws attention to the text below it , by adding contrast. It can be used to add emphasis to headlines. You may also allow a graphic to extend slightly into the sink, rather than remain in line with the text. A good way to improve the appearance of a newsletter is to leave a significant amount of vertical white space between columns. When formatting text using tables on web pages, increasing cellpadding and cellspacing will produce this effect.

Dark Mode

Today, this technique is actually quite popular and has its own name. Some sources report that 82% of viewers prefer it for long sessions that require a lot of reading. You can even choose it on some sites as a viewing option.

It's a given that the paragraph at the top isn't the way to do it.

If you do it, choose colors wisely, enlarge your text, break up your paragraphs and add extra open space between them.

That's just a start. Find an in depth tutorial on the subject of Dark Mode. Some can be very technical. Find one that speaks to you.

Dark Mode Template Kits

We're putting together a collection of Dark Mode Kits. These are working examples of using the technique:
Preview Flexbox Dark Mode Toggle Template #508
Preview Flexbox Dark Mode Toggle Template #402

Return to Common Errors