TYPOGRAPHY

Font Properties  p {font-family: Arial, Helvetica, sans-serif;} Font-Stack  p {font-size: 1em;} small, px, em, %  p {font-style: normal;} italic, normal, oblique  strong {font-weight: bold;} normal, bold  p {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 em  a {text-decoration: none;} none, underline, over-line, line-through;  a {text-transform: none;} none, capitalize, uppercase, lowercase  p {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 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:

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

0, 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 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.5  line length (pixels) ÷ line height (pixels) should = to ) 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 = 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}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 Con tras t 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.