Verwendung des besten Ampersands Available

Avatar of Chris Coyier
Chris Coyier am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Ich mag einen der typografischen Tricks, die Mark Boulton in seiner Präsentation "Better Typography" verwendet, sehr. (Slideshow der Präsentation hier. Ungefähr Folie #109) Er schlägt vor, "das beste verfügbare Ampersand zu verwenden". Das bedeutet einfach, dass bei einigen Schriftarten das Ampersand-Zeichen etwas glanzlos sein kann und es eine große Verbesserung in Stil und Lesbarkeit bewirken kann, es durch eine andere Schriftart zu ersetzen. Sein (großartiges) Beispiel stammt von SimpleBits

simplebitsexample.png

Nun, das ist ein schönes Ampersand. Man könnte es auf den ersten Blick sogar für ein Bild halten, aber das ist reiner Text. Der Trick besteht einfach darin, Ampersands in einen Span mit einer eindeutigen Klasse wie folgt zu verpacken

<p>Tips <span class="amp">&amp;</span> Tricks</p>

Wenden Sie dann das Styling auf die Klasse an. Sie sollten eine Liste Ihrer Lieblings-Ampersands zusammenstellen und diese dann in Ihrer Style-Liste in Reihenfolge aufführen. Selbst wenn die Schriftarten nicht genau gängige Webfonts sind, haben Sie bei mehreren eine gute Chance, dass eine davon funktioniert. Oder schlimmstenfalls wird sie einfach auf eine Serifenschriftart zurückgesetzt

span.amp {
   font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif;
   font-size:110%;
   font-style:italic;
}

Schauen Sie sich einige einfache Beispiele an, wie dies den Text angenehmer machen kann

ampersandexample2.png

Ich sollte erwähnen, dass das exzellente wp-typogrify Plugin automatisch diesen Span/diese Klasse zu Ampersands auf Ihrem WordPress-Blog hinzufügt, was ziemlich schick ist und nur eine seiner vielen schönen Funktionen.