...
Serif stands for a stroke or line, and typically these fonts have an embellishment at the top and/or bottom of the letters. Common Serif fonts include Times New Roman, Garamond, Baskerville, Georgia, and Courier New.
This sentence uses Times New Roman
This sentence uses Courier New
Sans means without, and typically these fonts are plainer and without any embellishments. Common sans-serif fonts include Arial, Verdana, and Helvetica.
...
...
This sentence uses Verdana
Which of these two is better for the web is up for debate. These days, it is more common to see sansSans-serif Serif fonts on the web than Serif. One of the caveats when using sans-serif is that it is the possibility of confusion between uppercase I (as in Idaho) and lowercase L (as in linger). Usually, the context prevents this, but if you are mixing letters and numbers it might be better to use a serif font.
All the fonts in this example of different font families are all the same size
Mono-spaced
With monospace fonts each character is positioned at the same vertical point, making it easier to align columns of text or numbers. This type of font is best when used sparingly for shorter snippets of information. Coders are the more common users of a mono-space font because it makes it easier to vertical alignment different elements and the code doesn’t often span multiple lines. Below is an example of how we might use mono-spaced fonts
| Code Block | ||
|---|---|---|
| ||
<!-- This is a example of a comment in HTML on a single line --> <p>Use the <p></p> tag pairs to create a paragraph in HTML.</p> <!-- This is a multiline comment and it can span through as many as lines you like. --> |
Avoid fully justified text
...
Red/green color blindness is the most common. There is also blue/yellow and complete color blindness.
Avoid putting red or green text on black backgrounds, or black text on red or green backgrounds.
Color contrast should The minimum contrast cannot be less than 4.5:1. Whenever possible strive to meet a 7:1 standard in order to be easily seen by anyone. Use this WebAIM contrast checker to assist.
Desaturate your page/design. Doing so can help you quickly find color blindness and color contrast issues. To do this you can use the WebAIM WAVE tool, an extension like Chrome’s High Contrast or Firefox’s Greyscale Bro or within your graphic design tools.
References for additional information
...