1 / 27

Typography

Typography. Font Properties. 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

bobby
Télécharger la présentation

Typography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Typography

  2. Font Properties 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 2px3px #000r} xyOffset, Blur, Color

  3. Stick it to a scale

  4. 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/

  5. 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

  6. Stick it to a scale

  7. 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

  8. Select a good measure

  9. 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.

  10. 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)

  11. 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.

  12. Leading

  13. Leading • Space between lines of type.

  14. 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

  15. Leading • Sufficient line height makes the text ultimately more scannable.

  16. 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.

  17. Leading • According to Carusone (2009), agood rule is to set the leading 2 to 5pt larger than the type size, depending on the typeface.

  18. 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.

  19. UNIT Line-height #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;}

  20. 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;}

  21. 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;} 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

  22. 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 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.

  23. 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}

  24. 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.

  25. Good 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. Poor Contrast

  26. Emphasis • Giving emphasis to words without interrupting reader. • Italicsis 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.

  27. 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.

More Related