The document discusses responsive web typography techniques including: 1. Using different font widths according to screen width. 2. Looking for type families that have multiple optical sizes. 3. Using graded fonts to normalize rendering across pixel densities. 4. Adjusting line height, paragraph indentation, white space, and graphic elements based on screen size. 5. Establishing type hierarchies through techniques like ALL CAPS, small caps, and italics matched to screen real estate.

1. &&
&
Typography
WEB
DIRECTED
Art

6. Responsive Web
Typography

7. 7
Different font sizes for different reading distances

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

9. sizecalc.com

10. 6
Maintain perfect proportions in a paragraph

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

13. 5
Establish hierarchy appropriate for
the screen real-estate

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

15. modularscale.com

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

17. 4
Indented paragraphs on mobile
vs block paragraphs on desktop

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

19. sarasoueidan.com/blog/css-shapes/

20. 3
Use graded fonts to normalize rendering across
different pixel densities

21. ia.net/know-how/responsive-typography

23. 2
Look for type families that have multiple
optical sizes

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

27. font-to-width.com

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

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

39. /* 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/ */

40. @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 */

42. 3D effects
drop caps
flipped type
rotated type
{ }

44. 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/ */

45. @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);

47. 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/ */

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

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

55. <div class="container">
<h1>
<span class="s1">You</span>
<span class="s2">&</span>
<span class="s3">Me</span>
</h1>
</div>

56. .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/ */

59. preview.typetester.org

60. COLOPHON
You!Thank@markodugonjic
marko@creativenights.com