I like to complain that design can distract from the main topic and is therefore not important. However, design is important. If your site, presentation or article looks hideous, then you already are one step behind in convincing the audience. The cheatsheet below can be used to quickly fix design mistakes.
Suprisingly, you should Never Use Black. Instead you can use a colors which are near black. For example:
Tint | HTML color code | Example text |
---|---|---|
Pure black | #000000 | Lorem ipsum dolor sit amet |
Grey | #4D4D4D | Lorem ipsum dolor sit amet |
Green | #506455 | Lorem ipsum dolor sit amet |
Blue | #113654 | Lorem ipsum dolor sit amet |
Pink | #564556 | Lorem ipsum dolor sit amet |
More spacing is more better. Compare
toFor texts, compare
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
to
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
The default font for most sites is too small. For text-heavy pages, the default can be bumped easily to 18px
or bigger. Medium.com goes to 21px
on desktop and 18px
on mobile. I would advise against optimizing your site to particular devices, because it complicates development considerably. For more arguments against media queries, see Media Queries are a Hack.
At the same time, decrease the font size for items which cannot wrap around and/or are not as important as the main text such as tables and code blocks. Users should see the most important stuff first. To see what users will see first, use the squint test.