& & & Typography WEB DIRECTED Art

No content

No content

No content

No content

Responsive Web Typography

7 Different font sizes for different reading distances

0,26mm 1,3mm 71cm 350cm

sizecalc.com

6 Maintain perfect proportions in a paragraph

Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required.

No content

5 Establish hierarchy appropriate for the screen real-estate

STYLE OPTIONS ALL CAPS FOR THE SUBHEAD H2 SMALL CAPS FOR THE SUBHEAD H3 Italic for the Subhead H4

modularscale.com

SETTING SUBHEADS WITH CSS blog.typekit.com/2013/07/25/setting-subheads-with-css/ webdesign.maratz.com/lab/subheads/

4 Indented paragraphs on mobile vs block paragraphs on desktop

SMALL SCREEN – style variations – indented paragraphs – white space LARGE SCREEN – typographic scale – block paragraphs – graphic elements

sarasoueidan.com/blog/css-shapes/

3 Use graded fonts to normalize rendering across different pixel densities

ia.net/know-how/responsive-typography

No content

2 Look for type families that have multiple optical sizes

No content

1 Use different font widths according to the width of the screen

No content

font-to-width.com

No content

The Benton Project bentonmodern.webtype.com Indra Kupferschmid CTS Nick Sherman QAD

No content

No content

No content

No content

.columns { @media only screen and (min-height: 25em) { @media only screen and (min-width: 40em) and (max-width: 59.9375em) { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 2.7em; -moz-column-gap: 2.7em; column-gap: 2.7em; } @media only screen and (min-width: 60em) { -webkit-columns: 3; -moz-columns: 3; columns: 3; -webkit-column-gap: 2.7em; -moz-column-gap: 2.7em; column-gap: 2.7em; } } }

No content

No content

No content

No content

/* Alternate characters */ -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01" 1; font-feature-settings: "ss01"; /* Common ligatures */ -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga" 1; font-feature-settings: "liga"; /* Small caps */ -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp" 1; font-feature-settings: "smcp"; /* http://clagnut.com/sandbox/css3/ */

@supports ((font-feature-settings: "smcp") or (-webkit-font-feature-settings: "smcp") or (-moz-font-feature-settings: "smcp" 1)) { .small-caps { text-transform: lowercase; -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp" 1; font-feature-settings: "smcp"; } } /* stateofwebtype.com/#font-feature-settings */

No content

3D effects drop caps flipped type rotated type { }

No content

text-shadow: 1px 0px #ddc, 0px 1px #996, 2px 1px #ddc, 1px 2px #996, 3px 2px #ddc, 2px 3px #996, 4px 3px #ddc, 3px 4px #996, 5px 4px #ddc, 4px 5px #996, 6px 5px #ddc, 5px 6px #996, 7px 6px #ddc, 6px 7px #996, 8px 7px #ddc, 7px 8px #996, 9px 8px #ddc, 8px 9px #996; /* practice.typekit.com/lesson/using-shades/ */

@function generate3DShadow($max,$x,$y) { $val: 1px 0 #{$x}, 0 1px #{$y}; @for $i from 1 through $max { $val: #{$val}, #{$i+1}px #{$i}px #{$x}; $val: #{$val}, #{$i}px #{$i+1}px #{$y}; } @return $val; } text-shadow: generate3DShadow(10,#ddc,#996);

No content

var dropcaps = document.querySelectorAll('.drop-cap'); if (window.innerWidth < 600) { window.Dropcap.layout(dropcaps, 3); } else { window.Dropcap.layout(dropcaps, 5, 3); } /* http://webplatform.adobe.com/dropcap.js/ */

No content

.o { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); /* Glyph-specific adjustments */ }

No content

.flip { display: block; -webkit-transform: scale(-1, -1); -moz-transform: scale(-1, -1); transform: scale(-1, -1); }

No content

No content

No content

.container { font-size: 10vw; } .container h1 { font-size: 1em; line-height: 1; position: relative; width: 100%; height: 0; padding-top: 75%; /* 4:3 aspect ratio */ padding-top: 50%; /* 2:1 aspect ratio */ } .container h1 .s1 { position: absolute; left: 10%; top: 10%; } /* http://webdesign.maratz.com/lab/expressive-web-typography/ */

No content

No content

preview.typetester.org

COLOPHON You! Thank @markodugonjic marko@creativenights.com