Fonts, color, Web design

Some design concepts related to the use of HTML and CSS

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

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?)

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

http://kuler.adobe.com/

http://kuler.adobe.com/

Always find and USE the hexadecimal codes for colors!

Photoshop’s Color Picker

Always find and USE the hexadecimal codes for colors!

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

sans-serif

All shown at 48px

serif

All shown at 48px

monospace

All shown at 48px

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

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”

There are not many fonts that you can expect

most online users to have installed on their devices.

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

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.

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).

Baskerville, "Times New Roman", Times, serif;

"Book Antigua" (yes) “Book Antigua” (no)

• Make sure the comma comes after the closing quote:

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 font-family “stacks.” (You can have more than two declarations in the style sheet.)

Source: Susan G. Miller, “Selecting and Combining Typefaces”

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”

DESIGN THINKINGOnline design is more than code

“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

Design thinking

1: Define the problem2: Create and consider many options3: Refine selected directions3.5: Repeat (optional)4: Pick the winner, execute

—quoted from “Design Thinking ... What Is That?” Fast Company, March 2006

A five-page student websitehas little in common

with a news organization’s10,000-page site.

MORE CSS{CSS} div and other selectors

Linked on our syllabus:Checklist for your HTML5

and CSS knowledge http://bit.ly/html_css_checklist

Fonts, color, Web design

Presentation by Mindy McAdamsUniversity of Florida

[2014]