Screen color and typography January 22, 2007

Scope• Functions of color and typography• Color models• Hexadecimal system• Color technical standards• Typography concerns• Typeface issues• HTML and CSS• Graphic text• Remember the user

Importance of color and typography• Build hierarchy, structure, organization • Create context• Enhance content• Draw attention• Provoke emotions• Convey meaning• Visual communication• Aid to metaphor, navigation, label, logo, graphics...

Advantages of using color• Color can give a more polished and

professional look to a website.• Colors can evoke certain feelings and moods

in people browsing the site.

The electromagnetic spectrum• Measure of photons, traveling at the

speed of light, carrying some type of energy

• Measured in terms of wavelength and frequency

The electromagnetic spectrum

Visible light

• Occurs in a small part of the EM spectrum, near the middle

• Wavelengths are 400nm to 700nm long

Additive color model• Used by computers• When light energy is

added, a color appears brighter

• Different visible light wavelengths can be combined to create new colors

• Referred to as RGB (Red, Green, Blue)

Subtractive color model• Used in the print media• When more color is

added, a color appears darker

• Ink or paint can be thought of a filter that filters out all colors except the color being perceived, which is reflected

• Referred to as CMYK (Cyan, Magenta, Yellow, Black)

Primary colors• Technically, pure primary colors are spectral

colors which cannot be mixed from other colors• A small number of colors can be mixed to create

new colors• The additive color model uses Red, Green and

Blue (RGB) as additive primaries• The subtractive color model uses Cyan, Magenta,

Yellow and Black (CYMK) as subtractive primaries

Some color terms• Hue – A specific location on the visible

spectrum

• Saturation – Specifies the amount (intensity) of a color

Some color terms• Value (Brightness) – Specifies the

darkness/lightness of a color• Tint – Adding WHITE to a color• Shade – Adding BLACK to a color

The color wheel• A common way to

map color is to use the color wheel

• All hues are depicted as an angle on the wheel (0° represents RED and 360° represents VIOLET)

The color wheel• Saturation is represented as a percentage• Value is represented as a percentage• RED, YELLOW, and BLUE are the color

wheels primary colors

Web color: screen display• Pixel (picture element):

x and y coordinates• Color depth (resolution):

– 1-bit 2 colors (black and white)– 8-bit 256 colors– 16-bit thousands of colors– 24-bit millions of colors (true color)

Color• 8-bit color: 256 colors• "Web-safe color"

– Based on 8-bit color graphics– Most modern computers now capable of:

• 16-bit: over 60,000 colors• 24-bit: over 16 million (true color)

Dithering

Web color: browser• Dithering: illusion of missing colors

– Diminish harsh transition, sharpness

• Web (Browser)-safe color:– Based on 8-bit color screen display: 216 cross platform color

palette– “Reallysafe” colors: only 22 colors ☹– Strategy:

• Identify your audience’s technologies• Use “Reallysafe” palette• Use transparent backgrounds• Use Flash

Color as a numeric constant• Digital color is normally represented as a

numeric constant in triplet format, representing RGB values

• In many graphic programs RGB values are represented as a percentage (0%-100%) or as an integer (0-255)

• On the web, color triplets are often represented using hexadecimal numbers

Common hex values

RGB 0 51 102 153 204 255

PERC 0% 20% 40% 60% 80% 100%

HEX 00 33 66 99 CC FF

Hexadecimal values• Color codes in HTML are specified by the # sign

followed by six digits that consist of three hexadecimal numbers (two each for the amount of red, green, and blue in the color).

• There are 16 x 16 = 256 different amounts of each color that can be selected.

• 256 x 256 x 256 = 16.7 million colors possible

Hexidecimal system• HTML and CSS • Every color is made up of a different value for

red, green, and blue components-ranging from 0 to 255

Hexidecimal system• Six digit number, 3 bytes - RRGGBB

– Byte 1 - Red– Byte 2 - Green – Byte 3 - Blue

• Black - #000000• White - #FFFFFF• Red - #FF0000 • Green - #00FF00• Blue - #0000FF

Color values# RED GREEN BLUE# 00 00 00 (0%)# FF FF FF (100%)

Samples:

#FF0000 #00FF00 #0000FF

(Red) (Green) (Blue)

#00FFFF #FFFF00 #FF00FF(Cyan) (Yellow) (Magenta)

Choosing colors• How do you know what the hex codes are for the

colors you want to use? • Consult a chart of common colors • Choose the color desired and convert the RGB values

to hexadecimal– Image editors, such as Adobe Photoshop, will show the R, G,

and B values from 0 to 255– Convert these values to their hex equivalent using a scientific

calculator, chart or shareware

Color symbolism• Use color to convey meaning:

– Black: power, stylish, timeless– White: purity, neutral, summer– Red: action, confidence, courage, vitality, love,

intensity– Green: life, nature, fertility, calming– Blue: Loyalty, truth, peace, depressing

http://www.toydrum.com/

http://www.rockcorps.org/

http://www.jrgeoffrion.com/

Typography for the webMaking text web-ready

What is typography?• Dictionary.com: The art and technique of printing with

movable type. • Wikipedia: The art and technique of selecting and

arranging type styles, point sizes, line lengths, line leading, character spacing, and word spacing for typeset applications. These applications can be physical or digital.

• Web Style Guide: The balance and interplay of letterforms on the page, a verbal and visual equation that helps the reader understand the form and absorb the substance of the page content.

History of web typography• Macintosh: Graphical User Interface (GUI),

bitmapped city-named fonts• Adobe: Postscript• Apple + Microsoft: Truetype• HTML: Problem with heading tag• CSS: Provide control over exact visual style

Typefaces• Serif vs. sans-serif: sans-serif generally more

clear on the computer screen because of coarse screen resolution

• Examples of great web typefaces:– Arial– Verdana

Type• Serif: stroke at the ends of a letter• Sans Serif: without serifs• Leading: vertical space between baselines• Kerning: horizontal space between letters

HTML and CSS• HTML: Uses font tags to define text attributes

– Bold– Italic– Font size– Color

• CSS: Requires less code– Increases consistency– Changes are easier– Saves time

Graphic text• Pros

– Good for decorative text– More design options– Good for headlines

• Cons– Longer display time– Harder to edit– User cannot customize

Google’s logo• Typography v.s. logo• Color v.s. logo

10 steps to professional web type• Use one or two • Use left-justified type• Give text space (white space)• Avoid bold type for paragraph text• Avoid all capital text• Use headlines to chunk text• Use columns• Avoid overly large text• Only underline links• Use graphic text correctly

Typography for the web• Legibility: good typography depends on visual

contrast between fonts, text blocks, headlines, space– Alignment: margins, unity, white space, visual

relief– Line length: columns, invisible tables – Typefaces: Georgia and Verdana for screen– Case: upper + lower– Emphasis: italics, bold…

Typography for the web• Consistency: create harmonic structure,

predictable• Accessibility:

– Size: use relative units, offer text-only version– Color: contrast

Remembering the user• Computer systems are going to vary from

user to user• Individuals have different visual issues, like

color blindness or aging eyes - their perception of your site will differ from many users

• Color and typography should reflect the purpose of your site.

• Colors and text provoke emotional responses.

http://www.rsub.com/typographic/

http://www.rsub.com/typographic/

http://www.juxtinteractive.com/

http://www.thetruth.com/index.cfm?seek=truth

Color and typography in HTMLTaking your HTML further

Color on the web• Font tag can also take a color attribute• Colors are specified two ways:

– well defined palette of colors with names– a hex string of red, green, blue values (#FF66CC)

• body tag can also take color attributes:– bgcolor the page background color– text color of normal text– link links on the page– vlink links that have been visited– alink color a link flashes when clicked

HTML color attributes• BASEFONT and FONT tags have COLOR = (value)

attributes• The BODY tag has BGCOLOR, TEXT, LINK, VLINK,

and ALINK color attributes

Predefined colors• There are 16 palette colors that can be

specified by their names:

White Cyan Silver Navy

Red Magenta Gray Lime

Green Yellow Maroon Olive

Blue Black Purple Teal

Web color: HTML

Brown  #A52A2A  

BurlyWood  #DEB887  

CadetBlue  #5F9EA0  

Chartreuse  #7FFF00  

Chocolate  #D2691E  

Coral  #FF7F50  

CornflowerBlue  #6495ED  

Cornsilk  #FFF8DC  

Crimson  #DC143C  

Spot color• Examples:

<P><FONT COLOR =“red”>Stop</FONT>

the presses.Throw <FONT COLOR = #FFFF00> caution

</FONT> to the wind.<FONT COLOR = #00FF00>GO</FONT> FOR IT!</P>

Body tag attributes• <BODY BGCOLOR= #FFFFFF>• <BODY TEXT= “blue”>• <BODY LINK=“red”>• <BODY VLINK=#00FF00> Visited Links• <BODY ALINK=#0000FF> Active (As you click)• <BODY BACKGROUND=“logo.gif”> (Image)• <BODY BGCOLOR=“white” TEXT=“blue”

LINK= #FF00FF ALINK= #FFB5C5>

Specifying colors• As shown in the examples, there are two

ways of specifying color values for the HTML attributes:

1. Specify in “ “ one of the predefined color names recognized by popular browsers

2. Specify the color by its hexadecimal number for red, green, and blue components

Using fonts in web pages• By default most browsers render in Times• The font and size can be changed three ways:

– <font>…</font> changes font for one block

– <basefont> changes the font for whole page (*)

– style sheet code: best solution but complex

• Three standard fonts: Times, Arial, Courier• Font syntax makes it easy to fallback

Font tags• Basic usage:

– <font> …stuff… </font>

– should always be used inside <p> tags

• Attributes:– face the name of the fonts to use

– size the size of the font

– color the color, as an RGB hexadecimal string

<p><font face="Arial" size=3>Hello!</font></p>

Font face and size• Safe choices for face attribute include:

– Arial, Helvetica, sans-serif

– Times New Roman, Times, serif

– Courier New, Courier, mono

• For exotic fonts always provide a fallback:<font face="Futura, Arial Narrow, Arial, sans-serif”>

• Size of fonts specified several ways:– absolute: value between 1 and 7

– 1 smallest font size, 3 is the default

– relative: value from -7 … +7

Alternative size tags• <big>…</big> use a large font• <small>…</small> use a small font• ^… superscript• _… subscript

BASEFONT tag• To set the default font values for a whole page• Unpaired tag which appears in head or body• Face, size, and color attributes

Example:– <basefont face="Arial" size="2" color="#001040">

• I have had inconsistent results with this tag• Replaced by CSS code in HTML5

Example<body bgcolor="#FFFFFF" text="#000000">

<p>Lets <font color="#FF0000">play around</font> with some of the font tags</p>

<p>

<font face="Arial, Helvetica, sans-serif">

<font size="7">very big (7)</font><br>

<font size="6">not quite so big (6)</font><br>

<font size="5">big-ish (5)</font><br>

<font size="4">still quit large (4)</font><br>

<font size="3">normal</font> (3)<br>

<font size="2">smaller (2)</font><br>

<font size="1">itty-bitty sized (1)</font>

</font>

</p>

</body>

Example

BLOCKQUOTE tags• To make a piece of text appear indented use the

blockquote tags• Sits outside a normal paragraph• Useful for simple indenting

<p>Here is a quote by somebody famous:</p><blockquote> Gosh it's nice being so fabulously well known and having such great big piles of money</blockquote><p>Insightful don't you think?</p>

PRE tags• To make the browser respect spaces and lines use

the PRE tags (preformatted text)• Easy layout but everything in typewriter font

<pre>This little block of pre-formatted text demonstrates how to make HTML

respectspaces and lines.Some HTML <b>formatting</b> tags <i>still</i> work correctlyin andlt;preandgt; blocks</pre>

Example

Adding lists to your HTMLProviding variety and utility

Ordered and unordered listsUnordered lists•Sardine•Tuna•Salmon

<ul>

<li>Sardine</li>

<li>Tuna</li>

<li>Salmon</li>

</ul>

Ordered lists1. Sardine2. Tuna3. Salmon

<ol><li>Sardine</li><li>Tuna</li><li>Salmon</li></ol>

List tags • The basic list is declared with <ol>…</ol> or <ul>…

</ul> tags• Items within list declared with <li>…</li>• Ordered list attributes

– type numbering style (1, a, A, i, I)

– start sets the initial list number

• Unordered list attribute– type point style (disc, square, circle)

• Lists can be nested easily

Example<body bgcolor="#FFFFFF">

<h2 align="center"><i><font color="#000080">Plenty More Fish in the Sea</font></i></h2>

<hr>

<p>andnbsp;</p>

<p>There are a number of steps we recommend you take in order to prepare yourself

to find your perfect match.</p>

<ol>

<li>Take a good long look at yourself in the mirror</li>

<li>Ask yourself who would love a face like that</li>

<li>Admit you're lonely</li>

<li>Admit you need help</li>

<li>Give yourself a good scrub - the importance of personal hygene cannot be overestimated</li>

<li>Contact us</li>

<li>Sit back, relax and wait for <b>true love</b></li>

</ol>

<hr align="center" width="50%">

Example

Definition lists• For dictionary style definitions

– <dl>…</dl> starts and ends the list– <dt>…</dt> adds a term to the list– <dd>…</dd> provides a definition for a term

• Terms not indented, definitions indented

<dl>

<dt>Fish</dt>

<dd>vertebrate cold-blooded animal living in water</dd>

<dt>Fish Meal</dt>

<dd>ground dried fish used as fertiliser or feed</dd>

</dl>

Example