How to Create Your Own WebsiteLecture 3: Typography, layout, and design.

Today’s Lecture:

What we’ll be designing. Layout

Navigation Content on a grid. Examples of how sites are commonly laid out.

Typography: Choosing fonts.

Serif Old-style Transitional Modern

Sans-serif Grotesque Neo-grotesque Geometric Humanist

Alignment Line spacing. Kerning, tracking, and leading.

Width “Fixed width” “Fluid width”

What we’re making:

(The finished files are at http://students.polymathlectures.org/mbarnathan/second.html and second.css).

Page Layout:

Websites typically have several standard

features: A heading, emphasizing a name/logo.

A navigation bar.▪ Usually on the top or left, sometimes on the right or

bottom.

Content▪ The text and graphics the viewer has come to your site

to see (and what you want search engines to look at

most).

Common Patterns:

Navigation

Content

Heading

Content

Good for text-heavy sites with few pages; combines navigation + name.

Good for text-heavy sites with more pages; prevents the navigation from increasing the width of the page.

Nav

Heading

ContentNav

Ads

Commonly used on interactive sites with advertisements (e.g. Facebook)

Heading

ContentNav

Footer

Good when users may wish to perform an action on any page of a site.

Fixed and Fluid Layouts

Fixed-width designs have a set width, beyond which no content will be shown. This width is often given in a unit such as px or em.

Typically, the content is centered on the page so as not to leave a large amount of

whitespace in one direction.

Primary advantages: more consistent appearance across screen resolutions.

Primary disadvantages: poor use of available screen space, may require horizontal

scrolling on smaller resolutions than the one the site is designed for. Fluid layouts size themselves to the browser window.

Typically, the content flows from one end of the screen to the other.

Widths are often given in the % unit (100% is the width of the browser).

Primary advantage: makes maximum possible use of screen space, no matter how large

or small the resolution is.

Primary disadvantages: images and other elements have fixed widths anyway, so a min-

width may still need to be imposed. In this case, horizontal scrolling may still take place.

Sites may also look “strange” on very large or very small resolutions.

Fluid designs are good for text-heavy sites.

Fixed Layout Example

The content fits nicely within a 1071x1015 window.

The content does not change size as the page grows; it is merely centered.

body { width: 1024px; }

Fluid Layout Example

The content sizes itself to the browser window, regardless of its size.

#WelcomeSection { width: 50%; }

Floating

An element that floats will

jump to the left or right of the

page, and text and other

content will wrap around and under it. An element is floated left or right

using the CSS rules “float: left;”

and “float: right;”, respectively. This is an effect used often in newspaper

articles.

(Floating right)

(Floating left)

Floating Columns

Floating is also used as the basis for two and

three-column layouts. Note that content wraps around a float. So give the float a height equal to the rest of

the content and it will all wrap around the float.First column content.

(float: left; height: 2.75in; width: 1.92in)

The rest of the content on the page.

(float: none; height: 2.75in)

Clearing

It’s possible to specify that content be

positioned below a float rather than next

to one.

Such content will not wrap around the float; it will instead

begin below the level of the float. This is referred to as “clearing” the float.

Content can clear floats left of itself, right of itself, or both.

This is done using clear: left, clear: right, or clear: both.

(Floating right)

The next paragraph clears, so this space is skipped.

clear: right

Structuring our page (HTML).

Structuring our page (CSS).

Units Reminder

We’ll be using the “em” unit often in

the next section. Reminder: 1em is always the point size

of the current font.

em is a relative unit in the sense that it

depends on the font size.▪ Enlarge the text and 1em will become larger

as well.

▪ Reduce the font size and 1em becomes

smaller.

Typography

Laying out text in a manner that conveys a

message and is pleasing to the eye. Has been around since the printing press. Consists not only of font size and selection, but:

Style and weight of characters.

Spacing of lines (e.g., single, double-spaced).▪ Also called “leading” (rhymes with “heading”)

Space between pairs of characters (kerning).

Space between each character (tracking).

And more!

Leading

Leading refers to “line spacing”. A single-spaced document is said to have a leading of 1.0.

A double-spaced document is 2.0.

Triple spaced is 3.0, etc. It can also be specified in pixels or %:

100% -> single spaced, 200% -> double, etc.

Or 24px between lines, 48px between, etc.▪ The % spacing is then the leading / the font size.

CSS allows for any of these; the rule is called “line-height”: e.g., “line-height: 2.0”, “line-height: 200%”, “line-height: 48px”

Set line-height on the <body> element and everything in the document will change

spacing. Or you can set it on individual paragraphs and other elements.

Large line-heights produce a (true) impression of additional “space” between lines and

may make documents feel less formal and more inviting. On the other hand, they waste a lot of vertical space.

Certain documents, such as academic papers and legal correspondence, benefit from a

greater impression of formality and are usually single-spaced.

Line-height Example

A small single-spaced paragraph with multiple lines (and a line-height of 1.0, 100%, or 32px).

A similar paragraph, now double

spaced to illustrate the difference in

line-height: it’s now 2.0, 200%, or

64px).

Tracking

Tracking refers to the horizontal space between characters. It is often overlooked, but plays a vital role in the appearance of the

document. Larger tracking is often used for headings, or to give the text more “room”.

To a degree, wider tracking lends an air of increased professionalism in headings.

Too much and it just looks odd.

Be very careful about increasing the tracking in body text. There’s probably a lot of

it, and if you space it too much (or too little), it will be more difficult to read. Tracking is changed in CSS using the “letter-spacing” rule.

Values can be positive or negative (negative values will tighten the spacing).

This takes ems as units; e.g., 0.35em or -1.2em.

If you ever see tracking specified in terms of a number such as “350” (for example,

in Adobe Photoshop), the unit is thousandths of an em. Therefore, “350” = 0.35em.▪ You can’t use numbers such as “350” in CSS, only ems or other CSS-defined units.

“Inverting”

When working with light text on a dark background

(“inverting”), certain precautions should be taken to avoid

eyestrain. Use “normal” or “lighter” font-weights because bold text jumps

out too much.

Use slightly larger font sizes to avoid squinting at small bright text.

Increase the line-height and tracking slightly to avoid crowding a large

block of white text.

Light text with a high line-height and tracking, such as this,

will be easier for most users to read on dark backgrounds.

Alignment

Text can be: Aligned left.

Aligned right.

Centered

Or justified, which expands the spacing on every line

but the last to make it hit the end of the line

(overriding the tracking).▪ Justification eliminates the “ragged edges” of large paragraphs of left-

aligned text, but can lead to “rivers of whitespace”, which look unpleasant.

Alignment is set using the “text-align” CSS rule. Valid values

are “left”, “center”, “right”, and “justify”.

(“River”)

(“Ragged” edges.)

Selecting a Serif Typeface.

“Old style” serif fonts, such as Garamond,

Goudy Old Style, and Caslon were the

earliest typefaces developed. Slanted parts of characters are thinnest, leading

to a “formal”, “necked” look.

They are very easy to read in print.

But they aren’t as easy to read on-screen. When used in headings, they may suggest

austerity, age, stability, and experience.

Selecting a Serif Typeface.

“Transitional” serif fonts, such as Times New Roman

and Georgia, are among the most commonly used. Lines are straighter and more weight is given to thicker

lines than in old-style typefaces.

They are fairly balanced and readable on both print and

screen. They suggest professionalism, reliability, and familiarity

(because Times New Roman is used everywhere). Both Times New Roman and Georgia are considered

“web-safe” fonts, installed on the majority of computers.

Selecting a Serif Typeface.

“Modern” serif fonts, such as Century

Schoolbook and Rockwell, are not often used

now; this style was popular in the early 20th

century. These are highly “geometric” fonts, with a “blocky”

appearance. They suggest rationality, reliability, discipline,

and the late 19th and early 20th centuries. Century Schoolbook and Rockwell are not web-safe,

but are among the more common fonts.

Sans-serif Typefaces

In general, less formal and easier to read on-screen than serif fonts. Used in the user interface of Windows, Mac OS X, and other operating systems. “Grotesque” sans-serif fonts include Helvetica and Franklin Gothic, both common. Neo-Grotesque fonts mimic grotesque fonts, but have less variation in weight.

Arial is the most popular of these and is web-safe. Geometric fonts have simple, geometric shapes, lending them a highly “modern” feel.

Century Gothic is likely the most popular font in this family. Humanist sans-serif fonts are considered the most easily readable on screen.

These have more contrast in width and weight than other sans-serif fonts and generally feature

“smooth”, “open”, “curving” shapes.

They may denote openness and potential.

They’re my own favorite font family.

Humanist fonts include Segoe UI, Verdana, Myriad, Trebuchet MS, Tahoma, Gill Sans, and Calibri.▪ All of these are common, but Verdana, Trebuchet MS, Tahoma, and Segoe UI can be considered web-safe.

Typesetting the Text

Finishing it up.

Next Time

From single pages to sites.Effective navigation.Lists and tables in HTML.

http://www.projectpolymath.org

A Nonprofit Organization of New Jersey, USA