Promises to Users

People use the internet to consume information, and more often than not, that just means reading words on a screen. Too many websites make this harder than it should be. Let's fix that. If we deliver on the following promises to users, the internet will be a much better place.

Font-Size
Font-size is the size of the font measured in px, rem, or em. We promise users text will be large enough to read easily.

Your main copy should be a minimum of 16px.

This is Good

This font is set to 20px, and you can easily read it. If it's larger, there aren't any downsides: everyone will be able to consume your content.

This is Bad

This font is set to 14px. The main goal of your website is to get people to consume your content or perform some action, and it'll be really difficult for them to do so if they can't read your text.

Additional Reading

Measure
Measure is the length of a line of text. We promise users to not strain their eyes by making them read across the entire page.

For a single-column design measure should lie between 40 & 80 characters. Many typographers consider the perfect measure to be 65 characters.

This is Good

This paragraph is set to a max-width of 800px which is roughly 75 characters per line (except when viewed on screens smaller than 800px wide). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line which is why good measure increases readability.

This is Bad

Measure can create unity and harmony within a design, but a long measure disrupts the rhythm. If a line of text is too long the user’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.

Additional Reading

Leading
Leading is the distance in between lines of text. We promise users the distance will be set appropriately so large blocks of text will be easy to read.

Titles should be set at a line-height of 1.3. Copy should be set to a line-height of 1.5-1.65.

This is Good

Here's a Multi-Line Title that has just Enough Breathing Room in Between the Lines

Ethnic selfies Tonx, McSweeney's iPhone kitsch nisi butcher Helvetica 90's Neutra fixie. Thundercats roof party locavore, Blue Bottle nihil selfies deserunt banh mi laboris paleo fugiat tempor synth. Slow-carb plaid salvia cornhole. Deserunt reprehenderit fixie Neutra, 90's gluten-free tofu Schlitz consequat occupy nostrud cupidatat kogi gentrify.

This is Bad

Here's a Multi-Line Title that is More Difficult to Read because it has Too Much Space in Between the Lines

Ethnic selfies Tonx, McSweeney's iPhone kitsch nisi butcher Helvetica 90's Neutra fixie. Thundercats roof party locavore, Blue Bottle nihil selfies deserunt banh mi laboris paleo fugiat tempor synth. Slow-carb plaid salvia cornhole. Deserunt reprehenderit fixie Neutra, 90's gluten-free tofu Schlitz consequat occupy nostrud cupidatat kogi gentrify.

Additional Reading

Text Contrast
Text contrast is the ratio of the luminance of the text color to that of its background. We promise users the ratio will be high enough to see text regardless of vision impairments.

The minimum contrast between main copy and its background should have a ratio of 4.5:1.

This is Good

This text is #000 on a white background which has the maximum text contrast ratio of 21:1. Contrast is measured in a formula that gives a ratio ranging from 1:1 (no contrast) to 21:1 (maximum contrast).

This is Bad

This text is #999999 on a white background which has a text contrast ratio of 2.8:1. You may be able to read this but people with color blindness or vision impairments, as well as people browsing under less than ideal circumstances (bad monitor, window reflections) might find it more difficult.

Additional Reading

Responsive Images
Responsive Images fit to the width of any viewport. We promise users images will never bleed off the screen regardless of screen width.

Images should be set to max-width:100%.

This is Good

Screen Width: 400px

cute panda

This is Bad

Screen Width: 400px

cute panda

Additional Reading

Conclusion

This is in no way an exhaustive list, but it's a really good start. These promises are clear and easy to implement; and if we consistently deliver on them, we'll make a big impact.