& & & Typography WEB NEXT The STEPS For

No content

No content

No content

Responsive Web Typography

8 Different font sizes for different reading distances

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

No content

sizecalc.com

7 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

6 Establish hierarchy appropriate for the screen size

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/

5 Indented paragraphs vs block paragraphs

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

sarasoueidan.com/blog/css-shapes/

4 Use graded fonts to normalize rendering

ia.net/know-how/responsive-typography

No content

3 Take advantage of multiple optical sizes

No content

2 Use font widths according to the width of the screen

No content

font-to-width.com

No content

1 Web fonts are a progressive enhancement

PERFORMANCE STRATEGIES Load only fonts that you really need Provide decent fallback options Use SVG instead of web fonts for lettering Subset web fonts Don’t inline

github.com/typekit/webfontloader

bramstein.com/writing/smashing-book-5-web-fonts-performance.html

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

.section .grid:before { content: '§'; position: absolute; left: 50%; display: block; @include rem(font-size, 1); @include rem(line-height, 4); @include rem(width, 2); @include rem(height, 4); @include rem(top, -2); @include rem(margin-left, -1); text-align: center; background: #fff; }

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"; /* 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 rotated letters flipped words

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); } /* 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 */ } .s1 { position: absolute; left: 10%; top: 10%; } /* webdesign.maratz.com/lab/expressive-web-typography/ */

No content

No content

goo.gl/424HzX

No content

No content

No content

No content

preview.typetester.org

&ogether You Me

&ogether You Me

&ogether You Me

You! Thank COLOPHON @markodugonjic marko@creativenights.com