Updated Feb. 9, 2014. This PPT is a review of color and fonts as used with HTML5 and CSS. Used in an undergraduate journalism class called Advanced Online Media Production.

1. Fonts, color, Web design
Some design concepts related
to the use of HTML and CSS

2. {CSS} background-color, color, a:link, a:hover, etc.
COLOR

9. Color
• Choose 2 to 5 key colors for your palette
• Specify colors for page background, wrapper
background, and main text
• Specify all pseudo classes
(a:link, a:visited, a:hover, a:active, a:focus)
– Look up a:focus if you don’t know about it
• Test all colors for text legibility with a
Photoshop graphic (is your text easy to read?)

10. This example shows
very minimal
specifications for color
in a CSS style sheet.

11. http://kuler.adobe.com/

12. http://kuler.adobe.com/
Always find and USE the hexadecimal codes for colors!

13. Photoshop’s Color Picker
Always find and USE the hexadecimal codes for colors!

14. {CSS} font-family, font-size, line-height
TYPOGRAPHY

15. sans-serif
All shown at 48px

16. serif
All shown at 48px

17. monospace
All shown at 48px

18. Match the generic
• The generic comes at the end of the declaration
• There are three acceptable generics:
– serif
– sans-serif
– monospace
• The fonts specified must be the same
classification as the generic; e.g., Verdana and
Arial are sans-serif fonts, and Georgia and Times
are serif fonts

19. Consider the context
• When creating a CSS “font stack”—is it a
declaration for body or caption text (small) or
heading text (large)?
• The order of the fonts in the stack should reflect
this difference
• Certain fonts work well for paragraphs (small text
size), while others work better at larger sizes.
• Example: Verdana and Arial read slightly better
than Helvetica at smaller sizes on the screen.
Source: Nathan Ford, “Better CSS Font Stacks”

20. There are not many fonts
that you can expect
most online users to have
installed on their devices.

21. http://www.jtoolkit.com/wp/2012/11/typography-for-the-web/

22. Make sure you have seen it
• Many typography Web sites that seem to be
showing you typefaces are only showing you
the faces that are already on your computer.
• To be certain you have really seen a typeface
(before specifying a font family)—Google it!
• The major type foundries (Adobe, Bitstream,
Linotype, etc.) show online samples in PDF
format so you can get an accurate view of the
typefaces. Go to their sites.

23. Use of quotation marks
• Use quotation marks around any font-family name
that includes a space.
• Make certain the quotation marks in CSS are
“straight,” not “curly” (this is necessary for ALL code).
"Book Antigua" (yes) “Book Antigua” (no)
• Make sure the comma comes after the closing
quote:
Baskerville, "Times New Roman", Times, serif;

24. Limit use of different fonts
• A good rule of thumb is to never use more than
three typefaces on any page, and preferably to stick
to only one or two.
• For CSS, this would mean only two different fontfamily “stacks.” (You can have more than two
declarations in the style sheet.)
Source: Susan G. Miller, “Selecting and Combining Typefaces”

25. Limit use of different fonts
• In selecting two fonts to use, it’s a good practice to
select one serif and the other from the sans-serif
group.
– Allows for a nice contrast
– Ensures that the page is attractive and easy to
read
Source: Susan G. Miller, “Selecting and Combining Typefaces”

26. Online design is more than code
DESIGN THINKING

27. “Design in its most effective form
is a process, an action,
a verb not a noun.
A protocol for solving problems and
discovering new opportunities.
Techniques and tools differ and
their effectiveness [is] arguable,
but the core of the process stays the same.”
—“Design Thinking ... What Is That?” Fast Company, March 2006

28. Design thinking
1: Define the problem
2: Create and consider many options
3: Refine selected directions
3.5: Repeat (optional)
4: Pick the winner, execute
—quoted from “Design Thinking ... What Is That?”
Fast Company, March 2006

29. A five-page student website
has little in common
with a news organization’s
10,000-page site.

30. {CSS} div and other selectors
MORE CSS

31. Linked on our syllabus:
Checklist for your HTML5
and CSS knowledge
http://bit.ly/html_css_checklist

32. Fonts, color, Web design
Presentation by Mindy McAdams
University of Florida
[2014]