Entdecken Sie ältere Inhalte von Fonts.com, die zu Ihrer Information aufbewahrt werden.

Das Swash-Feature Font " Fonts.com

Die Funktion Swash Font

J

Jason Tselentis in. Lernen am 9. März 2016

Wenn es um visuelle Verbesserungen geht, können Schrägstriche Ihrer Website das gewisse Etwas verleihen - die Betonung liegt auf "das gewisse Etwas", denn ein wenig kann viel bewirken. Die Schrägstriche sind vor allem in Schriften zu finden und werden als Schreibschrift, Kalligraphie und Handschrift klassifiziert. Wenn Sie jedoch zu viele Schrägstriche verwenden oder sie zu groß setzen, haben Sie eine Menge zusätzlicher Zeichen, was schlecht sein kann.

Grundlagen der Web-Typografie

Ein in Auberge Script™ Pro Schrift gesetzter Titel, bei dem die Schrägstriche über eine CSS-Eigenschaft aktiviert sind. Ein längerer Titel oder zu viele Buchstaben mit konkurrierenden Schrägstrichen wären ein Overkill. Aber in diesem Fall ist es genau die richtige Anzahl von Wörtern und Schrägstrichen.

Grundlagen der Web-Typografie

Oben sehen Sie ein Dropcap-Set in der Australis Pro™ Swash Schrift. Frühere Beiträge in Web Typography Essentials befassten sich mit erhabenen Buchstaben und Kapitälchen und untersuchten alternative Ansätze zur Verwendung von Anfangsbuchstaben. Lesen Sie diese Beiträge, um sich mit den CSS-Eigenschaften vertraut zu machen, die zur Erstellung von Kapitälchen erforderlich sind.

Swash-Charaktere sind zum Fließen bestimmt

Als Verb verwendet, bedeutet schwappen eine Bewegung mit einem plätschernden Geräusch: Der Regen schwappte durch die Dachrinnen und floss in die Fallrohre. Als Substantiv bezieht sich schwappen auf einen Körper aus rauschendem oder spritzendem Wasser. Aber wenn Designer und Typografen das Wort Schwappen hören, denken sie an verzierte typografische Zeichen, manchmal an Anfangsbuchstaben wie Kapitälchen. Wie das Wasser sorgen auch die Schwappzeichen mit ihren kunstvollen Strichen und Verzierungen für ein flüssiges Erscheinungsbild.

"Haben Sie Spaß mit Tuscheln, aber seien Sie zurückhaltend. Verwenden Sie gerade genug davon, und Sie verleihen dem Ganzen ein gewisses Flair."

Aber wie und wo findet man Swash-Zeichen? Manchmal gibt es zwei Fonts: eine Font mit dem Standardzeichensatz und eine weitere separate Font mit den Schrägstrichen.

Grundlagen der Web-Typografie

Die "Überschrift Zwei" (oben) ist in der ITC Bodoni™ Seventytwo Swash Schrift gesetzt, und die "Überschrift Drei" (unten) ist in der ITC Bodoni Seventytwo Schrift gesetzt. Dies ist ein Fall, in dem eine Font Ihnen Schrägstrich-Zeichen gibt.

In anderen Fällen kann Fonts mit OpenType®- oder OpenType Pro-Funktionen sowie Fonts , die in Pro-Versionen enthalten sind, Ihnen erweiterte Zeichen, Funktionen und Verbesserungen bieten, die Sie alle unter Font finden. Wenn diese Font über Schrägstriche verfügt, müssen Sie die CSS-Eigenschaft verwenden, um sie im Web zu aktivieren.

Grundlagen der Web-Typografie

Sowohl die 'Große Überschrift', die als h2 (oben) gesetzt ist, als auch die 'Kleine Überschrift', die als h3 (unten) gesetzt ist, werden in der Auberge Script Pro Schriftaber Font-Feature-Einstellungen: "swsh" schaltet die Schrägstrich-Zeichen in 'Kleine Überschrift' ein.

Der richtige Schwung für Ihre Anfangsbuchstaben

Wie bereits in früheren Beiträgen erwähnt, ist das Setzen von Anfangsbuchstaben im Web aufgrund einiger Einschränkungen in HTML und CSS sowie Inkonsistenzen zwischen verschiedenen Browsern eine technische Herausforderung. Und wenn Sie Schrägstriche hinzufügen, wird es noch schwieriger. Schrägstriche können in den benachbarten Text hineinlaufen, so dass Sie eine Anpassung nach der anderen vornehmen müssen, um das Layout zu reparieren. Manchmal gibt es auf Font einen funktionierenden Schrägstrich, während ein anderer Font überhaupt nicht funktioniert. Manchmal hat man aber auch Glück: Der benötigte Buchstabe befindet sich vielleicht genau in dem Font , mit dem man begonnen hat, und man muss ihn nur mit CSS aktivieren.

Grundlagen der Web-Typografie

Der in Auberge Script Pro gesetzte Anfangsbuchstabe "H" stößt zu weit in den benachbarten Buchstaben hinein, wodurch das Layout gestört wird. Durch Anpassungen der Zeilenhöhe, der Auffüllung und/oder des Randes könnte dies behoben werden. Oder eine andere Font könnte das Problem lösen.

Grundlagen der Web-Typografie

Aber das Hinzufügen Font-Feature-Einstellungen: "swsh" zu seinem CSS gibt uns ein alternatives Zeichen, das den Tag rettet. Es erlaubt uns nicht nur, das Wort "Here" mit besserem Kerning zu setzen, sondern es hat auch hinzugefügt am Dekoration, um das Layout zu verschönern.

Indem wir das zweite verfügbare Swash-Zeichen im obigen CSS aktivieren, erhalten wir ein besseres Ergebnis, ohne uns mit Zeilenhöhe, Kerning, Auffüllung und Rändern herumschlagen zu müssen. Außerdem brauchten wir nicht nach einem anderen Font zu suchen, reset die Typografie zu ändern und das Layout anzupassen. Die Verwendung des zweiten Swash-Zeichens war eine einfache Lösung, aber gehen Sie nicht davon aus, dass jedes zweite Zeichen funktionieren wird.

Grundlagen der Web-Typografie

Mit Font-Feature-Einstellungen: "swsh" ermöglicht, Auberge Script Pro's Der Schrägstrich "G" trifft auf benachbarte Buchstaben.

Grundlagen der Web-Typografie

Dies ist ein Fall, in dem das Entfernen Font-Feature-Einstellungen: "swsh" aus dem CSS zu entfernen, um das Standard-'G' zu verwenden, funktioniert besser.

Anwendung und Prüfung

Wie bei jedem Design sollten Sie die Typografie und das Layout in mehreren Browsern testen, auch auf Desktops und mobilen Geräten. Und bevor Sie Ihre Website für den Rest der Welt veröffentlichen, sollten Sie einige Permutationen erstellen, um zu sehen, was funktioniert und was nicht.

Grundlagen der Web-Typografie

Ein kurzes, einzelnes Wort in Auberge Script Pro mit dem Font-Feature-Einstellungen: "swsh" CSS-Eigenschaft verwendet.

Grundlagen der Web-Typografie

Schrägstriche verzieren nicht nur den Anfang eines Wortes, sondern können auch das Ende eines Wortes optisch abrunden, sofern ein passender abschließender Schrägstrich vorhanden ist.

Grundlagen der Web-Typografie

Nicht alle Schrägstriche sind gleich gestaltet. Einige sind aufwendig, andere sind dezent, wie dieser Titel in ITC Bodoni Seventytwo Swash.

Grundlagen der Web-Typografie

Manchmal kann zu viel des Guten das Erlebnis ruinieren. In diesem Fall, bei Auberge Script Pro, bekämpfen sich die Schwünge gegenseitig.

Grundlagen der Web-Typografie

Schlechte Idee. Es ist nicht der richtige Weg, den Fließtext komplett in Schrägstrichen zu schreiben. Haben Sie Spaß mit Schrägstrichen, aber seien Sie zurückhaltend. Wenn Sie gerade genug davon verwenden, verleihen Sie Ihrem Text ein besonderes Flair. Wenn Sie jedoch zu viele davon verwenden, beeinträchtigen Sie die Lesbarkeit und ertränken den Leser mit lästigen Verzierungen. Und niemand will einen Tsunami von Schrägstrichen.

Jason Tselentis ist Designer, Autor und Dozent. Als außerordentlicher Professor an der Fakultät für Design der Winthrop University unterrichtet er visuelles Kommunikationsdesign, Markenstrategie und -entwicklung, Webdesign und Typografie. Seine Schriften Über Design und visuelle Kultur sind in Arcade, Eye, mental_floss, Open Manifesto, Print und HOW erschienen. Herr Tselentis hat außerdem vier Bücher über Design- und Typografieprinzipien und Designgeschichte veröffentlicht.