Text Color & Background color
One of the most important things to consider when trying to make the content on your website “more readable” is to choose the colors for your text (or paragraph text) and background with enough contrast between the two, so the content is easily readable.
The most contrast in colors you can choose for you text and background is BLACK text on a pure WHITE background. But those colors may not match your color palette. Perhaps you need a color combination that isn’t quite so stark, or crisp or bold (however you want to say it).
You can pretty much choose any variation of a dark to medium gray-to-black for your text color, and a white, light gray, light cream/beige etc. for the background.
You don’t have to stick to a black / white / gray color palette for your text and background colors. However the same rules apply: the contrast between the two colors need to be great enough to make the content easily readable.
Font size is how big or small a font is. It is the measurement of characters in a font. Obviously the size of font will contribute to its readability. Not discussed here, but it should be noted that the less contrast there is between the colors of the font and background, the larger that font must be in order to be legible.
It will greatly depend on the color, contrast, weight and type family of the font used, but the optimal size for reading on the web is between 14 and 16 pixels.
Font sizes in print are typically measured in points instead of pixels. Again, it will greatly depend on the typeface, font size, font weight, color and contrast used, but the optimal size for print is between 11pt and 15pt.
Font weight is the thickness of the characters in a typeface or font family. Font weights run between 100 to 900, or thin to black respectively. The smaller the number (100) the thinner the font weight.
In web design, font weights are typically written as numbers. For example, font-weight: 100;
However, in graphic design programs such as Photoshop, Illustrator and InDesign, font-weights are typically determined by their names. For example, Raleway Thin, Raleway Extralight, Raleway Light, etc.
Not all typefaces will have all 9 font weights. But Raleway is a good example of a font to show the differences in font weights in a type family.
In web design, font style refers to italic font. It is written like this in CSS:
The great news for those of you who don’t want to learn how to code or write CSS, you can simply use the WordPress Customizer and Elementor’s text editor to set your font styles.
However, it’s important to remember that all typefaces or type families do not have an italic font. For example, as shown below in the two images, Roboto Slab does NOT have an italic font in its type family. Roboto does.
Font case refers to the capitalization of letters. There are generally 4 options. Regular, normal or default means the text is displayed exactly as you type it. If you type a capital letter or small case letter, that is what’s displayed.
Capitalize displays each new word as a capital letter. As you can imagine this should only be used in very rare cases as it will capitalize EVERY word whether it is grammatically correct to do so, or not.
Uppercase, also known as “all caps” is when the text is displayed using all capital letters. It is important to understand that all uppercase letters is generally more difficult to read than regular or normal case. If you’d like to use uppercase in your design’s text, you should be mindful to only use it in small blocks of text. For example, on a webpage, uppercase fonts would be suitable for a page title or header but not advised for large blocks of body or paragraph text.
Lowercase is exactly as you’d expect. In web design it is a CSS style attribute, like uppercase. However it makes every word a small case, with not capital letters, whether it is grammatically correct to do so, or not.
This is "normal," or default. The text will display exactly how you type it.
This is "Capitalize," where the first letter of each word is capitalized.
This is "uppercase," or all caps.
This is "lowercase," where none of the letters are capitalized.
Line length is important for readability. The simplest way to create more readable text is to create a document with columns. The optimal line length is about 50-65 characters. This includes characters and spaces. You can probably safely go up to 70-75 characters without much strain on the reader but anything above that is not recommended for print design and large areas of text.
You can have the same problem with line lengths that are too narrow. For large areas of text, anything less than 35-40 characters in width is too narrow and should not be used.
See for yourself. The blocks of test with line lengths of 60 or 45 are easier to read because your eye doesn’t have to travel too far, left to right, in order to read the text. The text block of 90 characters will strain your eyes faster and it’s easier to get lost as your eyes have to travel a longer distance for each line. The line length of 25-30 is too short, causing your eyes to have to travel too quickly, left to right. This can also cause eye strain.