Die richtige Fett- und Kursivschrift für die richtige Aufgabe

Stellen Sie sich eine Welt ohne kursive Typografie vor. Wie würden Sie Zeitschriften, Bücher, Zeitungen, Fernsehsendungen und andere Titel gestalten? Sie müssten sich mit Unterstreichungen oder Anführungszeichen begnügen. Und nun stellen Sie sich vor, es gäbe keine fette Typografie. Wie würden Sie eine Hierarchie aufbauen oder Ihre Überschriften gestalten? Wie würden Sie ohne kursive oder fette Schrift eine Betonung oder eine starke Betonung erzeugen? Das ist der Albtraum eines jeden Designers: eine Welt ohne Fett- und Kursivdruck. Designer will nicht nur eine Font mit diesen Stilen, sondern braucht sie in vielen Fällen auch.

Fette und kursive Schriftarten sind wertvolle Ergänzungen im Repertoire eines Designers. Aber Design steckt im Detail. Wenn es um die Gestaltung von Fett- und Kursivschrift in Ihren Cascading Style Sheets (CSS) geht, gibt es echte Fett- und Kursivschrift und unechte Fett- und schräge Kursivschrift. Außerdem müssen Sie die entsprechenden HTML-Elemente für die Person verwenden, die den Text liest, oder für die Software, die sie zum Lesen verwendet.

Kursiv

Das Wort " kursiv" stammt von Italikós, dem griechischen Wort für Italien, was angesichts der Ursprünge der kursiven Typografie durchaus angemessen ist. Der italienische Gelehrte und Humanist Niccolo de Niccoli schuf im^15. Jahrhundert eine Schrift, die als die erste lockere Kursivschrift gilt. Im^16. Jahrhundert produzierten der Schriftsetzer Francesco Griffo da Bologna und der Drucker Aldus Manutius ein Buch mit kursiver Schrift und landeten damit einen Hit. Die Kursivschrift wurde so populär, dass ihre Konkurrenten nachgeahmte Versionen entwarfen und sie nach dem Ursprungsland Italien benannten, woraus sich der Begriff Kursivschrift ergab, den wir heute verwenden.

In den Anfängen ihrer Entwicklung waren Kursivbuchstaben nur Kleinbuchstaben, aber im Laufe der Zeit wurden sie um andere Zeichen erweitert. Die meisten von uns denken bei Kursivschrift an eine fast kursive Interpretation ihrer regulären Gegenstücke. Die Monotype Baskerville™ Schrift ist ein gutes Beispiel für eine Kursivschrift, die diese handschriftliche Qualität aufweist.

Schrägschriften, die als kursiv gelten, haben jedoch kein kursives Aussehen. Sie sind eher schräg und wirken daher konservativer. Nehmen wir die Univers® Schrift und ihre 55 Oblique.

Verwenden Sie Kursivschrift für Titel von Büchern, Zeitschriften, Fernsehsendungen und Filmen. Kursivschrift kann auch Fremd- oder Fachwörter kennzeichnen und zur Stilisierung eines Gedankens verwendet werden.

Kursivschrift hebt außerdem Wörter oder Sätze im Fließtext hervor und betont sie so, wie jemand, der das Wort spricht, es mit mehr Nachdruck sagen würde.

Kühn

Bold Schriften, auch Fettschrift genannt, kam im^19. Jahrhundert auf, lange nachdem sich die Kursivschrift durchgesetzt hatte. Eine Schrift mit fettgedruckten Schriftschnitten kann schrittweise stärkere Schriftschnitte haben, wie im Fall der Univers-Familie mit den Schriftschnitten fett (65), schwarz (75) und extra schwarz (85).

Serifen, wie z. B. die Baskerville, haben auch fette Schnitte.

Je nach Schrift und der Ausdehnung seiner Familie gibt es fette Designs für verkürzte, kursive, schräge und erweiterte Stile. Verwenden Sie Fettdruck in Ihrem Layout, um Überschriften, Zwischenüberschriften und Fließtext voneinander zu unterscheiden.

Fettdruck hebt ein Wort stärker hervor, als wenn es nur kursiv geschrieben ist.

Und fett gedruckte Wörter sind besonders wichtig.

Faux Styles, Faux Pas

Fauxpas sind Fauxpas bei der Verwendung von Web-Typografie. Es ist eine Unsitte und vermeidbar, wenn Sie wissen, wie Sie Ihre Web-Typografie mit CSS richtig gestalten. Beachten Sie den Unterschied zwischen den beiden kursiven Beispielen unten, mit ihren jeweiligen CSS unter jedem Bild.

i {font-style: italic;}

i {font-family: "MTBaskervilleETW01-Ital";}

Das oberste Baskerville-Beispiel ist nach vorne geneigt und das untere Beispiel verwendet Font-Familie ist richtig kursiv.

Dieses Problem muss auch bei der Einstellung von Fettdruckgewichten beachtet werden.

b {font-weight: bold;}

b {font-family: "MTBaskervilleETW01-Bold 1190971";}

Das oberste Beispiel ist fett gedruckt, das untere Beispiel ist korrekt erstellt. Obwohl diese Beispiele in Baskerville gesetzt sind, würden wir diese Font-Gewicht und Font-Familie Test mit einer serifenlosen Schrift wie Univers, würden wir ähnliche Ergebnisse erzielen. Die Lösung? Deklarieren Sie fett und kursiv mit Font-Familie.

Wir vermeiden falsche kursive und fette Schrift mit den oben genannten Methoden bei der Gestaltung in Typecast™ von Monotype zur Vorschau Fonts, und es funktioniert genau so, wie wir es wollen. Aber nur eine einzige Font-Familie deklariert wird, und das würde ein Problem darstellen, da man einen Fallback braucht, falls Baskerville nicht lädt.

Wenn Sie Ihr eigenes CSS schreiben, können Sie nicht nur einen oder mehrere Fallbacks angeben, sondern auch eine Stilverknüpfung mit @font-face was Ihnen die Verwendung von Font-Gewicht und Font-Stil fett und kursiv zu deklarieren, nicht nur für Web Fonts wie Baskerville, sondern auch für Fallback Fonts wie das websichere Georgia® Schrift.
Das CSS könnte in etwa so aussehen und müsste sowohl browserübergreifend getestet als auch in älteren, älteren Browsern in der Vorschau angezeigt werden, um sicherzustellen, dass es korrekt dargestellt wird.


@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Regular");
font-weight: normal;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Italic");
font-weight: normal;
font-style: italic;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold");
font-weight: bold;
font-style: normal;}

@font-face {font-family:"Your Serif Font";
src: url("Your Serif Name Bold Italic");
font-weight: bold;
font-style: italic;}

p {font-family:"Your Serif Font", Georgia, serif;
font-weight: normal;
font-style: normal;}
i {font-style: italic; font-weight: normal;}
b {font-weight: bold; font-style: normal;}
.b-and-i {font-weight: bold; font-style: italic;}


Andererseits ist das Schreiben von CSS vielleicht nicht so Ihr Ding. Wenn Sie Web Fonts von Monotype verwenden, erleichtert Ihnen der Fonts.com Quick Start Guide die Arbeit. Wenn Sie ein neues Projekt in Fonts.com erstellen, sollten Sie die Vorteile der Familiengruppierung nutzen, um Ihre Fonts sowie Schnitte und Stile auf eine saubere und standardkonforme Art und Weise zu kontrollieren und einzusetzen. Die Familiengruppierung ermöglicht Ihnen auch die Verwendung verschiedener Schriftschnitte (100-900) in einer benutzerfreundlichen Bearbeitungsumgebung.

Das richtige Element hören und sehen

Web-Typografie kann man nicht nur sehen, sondern dank Bildschirmlesesoftware auch hören. Bildschirmlesegeräte ermöglichen es blinden oder sehbehinderten Menschen, sich Textinhalte mittels Text-to-Speech vorlesen zu lassen. Sie hören die Betonung von Wörtern, die Sie mit <em> oder <strong> HTML-Elemente. Erstellen Sie verschiedene Stile für fette <b> und stark <strong>sowie kursiv <i> und Betonung <em>und verwenden Sie diese Elemente entsprechend in Ihrem HTML. Jedes Element hat eine andere Anwendung, verwenden Sie sie also nicht austauschbar.

Hervorhebung und Stark: Bei der Gestaltung von Text mit Betonung oder starker Betonung ist zu berücksichtigen, wie die Wörter klingen werden. Gestalten Sie Ihre Betonung <em> Elemente mit kursiver oder schräger Typografie, um ein oder mehrere Wörter zu kennzeichnen, bei denen der Leser oder die Lesesoftware den Text hervorheben muss. verwenden <strong> für wichtige Inhalte. Bildschirmlesesoftware verlässt sich auf Ihre Verwendung von HTML-Hervorhebungen und starken Elementen, um zu wissen, welche Wörter betont werden müssen, damit die Person, die den Text hört, die richtige Wirkung erzielt.

Ich habe den letzten Keks nicht gegessen.

I did <em>not</em> eat the last cookie.

Für einen stärkeren visuellen Effekt können Sie Großbuchstaben verwenden.

Ich habe den letzten Keks NICHT gegessen.

I did <em>NOT</em> eat the last cookie.

Verwenden Sie starke <strong> für wichtige Inhalte.

Achtung! Die Pfanne wird heiß sein.

<strong>Warning!</strong> The pan will be hot.

Kursiv und Kühn: Wie Betonung <em>, kursiv <i> Elemente auch kursive oder schräge Stile verwenden, aber kursiv reservieren <i> für Überschriften. Sie können auch Überschriften, Zwischenüberschriften und sogar Anführungszeichen kursiv setzen. Fettdruck <b> sollte für Änderungen der Gewichtung verwendet werden, um beispielsweise Überschriften, Zwischenüberschriften oder Fließtext hervorzuheben.

Schrift-Haiku von Jason Tselentis
Ein Buch, das ich gelesen habe
Mit dem Titel Learn Über Fonts
Lehrte mich Über type


<b>Type Haiku</b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


Zur Abwechslung können Sie auch fett und kursiv kombinieren, wie im Fall des Titels des Gedichts, der sowohl fett als auch kursiv ist. hinzugefügt am

Schrift-Haiku von Jason Tselentis
Ein Buch, das ich gelesen habe
Mit dem Titel Learn Über Fonts
Lehrte mich Über type


<b><i>Type Haiku</i></b> by Jason Tselentis
A book that I read
Entitled <i>Learn About Fonts</i>
Taught me about type


HTML & CSS für den richtigen Job schreiben

Verwenden Sie fette und kursive Schrift, um ein Layout abwechslungsreicher zu gestalten und eine Hierarchie aufzubauen. Verwenden Sie Kursivschrift für Überschriften. Achten Sie aber auch darauf, wie die Menschen den Text lesen und hören, und achten Sie auf die Betonung <em> und stark <strong> Elemente in angemessener Weise. Schließlich sollten Sie sich damit trösten, dass eine Welt mit keine fett und keine kursiv ist imaginär, ein schlechter Traum. Oder doch nicht? Der einzige Weg, die absolut sicher? Sagen Sie Nein zu fälschen.