-
Notifications
You must be signed in to change notification settings - Fork 1
/
typography.html
2089 lines (1506 loc) · 140 KB
/
typography.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Typography Playground</title>
<meta name="description" content="Explorations and exercises in web typography and related css specifications">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0" />
<!-- iOS Web App indicators -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- iOS ICONS AND START SCREENS -->
<link rel="apple-touch-icon" href="/images/misc/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/images/misc/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/images/misc/apple-touch-icon-114x114.png" />
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<!-- These are not all available resolutions, do your homework -->
<link rel="apple-touch-startup-image" href="/images/misc/splash-screen-320x460.png" media="screen and (max-device-width: 320px)" />
<!-- For iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/images/misc/splash-screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<!-- For iPad Portrait 768x1004 (high-resolution) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/images/misc/splash-screen-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" />
<!-- Windows 8+ tile stuff - Assumes all content is uploaded to server -->
<meta name="application-name" content="My Awesome Site" />
<meta name="msapplication-TileColor" content="#e809e8" />
<meta name="msapplication-square70x70logo" content="tiny.png" />
<meta name="msapplication-square150x150logo" content="square.png" />
<meta name="msapplication-wide310x150logo" content="wide.png" />
<meta name="msapplication-square310x310logo" content="large.png" />
<link rel="manifest" href="manifest.json">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/main.css">
<script src="lib/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
<div class='full-bleed'>
<img class='full-bleed-image' src="images/typography.jpg" alt="image showing multiple typefaces being written in several directions" class='header-image'>
<p>Image licensed under CC Attribution by <a href="https://www.flickr.com/photos/tarale/2897185492/">Taryn</a></p>
</div>
<div class='left-column'>
<p></p>
</div>
<div class="main-content-simple">
<h1 id='playground'>Typography Playground</h1>
<p>Over the past few months I've rekindled my interest in typography; how it works in print and also how it works online. I'm also working through two typography books that are very relevant to both typographic work and overall front end design and development. <a href="http://oreil.ly/1QuoKut">Responsive Typography</a> by Jason Pamental, <a href="http://abookapart.com/products/on-web-typography">On web typography</a> by Jason Santa Maria and <a href='https://prowebtype.com/'>Professional Web Typography</a> by Donny Truong.</p>
<p>But it wasn't until fluent that I got a better idea of why typography is important.I got the chance to talk with both Eric Meyer, one of my early web design influences, and Jason Pamental, the author of Responsive Typography and a very good presenter.</p>
<p>What I got out of multiple presentations about CSS, typography and new technologies coming and going away (saddly) is that the basics are still important. With that in mind I'll look at typography through a series of exercises. The exercises can be edited and will change the display of the associated text; you can then copy and paste the resulting CSS to your own CSS/SCSS stylesheet.</p>
<blockquote>
<p>The first thing to learn is that all typefaces are different. What works for the typefaces I chose may or may not work for the typefaces you choose for your projects. Where possible I'll show the typefaces used in this page against other typefaces (most likely from the 'web safe' font set.)</p>
</blockquote>
<h2>Why worry about typography on the web?</h2>
<div class='video'>
<iframe width="100%" height="315" src="https://www.youtube.com/embed/0OF-jU97HzQ" frameborder="0" allowfullscreen></iframe>
<p>Universal Typography -- Tim Brown</p>
</div>
<p>I love the web and I've been working on digital content for almost 20 years. While I agree with the universality and accessibility requirements for the web (it should be acessible by anyone anywhere, regardless of disability or network connection) the content doesn't have to be boring or plain</p>
<p>Whether we are reading a paper book or a web page or a iBook or Kindle ebook, typography still matters and it's still an important part of the design process.</p>
<p>For the longest time I've heard that the web is not print and that we shouldn't look at books as sources for web design inspiration. This may be true: the web is not print. But we're getting to the point where CSS on its own or a combination of CSS and Javascript will gives a large part of what we see in print in a way that won't look terrible in older browsers, when the user access it with assistive technology, or when CSS and Javascript are disabled.</p>
<p>I started taking a serious look at typography about 3 years ago. I'm not an expect and I'm most definitely not a professional but I'm learning and the more I learn the more I think we can use the full range of web technologies to enhance the text and the reading experience for our users.</p>
<section>
<h2 id='definitions'>Definitions and Terminology</h2>
<p>Before we dive into Type selection we'll do a few things: clear terminology and setup some common definitions to work from. The first one is the diference between typeface and font and then we'll dive into a short (and incomplete) glossary of typographical terms</p>
<h3>Font versus Typeface</h3>
<p>I've been guilty of this: use font and type face interchangeably. They are most definitely not the same thing and should not be used as if they are.</p>
<p><strong>Typeface</strong> refers to the design of the font.</p>
<p><strong>Fonts</strong> is the media that contains typefaces and allows you use them in your projects.</p>
<p>The best analogy I've heard about is that the relationship between typeface and font is analogous to the relationship between music and mp3. One is the content and the other is the media content is delivered in.</p>
<p>For more information, check out <a href='http://fontfeed.com/archives/font-or-typeface/'>font or typeface</a> and <a href='http://fontfeed.com/archives/styles-weights-widths-it%E2%80%99s-all-in-the-type-family/'>Styles, Weights, Widths — It’s All in the (Type) Family</a> both at Fontfeed.com.</p>
<h3 id='glossary'>Font Glossary</h3>
<figure>
<img src="images/font-terms.png" alt="Visual representation of type related terms">
<figcaption>Visual representation of type related terms</figcaption>
</figure>
<p>definitions taken, in part, from Fontshop's <a href='https://www.fontshop.com/glossary'>Typography Glossary</a> and Typography Deconstructed's <a href='http://www.typographydeconstructed.com/category/type-glossary/'>Type Glossary</a></p>
<dl class='font-glossary'>
<dt>Uppercase</dt>
<dd>The capitals in a typeface. The name refers to the days of metal type, as the capitals were kept in the upper part of the type case.</dd>
<dd>The capital letters of the alphabet are uppercase glyphs. Uppercase letters are normally used at the beginning of sentences and as the first letter of proper names.</dd>
<dt>Lowercase</dt>
<dd>The small letters in a typeface. The name refers to the days of metal type, as the small letters were kept in the lower part of the type case.</dd>
<dd>The little letters or non-capital letters of the alphabet are lowercase glyphs. They make up the bulk of written text, with uppercase or capital letters used primarily only to start sentences or proper names.</dd>
<dt>Typeface</dt>
<dd>An artistic interpretation, or design, of a collection of alphanumeric symbols. A typeface may include letters, numerals, punctuation, various symbols, and more — often for multiple languages. A typeface is usually grouped together in a family containing individual fonts for italic, bold, condensed, and other variations of the primary design. Even though its original meaning is one single style of a type design, the term is now also commonly used to describe a type family (usually only with the basic styles regular, italic, bold, bold italic).</dd>
<dt>Font</dt>
<dd>(also, fount) A collection of letters, numbers, punctuation, and other symbols used to set text (or related) matter. Although font and typeface are often used interchangeably, font refers to the physical embodiment (whether it’s a case of metal pieces or a computer file) while typeface refers to the design (the way it looks). A font is what you use, and a typeface is what you see.</dd>
<dt>Ascender</dt>
<dd>Any part in a lowercase letter that extends above the x-height, found for example in ‘b’, ‘d’, ‘f’, ‘h’, ‘k’, etc. Some types of ascenders have specific names.</dd>
<dd>The ascenders of some letters may touch or almost touch letters in the line above causing awkward or distracting patterns. This is most likely to happen or be obvious when a line of text with tall ascenders is below a line of text with long descenders. To resolve the problem of touching ascenders and descenders you can: Increase the leading (line spacing) between lines of type; Choose a different typeface; For headlines and subheads, some careful editing/re-wording can eliminate the problem; Changing the alignment of the text may also help</dd>
<dt>Axis</dt>
<dd>An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis. The slant of the axis (or lack thereof) often helps determine the type classification.</dd>
<dd>An imaginary line drawn from top to bottom of a glyph bisecting the upper and lower strokes is the axis. For typefaces that exhibit changes in the thickness of curved strokes, the inclination of the axis of the lowercase o is used to measure the angle of stress. A completely vertical axis indicates a design with an angle of 0 or vertical stress. When the axis leans to the left or right the design has angled (positive or negative) stress. Early styles of typefaces generally shared similiar axis or stress angles.</dd>
<dd>The axis or design axis is also an adjustable attribute of some fonts, such as Multiple Master fonts. Adjusting the design axis results in variations in the weight, width, size, and other features of the typeface.</dd>
<dt>Bracket</dt>
<dd>The bracket is a curved or wedge-like connection between the stem and serif of some fonts. Not all serifs are bracketed serifs.</dd>
<dt>Baseline</dt>
<dd>The imaginary line upon which the letters in a font appear to rest.</dd>
<dt>Cap Height</dt>
<dd>The height from the baseline to the top of the uppercase letters (not including diacritics).</dd>
<dt>Beak</dt>
<dd>A triangular, serif-like protrusion at the end of a stroke in certain serif type designs.</dd>
<dt>Spine</dt>
<dd>The main curved stroke in the letter ‘S’ and ‘s’.</dd>
<dt>Counter</dt>
<dd>The enclosed or partially enclosed circular or curved negative space (white space) of some letters such as d, o, and s.</dd>
<dt>Descender</dt>
<dd>Any part in a lowercase letter that extends below the baseline, found for example in g, j, p, q, y, etc. Some types of descenders have specific names.</dd>
<dd>For contrast, see Ascender</dd>
<dt>Diacritics</dt>
<dd>A diacritic is a ancilliary mark or sign added to a letter. Accents are one type of diacritics. In the Latin alphabet their function is to change the sound value of the letters to which they are added; in other alphabetical systems like Arabic or Hebrew they may indicate sounds (vowels and tones) which are not conveyed by the basic alphabet.</dd>
<dt>Shoulder</dt>
<dd>The curved part projecting downward from a stem in the lowercase ‘h’, ‘m’, ‘n’.</dd>
<dt>Small Caps (SC)</dt>
<dd>Small caps are capital letters that are approximately as high as the x-height of the lowercase letters. When properly designed small caps are absent in the selected font, many applications can create small caps by scaling down the capitals. However this makes these fake small caps too light and narrow, and they don’t harmonize properly with the lowercase. Originally small caps were only available for the roman text weight(s), but nowadays many type families also have them for the italic styles and the bolder weights.</dd>
<dd>When small caps are built-in as OpenType features, certain (older) operating systems and applications will not be able to access them.</dd>
<dt>Spacing</dt>
<dd>Spacing refers to the distribution of horizontal space on both sides of each character in a font to achieve a balanced and even texture. Spacing problems in difficult letter combinations (exceptions) are solved with kerning. Well-spaced fonts need comparatively less kerning pairs.</dd>
<dt>Kerning</dt>
<dd>Kerning refers to the horizontal space between individual pairs of letters (a kerning pair), and is used to correct spacing problems in specific letter combinations like “VA”. Well-spaced fonts need comparatively less kerning pairs. Fonts that are properly kerned appear evenly spaced without large open gaps of white space between any two characters.</dd>
<dt>Leading</dt>
<dt>Linespacing</dt>
<dd>Its original meaning is increasing the vertical space between lines of metal type by literally inserting lead strips. In the digital age it now means the vertical space between lines of text, from baseline to baseline.</dd>
<dt>Serif</dt>
<dd>In typography, a serif is the little extra stroke found at the end of main vertical and horizontal strokes of some letterforms.</dd>
<dt>Sans Serif</dt>
<dd>Typeface that without extensions at the letter's termination points. Sans serif type lends a clean and sharp appearance to the text, and is suitable for headlines or highlighted matter. Such type, however, is known to retard readability of large bodies of text, specially when less than 10 point in size.</dd>
<dd>Literally 'without serif'.</dd>
<dt>Tail</dt>
<dd>The descending, often decorative stroke on the letter ‘Q’.</dd>
<dt>X-Height</dt>
<dd>The height of the lowercase letters, disregarding ascenders or descenders, typically exemplified by the letter x. The relationship of the x-height to the body defines the perceived type size. A typeface with a large x-height looks much bigger than a typeface with a small x-height at the same size.</dd>
<dt>Foundry</dt>
<dd>A company that designs and/or distributes typefaces; a type manufacturer. The name originated in the days of metal type when type was made from molten lead.</dd>
</dl>
<p>There are many more terms to define but I believe these are enough to get us started. Check the references listed at the beginning of the glossary for additional terms.</p>
</section>
<section>
<h2 id='font-selection'>Font Selection</h2>
<p>All type shares characteristics. We'll look at some of them before we dive into selecting font stacks and other type related element. As we move along we'll discover that these elements are all interrelated and that changing one of these elements will force changes in others too.</p>
<figure>
<img src="images/font-terms.png" alt="Visual representation of type related terms">
<figcaption>Visual representation of type related terms</figcaption>
</figure>
<h4>X-height</h4>
<p>When you look at your text what is the size of the lowercase glyphs/letters in relation to uppercase? In different fonts the height of lowercase glyphs (measured by the x-height) can be different, some of them being barely half the uppercase height and in others being as tall as two thirds of the uppercase height.</p>
<p>When looking at type, particularly when you're testing your content in your chosen typeface and size, make sure that the size is not too small to read. When the height of the lowercase gets too small for the size you chose it gets too hard to read.</p>
<h4>Glyph Apertures</h4>
<p>Aperture refers to the spacing between open points in letters like 'c', 'e' or 'a'. If these apertures are too close the letter can be confused with a lowercase 'o' and make the reader's experience harder than it needs to be</p>
<h4>Even Spacing</h4>
<p>Make sure that the space between the glyphs and the width of the glyps in the font you choose are constant and not too far or to close to each other. This constant spacing will make your text easier to read or scan online</p>
<h4>Clear Terminals</h4>
<p>Terminals are the flourishes at the end of the letters a, c, f, j, r, and y. They can be classified according to the shape: ball (circular), beak (spur), and teardrop (globular).</p>
<p>In long-form text, letters with clear terminals (distinguishable shapes of ball, beak, or teardrop) are easier to spot; therefore, they are more readable than letters with lacking terminals.</p>
<h4>Distinguishable Ascenders & Descenders</h4>
<p>Ascenders (the lines above the main body of a glyp) and descenders (the line below) help make characters easier to read. When you're choosing typefaces, contrast sans serif versus serif type to see the difference in how the ascenders and descenders look. For a bad example look at helvetica.</p>
<h4>Styles & Weights</h4>
<p>When we see bold and italics on the web, we usually see the browser's interpretation of bold and italics not the actual italic and bold versions of the chosen typeface.</p>
<p>To make sure that this doesn't happen to you, make sure that the typefaces you work with have at least 4 versions:</p>
<ul>
<li>Regular</li>
<li>Bold</li>
<li>Italic</li>
<li>Bold Italic</li>
</ul>
<p>If one of the style fonts are not available then you're at the browsers' mercy as to how bold and italics will render for your page.</p>
<h4>Contrast</h4>
<p>In this context, contrast refers to the differences between thick and thin strokes of the font. When working with body copy the thin strokes may disappear or the think strokes may overwhelm the rest of the text.</p>
<p>To make sure none of these situations happen pick a font with low or no contrast.</p>
<h4>Context</h4>
<p>Until now we've looked at the technical aspects of type where the typeface will be used is also important. Context has more to do with how the type feels. If you're developing responsive sites, does the type feel too tight or constrained in larger screens? Does it feel too loose in smaller displays? The goal is to find typeface that works consistently accross your target devices.</p>
<h3 id='font-stacks'>Font stacks</h3>
<p>Unless you're using one of the universal fonts, those available everywhere, you will most likely have to plan for what happens if your browser cannot load the font because your internet connection just died or you got caught using a font that you were not licensed to use. That's where you use the font stack.</p>
<p>At its simplest, the stack is the list of fonts that you want to use in your page going from left to right. For example in the following font stack:</p>
<pre><code class='css'>html {
font-family: 'Museo Sans', Verdana, sans-serif;
}</code></pre>
<p>The browser will use Museo Sans, if is available in a format that the browser can read, if it isn't then the browser will use Verdana and... in the unlikely event that verdana is not available the browser will use the system's default sans serif font.</p>
<p>Why is this important, you may be asking. Because not all fonts are the same. Even fonts that look very similar may be different enough to cause problems with your layout. Let's look at the same Lorem Ipsum text in two different fonts.
<p>The first example will use Stone Humanist, the font I chose for the body text in this document.</p>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
div#example1 {
border: 1px solid #cc092f;
font-family: 'Stone-Humanist', sans-serif;
line-height: 1.3;
margin-top: 1em;
padding: 1em
}
</style>
<div id='example1'>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Example usinng Stone Humanist</p>
<p>The second example uses <a href="https://www.wikiwand.com/en/Verdana">Verdana</a>, a font created for and released by Microsoft in 1996.</p>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
div#example2 {
border: 1px solid #cc092f;
font-family: 'Verdana', sans-serif;
line-height: 1.3;
margin-top: 1em;
padding: 1em;
}
</style>
<div id='example2'>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Example using Verdana</p>
<p>Notice, in particular, how Verdana's characters are wider and therefore make the line have less content when compared with Stone Humanist. As a further experiment change the front in Example 2-2 from Verdana to Arial and see the difference.</p>
<h3>"Web Safe" Fonts</h3>
<p>Ever since browsers started using fonts they;ve been able to use fonts available on the user's system. These are the "web safe" fonts.</p>
<p><a href="http://www.cssfontstack.com/">CSS Font Stack</a> presents a list of some of the most common desktop fonts that are installed in Macintosh and Windows operating systems. As you can see there are a few fonts that are really safe to use across platforms.</p>
<p>This is yet another consideration when building our font stack. If we build backups other than generic fonts we need to be careful to pick fonts that are wide used or pick 2 or more options to cover both Windows and Macintosh cases.</p>
<h3>Generic font families</h3>
<p>Most of the time we have a certain font selected for our project and most of the time they will work ok. But what happens when they don't?</p>
<p>As we saw in the earlier examples the typeface you choose will affect number of words you can fit in a line of text and the way the font writes on screen may look different with the same line height </p>
<p>CSS defines a number of generic font families for use with your content. These families are (with defnitions taken from the <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a> specification):</p>
<dl>
<dt><strong>serif</strong></dt>
<dd>Glyphs of serif fonts, as the term is used in CSS, tend to have finishing strokes, flared or tapering ends, or have actual serifed (including slab serifs). Serif fonts are typically proportionately-spaced. They often display a greater variation between thick and thin strokes than fonts from the 'sans-serif' generic font family. CSS uses the term 'serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Mincho (Japanese), Sung or Song (Chinese), Totum or Kodig (Korean). Any font that is so described may be used to represent the generic 'serif' family.</dd>
<dt><strong>sans-serif</strong></dt>
<dd>Glyphs in sans-serif fonts, as the term is used in CSS, tend to have stroke endings that are plain -- with little or no flaring, cross stroke, or other ornamentation. Sans-serif fonts are typically proportionately-spaced. They often have little variation between thick and thin strokes, compared to fonts from the 'serif' family. CSS uses the term 'sans-serif' to apply to a font for any script, although other names may be more familiar for particular scripts, such as Gothic (Japanese), Kai (Chinese), or Pathang (Korean). Any font that is so described may be used to represent the generic 'sans-serif' family.</dd>
<dt><strong>cursive</strong></dt>
<dd>Glyphs in cursive fonts, as the term is used in CSS, generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork. Fonts for some scripts, such as Arabic, are almost always cursive. CSS uses the term 'cursive' to apply to a font for any script, although other names such as Chancery, Brush, Swing and Script are also used in font names.</dd>
<dt><strong>fantasy</strong></dt>
<dd>Fantasy fonts, as used in CSS, are primarily decorative while still containing representations of characters (as opposed to Pi or Picture fonts, which do not represent characters).</dd>
<dt><strong>monospace</strong></dt>
<dd>The sole criterion of a monospace font is that all glyphs have the same fixed width. (This can make some scripts, such as Arabic, look most peculiar.) The effect is similar to a manual typewriter, and is often used to set samples of computer code.</dd>
</dl>
<p>Using a generic family as the last item in your font stack is essential. The system is guaranteed to be available and you can style your content with this in mind. It also makes your CSS less succeptuble to slow connections or network failures.</p>
<h3 id='considerations'>Additional Considerations</h3>
<p>There are a couple more elements to consider when selecting a font. They may not seem as important but when put together with evcerything else we'll discuss in this page, it's a lot more important than we give it credit for.</p>
<h4 id='size'>Font size</h4>
<p>Even when working with Desktop Operating Systems alone a font may look very different. It doesn't necessarily have anything to do with the design and all with how the operating system renders fonts and it may not even happen but this is something to consider when testing.</p>
<p>Smaller sizes may cause font details to dissapear as the font grows smaller. This may affect the typeface you use for your body text, particularly in smaller devices.</p>
<p>Fonts have become more interesting when particularly since Apple released 'Retina' iPhones and iPads and Android phones have been released with even higher pixel density. While the higher density allows you to use more typefaces, your design must still consider browsers with lower pixel density in your design.</p>
<figure>
<img src="images/font-in-chrome-mac.png">
<figcaption>This page displayed during development in Chrome for OSX</figcaption>
</figure>
<figure>
<img src="images/font-in-spartan-win-vm.png">
<figcaption>Content displayed in Microsoft Edge running in a Windows 10 virtual machine</figcaption>
</figure>
<h4 id='line-height'>Line height</h4>
<p>In CSS line-height control the vertical space between lines. It can help readability and make it easier for people with dissabilities to engage with your content. </p>
<pre><code class='css'>p {
font: 1em/1.5 arial, helvetica, sans-serif;
}</code></pre>
<p>Which is equivalent to this, much more verbose, syntax:</p>
<pre><code class='css'>p {
font-family: arial, helvetica, sans-serif;
font-size: 1em;
line-height: 1.5;
}</code></pre>
<p>I personally prefer the second syntax. It's explicit in telling you what each attribute controls and it saves you from having to remember what does each part of the expression means. That said you're more than welcome to use either syntax.</p>
<p>So why do we care about line height. In the example below change the line height attribute, play with values from 1 to 2 or even 3 and see the difference. Which one is more comfortable to read?</p>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
div#example3 {
border: 1px solid #cc092f;
font-family: 'Verdana', sans-serif;
font-size: 1em;
line-height: 1.3;
padding: 1em;
}
</style>
<div id='example3'>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Example demonstrating what happens when you change line-height</p>
<h3 id='line-width'>Line width</h3>
<blockquote>
<p>Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple-column work, a better average is 40 to 50 characters.</p>
<p>Robert Bringhurst’s The Elements of Typographic Style, (p.26)</p>
</blockquote>
<p>Until I started working with web type I had never considered line length as an element when building content. But it makes sense, the longer a line of text is the more we need to be mindful when working with it. In the example below, the text at the same width looks significantly different when we adjust the line height.</p>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
div#widthExample1 {
border: 1px solid #cc092f;
font-family: 'Verdana', sans-serif;
font-size: 1em;
padding: 1em;
}
div#widthExample1 p.p1 {
width: 80%;
line-height: 1.3;
}
div#widthExample1 p.p2 {
width: 80%;
line-height: 1.5;
}
div#widthExample1 p.p3 {
width: 120%;
line-height: 1.3;
}
div#widthExample1 p.p4 {
width: 120%;
line-height: 1.5;
}
</style>
<div id='widthExample1'>
<p class='p1'>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p class='p2'>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
<p class='p3'>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p class='p4'>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p> </div>
</div>
<p>What happens when you change line-height for text of a given width</p>
<h3 id='so-what'>So what should the stack look like?</h3>
<p>So, after all these conversations about different types of typefaces, fonts, availability and when to use and not to use them, what should a good font stack look like?</p>
<p>As with many thing in the web it depends. If you were given fonts as part of your design brief then you should follup up with the designer regarding fall back fonts.</p>
<p>If this is your design then I'd suggest sites like <a href="http://fontsinuse.com/">Fonts in use</a> or <a href="http://www.typewolf.com/">Typewolf</a> to see how other people are using fonts. Another way is to identify a font you like (like I did with the body font for this page), research whether it's available as a web font and how much would it cost to license.</p>
<p>Once you know what font you want to use, there are services like <a href="http://typecast.com/">Typecast</a> to see what the font will look like in an actuall web page... you can even add chunks of your own content to get a more acurate picture of what the typeface will look like with <em>your</em> content.</p>
<p>My default font stack for this project looks like this:</p>
<pre><code class="css">html {
font-family: 'Stone-Humanist', arial, sans-serif;
}
</code></pre>
<p>I use a different stack for headings and this will be discussed when we talk about <a href="#headings">headings</a> in more detail.</p>
</section>
<section>
<h2 id='loading'>Loading Fonts</h2>
<p>Now that we have a better idea of what fonts we want to use and the font stack we'll see how to load them into the page. We'll explore 3 ways: local loading using the <em>@font-face syntax</em>, loading fonts using the <a href="https://developers.google.com/fonts/docs/getting_started">Google font API</a>, using Google's <a href="https://github.com/typekit/webfontloader/blob/master/README.md">Web Font Loader</a> and a new tool called <a href='https://github.com/bramstein/fontfaceobserver/blob/master/README.md'>Font Face Observer</a></p>
<h3 id='at-font-face'>@font-face </h3>
<p>We have been able to use fonts on our web content since the days of IE 3 (3.5 for Macintosh if I remember correctly) but we've always had to contend with font creators and foundries fear of piracy. It's only recently that they have relented and allowed their fonts to be used. The basic syntax, covering all modern browsers, looks like this:</p>
<pre><code class="css">@font-face {
font-family: 'stone-sans-webfont';
src: url('../path-to-font-file.eot');
src:
url('../path-to-font-file.eot?#iefix')
format('embedded-opentype'),
url('../path-to-font-file.woff2')
format('woff2'),
url('../path-to-font-file.woff')
format('woff'),
url('../path-to-font-file.ttf')
format('truetype'),
url('../path-to-font-file.svg#stone-sans-webfont')
format('svg');
font-weight: normal;
font-style: normal;
}</code></pre>
<p>And then we associate the font with CSS like we normally would matching the font-family attribute in the @font-face declaration with the font-family attribute of the element where we want to use it:</p>
<pre><code class="css">html {
font-family: 'stone-sans-webfont', arial, sans-serif;
}
</code></pre>
<p>Since we want to avoid faux bold and faux italics in our content, we add the bold and italics versions of our font to the page and then match them to the correct attributes with selectors similar to this:</p>
<pre><code class="css">strong {
font-family: 'Stone-Humanist-Semi';
}
em {
font-family: 'Stone-Humanist-Ita';
}
/*
When using both we don't care
what order they are used in
*/
strong em,
em strong {
font-family: 'Stone-Humanist-SemiItalic';
}
</code></pre>
<p>Where <em>Stone-Humanist-Semi</em> is our (semi)bold font, <em>Stone-Humanist-Ita</em> is italics and <em>Stone-Humanist-SemiItalic</em> is the semibold italics combination. Since <code><b></code> and <code><i></code> have different semantic meaning in HTML5 I've chosen not to style them.</p>
<h4>Some things to keep in mind</h4>
<p>Adding the font to your site/book/app adds to the overall file size. Depending on the font this may increase the size of your project considerably. Taking <a href="http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=gentium">Gentium</a> as an example, the font supports Latin, Greek and Cyrillic character sets but it weighs a hefty 500k for the regular font (in one format out of the 5 formats needed to support multiple browsers/devices). Add Bold, Italic and you get 1.5 Megabytes just for the font! And it may not be the only font you use in the project. </p>
<p>The flipside to this issue of size is that embedding the fonts means they are always available to desktop and mobile browsers readers that support embedding (and it should be all of them.) Choosing what browsers and what versions to support is a different story.</p>
<h3 id='google-font-api'>Google Fonts API</h3>
<p>Google has two ways of using web fonts, the first one is directly through their API. Using Google's font API is a two step process. First add the font to your html head element with the following syntax (using Tangerine as an example):</p>
<pre><code class="html"><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"></code></pre>
<p>The link produces a CSS @font-face declaration that we can use in our CSS as normal. The version produced in Chrome and Firefox uses the <a href="http://www.w3.org/TR/WOFF2/">woff2</a> format</p>
<pre><code class="css">@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
src: local('Tangerine'), url(http://fonts.gstatic.com/s/tangerine/v6/HGfsyCL5WASpHOFnouG-RJBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}</code></pre>
<p>While Safari uses True Type to render the font.</p>
<pre><code class="css">@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
src: local('Tangerine'), url(http://fonts.gstatic.com/s/tangerine/v6/HGfsyCL5WASpHOFnouG-RCZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');
}</code></pre>
<p>As you can see the advantage of using the APi is that we don't need to use multiple formats in our @font-face declaration. Google takes care of that for us.</p>
<p>The obvoius disadvantage is that this only works online. That's why a fallback option or options is even more important when working with the API. If we're offline or connectivity is limited we want a good fallback font.</p>
<h3 id='googe-web-font-loader'>Google web font loader</h3>
<p>One of the things neither the font API or directly downloading the content doesn't address is the "flash of unstyled text." According to the <a href="http://help.typekit.com/customer/portal/articles/6852-Controlling-the-Flash-of-Unstyled-Text-or-FOUT-using-Font-Events">Typekit Help Center</a>:</p>
<blockquote>
<p>Fonts are loaded as assets into a web page—just like images or video. Depending on your browser or your connection speed, they can load quickly or lag behind the rest of the page. Different browsers handle font loading differently; for example, Safari and Chrome will refrain from displaying text set in a web font until the font has loaded, while Internet Explorer won’t show anything on the page until the font loads. Meanwhile, Firefox will display the site with the fallback fonts in the font stack, and then switch to the linked fonts after they’ve finished loading. This results in a flash of unstyled text, or FOUT.</p>
</blockquote>
<p>Typekit, in collaboration with Google, has created loader library to make working with type easier. It works by adding scripts to the page that load the library and tell it what fonts to download and use. For example to load the Droid Sans font from Google you'd use code like this:</p>
<pre><code class="html"><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFont.load({
typekit: {
id: 'xxxxxx'
},
custom: {
families: ['Droid Sans', 'Source Code Pro'],
},
google: {
families: ['Droid Sans', 'Droid Serif'],
text: 'abcdedfghijklmopqrstuvwxyz!'
},
fontdeck: {
id: 'xxxxx'
},
monotype: {
projectId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
version: 12345 // (optional, flushes the CDN cache)
}
});
</script></code></pre>
<p>Or using asynchronous loading:</p>
<pre><code class='javascript'><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
WebFontConfig = {
google: { families: [ 'Lora:400,700,400italic,700italic:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
<noscript>
<link href='http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
</noscript></code></pre>
<p>For an explanation of the values for each foundry check the Font Loader's <a href="https://github.com/typekit/webfontloader/blob/master/README.md">readme file</a> in Github.</p>
<p>The font loader creates a set of events, both CSS and Javascript, for developers to interact with. This is similar to the way Modernizr handles feature detection. The Javascript classes are:</p>
<ul>
<li>loading - This event is triggered when all fonts have been requested.</li>
<li>active - This event is triggered when the fonts have rendered.</li>
<li>inactive - This event is triggered when the browser does not support linked fonts or if none of the fonts could be loaded.</li>
<li>fontloading - This event is triggered once for each font that's loaded.</li>
<li>fontactive - This event is triggered once for each font that renders.</li>
<li>fontinactive - This event is triggered if the font can't be loaded.</li>
</ul>
<p>CSS events are implemented as classes on the html element. The following classes are set on the html element and correspond to the descriptions above:</p>
<ul>
<li>.wf-loading</li>
<li>.wf-active</li>
<li>.wf-inactive</li>
<li>.wf-<familyname>-<fvd>-loading</li>
<li>.wf-<familyname>-<fvd>-active</li>
<li>.wf-<familyname>-<fvd>-inactive</li>
</ul>
<p>The <familyname> placeholder will be replaced by a sanitized version of the name of each font family in lowercase with only alphanumeric characters. For example, Droid Sans becomes droidsans. The <fvd> placeholder is a <a href="http://typekit.github.io/fvd/">Font Variation Description,</a> a shorthand for describing the style and weight of a particular font.</p>
<h4>So why would we use the Font Loader?</h4>
<p>In short: to make the user's experience less jarring. Since fonts are downloaded as any other resource in your web page. If we use the following font stack: <code>'stone-sans-webfont', arial, sans-serif</code>, we can then use the Font Loader Defined classes to make the transition to our fonts smoother and better looking. Let's look at one possibility:</p>
<pre><code class="css">.wf-inactive body{
font-family: arial, sans-serif;
line-height: 1.4em;
}
.wf-active body {
font-family: 'stone-sans-webfont', arial, sans-serif;
line-height: 1.3
}
</code></pre>
<p><code>.wf-inactive</code> indicates that loading the font or fonts (in this case we are using one) has not started. To make sure that the user doesn't see a system fault we provide a fallback option while the web font(s) are loading. This may be an instant or maybe several seconds in a slow or congested network connection (try Starbucks on a Sunday afternoon.)</p>
<p>Once the font(s) load, the class will switch to <code>.wf-active</code> where we put out web font stack and attributes related to font. In this case I only added a different line-height attribute to the selector but you can be as detailed as you want.</p>
<p>One last detail: <strong>What happens if Javascript is disabled?</strong></p>
<p>If you're fonts are loaded from google you can revert back to using the Google API to load your fonts. You can do something like:</p>
<pre><code class="html"><noscript>
<link href='http://fonts.googleapis.com/css?family=Roboto:700italic,300,700,300italic' rel='stylesheet' type='text/css'>
</noscript></code></pre>
<h3 id='font-face-observer'>Font Face Observer</h3>
<p>As good as the Webfont Loader is good it causes some Flash of Invisible text when the fonts load and the browser switches from the system fonts to the webfonts it just loaded. The script for the Webfont Loader must be placed in the <code>head</code> of the document with all the performance pitfalls inherent to it.</p>
<p>Font Face Observer, a fairly new delivery mechanism developed by Adobe Typekit engineer Bram Stein, uses JavaScript’s scroll events to load and monitor web fonts. Unlike the Web Font Loader, the Font Face Observer can be referenced at the end of document to avoid the extra overhead. Scott Jehl's approach, as documented in the <a href='http://www.filamentgroup.com/lab/font-events.html'>Filament's Group blog</a> and is the system we'll discuss below. The full page is shown below and will be explained as we go along.</p>
<pre><code class='html'><!DOCTYPE html>
<!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->
<html lang="en" class="fonts-loaded">
<!--#else -->
<html lang="en">
<!--#endif -->
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width">
<style>
@font-face {
font-family: 'Lora';
src: url('lora-regular.woff2') format('woff2'),
url('lora-regular.woff') format('woff'),
url('lora-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lora';
src: url('lora-italic.woff2') format('woff2'),
url('lora-italic.woff') format('woff'),
url('lora-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
body {
font-family: serif;
}
.fonts-loaded body {
font-family: Lora, serif;
}
</style>
</head>
<body>
<p><!-- paragraph text --></p>
<script src="fontfaceobserver.js"></script>
<script>
(function( w ){
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var font1 = new w.FontFaceObserver( "Lora", {
weight: 400
});
var font2 = new w.FontFaceObserver( "Lora", {
weight: 400,
style: "italic"
});
w.Promise
.all([font1.check(), font2.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script>
</body>
</html></code></pre>
<p>The first thing we do is to use Server Side Includes, a way to have the server generate pieces of content for the web, to add the <code>fonts-loaded</code> CSS class if the corresponding cookie has already been set. In this way the loader will only use the fonts if they've been already been loaded, otherwise it will not add the class and the process will continue.<p>
<pre><code class='html'><!--#if expr="$HTTP_COOKIE=/fonts\-loaded\=true/" -->
<html lang="en" class="fonts-loaded">
<!--#else -->
<html lang="en"></code></pre>
<p>While still in the head of the document we load our fonts using the @font-face syntax we discussed earlier and associate the fonts with the css needed. Note that we have two classes for the body, a plain one where only system fonts are used and a version with the fonts-loaded class where the webfont is the primary and the system font is our backup. </p>
<pre><code class='html'> <style>
@font-face {
font-family: 'Lora';
src: url('lora-regular.woff2') format('woff2'),
url('lora-regular.woff') format('woff'),
url('lora-regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Lora';
src: url('lora-italic.woff2') format('woff2'),
url('lora-italic.woff') format('woff'),
url('lora-italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
body {
font-family: serif;
}
.fonts-loaded body {
font-family: Lora, serif;
}
</style></code></pre>
<p>At the bottom of our pages, along with all the other scripts, we add a link to the fontfaceobserver library. The second script begins with a conditional check to see if the <code>class-loaded</code> class hs been added to the root element (html); if it has been then quit, there is nothing left to do.</p>
<p>We next define variables for each of the fonts we will use in our document. This will be used in the last part of the script, discussed below.</p>
<pre><code class='html'><script src="fontfaceobserver.js"></script>
<script>
(function( w ){
if( w.document.documentElement.className.indexOf( "fonts-loaded" ) > -1 ){
return;
}
var font1 = new w.FontFaceObserver( "Lora", {
weight: 400
});
var font2 = new w.FontFaceObserver( "Lora", {
weight: 400,
style: "italic"
});
</code></pre>
<p>The last part of the script uses a JavaScript <a href='http://www.html5rocks.com/en/tutorials/es6/promises/'>promise</a>. Once both promises fulfill it will add the <code>fonts-loaded</code> class to the document (root) element, in this case, html. </p>
<pre><code class='html'>w.Promise
.all([font1.check(), font2.check()])
.then(function(){
w.document.documentElement.className += " fonts-loaded";
});
}( this ));
</script></code></pre>
<p>The next result is that the fonts will be loaded asynchronously and that the system font assigned to an element will only change after the font has loaded. This prevents flashes of unstyled content and flashes of invisible content. But in the end which font loading strategy you use is up to you.</p>
<h3>Links and Resources</h3>
<ul>
<li><a href='https://prowebtype.com/delivering-web-fonts/#observer'>Delivering Web Fonts</a> chapter from Professional Web Typography</li>
<li><a href='http://www.filamentgroup.com/lab/font-events.html'>Font Loading Revisited with Font Events</a></li>
<li>SSI instructions for <a href='http://httpd.apache.org/docs/current/howto/ssi.html'>Apache HTTPD</a></li>
<li>SSI instructions for <a href='http://nginx.org/en/docs/http/ngx_http_ssi_module.html'>Nginx</a></li>
</ul>
</section>
<section>
<h2 id='paragraph-styling'>Paragraph styling</h2>
<p>Most the time we spend engaged with text is with paragraphs and that's where I put a lot of my research time when working on a new project. You may be asking why put so much work on how the paragraphs look... As you will see in the example below there are many elements that are involved in controlling paragraph appearance.</p>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
div#example4 {
border: 1px solid #cc092f;
padding: 1em;
width: 100%;
}
div#example4 p:first-child {
text-indent: 0;
font-size: 1em;
}
div#example4 p {
font-family: 'Stone-Humanist', arial, sans-serif;
font-size: 1em; /* 1em = 16px */
line-height: 1.3;
text-align: left;
text-indent: 2em;
letter-spacing: 0;
word-spacing: 0;
}
</style>
<div id='example4'>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short Wibs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Playing with paragraph type</p>
<p>With the content above we can now start playing with type. Do the following activities to get a feel for how much type can change:</p>
<ol>
<li>Change the font-size on <code>div#example4 p:first-child</code> to 1.5em</li>
<ul>
<li>Does the size of the first paragraph change your reaction to it? Does size matter?</li>
</ul>
<li>Remove the reference to "Stone Humanist" to see what would the text look like in Arial</li>
<li>Remove the reference to Arial to see what the text would look like in the system's Sans Serif font</li>
<ul>
<li>What are the differences between the three fonts?</li>
</ul>
<li>Change the font-size attribute to 1.5em and the line-height to 1 Is it harder to read?</li>
<li>Change the line-height to 1.5. Does it get easier?</li>
<li>Chang the reference to "Stone Humanist" to Verdana. Can you describe the changes?</li>
<ul>
<li>Does the line height change how easy or hard it is to read the text?</li>
</ul>
<li>Change the width attribute of <code>div#example4</code> to 50%</li>
<ul>
<li>Does the text become harder to read as it gets narrower?</li>
</ul>
<li>Change the word spacing from normal to .25em</li>
<li>Change the word spacing from .25em to -.25em</li>
<ul>
<li>Does the text become harder to read as it gets sspread further apart? As it gets condensed together?</li>
</ul>
<li>Change the letter spacing from 0 to .25em.</li>
<li>Change the letter spacing from .25em to -.25em</li>
<ul>
<li>Does the text become harder to read as it gets sspread further apart? As it gets condensed together?</li>
</ul>
</ol>
<p>The typeface you select does make a difference. While we may not conciously notice how the text changes the changes affect the way text looks and the way we interact with it. I know I hit you with a lot of activities and questions for this little paragraph exercise so feel free to play with some, all or none of the activities above. </p>
<p>But whether you use them or not, you get the idea of how much work goes into making paragraphs read well.</p>
<h3 id='dropcaps'>Drop caps</h3>
<p>Most (if not all) of us have seen the big initial capital letter on the first paragraph of a chapter. We can do th is with CSS. One version of the effect looks like the code below using first--of-type and first-letter to identify the first letter of the first paragraph and the styles to apply to t his pseudo element</p>
<pre><code class="css">p:first-of-type:first-letter {
font-size: 3em;
line-height: 0.9em;
float: left;
padding-right: 0.15em;
}
</code></pre>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
#dropcap-example {
border: 1px solid #cc092f;
padding: 1em;
width: 100%;
}
#dropcap-example p:first-of-type:first-letter {
font-size: 6em;
line-height: 1.25em;
float: left;
padding-right: 0.15em;
}
</style>
<div id='dropcap-example'>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing. Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short Wibs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Example of drop cap using pseudo classes</p>
<p>Unfortunately older browsers don't support the :first-of-type selector (looking at IE7 and possibly IE8) so we have to work around and tie the drop cap to the first letter of the first element. Most of the time this will be an h1 or other heading element but it can be any element you want. Note that you will have to hardcode what the first element is and change your SASS/CSS every time you change the first element</p>
<p>If you don't care about supporting older browsers then this is a non-issue but coding defensively is always a good practice :)</p>
<pre><code class="css">h1 + p:first-letter {
font-size: 3em;
line-height: 0.9em;
float: left;
padding-right: 0.15em;
}
</code></pre>
<div class="css-example">
<style scoped contenteditable>/* You can edit this text and copy it to your own stylesheet */
#dropcap-example2 {
border: 1px solid #cc092f;
padding: 1em;
width: 100%;
}
#dropcap-example2 h1 + p:first-letter {
font-size: 6em;
line-height: .9em;
float: left;
padding-right: 0.15em;
}
</style>
<div id='dropcap-example2'>
<h1>This is the bacon</h1>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing. Ad short ribs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
<p>Bacon ipsum dolor amet sint t-bone et aliquip proident ex dolor. Landjaeger tail duis, nostrud brisket strip steak shankle turducken. Laborum sausage aliqua, non quis laboris est brisket reprehenderit ball tip cow capicola. Meatloaf commodo jerky adipisicing.</p>
<p>Ad short Wibs adipisicing, lorem beef elit eiusmod laborum pork belly labore. Aliqua jowl id, ut cupim in swine short ribs. Nulla short loin enim drumstick in, minim rump pancetta. Fatback qui corned beef, strip steak spare ribs elit minim pig. Cupidatat aliquip pariatur, pork belly tenderloin flank cillum.</p>
</div>
</div>
<p>Example of drop cap using sibbling selectors</p>
</section>
<section>
<h2 id="headings">Headings</h2>
<p>Headings serve as the visual representation of our content and, as such, they deserve special consideration. We'll discuss whether to use the same font as our body or whether it's better to use a different one, and some things we can do with heading text. I wish I could tell you exactly what fonts to use but, as with many things type related, it'll depend on many factors.</p>
<p>Let's look at what the possibilities are. </p>
<h3 id='same-or-different'>Same or different fontface?</h3>
<p>One of the questions that always baffles me is whether to use the same font for headings as I use for the body text. The first example uses the same font (Raleway) for both headings and body text. It looks ok but I'm still not sold out on the idea.</p>
<p data-height="355" data-theme-id="2039" data-slug-hash="gpxOwe" data-default-tab="result" data-user="caraya" class='codepen'>See the Pen <a href='http://codepen.io/caraya/pen/gpxOwe/'>Headings using body type</a> by Carlos Araya (<a href='http://codepen.io/caraya'>@caraya</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>The second example uses a Serif font, Roboto Slab, in the headings with Stone Humanist as the body font. I like the contrast I have to keep reminding myself that the contrast must be present but not be jarring to the reader.</p>
<p data-height="338" data-theme-id="2039" data-slug-hash="dozyOW" data-default-tab="result" data-user="caraya" class='codepen'>See the Pen <a href='http://codepen.io/caraya/pen/dozyOW/'>Headings in Serif Font</a> by Carlos Araya (<a href='http://codepen.io/caraya'>@caraya</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<p>The last option is to use a typeface from the web safe palette. One of my favorite typefaces is Verdana so we'll try that for headings and see how that looks on our headins with the font selected for the body. And here it is:</p>