DRAFT: This module has unpublished changes.

Writing online is not the same thing as writing a word document.  You will need to think differently about typography.  It is not just the content of the words that is impacting your audiences.  The way the words look and the way the words are visually organized must also be taken into account.  

 

Here are four tips that come from DePaul's Advanced CSS ePortfolio that worth keeping in mind.

 

 

Contrast helps your reader quickly read text on screen.  Text with low contrast slows the reader down and can even exhaust your reader's eyes, making it uncomfortable to read your type.  It is important that you do not choose a color for your type that is too close to the color of your background.  For example, if you use a dark background, use a lighter color font so that the letters stand out and can be easily seen.  Notice that the letters here are white.  If the letters were a dark gray, it would be more difficult to read and you would probably leave this page sooner.

 

 

Type Size also helps your reader view the text on screen.  Reading on paper and reading on screen are slightly different experiences.  While your professor may require 12pt font for formal essays in class with standard 8.5" by 11" paper, it may look too small on screen.  Within Digication, consider using 14 point font for body text and larger font for headings. YOUR WRITING MUST BE BIG ENOUGH TO SEE!

 

 

Hierarchy helps create flow within your ePortfolio.  Using larger or heavier fonts can help create categories or divisions that allow your reader to group text into manageable sections.  This can also aid in overall clarity, since the hierarchy of text can also signal important moves or sections within the text, ensuring that your reader follows along with your ideas in the text.

 

 

Space is a crucial, and often overlooked aspect of typography.  Most student writers are accustomed to writing using a formal academic format that favors orderly paragraphs appearing one after the next, which works well for reading on a 8.5" by 11" sheet of paper or a printed journal.  Online, however, long sections of text can become exhausting to read or even become confusing as each paragraph blends into the next, causing the reader to lose her or his place in the text.  Instead, use space between type elements to help break up the blocks of text into more manageable parts. 

 

 

DRAFT: This module has unpublished changes.

This is the part of your CSS that controls the font of the main body of your site.

body {
background:#EEEEEE;
color: #222222;
}

Remember NOT to remove brackets and keep a semi-colon at the end of the line. HTML color codes must come after a "#" sign.

 

In the code above, background refers to the background border of the site.  The image that you use for your background will override this.  Color refers to the color of the font that you want to use for your site's main body.  Please note that if you have a black site, the weblinks will revert to black font so you will have to manually change ALL weblinks (change the font color or highlight the weblinked words).

 

You should also set the font family for your site as well as the font size.  Do NOT have every page in a different font and different font color.  Think of your site as a digital magazine--- consistency and clarity offer a sense of cohesion, maturity, and seriousness.

 

Here is what was added to this site right after color:

font family:Georgia,Arial,Helvertica,sans-serif;
font-size:13px;

This keeps the font choice and size consistent across all pages.  

 

Please note that not everyone has 20/20 vision.  Make your font size at least 14px so that FOLK CAN READ IT!  Do not do tiny fonts.  For information on choosing your font family, click here.

 

 

Please also remember that when you cut and paste a word document onto a webpage here, make sure that you do single-spacing on the original word document.  Webpages should NOT be double-spaced with section numbers, assignment headings at the top, etc.  That is for a school assignment, not a webpage.

DRAFT: This module has unpublished changes.