![](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/thumb.jpg)
Use More White Space
Or should it be called "black space"? Effective use of white space is important for any type of design, but it is essential for websites with dark backgrounds. Dark designs have a tendency to feel "heavy", and cluttering them up can reinforce that feeling. Take a look at some popular dark web designs below, and note their liberal use of white space to great effect. Black Estate is seen all over the Internet in dark web design showcases. It is indeed a beautiful design and worthy of all the attention. A great deal of white space is used throughout the design, and what makes this particular design unique is how the white space is used to outline certain elements so efficiently. The logo has a lot of white space around it and is the first thing we see as visitors. We see the main content and bottle on the right next. As you see, white space is used perfectly to highlight the text on the bottle and the headline of the main content.![BlackEstate](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/darkdesign1.jpg)
![TicToc](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/darkdesign2.jpg)
![MarkDearman](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/darkdesign3.jpg)
Textual White Space
Because readability is the number one concern of those who dislike dark backgrounds, designers must pay extra close attention to the text itself. Just as in the overall design, one way to improve readability on dark websites is to increase the white space by adjusting paragraph size, kerning and leading. The example below shows what a difference the spacing between and around characters makes in comparing dark and light layouts.![Text White Space](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/textwhitespace.jpg)
![Text Size Matters](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/textsize.jpg)
Text Contrast
Many people would agree that the most poorly conceived dark websites cause eye-strain. Too much or too little contrast is usually the culprit. How does one find the perfect balance? If you are in a room that is pitch black, suddenly looking directly into light is not pleasant. But looking at a less bright light in a less dark room is just fine. The same principle applies to web design. Finding the perfect contrast means balancing the darkness of the background with the lightness of the text. Below is a (very) rough guide that shows how contrast between text and background works. One notices that as the background gets lighter, so does the text. Finding a pleasant contrast for text is much more difficult with a pure black background. To find the perfect balance, experiment with different shades. The best result is usually a background that isn't pure black and text that isn't pure white.![Text Contrast](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/textcontrast.jpg)
Dealing with Fonts
Fonts plays a big role in design and should definitely be taken into thoughtful consideration with dark layouts. The image below shows a 14 point font on a dark background in both serif and sans-serif fonts. The sans-serif font is obviously more legible. But many designers still choose serif fonts for their elegance. The trick, though, is to put only larger text in serif fonts, so that the extra white space floods around each character and makes the text very legible.![Font Choice](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/fontchoice.jpg)
![Serif and Sans-serif](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/serifsansserif.jpg)
Use Minimal Color Schemes
To give their dark designs a clean and uncluttered look, designers should always opt for minimal color schemes. From the few examples below, we can see that busy color schemes really get in the way of dark backgrounds, because the contrast is too sharp. Stick to one or two colors. To add more color, try a dark-colored background.![Color](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/color.jpg)
Offer a Style Switcher
While we have many good practices at our disposal to make dark web designs more appealing, no amount of effort will satisfy every user. Be sure to include a style switcher, so that users ultimately have the option of viewing dark text on a light background. Two style sheets are required for this, one for the default dark layout, and one for the alternative light layout. SitePoint has an excellent tutorial on this: Build a Simple Style Switcher in CSS. Instead of using the "orange," "blue" and "white" versions in the tutorial, just use "light" and "dark" style sheets.When Dark Web Design Works Best
As stated, a large proportion of web users believe that a dark web design could work for certain types of websites. But the study is vague on what exactly these types are. Generally speaking, dark works best for creative or elegant designs. For modern sleek websites, dark backgrounds add elegance. For grungy or hand-drawn styles, dark backgrounds enhance the creativity of the layout.Elegant Dark Design
Dark can be deep, authoritative and strong, and often looks elegant when used appropriately. Here are a few examples and some techniques for bringing out the elegance in a dark design. The website for Larissa Meek has a simple vintage-style pattern in the background, setting an elegant tone. Other quirkier features add a personal touch to the design. This technique can be used for many kinds of websites. Vintage or classic patterns and textures can create a look that is both elegant and age-appropriate. Most of us associate vintage patterns with high class, so creating a high-class website in this way is easy.![Larissa Meek](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/larissameek.jpg)
![Depth Core](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/depthcore.jpg)
![Tapbots](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/tapbots.jpg)
Creative Dark Design
Beyond just appearing elegant, dark website designs can also elicit more emotional responses than standard light designs, making them ideal for creative projects. Let's look at some examples of the kinds of creative designs that are possible. The site below has very little content but has a unique layout and dark colors for depth. Dark backgrounds are perfect for websites with very little content. And because they require more white space, the designer has more room to work with.![Inca](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/inca.jpg)
![Trozo](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/trozo.jpg)
![Drew Wilson](https://www.webdesignerdepot.com/cdn-origin/uploads/dark_web_design/drewwilson.jpg)
Wrapping Up
Dark backgrounds give an elegant and creative feel to web designs, making them perfect for some portfolios, but they're not suitable for every site. For larger websites, especially ones for people with visions impairment and other disabilities, dark designs are a no-no, even with a style switcher. Hopefully when the time comes that you need to design a website with a dark background, these tips and strategies will help. Written exclusively for WDD by Kayla Knight. There are many more techniques and strategies for improving dark web designs, so please share the ones you've picked up in the comments section below.WDD Staff
WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.
Read Next
15 Best New Fonts, July 2024
Welcome to our monthly roundup of the best fonts we’ve found online in the last four weeks. This month, there are fewer…
By Ben Moss
20 Best New Websites, July 2024
Welcome to July’s round up of websites to inspire you. This month’s collection ranges from the most stripped-back…
Top 7 WordPress Plugins for 2024: Enhance Your Site's Performance
WordPress is a hands-down favorite of website designers and developers. Renowned for its flexibility and ease of use,…
By WDD Staff
Exciting New Tools for Designers, July 2024
Welcome to this July’s collection of tools, gathered from around the web over the past month. We hope you’ll find…
3 Essential Design Trends, July 2024
Add some summer sizzle to your design projects with trendy website elements. Learn what's trending and how to use these…
15 Best New Fonts, June 2024
Welcome to our roundup of the best new fonts we’ve found online in the last month. This month, there are notably fewer…
By Ben Moss
20 Best New Websites, June 2024
Arranging content in an easily accessible way is the backbone of any user-friendly website. A good website will present…
Exciting New Tools for Designers, June 2024
In this month’s roundup of the best tools for web designers and developers, we’ll explore a range of new and noteworthy…
3 Essential Design Trends, June 2024
Summer is off to a fun start with some highly dramatic website design trends showing up in projects. Let's dive in!
15 Best New Fonts, May 2024
In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…
By Ben Moss
How to Reduce The Carbon Footprint of Your Website
On average, a web page produces 4.61 grams of CO2 for every page view; for whole sites, that amounts to hundreds of KG…
By Simon Sterne
20 Best New Websites, May 2024
Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…