TYPOGRAPHY

Font Properties

Font Propertiesp {font-family: Arial, Helvetica, sans-serif;} Font-Stackp {font-size: 1em;} small, px, em, %p {font-style: normal;} italic, normal, obliquestrong {font-weight: bold;} normal, boldp {font-variant: normal;} normal, small-caps

Overall text properties

p {line-height: normal;} normal, number, em, px, %p {line-spacing: normal} normal, length in px or ema {text-decoration: none;} none, underline, over-line, line-through;a {text-transform: none;} none, capitalize, uppercase, lowercasep {text-shadow: 2px 2px 3px #000r} xyOffset, Blur, Color

STICK IT TO A SCALE

Stick it to a scale

Don’t compose without a scale

Find what suits you best for a given project and stick to it.

Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”

Source: http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/

Stick it to a scale

Above sizes are the classic typographic scale.

Relationships between different sizes of type within a composition is meaningful.

Jeff Croft, 2008

Stick it to a scale

Stick it to a scale0, 1, 1, 2, 3, 5, 8, 21, 34, 55, 89, 144…A sequence of numbers in which each number is sum of the two preceding numbers.

The proportions created by this sequence recur in nature and can be seen in pine cones, tree branch structures, flowers, etc.

Fee-bon-at-ci

SELECT A GOOD MEASURE

Select a good measure

Measure - length of a single line. Measure is a key element of readability.

Set with width property. Best to use ems or percentages to set

the width of blocks of text, units are directly proportional to the size of type.

Select a good measure | Length For optimal readability,

a measure of 45-75 characters in length is recommended

Between 30 and 50 ems can be seen as an ideal line length.

(Scale Example)

Too Long:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Good:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim

ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut

aliquip ex ea commodo.

Too short:

Lorem ipsum dolor sit amet,

consectetur adipisicing elit,

sed do eiusmod tempor

incididunt ut labore et dolore

magna aliqua. Ut enim ad

minim veniam, quis nostrud

exercitation ullamco laboris

nisi ut aliquip ex ea

commodo.

LEADING

Leading

Space between lines of type.

Leading rules of thumb

Blocks of type typically need positive leading. Blocks of type do not read well with no

leading. Short elements (e.g., headers) need less

leading. Darker (heavier) type needs more leading. Sans serif type needs more leading than

serif. Longer line-lengths need more leading. Shorter line-lengths require less leading.

Jeff Croft, 2008

Leading

Sufficient line height makes the text ultimately more scannable.

Good:

Lorem ipsum dolor

sit amet, consectetur

adipisicing elit, sed

do eiusmod tempor

incididunt ut labore

et dolore magna

aliqua. Ut enim ad

minim veniam, quis

nostrud exercitation

ullamco laboris nisi

ut aliquip ex ea

commodo.

Too little:Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.

Too much:

Lorem ipsum dolor

sit amet, consectetur

adipisicing elit, sed

do eiusmod tempor

incididunt ut labore

et dolore magna

aliqua. Ut enim ad

minim veniam, quis

nostrud exercitation

ullamco laboris nisi

ut aliquip ex ea

commodo.

Leading

According to Carusone (2009), a good rule is to set the leading 2 to 5pt larger than the type size, depending on the typeface.

Unitless line-height

Acts as a scaling factor in the type that you choose.

Recommended to use unitless numbers if setting a line-height on body elements, or any element that has descendant elements.

#1 and #2 are the same.

1.div {font-size: 25px; line-height: 1em;}p {font-size: 20px; }span {font-size: 80%; }

2.div {font-size: 25px; line-height: 1em;}p {font-size: 20px; line-height: 25px;}span {font-size: 80%; line-height: 25px;}

UNIT Line-height

#3 and #4 are the same

3.div {font-size: 25px; line-height: 1;}p {font-size: 20px; }span {font-size: 80%; }

4.div {font-size: 25px; line-height: 1; }p {font-size: 20px; line-height: 20px; }span {display: block; font-size:80%; line-height: 16px;}

UNITLESS are RECOMMENDED

#3 and #4 are the same

3.div {font-size: 25px; line-height: 1;}p {font-size: 20px; }span {font-size: 80%; }

4.div {font-size: 25px; line-height: 1; }p {font-size: 20px;line-height: 20px; }span {display: block;font-size:80%; line-height: 16px;}

UNITLESS are RECOMMENDED

NOTE: If you set HTML5 doctype get a minimum line-height for inline elements. For block elements you can set the line-height to any value, can even make lines overlap.

If you don't set the HTML5 doctype, there's no minimum line-height for either block or inline elements.

So I used display:block here

Measure | Line Height

According to Martin (2009):line height (pixels) ÷ body copy font size (pixels) should = to 1.48 or 1.5line length (pixels) ÷ line height (pixels) should = to 27.8

1) Once you have decided on your body copy font size, multiplying this value by 1.5 will give you the optimal line height.

E.G., 16px X 1.5px = 24px or 1.5em

2) Then multiply this new value by 27.8 to get your optimal line length:

E.G., 24 X 27.8 = 667.2 or 42em

Layout will need gutters, margins and padding to let the body copy breathe.

Hierarchy

Typographic layout needs element of hierarchy.

Hierarchy defines how to read through content.

Shows user where to start reading. It differentiates headers from body text. Plays a huge part in how scannable a layout

is.

{Example}

Contrast

Core factor in whether text is easy to read.

Good contrasts makes text easy on the eyes, easy to scan quickly, and more readable.

Good Contrast

Poor Contrast

Martha is visiting her friend in

New York. Regrettably, she

arrives in the city at rush

hour. It is raining. She is a

nervous driver and is unsure

of her directions. It is dark

outside. The headlights and

rain make for poor visibility.

Martha turns off NPR radio

station. She begins to reach

for her phone to access the

TJAMs app so she can log her

data but another impatient

driver, with horn sounding,

cuts in front of her.

Emphasis

Giving emphasis to words without interrupting reader.

Italics is widely considered to be the ideal form of emphasis.

Some other common forms of emphasis are: bold, caps, small caps, type size, color, underline or a different typeface.

No matter which you choose, try to limit yourself to using only one.

Combinations such as caps-bold-italic are disruptive and look clumsy.

Emphasis - Good

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo.

Emphasis - Poor

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt UT LABORE ET DOLORE

MAGNA ALIQUA. Ut enim ad minim veniam, quis nostrud

exercitation ullamco laboris nisi ut aliquip ex ea commodo.