-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbeauty-tips.html
226 lines (190 loc) · 15.5 KB
/
beauty-tips.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
<!DOCTYPE html>
<html lang="en" xmlns:m="http://www.w3.org/1998/Math/MathML">
<head>
<meta
charset="utf-8"
name="viewport" content="width=device-width, initial-scale=1.0"
/>
<title>Fun with Fonts: Beauty Tips</title>
<!-- Adobe web fonts -->
<link rel="stylesheet" href="https://use.typekit.net/jmw8bxd.css">
<!-- Translucent background for the logo -->
<script type="text/javascript">
window.addEventListener('scroll', function () {
document.getElementById('logo-background').classList[
window.scrollY > 20 ? 'add': 'remove'
]('scrolled-bg');
});
</script>
<!-- Mathematics-related styles -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=UnifrakturMaguntia">
<link rel="stylesheet" href="mathscribe/jqmath-0.4.3.css">
<script src="mathscribe/jquery-1.4.3.min.js"></script>
<script src="mathscribe/jqmath-etc-0.4.6.min.js" charset="utf-8"></script>
<!--<script src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML' async></script>-->
<!-- Site-wide general style sheet -->
<link rel="stylesheet" href="base.css" type="text/css"/>
</head>
<body lang="en">
<!--
<div class="bg">
</div>
-->
<div class="outer-box">
<div class="col-main">
<h1 style="margin-top: 0;">Beauty Tips for Academics</h1>
<h2>
<span class="whiteOnRed header-box">Tip 1</span><br />
Choosing a suitable typeface
</h2>
<p class="motto">Homogeneity is key.</p>
<p>The choice of the typeface depends on the type of text you are writing:
<ul>
<li>If your text contains characters from different alphabets (e.g., Greek letters in mathematical formulas in a text otherwise composed of Latin characters), then you ideally choose a font that includes all the characters you need. This ensures aesthetical consistency of the main text with the foreign characters.</li>
<li>If your text contains a substantial amount of mathematical expressions (variables, formulas), it will probably include a large number of italic characters. In this case, choose a typeface that features only modestly sloped italics (say, Minion).<div id="hyperlinks">View the font on the Adobe website: <a href="https://fonts.adobe.com/fonts/minion-3" target="_blank">Minion 3</a>.</div>
This is because typefaces with strongly sloped italics (say, Adobe Garamond) tend to make the page look uneven.<div id="hyperlinks">View the font on the Adobe website: <a href="https://fonts.adobe.com/fonts/adobe-garamond" target="_blank">Adobe Garamond</a>.</div></li>
</ul>
</p>
<div class="figure">
<div class="picture">
<img src="images/examples/formula_minion_agaramond.gif" width="150" height="150" border="0"/>
</div>
<div class="caption">
An illustration of how the slope of the italics affects the legibility of mathematical expressions:
<ul>
<li><b>Minion (top):</b> well-suited. Due to the moderate slope of the italics, the ascender of the <i>f</i> does not collide with the opening parenthesis, and the italic <i>x</i> does not collide with the superscript.</li>
<li><b>Adobe Caslon Pro (middle) and Adobe Garamond Pro (bottom):</b> less suited. The strongly sloped italics of Caslon and Garamond make the ascender of the italic <i>f</i> collide with the opening parenthesis. Also the italic <em>x</em> is too close to the superscript.</li>
</ul>
</div>
</div>
<div class="clearfloat"></div>
<p>Here are some recommendations concerning typefaces that are suited for mathematics-heavy texts:
<ul>
<li><div id="hyperlinks"><i>Nature</i> homepage:<br /><a href="https://www.nature.com/" target="_blank">www.nature.com</a></div>Minion (from Adobe, was used, e.g., by <em>Nature</em> and is still used by the <i>Journal of Neuroscience</i>): includes Greek letters and some mathematical symbols, its italics are moderately sloped.</li>
<li>Palatino Linotype: bundled with Microsoft Windows, includes Greek letters and some mathematical symbols.</li>
<li>Times New Roman: bundled with Microsoft Windows and macOS, includes Greek letters and some mathematical symbols.</li>
<li>Meta Pro (from FontShop), suited for headlines, includes Greek letters and some mathematical symbols, its italics are moderately sloped.</li>
</ul>
</p>
<p>Be careful when using sans-serif typefaces (like Arial) for mathematical texts. Some characters (e.g., uppercase <i>I</i> and lowercase <i>l</i>) look virtually identical in many sans-serif typefaces. This would make the respective variables indistinguishable in mathematical formulas.</p>
<div id="hyperlinks" style="margin-top: 3px;"><a href="https://github.com/bBoxType/FiraGO/releases" target="_blank">
FiraGO</a> and <a href="https://github.com/firamath/firamath/releases" target="_blank">Fira Math</a> on GitHub,
<a href="https://github.com/IBM/plex/releases" target="_blank">IBM Plex</a> font families on GitHub,
<a href="https://fonts.adobe.com/fonts/ff-meta" target="_blank">Meta Pro</a> on Adobe Fonts.
</div>
<p>Sans-serif typefaces that are suited for mathematical typesetting are Fira Sans/FiraGO and the accompanying Fira Math, IBM Plex Sans, and Meta Pro:
with these fonts, characters like <i>I</i>, <i>l</i>, and <i>1</i> (numeral one) are clearly distinguishable.</p>
<div class="figure">
<div class="picture">
<img src="images/examples/nature_minion_whitney.gif" alt="Typography of the journal "Nature"" width="210" height="210" border="0" class="picture_border"/>
</div>
<div class="caption">
Former typography of the journal <i>Nature</i>: <a href="https://www.typography.com/fonts/whitney/" title=""whitney" typeface by hoefler & frere-jones" target="_blank">Whitney</a> (by Hoefler & Co.) as the headline font; <a href="https://fonts.adobe.com/fonts/minion-3" target="_blank">Minion Pro</a> (by Adobe) as the text font.
</div>
</div>
<h2>
<span class="whiteOnRed header-box">Tip 2</span><br />
Choosing a suitable font size
</h2>
<p class="motto">Smaller may be better.</p>
<p>A common misperception concerning font sizes is that a larger size will make a text more legible. Actually, larger font sizes can reduce legibility. This is because we do not read texts letter by letter but rather process entire words, or even groups of words, at once. A larger font size makes fewer letters fit into the focus area of the human eye, thereby slowing down reading.</p>
<p>At the same time, academic texts often feature superscripts and subscripts—and maybe even nested superscripts. In this case, the font size becomes smaller with each level. Hence, the baseline font size should not be too small.</p>
<p>As a rule of thumb, I would advise to use a font size of 11 pt for body text.</p>
<h2>
<span class="whiteOnRed header-box">Tip 3</span><br />
Choosing a suitable line width
</h2>
<p class="motto">Shorter is usually better.</p>
<p>When looking at newspapers, magazines, and books, you will realize that either the page size is much smaller than standard paper formats for computer printers (many books are smaller than A4 or Letter paper), or the text area is broken up into several columns. This is because shorter lines tend to increase legibility: At the end of each line, our eye has to travel back left to the beginning of the next line. Finding the beginning of the next line is easier with shorter lines.</p>
<p>Moreover, relatively short lines even on relatively large paper give the reader (auch as reviewers or thesis advisors) sufficiently large margins that they can use for annotations.</p>
<h2>
<span class="whiteOnRed header-box">Tip 4</span><br />
Choosing a suitable line spacing
</h2>
<p class="motto">More is—usually—better.</p>
<p>Moany academic texts feature footnotes, leading to a large number of superscripts in the text. Mathematical in-line formulas also frequently include superscripts and subscripts, calling for <em>enlarged</em> line spacing compared to nonacademic texts.
<p>As a general rule, one should rather use a line spacing that is too large than too narrow.</p>
<div class="figure" style="width: 88%;">
<div style="display: table-row;">
<img src="images/examples/line_spacing_JEDC.gif" alt="Typography of the journal "Nature"" class="picture_border" style="width: 100%;" />
</div>
<div class="caption">
A sample from the <i>Journal of Economic Dynamics and Control</i>: Insufficient lince spacing makes descenders of a line (like the “p” in “produced”) overlap with superscripts in the subsequent line. To avoid such irrgular spacing, (a) increase the general line spacing and (b) use display formulas instead on in-line formulas for expressions that include multiple levels of subscripts or superscripts.
</div>
</div>
<div class="figure" style="width: 88%;">
<div class="picture"<div style="display: table-row;">
<img src="images/examples/line_spacing_EJ.gif" alt="Typography of the "Economic Journal"" class="picture_border" style="width: 100%;" />
</div>
<div class="caption">A sample from the <i>Economic Journal</i>: The lince spacing was chosen to provide sufficient space so that superscripts and subscripts do not collide even in the presence of multiple formulas in consecutive lines.
</div>
</div>
</p>
<div id="hyperlinks" style="margin-top: 3px;">See, for instance, the <a href="https://apastyle.apa.org/style-grammar-guidelines/paper-format/professional-annotated.pdf" target="_blank">sample paper</a> from the American Psychological Association’s <a href="https://apastyle.apa.org/" target="_blank">APA Style</a> and an <a href="https://apastyle.apa.org/style-grammar-guidelines/paper-format/line-spacing" target="_blank">associated blog entry</a>.
</div>
<p>However, there exists a custom to require students to format their theses and authors to submit their manuscripts “double-spaced” or something similar. This is clear overkill and leads to an ugly page layout. The demand for “double spacing” is usually accompanied by a demand for too large font sizes and too wide lines. You should avoid this whenever possible.</p>
<p>Those advocating double spacing frequently argue that it prodives supervisors or reviewers with the space needed to insert comments and annotations. This is achievable, however, in an aesthetically much more pleasing and for the reader more comfortable way: reduce the line width—and simultaenously the line spacing—to create large (outer) margins that readers can use for their annotations.
<h2>
<span class="whiteOnRed header-box">Tip 5</span><br />
Use style sheets
</h2>
<p class="motto">Styles help you achieve consistent formatting of elements of identical type, and they simplify your life.</p>
<p>One feature of the open-source typesetting system LaTeX is that it induces authors to reason about the structure of their texts. This is because in LaTeX, you enter formatting commands manually, such as:</p>
<p class="inputpar">\section{A First-Level Headline}<br />
\subsection{A second-level headline}<br />
This is the body text of the \emph{first} subsection.</p>
<p class="inputpar">\subsection{The next second-level headline}<br />
This is the body text of the \emph{second} subsection.</p>
<p>LaTeX then takes care of formatting all segments of the same type (say, <span class="input">\section</span>) in a consistent way: same font, same font size, same font weight, etc. Importantly, it also takes care of consistent spacing, that is, in front of each <span class="input">\section</span> there is a certain amount of white space, in front of each <span class="input">\subsection</span> there is a little less white space, etc.</p>
<p>Using styles and creating custom ones is also possible in Word & Co., of course. You should definitely make use of this possibility! Here is why:</p>
<ul>
<li>It induces you to deliberate about the structure of your text.</li>
<li>It results in consistent formatting of all elements to which a particular style has been applied. This turns out to be especially helpful when adjusting the formatting: all you need to do is to change the style once, and the formatting of all elements set in the respective style is updated automatically.</li>
<li>Most word processing softwares have a feature to create a table of contents. The success of this feature depends on the consistent application of style sheets, because the feature accesses the information contained in these style sheets to determine what belongs in the table of contents and what doesn’t. For instance, when creating a table of contents in Word that lists the first two hierarchical levels, everything labeled as <span class="input">Heading 1</span> and <span class="input">Heading 2</span> will be included.</li>
</ul>
</div><!-- end of col-main -->
<div class="col-left">
<div style="margin-left: -7px;">
<object style="width: 100%; height: 120px; padding-left: var(--text-margin-left); padding-top: var(--text-margin-top); position: relative;" data="logo.html">
Your browser does not support the object tag.
</object>
</div>
<div style="z-index: 4; opacity: 0.01;">
<a href="index.html" style="display: block;">
<div style="margin-top: -120px; height: 120px;">
</div>
</a>
</div>
</div><!-- end of col-left -->
<div id="logo-background" class="col-left-bg">
</div>
<div class="col-nav">
<p class="topic-box" style="border-top: 1px solid var(--spot-color);">
<b><a href="criteria.html">What’s the Problem?</a></b><br />
Complex Hierarchies
</p>
<p class="topic-box">
<b>Beauty Tips</b><br />
Seriously Elegant
</p>
</div><!-- end of navigation -->
<div class="col-right">
<p class="topic-box" style="border-top: 1px solid var(--spot-color);">
<b>LaTeX/XeLaTeX Templates</b>
</p>
<p class="topic-box">
<b><a href="https://github.com/HolgerGerhardt/TeXTemplates/blob/master/Template_Dissertation.pdf" target="_blank">Long-Form Texts</a></b><br />
Articles, dissertations, bachelor’s/<wbr>master’s theses
</p>
<p class="topic-box">
<b><a href="https://github.com/HolgerGerhardt/TeXTemplates/blob/master/Template_Presentation_4-3.pdf" target="_blank">Presentations</a></b><br />
Talks, lecture slide
</p>
<p class="topic-box">
<b><a href="https://github.com/HolgerGerhardt/TeXTemplates/blob/master/Template_Poster.pdf" target="_blank">Posters</a></b><br />
Conference posters, exhibition posters
</p>
</div><!-- end of col-right -->
</div><!-- end of outer-box -->
</body>
</html>