-
Notifications
You must be signed in to change notification settings - Fork 2
/
fontstack.html
208 lines (161 loc) · 19.9 KB
/
fontstack.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
<!DOCTYPE html>
<html lang="de" prefix="og: http://ogp.me/ns#">
<!--
Hallo Fremde:r,
schön, dass du dich umschaust! Falls du Fragen hast oder wissen
möchtest, wie bestimmte Sachen auf meiner Website funktionieren,
schreib doch einfach an postfach2b [ät] web.de oder sende einen
Post an @charakterziffer@typo.social.
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Statt Webfonts ein Fontstack // @cz+</title>
<link href='bestand/style.css' rel='stylesheet'>
<link href="bestand/czSlab.woff2" rel="preload" as="font" type="font/woff2" crossorigin>
<link href="https://charakterziffer.github.io/rss.xml" rel="alternate" type="application/rss+xml" title="@cz+ Blogartikel">
<link rel="icon" href="/bestand/favicon.png">
<link rel="apple-touch-icon" href="/bestand/touchicon.png">
<meta name="theme-color" content="#228811">
<meta name="color-scheme" content="light dark">
<meta name="description" content="Wenn ein Website-Text nicht unbedingt eine bestimmte Schrift haben muss, dann tut es vielleicht auch eine gut gewählte Systemschrift.">
<meta name="author" content="Gerhard Großmann, postfach2b [ät] web.de">
<meta name="keywords" content="Gerhard Großmann, Regensburg, Hohenfels, charakterziffer, Blog, Twitter, Mastodon">
<meta name="robots" content="index, follow">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="referrer" content="strict-origin">
<style> /* QR-Code mit URL für Ausdrucke, siehe smashingmagazine.com/2013/03/tips-and-tricks-for-print-style-sheets/ */
@media print { header:after {
content: url('https://chart.googleapis.com/chart?cht=qr&chs=110x110&chl=https://charakterziffer.github.io/fontstack.html&choe=UTF-8');
position: absolute; right: .5em; top:.2em; z-index:-1; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } </style>
<meta property="og:image" content="https://charakterziffer.github.io/bestand/cz200x200.jpg">
</head>
<body>
<header>
<a title="Zur Startseite" href="https://charakterziffer.github.io/"><img src="https://charakterziffer.github.io/bestand/favicon.png" width="59.8" height="59.8" alt="">@charak<br>terziffer</a>
<div>
<form id="suchform" method="GET" action="https://duckduckgo.com/" onsubmit="javascript:document.getElementById('q').value = document.getElementById('keyword').value + ' site:charakterziffer.github.io'">
<input type="text" id="keyword" placeholder="Suche mit DuckDuckGo" aria-label="Seite extern durchsuchen mit DuckDuckGo">
<input type="hidden" id="q" name="q">
<input type="hidden" name="kl" value="de-de">
<input type="hidden" name="kj" value="281">
<input type="hidden" name="kx" value="666">
<input type="hidden" name="k9" value="281">
<input type="hidden" name="kaa" value="839">
<input type="hidden" name="ka" value="Source Sans Pro">
<input type="submit" value="🔍" aria-label="Suchen">
</form>
<nav class="no-hyphens no-print"><ul>
<li><a href="/archiv.html">Archiv</a></li>
<li><a href="/extra/index.html">Extra</a></li>
<li><a href="/rss.xml">RSS</a></li>
<li><a href="/index.html#impressum">Impressum</a></li>
</ul></nav>
</div>
</header>
<main>
<article>
<time datetime="2024-09-05">Do, 5. Sept. 2024</time>
<h1>Statt Webfonts ein Fontstack</h1>
<style>
/* Spezifischer Selektor verhindert Styling auf der Startseite */
body:has(header > a[title="Zur Startseite"]) { font-family: Seravek, 'Source Sans Pro', source-sans-pro, 'Myriad Pro', Myriad, 'Segoe UI', 'Open Sans', 'Noto Sans', 'Source Sans 3', sans-serif; }
/* Source Sans 3 aktiviert Webschrift, darum in der Liste nach hinten gestellt */
</style>
<p>Im <a href="webfont-vorteile.html">vorigen Blogartikel</a> habe ich beschrieben, warum ein Webfont für wiedererkennbares Design und Konsistenz sorgt. Die Nachteile einer extra Schriftdatei (Performance, Layout-Verschiebungen) lassen sich mit etwas Geschick vermeiden.</p>
<p>Wo eine auffällige oder ganz bestimmte Schrift weniger wichtig ist, könnte man allerdings auf einen Webfont verzichten. Eine praktische Entscheidungshilfe bietet der Artikel <a href="https://david-gilbertson.medium.com/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae">Web fonts: When you need them, when you don’t</a> von David Gilbertson. Für meine Grundschrift <em>Source Sans</em> hier im Blog möchte ich das mal genauer untersuchen.</p>
<h2 id="eingeschränkte-auswahl-wenig-gemeinsamkeiten">Eingeschränkte Auswahl, wenig Gemeinsamkeiten</h2>
<p>Wenn ich keine Webschrift einbette, kann ich nur die Schriften anzeigen lassen, die auf dem Endgerät des Nutzers installiert sind („Systemfonts“). Welche das genau sind, lässt sich nur mit einer gewissen Wahrscheinlichkeit sagen – immerhin können Nutzer eigene Schriften installieren oder vorhandene löschen. In der Regel liefern Betriebssysteme bestimmte Schriften vorinstalliert mit, auf die ich mich verlassen kann.</p>
<p>Mitgelieferte <a href="https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows">Schriften von Windows</a> sind zum Beispiel Calibri, Palatino und Segoe UI; unter den <a href="https://developer.apple.com/fonts/system-fonts/">Schriften auf MacOS</a> sind San Francisco, Hoefler Text und Helvetica. Recht klein ist die Auswahl von <a href="https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml">Schriften bei Android</a> <em>(Info veraltet)</em> mit unter anderem Roboto, NotoSerif und Source Sans Pro. Mit den <a href="https://docs.google.com/spreadsheets/d/1kbxC3UyGTzpA9aOEJD-GYH0uHTops5VSEb8jKKD9Wwc/edit?gid=1220071513#gid=1220071513">Schriften auf Linux-Systemen</a> ist es noch schwieriger, weil es bei den unterschiedlichen Varianten wenige Gemeinsamkeiten gibt, wie zum Beispiel Nimbus Sans, Bitstream Charter oder DejaVu Serif.</p>
<p>Vor Jahren gab es sogenannte <a href="https://www.awayback.com/index.php/2010/02/03/revised-font-stack/">„web-safe fonts“</a> – einzelne Schriften, die mit 99 prozentiger Verbreitung praktisch überall verfügbar waren (Arial, Times [New Roman], Georgia, Verdana). Spätestens seit sich Android-Smartphones durchsetzen, gibt es jedoch <a href="https://pimpmytype.com/web-safe-fonts/">keine einzelne Schrift mehr</a>, die fast überall verfügbar ist.</p>
<h2 id="humanistische-sans-für-optimale-lesbarkeit">Humanistische Sans für optimale Lesbarkeit</h2>
<p>Als Grundschrift für längere Artikel bevorzuge ich eine Schrift, die eine gute Lesbarkeit bietet. Ich setze darum weniger auf geometrische oder rationale/statische Schriften, sondern bevorzuge humanistische/dynamische Schriften mit offenen Buchstaben und einer lebhaften Formensprache. Sehr gut erklärt <a href="https://pimpmytype.com/font-matrix/">Oliver Schöndorfer diese Unterscheidung (engl.)</a>. Wegen des moderneren Flairs suche ich eher Sans-Serif-Schriften (ohne „Füßchen“ an den Strichenden).</p>
<figure><img src="material/schriftform.png#invert" style="border: 1px solid var(--grau-matt);" alt="Das Testwort „Sango“ jeweils in einer geometrischen, rationalen und dynamischen Sans-Serif-Schrift. Die entscheidenden Unterschiede sind grün markiert." />
<figcaption><b>Geometrische Schriften</b> haben scheinbar konstruierte Buchstaben, die auf Grundformen wie dem Kreis beruhen. Sie sind oft monolinear, zeigen also wenig Unterschiede in der Strichstärke. Beispielschrift: Outfit.<br />
In <b>rationalen Schriften</b> sind Buchstabenöffnungen eher eng, Unterschiede in der Strichstärke betonen die Senkrechte (schwer zu sehen bei Sans-Serif-Schriften wie der gezeigten Nimbus Sans).<br />
Dagegen haben <b>dynamische Schriften</b> eher offene Buchstabenformen und die Betonung zwischen dünnen und dicken Strichstärken liegt diagonal (Beispiel: Lucida Sans).</figcaption>
</figure>
<p>Die Aufgabe ist nun also, für die häufigsten Betriebssysteme jeweils die passendste, vorinstallierte Schrift zu finden. So ähnelt sich der ungefähre Charakter meiner Grundschrift über verschiedene Systeme hinweg – selbst wenn ein Windows-Anwender meine Artikel in einer anderen Schrift angezeigt bekommt als jemand mit einem Apple-Computer.</p>
<h2 id="fontstack-eine-schriftliste-geordnet-nach-priorität">Fontstack: eine Schriftliste, geordnet nach Priorität</h2>
<p>Aus dieser Auswahl ähnlicher Schriften stelle ich anschließend eine geordnete Liste zusammen, meinen <em>Fontstack</em>. Wenn ich diese Liste in mein CSS einfüge (den Gestaltungsvorgaben meines Blogs), erscheint jedem Nutzer diejenige Schrift, die in der Liste als erstes auf seinem System verfügbar ist. Die Reihenfolge ist also wichtig! Man sortiert am besten von der Lieblingsschrift zu den guten Alternativen bis schließlich zur akzeptablen Behelfslösung. Darum benötige ich für ein Betriebssystem nicht drei oder vier passende Schriften – es wird eh nur die erste davon verwendet. Ein sehr guter <a href="https://zeichenschatz.net/typografie/css-font-stack-alternative-schriften-im-webdesign-klug-einsetzen/">Artikel zu Fontstacks</a> (deutsch, ebenfalls von Oliver Schöndorfer) betont, dass ein sorgfältig gebauter Fontstack sogar bei Verwendung einer Webschrift von Nutzen sein kann.</p>
<p>Zu Zeiten der <em>websafe fonts</em> waren Fontstacks weit verbreitet. Typische Listen waren zum Beispiel <code>'Helvetica Neue', Helvetica, Arial, 'Nimbus Sans', sans-serif</code> für eine statische Sans-Serif-Schrift; oder <code>'Palatino Linotype', Palatino, 'URW Palladio L', 'Bookman Old Style', Georgia, serif;</code> für eine klassische Serifenschrift.</p>
<p>Ein Projekt, das diese Tradition mit Blick auf Dateigröße und Ladezeit von Webschriften wieder aufleben lässt, ist <a href="https://modernfontstacks.com/">Modern Font Stacks</a>. Dort habe ich mir Inspiration geholt, war aber mit ihrem humanistischen Fontstack nicht besonders zufrieden.<a href="#note1"><sup id="ziffer1">[1]</sup></a></p>
<h2 id="meine-schrift-auswahl">Meine Schrift-Auswahl</h2>
<p>Sehr gut wäre natürlich, wenn meine jetzige <em>Source Sans</em> weiterhin angezeigt wird, ohne dass ich sie als Webschrift laden müsste. Zum Glück ist sie auf vielen Android-Systemen sogar installiert. Eine noch bessere Variante ist mein heimlicher Liebling <em>Seravek</em>, ein Systemfont von Apple. Fehlen noch passende Alternativen für Windows und Linux. Nach ein wenig Recherche habe ich mich für folgende Schriftliste entschieden: <code>Seravek, 'Source Sans 3', 'Source Sans Pro', source-sans-pro, 'Myriad Pro', Myriad, 'Segoe UI', 'Open Sans', 'Noto Sans', sans-serif;</code></p>
<figure><img src="material/fontstack.png#invert" alt="Der Ausdruck „Rafgenduks, 1893 mit Hocker?“ in den verschiedenen Schriften meines Fontstacks. Es gibt Unterschiede bei den Ziffern und beim kleinen g, ansonsten sehen sich die Schriften sehr ähnlich." />
<figcaption>Du siehst kaum Unterschiede zwischen den ausgewählten Schriften? So soll es sein!</figcaption>
</figure>
<p><code>Seravek</code> ist mein Favorit, kommt aber vorinstalliert nur auf iOS und macOS (immerhin seit 2013).</p>
<p><code>Source Sans 3</code> und <code>Source Sans Pro</code> entsprechen meiner jetzigen Grundschrift. Ich nenne sie in meinem Fontstack sehr früh, falls jemand die Schriften manuell auf seinem System installiert hat. Mit <code>source-sans-pro</code> wähle ich die gleiche Schrift auf Android-Betriebssystemen, also auf sehr vielen Smartphones und Tablets.</p>
<p><code>Myriad Pro</code> bzw. <code>Myriad</code> kommt/kam zusammen mit den Programmen <em>Adobe PDF Reader</em> und der <em>Adobe Creative Suite</em>. Sie könnte also auf einigen Geräten vorhanden sein und ist eine wirklich schöne, klare Schrift.</p>
<p><code>Segoe UI</code> ist Microsofts Interpretation der Myriad (bzw. Frutiger) und seit 2006 als Schrift der Benutzeroberfläche ein elementarer Bestandteil des Windows-Betriebssystems.</p>
<p>Spätestens an dieser Stelle im Fontstack sind alle Mac- und Windows-Nutzer versorgt sowie ein Großteil der Android-Geräte. Mal sehen, was es in der sehr diversen Linux-Landschaft zu finden gibt.</p>
<p><code>Open Sans</code> und <code>Noto Sans</code> sind laut der <a href="https://docs.google.com/spreadsheets/d/1kbxC3UyGTzpA9aOEJD-GYH0uHTops5VSEb8jKKD9Wwc">Liste von Modern Font Stacks</a> immerhin auf drei bzw. acht der zwölf häufigsten Linux-Distributionen verbreitet. Ich nenne die seltenere <em>Open Sans</em> zuerst, weil sie im Gegensatz zur <em>Noto Sans</em> ein doppelstöckiges g besitzt und Ziffern unterschiedlicher Breite.</p>
<p>Mit der allgemeinen Bezeichnung <code>sans-serif</code> zum Schluss sorge ich dafür, dass wenigstens eine Sans-Serif-Schrift angezeigt wird (DejaVu Sans, Inter, Arial), falls auf dem Gerät keine der zuvor genannten Schriften vorhanden sein sollte.</p>
<h2 id="was-denn-nun-fontstack-oder-webfont">Was denn nun: Fontstack oder Webfont?</h2>
<p>Noch bin ich unentschlossen, ob ich mich von der <em>Source Sans</em> als meine Grundschrift verabschieden soll. Testweise habe ich sie in diesem Artikel übrigens weggelassen und stattdessen den angedachten Fontstack verwendet. Habt ihr die andere Grundschrift bemerkt? Was meint ihr zu den ausgewählten Schriften meines Fontstacks? Könnt ihr dafür eine weitere dynamische Sans-Schrift empfehlen (ansprechender, weiter verbreitet)? Kommentiert gern unter diesen Artikel!</p>
<p>Wenn man eine Webschrift einsetzt (und sie geladen wird), weiß man mit großer Sicherheit, wie sie bei den Leser:innen erscheinen wird. Legt man dagegen eine ganze Liste fest, muss man auch mit den Differenzen einzelner Schriften umgehen – mehr dazu <a href="fontstack-probleme.html">im folgenden Blogpost</a>.</p>
<hr />
<p><b id="note1">[1] Die humanistische Font-Liste</b> von <em>Modern Font Stacks</em> ist <code>Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;</code>. Für eine Leseschrift haben mir Gill Sans und Ubuntu viel zu eigenwillige Buchstabenformen, vor allem fehlende Endstriche bei b, d, … Bei der Gill Sans ist mir außerdem die x-Höhe zu niedrig – unschön in einem deutschen Text mit vielen Großbuchstaben. Statt Calibri und DejaVu Sans gibt es besseres. <a href="#ziffer1">[↑]</a></p>
<p style="margin-bottom:2.25em;">---<br>
<i>Rubrik(en):</i> <a href="archiv.html?methodik">#methodik</a> <a href="archiv.html?typografie">#typografie</a> </p>
</article>
<section id="kommentare">
<h2>2 Kommentare</h2>
<time datetime="2024-09-05 17:39">5.9.2024, 17:39 Uhr</time>
<h3 id="k1"><a href="#k1" style="color:inherit;">#1</a>
<a href="http://www.juergensiebert.de">Jürgen Siebert</a>
</h3>
<p>Zur Seravek ist noch zu ergänzen, dass sie seit mehreren Mac-OS-Generationen zu den „Schriften zur Dokumentunterstützung“ gehören. Diese müssen bei der Installation des Betriebsystems eigens geladen werden. Apple: „Diese Schriften stehen nur in Dokumenten zur Verfügung, die die jeweilige Schrift bereits verwenden, oder in Apps, die die Schrift namentlich anfordern. Bei einigen davon handelt es sich um ältere Schriften, die in früheren Versionen von macOS oder in Apple-Apps enthalten waren.“</p>
<hr>
<time datetime="2024-09-06 11:26">6.9.2024, 11:26 Uhr</time>
<h3 id="k2"><span class="hinterlegt"><a href="#k2" style="color:inherit;">#2</a>
<a href="https://charakterziffer.github.io/">Gerhard Großmann</a>
</span></h3>
<p>Danke dir, Jürgen!<br> Inzwischen habe ich dazu eine Diskussion von 2016 gefunden, wo ein Nutzer das <a href="https://discussions.apple.com/thread/7564632">Verschwinden der Seravek</a> beklagt. Scheinbar lässt sich diese Schrift nur noch im Safari Reader verwenden. Ob die Leute hinter <i>Modern Font Stacks</i> das getestet haben?<br> Zur Not könnte ich auf die Kohinoor Bangla ausweichen – wobei ich da noch nichts bezüglich Mediävalziffern, Versal-Eszett, Pfeile und hochgestellte Ziffern weiß – und eine Kursive scheint auf jeden Fall zu fehlen, autsch … Ich muss wohl noch ein bisschen recherchieren.</p>
<hr></section>
<div class="no-print">
<h2 id="kommentieren">Artikel kommentieren</h2>
<p>Ich lege Wert auf eine respektvolle Diskussion und überprüfe jeden Kommentar, bevor er hier erscheint. Beleidigende oder unsachliche Beiträge ignoriere ich mit großem Vergnügen. Alle Angaben sind freiwillig.</p>
<form name="kommentarformular" id="kommentarformular" method="post" action="https://www.onlex.de/_formmailer.php?username=charakterziffer" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" onsubmit="javascript:document.getElementById('aktuelles-datum').value = new Date().toLocaleString('de-DE')">
<input type="hidden" name="post_id" value="/fontstack">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="3">
<div>
<label for="name">Name</label>
<div><input name=" name" id="name" type="text" size="25" spellcheck="false">
<i>(Pseudonym möglich)</i></div>
<!-- fügt in der Onlex-Mail eine Leerzeile davor ein -->
</div>
<div>
<label for="mail">E-Mail</label>
<div><input name="mail" id="mail" type="email" size="25" autocomplete="email" spellcheck="false" autocapitalize="off">
<i>(wird nicht veröffentlicht)</i></div>
</div>
<div>
<label for="link">Website</label>
<div><input name="link" id="link" type="url" size="25" spellcheck="false" onblur="javascript:if ( (this.value!='') && !(this.value.match(/^https?:\/\//g)) ) { this.value = 'http://' + this.value;}"></div>
<!-- Beim Verlassen des Feldes: Falls Webadresse nicht leer und nicht mit „http(s)://“ beginnt, dann ergänze „http://“. So bekommt der Nutzer wegen type="url" keine Fehlermeldung, auch wenn er das http:// vergisst. -->
</div>
<div>
<label for="comment">Kommentar</label><br>
<textarea name="comment" id="comment" rows="8" cols="50" required spellcheck="true"></textarea>
</div>
<input type="hidden" name=" --- Hinweis" value="Mehrzeilige Kommentare in 'Apostrophe' einschließen und um </р><р> ergänzen.">
<input name="onlex_password" id="onlex_password" type="hidden" value="5">
<div><input name="submit" id="submit" type="submit" value="Veröffentlichen"></div>
</form>
<p class="no-hyphens" style="font-size:0.9em;line-height:1.667em;">Formatierungen mit HTML sind möglich, z.<small> </small>B. <em><em>betont</em></em>, <strong><strong>hervor­gehoben</strong></strong> oder <code><code>Quelltext</code></code>. Außerdem Verlinkungen (<a href="http://verlinkte-website.de">Linktext</a>) und Bilder (<img src="http://pfad-zum.de/bild.jpg" alt="Bildbeschreibung">).</p>
</div> <!-- .no-print -->
<p style="width:48%; float:left; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="webfont-vorteile.html">← Webfonts sind eine gute Sache</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="fontstack-probleme.html">Probleme mit Fontstacks →</a></p>
<p style="clear:both;" class="no-print"></p>
</main>
<aside class="no-hyphens">
<p>Hallo, ich bin <a href="javascript:new%20Audio('bestand/aussprache.mp3').play()" class="anhoeren" title="Aussprache anhören">Gerhard Großmann</a> aus Hohen­fels<span class="no-print"> (siehe <a href="/index.html#impressum">Impres­sum/Daten­schutz</a>)</span>. Über Fragen, Kritik und Anmer­kungen freue ich mich sehr – z.<small> </small>B.<span class="no-print"> via <a href="https://typo.social/@charakterziffer" target="_blank" rel="noopener noreferrer">Masto­don</a> oder</span> per Mail an <em>postfach2b [ät] web.de</em>.</p>
<p class="no-print">Mein <a href="/rss.xml" class="icon-rss">RSS-Feed</a> informiert immer pünkt­lich über neue Artikel. Alle bis­herigen Ein­träge finden sich <a href="/archiv.html">im Archiv</a>.</p>
<p>Die Texte in diesem Blog stehen unter einer <a rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de" class="icon-ccbysa">Crea­tive-Commons-Lizenz 4.0 (Deutsch­land)</a> mit Namens­nennung und Weiter­gabe unter gleichen Bedin­gungen.</p>
</aside>
<script src="https://www.onlex.de/_counter.php?username=charakterziffer" defer></script>
</body>
</html>