CSS Design tips

While CSS won't change the way a screen reader reads the page most of the time, to a sighted person, it can have a large impact on usability. Here are some general things to keep in mind when designing a site with CSS:

1. By default, browsers will render text in the font Times New Roman and all content aligned left. The first thing I usually do, is update the font family to make my site look more modern and easier to read, but it depends on the tone you want to set with your users.

   Try to limit your use of font families to about two on your website, and note that serif fonts are great for larger text, but can be harder to read if you have a lot of dense paragraph/body text.

   As a best practice, the font-family property should hold several font names as a fallback system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. The following is an example of how to change your font family and use fallback fonts (in the first example, Helvetica is the fallback for Arial)

   body {
       font-family: "Arial", Helvetica, sans-serif;
   }
   

2. As a we have just learned, adjusting the default margins can increase the legibility of your sites. Because we already have a CSS declaration for the body element started, if we want to add a margin to our body element, we can just add our margin declaration for after the font family declaration. In this example, we create 40px of room between the top, right, bottom, and left edges of the browser window and content of our site:

   body {
       font-family: "Arial", Helvetica, sans-serif;
       margin: 40px;
   }
   

3. It is possible to align text to the left side, right side, or center it on a page. For English, paragraph text is usually aligned left. If you want to center something, it's usually best done with headings or short sentences.

   Here is an example of how you can make all headings level one centered, and adjusted to be 3em (48px):

   h1 {
       font-size:3em; 
       text-align: center;
   }
                   

4. Readability is also enhanced when proper punctuation and capitalization is used. Make sure that you are meticulous with these things to enhance readability.