Fonts For Dark Backgrounds

[Porter]

This is in no way Genesis specific, but I figured you all have good opinions, and I like it here, so I'll ask away.

Can you all suggest some good fonts for use on a dark background? I'm currently happy with my text / background design, I just need a better font to drive readability home.

Text - #d8d8c0;
Background - #202020;

I'm not a designer at all, and the internet is turning up pretty disappointing results when it comes to searching this. If it's any help, the site is on night life / restaurants / bars. All suggestions welcome / appreciated!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

http://anightinburlington.com/bars

[ᴅᴀᴠɪᴅ]

If you’re just talking about readability then these are the cleanest google fonts, good for body text and the designs aren’t too complicated.

Open Sans
Roboto
Droid Sans
PT Sans
Unbuntu
Raleway
Roboto Slab
Oxygen
Cabin
Nato Sans
Muli

Lato is also a great option though, the font you’re currently using.

The thing is, it isn’t really about what font you use, it is about how you present it. A dark background can cause things to look more congested and tight than they really are. So you need to be mindful of using the correct line-height to allow the text to breath. Also, you need sufficient padding around the text, again to give the text some space.

This is true always, but especially when using a darker background.

For example, on your page ‘http://anightinburlington.com/bars/das-bierhaus'

The thing i would be changing isn’t the font. It would be the font color, making it lighter (#eee). The line-height would slightly be increased and i would add padding to make sure the text isn’t as close to the left or the top as it is now. Just doing that alone would make it so much easier on the eyes and therefore more enjoyable to read.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[ᴅᴀᴠɪᴅ]

i spotted a mistake also, on mobile devices your menu gets cut off. you'll need to add width: 100% in the media queries. It goes wrong at 800px and lower.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Porter]

Thanks for the font suggestions, and information on line-height and padding. The Das Bierhaus page is actually from before my redesign, and everything there is done by shortcodes ultimate (plugin). The page I linked is the new direction I'm going in, though a wall of text like the actual location pages would have been better to showcase.

I'll try out the fonts you listed, and play with the line height to see what works best. As for the media queries and the menu, still designing that as we speak, but thanks for spotting it 🙂

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Porter]

So I found this pretty amazing tool, Font Friend. You add it as a bookmark, and when you click on it while on a page, you can select any Google font, which part of the css it effects (body, h1, etc), change the font wait, and more. I used that tool with a few tabs open, and am trying to decide between:

Lato (what I have now actually does look good)
Open Sans
Muli

I've found that 300 font weight works best for all of these - is a lighter font weight for dark websites a thing? If anyone could visit the page I linked, try that tool with those 3 fonts, and let me know what they think, that would be greatly appreciated!

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Author]

Posts