-
Notifications
You must be signed in to change notification settings - Fork 2
/
fontstack-probleme.html
205 lines (157 loc) · 19.3 KB
/
fontstack-probleme.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
<!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 @[email protected].
Weiterhin viele schöne Entdeckungen!
-->
<head>
<meta charset="UTF-8">
<title>Probleme mit Fontstacks // @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="Welche vielen Möglichkeiten Webfonts bieten, erkennt man am besten, wenn man zeitweise darauf verzichtet.">
<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-probleme.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-13">Fr, 13. Sept. 2024</time>
<h1>Probleme mit Fontstacks</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', 'PT Sans', 'Source Sans 3', sans-serif; }
/* Source Sans 3 aktiviert Webschrift, darum in der Liste nach hinten gestellt */
</style>
<p>Im vorigen Artikel über <a href="fontstack.html">Fontstacks</a> habe ich mir mögliche Systemschriften zusammengesucht, welche die Textschrift <em>Source Sans</em> meines Blogs ersetzen könnten. Nutzer:innen bekommen aus dem Fontstack jeweils die erste Schrift angezeigt, die auf ihrem Gerät verfügbar ist.</p>
<p>Ein <a href="fontstack.html#k1">Kommentar von Jürgen</a> machte mich aufmerksam, dass mein Favorit <em>Seravek</em> auf Apple-Systemen doch nicht so richtig vorinstalliert ist. So habe ich für macOS-Computer nachträglich die <em>PT Sans</em> ergänzt – an vorletzter Stelle, weil sie für mich weniger gut passt und vom Zeichenvorrat nicht so gut ausgebaut ist (keine Mediävalziffern, Pfeile, weitere Bruchziffern). Der schönen <em>Kohinoor Bangla</em> fehlt sogar die Kursive (und das Versal-Eszett) – als letzte Reserve für iOS passt sie für mich dennoch besser als die seelenlose Helvetica.</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." />
<img src="material/fontstack2.png#invert" alt="Gleiches Textbeispiel in zwei weiteren Schriften (PT Sans und Kohinoor Bangla)." />
<figcaption>Mein geplanter Fontstack aus Seravek, Source Sans 3, Source Sans Pro, source-sans-pro, Myriad Pro, Myriad, Segoe UI, Open Sans, Noto Sans, PT Sans und Kohinoor Bangla, dazu ergänzend sans-serif.</figcaption>
</figure>
<p>Auch für diesen Artikel habe ich meine Webschrift testweise deaktiviert. Wenn ich mich stattdessen auf ein ganzes Bündel an Systemschriften verlasse, ergeben sich ein paar Problemchen: Scheinbare Größenunterschiede, fehlende Zeichen und der Tracking-Schutz von Webbrowsern.</p>
<h2 id="unterschiedliche-schriftgrößen-angleichen">Unterschiedliche Schriftgrößen angleichen</h2>
<p>Eine Überraschung für Schrift-Laien: Je nachdem, wie eine Schrift gestaltet ist, erscheint sie größer oder kleiner – beim gleichen Zahlenwert für die Schriftgröße. Obwohl ich also eine fixe Größe für alle Schriften vorgebe, scheinen sich einige nicht daran zu halten. In meinem Font Stack sind die Unterschiede zwischen <em>Myriad Pro</em> und <em>Noto Sans</em> besonders auffällig, obwohl ich für beide die gleiche Schriftgröße festgelegt habe:</p>
<figure><img src="material/schriftgroessen.png#invert" alt="Vergleich zwischen der Schrift Myriad Pro und Noto Sans: Letztere wirkt ein bisschen größer, obwohl beide mit der gleichen Schriftgröße abgebildet sind." />
<figcaption>Bei gleicher Schriftgröße fällt die Noto Sans optisch größer aus. Damit sie gleich groß erscheint wie Myriad Pro, muss man sie um rund 10<small> </small>% verkleinern.</figcaption>
</figure>
<p>Wie groß eine Schrift wirkt, hängt vor allem von ihrer Mittelzone ab in der die Kleinbuchstaben stehen (Fachbegriff: x-Höhe). Weil Schriften unterschiedlich groß gestaltet ist, müsste ich für jede eine korrigierte Größe festlegen: Einmal 12 Punkt, dann 11,3 Punkt, 14 Punkt, … nur dann würde der Text in meinem Blog immer gleich groß erscheinen – unabhängig von der verwendeten Schrift.</p>
<p>Zum Glück gibt es dafür eine Lösung per CSS: <code>font-size-adjust</code>. Diese Eigenschaft wird seit Juli auch in den verbreiteten Browsern Chrome und Edge unterstützt (im Safari seit Frühjahr 2023, im Firefox schon seit 2008). Damit definiere ich, wie groß die x-Höhe in Bezug auf die Gesamthöhe eines Zeichens sein soll. Eine Schrift wird dann entsprechend angepasst; also verkleinert oder vergrößert bis die gewünschte x-Höhe erreicht ist.</p>
<p>Beispiel: Bei Myriad Pro beträgt die x-Höhe 0,484 <em>(Prozent der Zeichenhöhe)</em>, bei Noto Sans sind es 0,536<small> </small>%. Ich möchte, dass beide in der Größe meiner gewohnten Schrift <em>Source Sans</em> erscheinen, die eine x-Höhe von 0,486<small> </small>% besitzt (etwas mehr als Myriad, deutlich weniger als Noto Sans).</p>
<p>Zu meinem Fontstack ergänze ich im CSS also ein <code>font-size-adjust: 0.486;</code>. Wird einem Nutzer nun die Myriad Pro angezeigt, dann vergrößert der Browser sie ein bisschen. Auf Geräten mit Noto Sans wird diese ein ganzes Stück verkleinert. So entsprechen beide Schriften von der Größe her etwa der Source Sans.</p>
<p>Die verschiedenen x-Höhen habe ich übrigens nicht von Hand ausgemessen. Es gibt dafür eine Website, wo man sich für einzelne Schriften <a href="https://www.brunildo.org/test/xheight.pl">den Wert für font-size-adjust berechnen</a> lassen kann.</p>
<h2 id="nicht-vorhandene-zeichen-und-fehlende-funktionen">Nicht vorhandene Zeichen und fehlende Funktionen</h2>
<p>In meiner Webfont-Datei sehe ich genau, welche Zeichen vorhanden sind und welche Schriftfunktionen ich nutzen kann (siehe auch <a href="webfont-vorteile.html#alle-zeichen-sind-schon-da">Webfont-Vorteile</a>). Bei Systemfonts muss ich hoffen, dass sie alle benötigten Zeichen beinhaltet und ich sollte mich nicht auf spezielle Funktionen verlassen (z.<small> </small>B. alternative Zeichen, Kapitälchen, Schwungbuchstaben, …).</p>
<p>Fehlende Zeichen im Systemfont werden aus einer anderen Schrift ersetzt. Ob sich Pfeile (↑ →), Bruchzahlen (⅔ ⅛) oder ein Versal-Eszett (ẞ) dann gut in den Text einfügen oder ob sie unpassend herausstechen, kann ich nicht mehr beeinflussen.</p>
<p>Weiterhin kann ich nicht genau sagen, welche <em>Version</em> einer Schrift bei den Nutzer:innen installiert ist. Zum Beispiel gab es 2012 mit Windows 8 eine <a href="https://istartedsomething.com/20120302/segoe-ui-gets-a-subtle-facelift-in-windows-8/">Überarbeitung der Schrift Segoe UI</a> <em>(engl.)</em>. Nutzer:innen, die ein älteres Betriebssystem verwenden (eher unwahrscheinlich), bekommen zum Beispiel keine Mediävalziffern – diese Ziffernvariante mit Ober- und Unterlängen ist in der älteren Segoe UI nicht vorhanden.</p>
<p>Bei besonderen Fällen kann ich natürlich tricksen. Das habe ich zum Beispiel in meinem Artikel über <a href="graustufen.html">gleichmäßig wirkende Graustufen</a> gemacht. Da nur Spezialschriften ein mathematisches Zeichen für die neunte Wurzel enthalten, habe ich dieses Zeichen einfach als Grafik in den Text geschummelt: <svg width=".65em" height="1.1em" style="position:relative; top:.1em; left:.1em"><title>Neunte Wurzel</title><path d="M3.512 0C2.054 0 .935 1.14.935 2.637c0 1.48.88 2.497 2.438 2.497.739 0 1.398-.28 1.957-.82-.12 2-1.058 2.938-2.217 2.938-.54 0-.959-.22-1.339-.48l-.54.9c.46.32 1.02.6 1.919.6 1.918 0 3.396-1.4 3.396-4.335C6.55 1.479 5.37 0 3.512 0zm.02 1.02c.98 0 1.679.78 1.798 2.317-.599.64-1.118.86-1.718.86-.959 0-1.498-.66-1.498-1.58 0-.94.6-1.6 1.418-1.6zm5.658.7L5.634 16.922c-.08.42-.16.86-.24 1.28h-.08c-.1-.42-.2-.86-.34-1.28L2.658 10.01 0 11.191l.38.9 1.418-.64L4.795 20h1.258L10.39 1.72h-1.2z"></path></svg> – perfekt angepasst auf meine Webschrift <em>Source Sans</em>. Solch fauler Zauber fällt eher auf, wenn die Systemschrift nicht so gut zum Grafiksymbol passt.</p>
<p>Da kann ich dann ohne Webschrift nicht viel machen. Ich gebe halt ein Stück die Kontrolle ab, wie meine Texte bei den Leser:innen meines Blogs erscheinen.</p>
<h2 id="erhöhter-schutz-vor-fingerprinting">Erhöhter Schutz vor Fingerprinting</h2>
<p>Wogegen ich auch nicht viel machen kann, sind sichere Browsereinstellungen. Einige Websites wollen Besucher:innen möglichst genau identifizieren (für passende Werbung oder um Schwachstellen eines Systems auszunutzen). Für diese Identifizierung können Programmskripte über den Browser unter anderem feststellen, welche Schriftarten installiert sind. Was das bringt? Na, wenn ich weiß, dass auf einem Gerät die Schrift <em>Seravek</em> vorhanden ist, dann ist das Betriebssystem höchstwahrscheinlich von Apple. Findet das Skript <em>Segoe Fluent Icons</em>, handelt es sich vermutlich um ein sehr aktuelles Windows – diese Schrift wurde erst 2021 mit Windows 11 ausgeliefert.</p>
<p>Skripte können zudem prüfen, ob seltenere Schriften nachinstalliert wurden und wie eine bestimmte Schrift pixelgenau dargestellt wird. Das kann bei einen Nutzer so exakt sein, dass sich ein einmaliger „Fingerabdruck“ des Systems erstellen lässt. Dann ist es möglich, diesen Nutzer eindeutig zu identifizieren und über mehrere Websites zu verfolgen.</p>
<p>Wer solch ein <em>Fingerprinting</em> über Schriftarten verhindern möchte, kann seinen Webbrowser mit entsprechenden Erweiterungen ausstatten oder einen strengeren Trackingschutz aktivieren. Dann sind im Browser nur noch sehr wenige Schriften verfügbar – und eben keine mehr aus meinem Fontstack. Wobei es diese wenigen Nutzer:innen gewöhnt sein dürften, nur die üblichen Standard-Schriften zu sehen und vermutlich sogar Webschriften blockieren (diese können nämlich die eigene IP-Adresse verraten, wenn sie über einen Drittanbietern eingebunden sind, z.<small> </small>B. über Google Fonts).</p>
<h2 id="die-eigentliche-frage">Die eigentliche Frage</h2>
<p>Vermutlich schimmerte meine Unentschlossenheit in den letzten Blogartikeln durch. Genügt für die Lesetexte meines Blogs eine banale Systemschrift? Es geht um weniger Kontrolle, eine vermutlich schlechtere Gestaltung, scheinbar geringen Nutzer-Vorteilen, dem Wunsch nach Minimalismus … und irgendwie auch darum, ob ich mir über eine Designfrage zu viele Gedanken mache. Paul Renner hat seinem „Die Kunst der Typografie“ geschrieben (S. 220):</p>
<blockquote>
<p>„<!-- Wer seinen Farbengeschmack schult, wird nach einiger Zeit merken, daß er immer kritischer wird. Wenn er einen farbigen Stoff kaufen will, wird ihm gerade der teuerste am besten gefallen; das kann recht lästig werden. Er wird an allem etwas auszusetzen haben; denn -->[W]achsende Kennerschaft jeder Art macht anspruchsvoll. <!-- Aber er wird mehr als reichlich dadurch entschädigt werden, daß er nun in den Museen und in der Natur Schönheiten entdeckt, an denen er früher achtlos vorübergegangen ist. Er wird sie nicht nur kalt bewundernd entdecken, sondern von ihnen aufs tiefste beglückt werden. -->[…] Daß [man] auch gegen seine eigenen Leistungen immer kritischer wird, soll [einen] nicht verdrießen. Wenn man einmal anfängt, mit sich zufrieden zu sein, hat man wohl die höchste Sprosse seiner Leiter erklommen: man ist auf der Höhe; aber wer kann sagen, ob die Leiter hoch genug war?“</p>
</blockquote>
<p>Obwohl ich mich noch nicht zu einer Entscheidung gegen meine Textschrift <em>Source Sans</em> durchringen konnte, habe ich bei meinen Überlegungen doch einiges gelernt:</p>
<ul>
<li>Wie Webfonts eine bessere Performance bekommen</li>
<li>welche humanistischen Systemschriften es gibt</li>
<li>wie sie sich unterscheiden und wo sie verfügbar sind</li>
<li>warum <em>web-safe fonts</em> durch Android hinfällig geworden sind</li>
<li>wie optische Größenunterschiede bei Schriften bestimmt werden</li>
<li>und mit welchem CSS sie gleich groß erscheinen</li>
<li>welche Möglichkeiten ein Webfont generell mitbringt</li>
<li>und dass man nicht alles kontrollieren kann.</li>
</ul>
<p>Das ist doch eine ganze Menge! Ich hoffe, auch ihr habt bei dieser Erkundungsreise etwas Nützliches erfahren; über Kommentare freue ich mich wie immer sehr.</p>
<p>Übrigens habe ich mich vor über sechs Jahren schon mal <a href="https://charakterziffer.github.io/systemfonts.html">mit Systemfonts beschäftigt</a> und ob sie Webfonts ersetzen sollten.</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>
<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-probleme">
<input type="hidden" name="date" id="aktuelles-datum" value="">
<input type="hidden" name="nummer" value="1">
<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="fontstack.html">← Statt Webfonts ein Fontstack</a></p>
<p style="width:48%; float:right; text-align:right; margin:3.1em 0 1.1em;" class="no-hyphens no-print"><a href="erfundene-fakten-12.html">Das wird man ja wohl noch träumen dürfen! →</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>