forked from wikimedia/WikimediaUI-Style-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathvisual-style_typography.html
More file actions
174 lines (167 loc) · 12.4 KB
/
visual-style_typography.html
File metadata and controls
174 lines (167 loc) · 12.4 KB
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
<!DOCTYPE html>
<!--[if lte IE 8 ]><html lang="en" class="js-off lte-ie8"><![endif]-->
<!--[if IE 9 ]> <html lang="en" class="js-off ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="js-off">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" href="css/build/wmui-style-guide.min.css">
<title>Visual Style: Typography – Wikimedia Design Style Guide</title>
<script>
document.documentElement.className = document.documentElement.className.replace(/\bjs-off\b/,'js-on'); // no BEM notation thx to IE
</script>
<!--[if lt IE 9]>
<script>window.html5={'shivCSS':false};</script>
<script src="js/vendor/ie/html5shiv-3.7.3.min.js"></script>
<script src="js/vendor/ie/respond-1.4.2.min.js"></script>
<![endif]-->
<link rel="preload" href="fonts/Charter_regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="fonts/Lato_regular.woff2" as="font" type="font/woff2" crossorigin>
<script src="js/fonts-loader.js" async></script>
<script>
var _paq = _paq || [];
_paq.push(['setDomains', ['*.design.wikimedia.org.']]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
function embedTrackingCode() {
var u='https://piwik.wikimedia.org/';
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '16']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.defer=true; g.async=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
if (window.addEventListener) {
window.addEventListener('load', embedTrackingCode, false);
} else if (window.attachEvent) {
window.attachEvent('onload',embedTrackingCode);
} else {
embedTrackingCode();
}
</script>
</head>
<body class="page--visual-style-typography">
<header id="header" class="header" role="banner">
<div class="content-box">
<a href="#content" class="is-aural is-focusable">Jump to content</a>
<a href="#nav--main" class="is-aural is-focusable">Jump to navigation</a>
<h1 class="site__title"><a href="./"><span class="site__org">Wikimedia </span><span class="site__project">Design Style Guide</span></a></h1>
<label class="btn--nav-main" for="trigger--nav-main" aria-hidden="true" title="Show main menu">
<i></i> <span>Menu</span>
</label>
<a href="https://github.com/wikimedia/WikimediaUI-Style-Guide" class="lnk--contribute" title="Fork and contribute on GitHub"><span>Contribute on </span>GitHub</a>
</div>
</header>
<div class="page">
<div class="content-box">
<div class="col col--start">
<input type="checkbox" id="trigger--nav-main" class="trigger--nav-main">
<nav id="nav--main" class="nav nav--main" role="navigation">
<ol>
<li class="nav__item"><a href="index.html">Introduction</a></li>
<li class="nav__item"><a href="design-principles.html">Design principles</a></li>
<li class="nav__item is-on"><a href="visual-style.html">Visual style</a>
<ul class="nav__sub-items">
<li class="nav__sub-item"><a href="visual-style.html">Principles</a></li>
<li class="nav__sub-item"><a href="visual-style_colors.html">Colors</a></li>
<li class="nav__sub-item is-on"><a href="visual-style_typography.html">Typography</a></li>
<li class="nav__sub-item"><a href="visual-style_icons.html">Icons</a></li>
<li class="nav__sub-item"><a href="visual-style_imagery.html">Imagery</a></li>
<li class="nav__sub-item"><a href="visual-style_illustrations.html">Illustrations</a></li>
</ul>
</li>
<!-- <li><a href="components.html">Components</a></li>
<li><a href="patterns.html">Patterns</a></li>
<li><a href="resources.html">Resources</a></li> -->
</ol>
</nav>
</div>
<div class="col col--end">
<main id="content" class="content" role="main">
<div class="page__parent-title">Visual Style</div>
<h1 class="page__title">Typography</h1>
<p>Wikimedia projects rely on writing and reading, and typography is a key component of their design. You need to consider the typeface, size, style, and spacing of your text to achieve good <a href="https://en.wikipedia.org/wiki/Readability">readability</a>. Our typographic choices make our content accessible, present it in a neutral way and convey its reliability.</p>
<img src="img/visual-style/typography-specimen.png" alt="Lato and Charter typeface specimen">
<h3>Readability</h3>
<p>We want content to be readable for everyone, in all circumstances: being color-blind or the sun hitting your screen should not be a barrier to access our content.</p>
<img src="img/visual-style/typography-readability.png" alt="Content typeset following the guidelines">
<h4>Grid</h4>
<p>Laying out text is key to better readability. Typographers and typesetters have been using grids to lay out text for centuries. Grids help scan your content in a better way. We lay our content on a horizontal and a vertical grid.</p>
<img src="img/visual-style/typography-grid.png" alt="Content aligning with a grid">
<p>The whitespace between sections, complimentary block elements like images, and headings should be consistent and proportional to rest of the whitespace.</p>
<h4>Contrast</h4>
<p>When using text, make sure that it provides enough contrast to be read comfortably. Check the contrast between the colors used for text and its background. Make sure to provide at least level AA sufficient contrast (4.5:1). The <a href="visual-style_colors.html">color palette</a> provides the contrast levels for pure white and black surfaces, but you need to ensure the contrast on other combinations.</p>
<figure>
<img src="img/visual-style/typography-contrast-example.png" alt="Low contrast, especially at smaller sizes makes text harder to read">
<figcaption>Low contrast, especially at smaller sizes makes text harder to read.</figcaption>
</figure>
<h4>Tracking and leading</h4>
<p><strong>Text spacing.</strong> How text is placed in space affects its readability. Follow these considerations for text paragraphs:</p>
<ul>
<li>Line length should be no longer than <a href="https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style">75 characters</a>.</li>
<li>Line height should be 1.6 times the size of the font used.</li>
</ul>
<h4>Dynamic text</h4>
<p>Content will be available in multiple languages, so text length will vary for a given piece of information across languages. Avoid designing interfaces that depend on certain expectation of text length.</p>
<figure>
<img src="img/visual-style/typography-dynamic-text.png" alt="Text shown at different font sizes depending on their length">
<figcaption>Text shown at different font sizes depending on their length.</figcaption>
</figure>
<p>Here are few ways to tackle dynamic text:</p>
<ul>
<li><b>Don’t crowd the UI.</b> <a href="http://lawsofsimplicity.com/los/law-1-reduce.html">Keeping the UI simple</a> always helps. Consider reducing the number of elements to make sure the remaining ones have enough room. </li>
<li><b>Dynamic layout.</b> Make containers expandable so that they can fit the content.</li>
<li><b>Dynamic text.</b> Adjust the size depending on the content. Use a smaller font-size for long content.</li>
<li><b>Clipping.</b> Clipping the text with ellipsis. Only if there is no risk of missing important information or the complete information is reachable through a clear alternative means.</li>
</ul>
<h3>Typefaces</h3>
<p>Charter (supported by the Charis SIL font implementation) and Lato are the recommended typefaces, when available.</p>
<ul>
<li>Charter is a serif typeface designed by Matthew Carter in 1987. Charter has a simplified and clean structure that works well even in low resolution displays. Although <a href="https://en.wikipedia.org/wiki/Bitstream_Charter">Bitstream Charter</a> is the original implementation for Charter, we recommend using <a href="https://en.wikipedia.org/wiki/Charis_SIL">Charis SIL</a> since it provides a wider Unicode support.</li>
<li><a href="http://www.latofonts.com/lato-free-fonts/">Lato</a> is a sans-serif typeface designed by Łukasz Dziedzic in 2010. Lato provides very good readability even at small sizes.</li>
</ul>
<p>These fonts are provided as a reference, but you may use similar criteria when those fonts are not available in your context.</p>
<h4>Font selection criteria</h4>
<p>Font selection depends on availability. Fonts are not always available for all scripts or all devices. The criteria for font selection has been the following:</p>
<ol>
<li><b>Readability.</b> Fonts with a bigger x-height and open shapes are preferred.</li>
<li><b>Neutral aspect.</b> The font should work with many different kinds of content without adding a particular voice to it.</li>
<li><b>Simple shapes.</b> Avoiding complex shapes helps text to work better on small sizes, low-resolution devices and reduces printing costs.</li>
<li><b>Open.</b> Open source fonts are preferred to align with the open knowledge they deliver.</li>
</ol>
<p>To extend the font family to new scripts or devices, the above criteria should be followed. Common cases in which you need to look for alternatives are:</p>
<p><b>Lack of a font delivery mechanism.</b> In cases where custom fonts cannot be delivered to the user (e.g., through web fonts technology), you need to define alternatives. Default fonts such as Lato and Charter/Charis can still be recommended as primary options for users that installed those fonts themselves. However, a wider set of fallback options from those available in the user device is needed. Possible fallback options:</p>
<ul>
<li><a href="https://en.wikipedia.org/wiki/Georgia_(typeface)">Georgia</a> (present in many devices) can be a fallback for Charter.</li>
<li>Device default sans-serif font would be used in the absence of Lato.</li>
</ul>
<p><b>Language support.</b> There is no font that supports all languages. Individual language communities can identify fonts that better support their languages taking into account the above criteria. Possible fallback options:</p>
<ul>
<li>The <a href="https://en.wikipedia.org/wiki/Noto_fonts">Noto family</a> provides a great coverage of languages, providing good alternatives for both serif and sans-serif typefaces.</li>
</ul>
<h3>Use of styles</h3>
<p>The recommended styles are intended to optimise readability with the density of Wikipedia’s encyclopedic content.</p>
<p>Using the body text size of 16 scale-independent pixels (sp) as a base, a typographic scale of 1.125 was used to derive a harmonious rhythm between font-sizes for various headings and body copy.</p>
<img src="img/visual-style/typography-scale.png" alt="Scale of sizes used for text">
<p>The scale-independent pixels can result in a different number of actual pixels in the user screen due to screen density or user preferences. A 16 sp text is rendered as 16 px in a 1x device at standard zoom level, but it becomes 21 px in a 2x device (or when zoomed 200% on a 1x device).</p>
<p>Common text styles are based on the defined scale in order to communicate clearly the content hierarchy. </p>
<img src="img/visual-style/typography-styles.png" alt="Text styles defined">
</main>
</div>
</div>
</div>
<footer id="footer" class="footer">
<div class="content-box">
<ul class="footer__list">
<li><a href="https://github.com/wikimedia/WikimediaUI-Style-Guide">Contribute on GitHub</a></li>
<li><a href="https://twitter.com/@WikimediaUX" title="Follow Wikimedia User Experience team account on Twitter">Follow @WikimediaUX</a></li>
<li><a href="https://lists.wikimedia.org/mailman/listinfo/design" title="Join Wikimedia Design mailing list">Join mailing list</a></li>
</ul>
<p>Text is available under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener">Creative Commons Attribution-ShareAlike 4.0 International</a>, additional terms may apply. <br>Code is available under the MIT license.</p>
<p><a href="https://wikimediafoundation.org/" class="lnk--wikimedia-project">A Wikimedia Foundation project</a></p>
<noscript><p><img src="https://piwik.wikimedia.org/piwik.php?idsite=16&rec=1" alt=""></p></noscript>
</div>
</footer>
</body>
</html>