-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbetter-fonts-on-linux.html
319 lines (306 loc) · 14 KB
/
better-fonts-on-linux.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
<!DOCTYPE html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>MacOS like Fonts on Manjaro/Arch Linux</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="./styles/output.css"
type="text/css"
media="screen"
/>
<script
defer
data-domain="aswinmohan.me"
data-api="/stats/api/event"
src="/stats/js/script.js"
></script>
</head>
<body>
<header class="flex items-center justify-between">
<p><a href="/">back to home</a></p>
<p>2020-Sep-11</p>
</header>
<article>
<h1>MacOS like Fonts on Manjaro/Arch Linux</h1>
<p>
Either you love gorgeous typography or just don’t care. If you are the
former read ahead on how to make the font rendering on your Linux look
just as awesome as that on macOS, else read on to find out what beauty
you have been missing.
</p>
<p>
I switched to a hackintosh for a while and fell in love with how
beautiful the typography was. After returning to Linux and some
fiddiling around I came across a not so ugly setup that looked close
enough to macOS. So if you want to make your Linux Distro a tad bit
typographically better, follow along.
</p>
<section>
<h2>Results</h2>
<p>
This is how the fonts look on the default installation of Manjaro
Linux.
<figure>
<img src="./assets/images/before_macosfont.png" />
<figcaption>
<h4>Search before font change</h4>
</figcaption>
</figure>
<figure>
<img src="./assets/images/wikipedia_beforefonts.png" />
<figcaption>
<h4>Wikipedia before font change</h4>
</figcaption>
</figure>
</p>
<p>
This is how they would look after we are done.
<figure>
<img src="./assets/images/after_macos.png" />
<figcaption>
<h4>Search after font change</h4>
</figcaption>
</figure>
<figure>
<img src="./assets/images/wikipedia_afterfonts.png" />
<figcaption>
<h4>Wikipedia after font change</h4>
</figcaption>
</figure>
</p>
</section>
<section>
<h2>Some Pointers</h2>
<p>
Rather than copy pasting everything on here, let’s try to
understand why the fonts on macOS looks better than the ones we have
on Linux.
</p>
<p>Fonts belong to certain types.</p>
<ul>
<li>
<code>sans-serif</code> : Well the sans fonts on your computer. The
regular plain fonts.
</li>
<li>
<code>serif</code> : The fonts that look like they came out of a
14th century Bible. You know with the curves and they look like
showoffs.
</li>
<li>
<code>monospace</code> : The typical code font. The ones where every
character is the same width.
</li>
</ul>
<p>
The reason fonts look way better on macOS is because Steve Jobs loved
typography, and he went the extra mile and licensed some great
typefaces for each font type, and recently Apple put in the extra
effort to make their custom fonts even better. Well fret not Linux has
some free fonts that are metric compatible(means they look awfully
similar), and better that we can substitute for fonts.
</p>
</section>
<section>
<h2>Installation</h2>
<p>
Step one is installing the fonts that look similar or better than the
ones on macOS. All the fonts that are used here can be found on the
Arch Repositories, and on Google Fonts. You are free to replace
everything with the ones you find great.
</p>
<ul>
<li>
<code>sans-serif</code> : tex-gyre-fonts, free alternative to
Helvetica and Arial and looks really really similar
</li>
<li>
<code>serif</code> : Libertinus Serif, suprisingly looks really
great
</li>
<li>
<code>monospace</code> : DM Mono from Google Fonts, for monospace
fonts that look great
</li>
<li>
<code>emoji</code> : noto-fonts-emoji, get some colorful emojis
</li>
</ul>
<p>
If you are using Manjaro or Arch here is the command to get all fonts
in one go.
</p>
<pre>
yay -S tex-gyre-fonts otf-libertinus noto-fonts-emoji
</pre>
</section>
<section>
<h2>Font Setup</h2>
<p>
Everything about fonts can be configured from a single file located at
<code>/etc/fonts/local.conf</code> if the file doesn’t exist
create it. You do require <code>sudo</code> for it.
</p>
<pre>
sudo nvim /etc/fonts/local.conf
</pre>
<p>After you are editing the file copy paste everything here.</p>
<pre>
<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>
<match target="font">
<edit name="autohint" mode="assign">
<bool>true</bool>
</edit>
<edit name="hinting" mode="assign">
<bool>true</bool>
</edit>
<edit mode="assign" name="hintstyle">
<const>hintslight</const>
</edit>
<edit mode="assign" name="lcdfilter">
<const>lcddefault</const>
</edit>
</match>
<!-- Default sans-serif font -->
<match target="pattern">
<test qual="any" name="family"><string>-apple-system</string></test>
<!--<test qual="any" name="lang"><string>ja</string></test>-->
<edit name="family" mode="prepend" binding="same"><string>Tex Gyre Heros</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>Helvetica Neue</string></test>
<!--<test qual="any" name="lang"><string>ja</string></test>-->
<edit name="family" mode="prepend" binding="same"><string>Tex Gyre Heros</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>Helvetica</string></test>
<!--<test qual="any" name="lang"><string>ja</string></test>-->
<edit name="family" mode="prepend" binding="same"><string>Tex Gyre Heros</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>arial</string></test>
<!--<test qual="any" name="lang"><string>ja</string></test>-->
<edit name="family" mode="prepend" binding="same"><string>Tex Gyre Heros</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>sans-serif</string></test>
<!--<test qual="any" name="lang"><string>ja</string></test>-->
<edit name="family" mode="prepend" binding="same"><string>Tex Gyre Heros</string></edit>
</match>
<!-- Default serif fonts -->
<match target="pattern">
<test qual="any" name="family"><string>serif</string></test>
<edit name="family" mode="prepend" binding="same"><string>Libertinus Serif</string></edit>
<edit name="family" mode="prepend" binding="same"><string>Noto Serif</string></edit>
<edit name="family" mode="prepend" binding="same"><string>Noto Color Emoji</string></edit>
<edit name="family" mode="append" binding="same"><string>IPAPMincho</string></edit>
<edit name="family" mode="append" binding="same"><string>HanaMinA</string></edit>
</match>
<!-- Default monospace fonts -->
<match target="pattern">
<test qual="any" name="family"><string>SFMono-Regular</string></test>
<edit name="family" mode="prepend" binding="same"><string>DM Mono</string></edit>
<edit name="family" mode="prepend" binding="same"><string>Space Mono</string></edit>
<edit name="family" mode="append" binding="same"><string>Inconsolatazi4</string></edit>
<edit name="family" mode="append" binding="same"><string>IPAGothic</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>Menlo</string></test>
<edit name="family" mode="prepend" binding="same"><string>DM Mono</string></edit>
<edit name="family" mode="prepend" binding="same"><string>Space Mono</string></edit>
<edit name="family" mode="append" binding="same"><string>Inconsolatazi4</string></edit>
<edit name="family" mode="append" binding="same"><string>IPAGothic</string></edit>
</match>
<match target="pattern">
<test qual="any" name="family"><string>monospace</string></test>
<edit name="family" mode="prepend" binding="same"><string>DM Mono</string></edit>
<edit name="family" mode="prepend" binding="same"><string>Space Mono</string></edit>
<edit name="family" mode="append" binding="same"><string>Inconsolatazi4</string></edit>
<edit name="family" mode="append" binding="same"><string>IPAGothic</string></edit>
</match>
<!-- Fallback fonts preference order -->
<alias>
<family>sans-serif</family>
<prefer>
<family>Noto Sans</family>
<family>Noto Color Emoji</family>
<family>Noto Emoji</family>
<family>Open Sans</family>
<family>Droid Sans</family>
<family>Ubuntu</family>
<family>Roboto</family>
<family>NotoSansCJK</family>
<family>Source Han Sans JP</family>
<family>IPAPGothic</family>
<family>VL PGothic</family>
<family>Koruri</family>
</prefer>
</alias>
<alias>
<family>serif</family>
<prefer>
<family>Noto Serif</family>
<family>Noto Color Emoji</family>
<family>Noto Emoji</family>
<family>Droid Serif</family>
<family>Roboto Slab</family>
<family>IPAPMincho</family>
</prefer>
</alias>
<alias>
<family>monospace</family>
<prefer>
<family>Noto Sans Mono</family>
<family>Noto Color Emoji</family>
<family>Noto Emoji</family>
<family>Inconsolatazi4</family>
<family>Ubuntu Mono</family>
<family>Droid Sans Mono</family>
<family>Roboto Mono</family>
<family>IPAGothic</family>
</prefer>
</alias>
</fontconfig>
</pre>
<p>
What this file does that is it creates aliases for the common fonts
used on the web and uses the metric compatible fonts that we have.
That way we have way better looking fonts.
</p>
<p>
After you have done all this, restart your computer to see the
changes.
</p>
</section>
<section>
<h2>Chrome</h2>
<p>If you are using chrome, you can do something more too.</p>
<ul>
<li>Goto Settings</li>
<li>Select Customize Fonts under Appearences</li>
<li>Set Standard to <code>Libertinus Serif</code></li>
<li>Set Serif to <code>Libertinus Serif</code></li>
<li>Set Sans-serif to <code>TeX Gyre Heros</code></li>
<li>Set Fixed-width to <code>Monospace</code></li>
</ul>
</section>
<section>
<h2>Interface Text</h2>
<p>
For Desktop Environments like Gnome and KDE, you could use
Tex-Gyre-Heros for the overall Helvetica look. I use Gnome 3.36 and
use <code>TeX Gyre Heros Regular 10</code> as my interface text.
</p>
<p>
That’s all set, and keep in mind this guide will be improved.
</p>
</section>
</article>
</body>
</html>