Screen Color and Typography
-
Upload
janna-jensen-mpc -
Category
Education
-
view
38 -
download
2
Transcript of Screen Color and Typography
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• <sup>…</sup> superscript• <sub>…</sub> 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