-
Notifications
You must be signed in to change notification settings - Fork 2
/
design-notes.html
254 lines (226 loc) · 12.6 KB
/
design-notes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Design Notes — sphinx-library documentation</title>
<link rel="stylesheet" href="_static/library/library.css" type="text/css" />
<link rel="stylesheet" href="_static/pygments.css" type="text/css" />
<script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
<script src="_static/jquery.js"></script>
<script src="_static/underscore.js"></script>
<script src="_static/doctools.js"></script>
<script src="_static/language_data.js"></script>
<link rel="index" title="Index" href="genindex.html" />
<link rel="search" title="Search" href="search.html" />
<link rel="next" title="Contributing" href="contributing.html" />
<link rel="prev" title="Customization" href="customize.html" />
<link rel="stylesheet" href="_static/library/type-book.css" type="text/css" />
<link rel="stylesheet" href="_static/custom.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=0.875" />
<script>
mobile_menu_content = "";
function toggleMenu() {
var div = document.getElementsByClassName("document").item(0);
var btn = document.getElementById("menu-toggler");
if(div.classList.contains("mobile-show")) {
div.classList.remove("mobile-show");
btn.innerHTML = mobile_menu_content;
}
else {
div.classList.add("mobile-show");
mobile_menu_content = btn.innerHTML;
btn.innerHTML = btn.getAttribute("data-open");
}
}
</script>
</head>
<body class="light">
<div class="document">
<div class="mobile-menu">
<button type="button" id="menu-toggler" onclick="toggleMenu();"
data-open="× Close">≡ Menu</button>
<a href="index.html">sphinx-library</a>
<noscript>
<div>
JavaScript is required to open/close mobile menu.
</div>
</noscript>
</div>
<div class="sphinxsidebar" role="navigation" aria-label="main navigation">
<div class="sphinxsidebarwrapper">
<h1 class="logo ">
<a href="index.html">sphinx-library</a>
</h1>
<p class="description">The typography-centric Sphinx theme that reads like a good book.</p>
<div id="searchbox" style="display: none" role="search">
<h3 id="searchlabel">Quick search</h3>
<div class="searchformwrapper">
<form class="search" action="search.html" method="get">
<input type="text" name="q" aria-labelledby="searchlabel" />
<input type="submit" value="Go" />
</form>
</div>
</div>
<script>$('#searchbox').show(0);</script><h3>Contents</h3>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="installation.html">Installation</a></li>
<li class="toctree-l1"><a class="reference internal" href="customize.html">Customization</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Design Notes</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#use-of-whitespace">Use of Whitespace</a></li>
<li class="toctree-l2"><a class="reference internal" href="#use-of-color">Use of Color</a></li>
<li class="toctree-l2"><a class="reference internal" href="#ligatures-kerning-punctuation">Ligatures, Kerning, Punctuation</a></li>
<li class="toctree-l2"><a class="reference internal" href="#choosing-the-typefaces">Choosing the Typefaces</a></li>
<li class="toctree-l2"><a class="reference internal" href="#typeface-notes">Typeface Notes</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="contributing.html">Contributing</a></li>
<li class="toctree-l1"><a class="reference internal" href="sample.html">Sample Element Styles</a></li>
</ul>
<script>
function toggleMode(theme) {
document.body.className = theme;
localStorage.setItem("sphinx-library-mode", theme);
}
var theme = localStorage.getItem("sphinx-library-mode");
if(theme !== null)
toggleMode(theme);
</script>
<h3>Reading Mode</h3>
<button type="button" onclick="toggleMode('light');">Light</button>
<button type="button" onclick="toggleMode('sepia');">Sepia</button>
<button type="button" onclick="toggleMode('dark');">Dark</button>
<button type="button" onclick="toggleMode('');">None</button>
<noscript>
<div>
JavaScript is required to toggle reading modes.
</div>
</noscript>
</div>
</div>
<div class="documentwrapper">
<article class="body" role="main">
<div class="section" id="design-notes">
<h1>Design Notes<a class="headerlink" href="#design-notes" title="Permalink to this headline">¶</a></h1>
<p>While bold colors, shadows, “materials”, and heavy syntax highlighting are “in”
right now, there is something to be said for the simplicity of a black-and-white
printed book. Even programming books are somehow highly legible despite the lack
of colors and UI chrome that adorn our editors.</p>
<p>How can it be that a black and white book is equally or sometimes more legible
than a richly formatted web page? This theme is partly a personal project to
explore that question.</p>
<p>My answer is the use of whitespace and good typography.</p>
<div class="section" id="use-of-whitespace">
<h2>Use of Whitespace<a class="headerlink" href="#use-of-whitespace" title="Permalink to this headline">¶</a></h2>
<p>The theme was initially laid out to mimic metrics commonly used in a small
paperback or hardback novel. This means a relatively small page size and
surprisingly ample margin on all sides of the page. In order to better simulate
a “page”, or focused area of content, the sidebar and non-content areas have
been dimmed slightly but not so much as to be distracting. This helps to create
a “page” rather than a sea of white.</p>
<p>The second use of whitespace is in the type itself — in between the lines.
Line and paragraph spacing is ample. The goal is not to cram too much within the
focus area (we have an infinite amount of web page so there is no point trying
to cram dozens of lines together).</p>
</div>
<div class="section" id="use-of-color">
<h2>Use of Color<a class="headerlink" href="#use-of-color" title="Permalink to this headline">¶</a></h2>
<p>Choosing fonts featuring interesting italics enabled a unique way to implement
admonitions, quotes, etc. using only type and white space — no colors, boxes,
or borders. This practice also aligns with the simple look of the printed page.</p>
<p>While highly saturated syntax highlighting of code snippets is often sought out
by developers, this theme takes the opposite approach instead using muted drab
colors sparingly. Syntax highlighting does aid readability in longer code
snippets, so it shouldn’t necessarily be disabled. I think the muted colors
strike a good balance between readability without being distracting. Thanks to
the Trac project for providing inspiration based on their color scheme included
with Pygments.</p>
<p>If you find that you prefer candy-colored syntax highlighting and color-coded
admonitions, then this theme is certainly not for you.</p>
</div>
<div class="section" id="ligatures-kerning-punctuation">
<h2>Ligatures, Kerning, Punctuation<a class="headerlink" href="#ligatures-kerning-punctuation" title="Permalink to this headline">¶</a></h2>
<p>Special care has been taken to configure the theme to maximize use of the
typeface’s features. This includes enabling automatic hyphenation at line breaks
to keep the flow and rhythm of the text moving and enabling both common and
contextual ligatures using the browser’s font rendering abilities. Both of these
are common in print, but for some reason have been mostly forgotten in the
electronic realm.</p>
<p>Sphinx also excellently converts punctuation such as “smart quotes”, en– and
em— dashes, etc. The browser additionally allows finely controlling the
underline using OpenType features — so we can create faint underlines which
become bolder upon hover, and underlines that leave space around descenders to
create an appearance more pleasing to the eye.</p>
</div>
<div class="section" id="choosing-the-typefaces">
<h2>Choosing the Typefaces<a class="headerlink" href="#choosing-the-typefaces" title="Permalink to this headline">¶</a></h2>
<p>The specific typefaces chosen have been vetted among hundreds of freely
available alternatives, each selected for being the highest performing across
many areas including: legibility, metrics, kerning abilities, ligatures,
contrast between weights, quality of italics, and general appearance.</p>
<p>Special care has been taken to ensure the <code class="docutils literal notranslate"><span class="pre">-native</span></code> stacks look equally good
on Windows, macOS, and various GNU/Linux distributions. Often times this means
at least a dozen fallbacks are specified to match up to all sorts of conditions
including which applications are installed (MS Office, LibreOffice, Gnome, KDE),
common font packages (Bitstream, URW, Ghostscript, GNU fonts), and even distro
specifics such as the branded Ubuntu or Red Hat fonts.</p>
</div>
<div class="section" id="typeface-notes">
<h2>Typeface Notes<a class="headerlink" href="#typeface-notes" title="Permalink to this headline">¶</a></h2>
<p><strong>Academy</strong> — “Computer Modern” is the gold standard here, and frankly a
beautiful typeface. In order to facilitate this I have created a <a class="reference external" href="https://github.com/vsalvino/computer-modern">web font
version</a> distributed via
jsDeliver CDN. “Computer Modern Typewriter” is used for monospace needs as it
has a uniquely ornate appearance despite being a fixed width type. The fallback
and native version uses a similar modernist (early 20th-century) typeface,
Century (and various similar fallbacks).</p>
<p><strong>Book</strong> — “Crimson Pro” was the font that opened the rabbit hole. Many
characteristics of this type make it totally reminiscent of a printed book.
After all, it was quite literally designed to be an on-screen font for textbooks
and editorial content. “Courier Prime”, a fantastic rendition of Courier with
script-like italics, is used for monospace needs. The native version uses
Georgia (or Georgia Pro, a <em>much</em> nicer version of Georgia included with Windows
10) which provide a similar reading experience.</p>
<p><strong>Engineer</strong> — “IBM Plex Serif” provides a really unique cross between a
traditional serif and a slab serif, which makes for a more practical alternative
to the flowery Computer Modern, without losing the air of formality.
Corresponding “IBM Plex Mono” is used for monospace needs. Cambria and Charter
are used for the fallback and native version as they both have a sturdy upright
appearance with clean cut serifs.</p>
<p><strong>Humanist</strong> — “Fira Sans” was selected due to its unique but very legible
appearance. Softer alternatives such as Source Sans Pro were considered, but
Fira Sans has a slightly darker weight which helps it look good even on
low-resolution low-contrast screens. I think its unique glyphs nicely accentuate
the “human” part of “humanist”. Corresponding “Fira Mono” is used for monospace
needs. The fallback and native version uses Trebuchet MS due to it being a
web-safe font, and also having a similar dark weight with good legibility.</p>
<p><strong>Swiss</strong> — “Inter” is an excellent choice here, due to its clear inspiration
from Helvetica, but actually made more legible thanks to its wider characters
and looser spacing. “Robot Mono” is used for monospace needs as it has a
similarly geometric appearance. Fallbacks and native version ranges from
Helvetica Neue, Arial Nova (a <em>much</em> nicer version of Arial included with
Windows 10), Roboto, and Nimbus Sans (a forgotten but quite good Helvetica
alternative which is commonly available in various GNU/Linux operating systems).</p>
</div>
</div>
</article>
<nav class="related bottom" role="navigation">
<a class="prev" href="customize.html" title="Previous">
← Customization
</a>
<a class="next" href="contributing.html" title="Next">
Contributing →
</a>
<div class="clear"></div>
</nav>
</div>
<div class="clear"></div>
</div>
<footer class="footer" role="contentinfo">
© Copyright 2020 Vince Salvino.
Created using <a href="http://sphinx-doc.org/">Sphinx</a> with
<a href="https://github.com/vsalvino/sphinx-library">Library</a> theme.
<a href="_sources/design-notes.rst.txt" rel="nofollow">Page source</a>
</footer>
</body>
</html>