Web Typography

transcript

22-3376 Web Design 2 // Columbia College Chicago

WEB TYPOGRAPHY

QUIZ REVIEW

PrimaryStructure html head body

Head Elements title meta link

BodyElements p br h1 – h6 ul ol a img div

FormattingElements em strong q blockquote

Directories

Room 902

Room 902Room 901 Room 903

9th Floor

9th Floor/Room 902/

9th Floor

../Room 902/

Two dots in front of a forward slash means: “step up one directory.” In this example it says:

“step out of room 903 and then back into room 902, talk to “

9th Floor8th Floor 10th Floor ++

WabashCampus

Mich AveCampus

Book & Paper Center ++

ColumbiaCollege

Universityof IL SAAIC ++

/Columbia College/Wabash Campus/9th Floor/Room 902/

http://Columbia College/Wabash Campus/9th Floor/Room 902/

Relative link to root A relative link (does not start with “http://”) with a slash at the beginning forces the link to start at the root of the website. This will only work on the server, not when you are working locally.

Absolute links Absolute links are typically used for linking to pages or files outside of your site’s directories.

The index file

When an absolute link is directed to a folder, the browser needs to know which file to open. By default, it looks for a file named “index” (the extension is not important, usually is it index.html, or index.php). This is why the homepage is always named “index”.

So, <a href=”http://www.mysite.com/”> and <a href=”http://www.mysite.com/index.html”> will open the same file.

root directory (www.mysite.com)

index.html

images

logo.png

report.pdf

Tutorial 1 !

ASSIGNMENTS

Upload your assigneents to your server !

Post your site URLs on the survey

Open a plain text document !

Write the markup to recreate the image !

http://lms.colum.edu/

CSS Overview

Properties

What are properties? While attributes provide additional information about a specific element’s content, every element type has a set of default properties that define how that element will be shown in the browser.

Element human

Properties name=”Liam”gender=”male”age=”5” !

Properties

CSS Syntax

Syntax = the rules for how to write the language

Three terms for describing your styles:

CSS rule CSS selector

CSS declaration

selector {property: value;}

Every style is defined by a selector and a declaration. The declaration contains at least one property/value pair. Together they are called a CSS Rule.

declaration

CSS Rule

body {font-family: Arial, Helvetica}"p {color: #666666}"h1 {font-size: 24px}"a {color: blue}

The selector associates css rules with HTML elements.

CSS Selector

p { color: red }

The selector is typed in front of the declaration, with a space separating it and the opening curly-bracket (aka curly-brace). Typically, extra spaces and returns are added as shown for the sake of readability.

CSS Selector

h1,h2,h3,h4 { font-weight: bold }

You can apply styles to multiple selectors in the same rule by separating the selectors with commas.

CSS Selector

p { property: value }

The declaration is always defined in a property/value pair. The two are separated by a colon. How you define the properties will affect how HTML elements are displayed.

CSS Declaration

p { font-family: Arial, sans-serif; font-size: 14px; color: #666666;

You can apply multiple declarations to a selector(s) by separating the delcarations with semi-colons.

CSS Declaration

CSS Selectors

p Type (element)

. Class

el el Descendant

body {declaration} p {declaration} h1 {declaration} ul {declaration}

The simplest selector is the type selector, which targets an html element by name.

Type (element) Selectors

The essential selector types (elements)

PrimaryStructure html body

BodyElements p br h1 – h6 ul ol a img div

FormattingElements em i strong b q blockquote span

Type selectors vs ID & Class selectors

Type selectors use the tag names that are built into HTML. ID and class selectors use names that you define, and are added to html elements to make them more specific.

CSS .ingredients {declaration}"HTML <ul class=”ingredients”>

A class is an html attribute that is added to your html markup. You reference that ID in your css with a period.

Class Selectors

CSS #logo {declaration}"HTML <img id=”logo” src=”” alt=””>

An ID is an html attribute that is added to your html markup. You reference that ID in your css with a hash.

ID Selectors

IDs vs Classes

The most important difference between IDs and classes is that there can be only one ID on a page, but multiple classes. An ID is more specific than a class. An element can have both an ID and multiple classes.

IDs vs Classes

ID: #344-34-4344 Class: Male Class: Student

ID: #123-54-9877 Class: Female Class: Student

Multiple classes

CSS .ingredients.time {declaration}"HTML

Elements can have multiple classes, giving you more control. The are written in the CSS in the exact order they appear in the html, with no spaces.

Combining IDs and classes

CSS #wrapper.ingredients.time {declaration}"HTML

Elements can have both ids and classes. While an element can have only one id, it can have multiple classes.

Tutorial 2 !

Style Declaration: Text

Tutorial 3 !

Start by setting your base font-stack, font-size, line-height, and color on the body element.

Start global

body { color: #444444; font-family: font-family: Georgia, Times, "Times New Roman", serif; font-size: 14px; line-height: 1.4; }

Next, set your base properties on your paragraphs, headers, lists, and links.

p {margin-bottom: 18px;}

h1, h2, h3, h4, h5, h6 { font-family“Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; } h1 {font-size: 40px; margin-bottom: 24px; line-height: 1.2;} h2 {font-size: 32px; margin-bottom: 20px; line-height: 1.2;} a {color:#e69807; text-decoration: none;}

Start global

Font Stack The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.

EXAMPLES body { font-family: Helvetica, Arial, sans-serif; }"

h1 { “Lato”, Arial, sans-serif; }"

Units of Type Size

There are three different ways to define type sizes in css. emsEms are a relative unit: 1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. pxPixels are a an absolute unit, it sets the text to a specific size instead of a size relative to the browser’s default. Except in special cases, you should define pixels in your css with the number and “px” together, no spaces: “16px”. %Like ems, percentages are also a relative unit. It is very useful for layout, not usually a good idea for type sizes.

Specifying Color

There are three different ways to define color in css. Hex CodesThis is the most common way to identify colors in CSS. The code gives two characters to correspond to RGB values. The number always has 6 characters (#44de42), unless all four characters are the same, and you can shorten it (#444). RGBYou can use a color’s RGB values with this syntax: p {color: rgb(34,123,125);} Color NamesThere are built-in color names that you can use, that will provide generic hues: p {color: rgb(34,123,125);}

Specifying Color

Hexidecimal RGB

Color: white, black, grey

White = #ffffff, or #fff

Black = #000000, or #000

Greys = #111111 – #999999

Essential font properties:

font-family

font-size

font-style

font-variant

font-weight

letter-spacing

line-height

text-align

text-transform

Essential font properties, with values:

color: #444

font-family: "Times New Roman", Georgia, serif

font-size: 16px (define in px, em, or %)

font-style: italic

font-variant: small-caps

font-weight: bold (or by number, 300, 400, 700, 800)

letter-spacing: .02em

line-height: 1.6; (relative to whatever your type size is)

text-align: left;

text-transform: uppercase;

Styling Lists

List styling Links can be styled just like any text, but have special properties. The most often used is “list-style-type”, which allows you to control whether bullets are used, and how they are styled.

ul { list-style-type: none; padding: 0px; margin: 0px; }"!

Styling Links

Link states Links can be styled just like any text, but have special pseudo-classes that allow you to define their behavior. a {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

When setting the style for several link states, there are some order rules:

— a:hover MUST come after a:link and a:visited — a:active MUST come after a:hover !

Links By default, links are underlined. You can turn this off by changing the “text-decoration” property. In the example below, the link will only have an underline when the cursor is hovering over the element. a { color:#FF0000; text-decoration: none; } "

a:hover { color:#00FF00; text-decoration: underline; } "!

Specifying Fonts

There are 5 basic ways of specify fonts:

Web Safe Fonts(called font-family in your text)

Font-Face Hosted Service

Images sIFR/Cufon

Web-safe Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor's operating system.

Selecting Type

Typography is a craft by which the meanings of a text can be clarified, honored and shared, or knowingly disguised.

—Robert Bringhurst,

Three factors to consider with every type choice:

Legibilty Readibility

Connotation

Legibility Legibility refers to a reader’s ability to easily recognize letterforms and the word forms built from them. We don’t read by recognizing one letter at a time, but by recognizing the shapes of whole words and phrases.

Legibility = Can you read it?

Type size is the most abused legibility attribute.

Legibility factors: Type Size

Legibility factors: Body vs Display

Text type has a greater need for legibility than display type because text type is smaller, so character and word recognition is made more difficult.

Legibility factors: Background Contrast

Type’s legibility is determined in part by the spaces within and immediately surrounding each character. As type’s size gets smaller, the spaces must be increased.

Legibility factors: Type spacing and proportions

X-height

Aperatures

Ascenders/Descenders

Terminals

Legibility factors: Type spacing and proportions

Hinting

Anti-aliasing

Browser rendering

Legibility factors: Unique to the screen

Readibility Readability refers to the facility and comfort with which text can be comprehended. Text with good readability must also be legible, but more legibility doesn’t make text readable.

Readibility = Do you want to read it?

Q. Is reading on devices

inherently different thanreading print?

Q. When is the text

the interface?

Three types of reading:

Skimming Seeking

Long-form

Reader type: Skimming

Reader type: Seeking

Reader type: Long-form

Optimal text size is 14 to 16px. 1.4 is usually good for line-height.

Minimum display type size is 18px.

Medium weight produces maximum legibility: the relationship of letterforms to counter spaces is balanced.

Be conservative with the use of italic, bold, and uppercase.

Optimal line length is two alphabets (52 characters).

Optimal letterspacing is invisible.

Increase line spacing as text gets smaller and/or lines get longer.

Readibilty Guidelines

Contrast

PROXIMITY COMMON REGION

SIMILARITY

Size Shape Shade Color

CONNECTEDNESS

LARGE TO SMALL IRREGULAR TO REGULAR DARK SHADE TO LIGHTSATURATED TO

UNSATURATED COLOR

Gestalt Principles

Connotation Type always works on at least two levels of communication:

– the semantic meaning of the words themselves (denotation),

– and the aesthetic and emotional meaning conveyed by the visual properties of the typeface design (connotation).