Web-Typografie mit Großbuchstaben aufpeppen

Wenn es um Textnachrichten und E-Mails geht, interpretieren wir alle Großbuchstaben, auch bekannt als Großbuchstaben, normalerweise als SCHREIEN. Aber wenn Sie Ihre Überschriften, Leads und kurzen Anführungszeichen in Großbuchstaben setzen, können Sie Ihr Layout aufpeppen und Ihre Leserinnen und Leser in den Bann ziehen. Es fügt auch eine weitere Ebene der typografischen Hierarchie hinzu. Und dann gibt es noch den Fall, dass Akronyme wie die NASA oder Abkürzungen wie BC und AD Großbuchstaben erforderlich machen.

Bei der Gestaltung Ihrer Website mit Web-Typografie gibt es Fälle, in denen Sie Großbuchstaben verwenden möchten oder müssen, und es ist wichtig, formale Fragen zu berücksichtigen Ähnliche zu Schrift Entscheidungen, Layout und das allgemeine Erscheinungsbild. Aber wann sollten Sie Großbuchstaben verwenden? Was Über Kapitälchen? Und was genau sind Kapitälchen?

Caps in Betracht ziehen

In Theaterstücken, Drehbüchern und Fernsehspielen werden Großbuchstaben verwendet, um zu verdeutlichen, dass eine Figur schreit, und viele von uns verwenden diese Konvention in der textbasierten Kommunikation, z. B. in Chatrooms, E-Mails, Textnachrichten und sozialen Medien. Wenn wir eine lautstarke, EMPHATISCHE Aussage machen wollen, schreiben wir sie in Großbuchstaben.

Wirken Großbuchstaben in der Web-Typografie immer schrill und schreiend? Nicht unbedingt. Es gibt sogar Situationen, in denen Ihre Entwürfe Großbuchstaben erfordern, und das ist weniger Über Geschrei und mehr Über Design. Aber es ist wichtig zu wissen, wie sich Großbuchstaben von Kapitälchen und Kapitälchen unterscheiden und wie man sie effektiv einsetzt.

Vergrößern Sie bei Großbuchstaben die Laufweite, auch Buchstabenabstand genannt, um etwas Luft zwischen die Buchstaben zu bringen.

Sie sollten wissen, dass Kapitälchen keine verkleinerten Großbuchstaben sind. Es handelt sich um einen völlig anderen Satz von Glyphen. Im Allgemeinen haben Kapitälchen eine x-Höhe, die nahe an der x-Höhe von Kleinbuchstaben liegt. Dies ist wichtig, da Kapitälchen normalerweise mit Kleinbuchstaben koexistieren, wie im Fall eines Akronyms mit Kapitälchen wie NASA, das im folgenden Absatz verwendet wird.

Ein Irrglaube ist, dass Kapitälchen die gleiche x-Höhe haben wie Kleinbuchstaben. Manchmal ist dies der Fall, aber es ist nicht der Standard. Es hängt von der Font ab. Die Monotype Centaur® Schrift, die für das obige NASA-Beispiel verwendet wurde und unten in einem Vergleich der x-Höhe gezeigt wird, hat Kapitälchen mit einer höheren x-Höhe im Vergleich zu Kleinbuchstaben.

Die Linotype Didot® Small Caps Schrift hingegen hat die gleiche x-Höhe wie die Kleinbuchstaben der Linotype Didot® Schrift.

Und dann gibt es noch die Petite Caps, die so heißen, weil sie eine geringere x-Höhe haben als die Small Caps. Vergleichen Sie die P22 Underground™ Small Caps Schrift (links) mit den P22 Underground Petite Caps (rechts).

Das Verhältnis der x-Höhe von Kapitälchen, Kleinbuchstaben und Kapitälchen variiert von Font bis Font. Im Fall von P22 Underground hat der Kleinbuchstabe die niedrigste x-Höhe, die von den Kapitälchen bis zu den Kapitälchen zunimmt. Die Großbuchstaben erscheinen ganz links.

Verwendung und Auswahl von True Caps

Sie könnten Kapitälchen und Kapitälchen synthetisch erzeugen, indem Sie Wörter in Großbuchstaben setzen und die Größe von Font in Ihrem Layoutprogramm für den Druck oder in Ihrem CSS für das Webdesign verringern, so dass sie ungefähr die gleiche x-Höhe haben wie die Kleinbuchstaben. ABER DAS IST FALSCH. (Wenn das als Geschrei rüberkam, haben Sie es richtig interpretiert, denn Kapitälchen und Kapitälchen vorzutäuschen ist ein schlechter Stil). So erhalten Sie nicht die richtige typografische Farbe. Es ist nicht dasselbe wie die Verwendung einer Font mit echten Kapitälchen und echten Kapitälchen.

Wenn Sie in Centaur falsche Kapitälchen setzen, indem Sie NASA in Großbuchstaben schreiben und dann die Schriftgröße verringern, erhalten Sie zwar die gewünschte Größe, aber die Farbe ist im Vergleich zum Rest der Typografie zu hell. Das Beispiel mit echten Kapitälchen aus Centaur Small Caps & Old Style Figures Font- in der gleichen Größe wie die umgebende Typografie gesetzt - ergibt eine gleichmäßige typografische Farbe.

Anstatt falsche Kapitälchen oder falsche Kapitälchen zu setzen, suchen Sie sich eine Font , die echte Kapitälchen und echte Kapitälchen enthält, die für ihre jeweilige Größe unter den jeweiligen Kleinbuchstaben ausgelegt sind. Centaur ist beispielsweise in verschiedenen Stilen und Gewichtsklassen erhältlich und verfügt über echte Kapitälchen, die alle als Web Fonts erhältlich sind. Und die P22 Underground Schrift, die ebenfalls für das Web verfügbar ist, bietet eine große Auswahl an Stilen, einschließlich Kapitälchen und Petite Caps, in einer Reihe von Gewichtsklassen.

ALL CAPS: Wo UND Warum?

Wenn es um Ihr Layout geht, ist es wichtig, die Dinge aus einer formalen und kompositorischen Perspektive zu betrachten. Wie wird der Leser mit der Web-Typografie interagieren? Wie viel Platz oder wie wenig Platz wird sie einnehmen? Welche Art von Aussage wollen Sie machen?

In der laufenden Debatte Über zwischen Groß- und Kleinschreibung, auch als gemischte Großschreibung bezeichnet, geht es um die Frage, wie Lesbarkeit und Lesernormen zu bewerten sind. In den beiden folgenden Absätzen, die in Georgia® Schrift gesetzt sind, fällt auf, wie viel mehr Platz die Großbuchstaben einnehmen. Großbuchstaben wirken überladen, langatmig und sogar unangenehm. Bei diesem Umfang des Textes sind Großbuchstaben völlig falsch.

Große Textmengen, die in Großbuchstaben gesetzt sind, können dem Leser Probleme bereiten. Aber manchmal will man mit mehr mehr sagen. Überschriften oder kurze Textzeilen in Großbuchstaben können Aufregung und Bedeutung vermitteln.

Wenn Sie ein Zeichen setzen und allen zeigen wollen, dass Sie sich freuen, sind Großbuchstaben vielleicht am besten geeignet.

Großbuchstaben im Web

Sie können Web Fonts verwenden, das über Großbuchstaben, Kapitälchen und Kapitälchen verfügt, und Sie können auch CSS verwenden, um alles, was in Kleinbuchstaben geschrieben wird, in Großbuchstaben umzuwandeln, indem Sie text-transform wie in der nachstehenden Überschrift angegeben.

h1 {font-family: Helvetica, sans-serif; font-size:2em; text-transform:uppercase; letter-spacing:0.1em;}
p {font-family: Georgia, serif; font-size: 1.2em; line-height:1.8em;}

<h1>Sizing Your Web Typography</h1>
<p>Seeing a large amount of copy in all caps, not only looks dramatically different from mixed case, but it also takes longer to read. Is that because we&rsquo;ve been trained since the time we could read to recognize mixed case, and all caps are outside the norm? Is it because mixed case gives us hills and valleys, in the form of ascenders and descenders that we can more quickly recognize?</p>

Eine Überschrift in Großbuchstaben setzt eine rechteckige Schriftlinie, ohne Ober- und Unterlängen, die sich zu benachbarten Elementen hin verlagern. Sie sieht sauberer aus und kann die Überschrift durch Größe, Gewicht und Groß-/Kleinschreibung hierarchisch abgrenzen.

Sie können auch eine große Überschrift in Großbuchstaben verwenden, die in eine erste Zeile des Absatzes in Großbuchstaben übergeht, und dann den Rest des Absatzes in Großbuchstaben schreiben, um drei Hierarchieebenen zu schaffen. Anwenden die First-Line Pseudo-Element in das CSS eines Absatzes ein, um die erste Zeile automatisch in Großbuchstaben zu setzen. Beachten Sie jedoch, dass nicht jeder Browser die Umwandlung der ersten Zeile in Großbuchstaben unterstützt. Testen Sie daher die Umwandlung in allen Browsern, bevor Sie sie einsetzen.

h1 {font-family: Helvetica, sans-serif; font-size:2em; text-transform:uppercase; letter-spacing:0.1em;}
p {font-family: Georgia, serif; font-size: 1.2em; line-height:1.8em;}
p::first-line {text-transform: uppercase; letter-spacing:0.05em;}

<h1>Sizing Your Web Typography</h1>
<p>Seeing a large amount of copy in all caps, not only looks dramatically different from mixed case, but it also takes longer to read. Is that because we&rsquo;ve been trained since the time we could read to recognize mixed case, and all caps are outside the norm? Is it because mixed case gives us hills and valleys, in the form of ascenders and descenders that we can more quickly recognize?</p>


Wenn ein in Großbuchstaben geschriebener erster Satz nicht aussagekräftig genug ist, können Sie einen in Großbuchstaben geschriebenen Einleitungsabsatz erstellen, wie den unten in der Premiéra Schrift , der im Layout eine Hierarchie von groß über mittel bis klein aufweist. Mit der Eigenschaft text-transform wird die Seite Font des Leitabsatzes komplett in Großbuchstaben geschrieben.

Im folgenden Beispiel wird die Größe des in Großbuchstaben geschriebenen Aufmacherabsatzes Font vergrößert, um den Kontrast zwischen dem Aufmacher und dem nachfolgenden Absatz zu erhöhen.

Aber dieser Rahmen wirkt fast zu groß.

Small Caps in Erwägung ziehen

Die Großbuchstaben hatten den richtigen Schwung für die erste Zeile eines Absatzes. Und ein Aufmacher in Großbuchstaben mit einer Font wie Premiéra gab uns typografische Einheitlichkeit im gesamten Layout. Das einzige Problem war, dass ein größerer Aufmacher zu betont und zu groß wirkte. Was ist, wenn man einen etwas größeren Aufmacher Font in Großbuchstaben und mit mehr Kontrast haben möchte? Wir brauchen etwas, das uns mit weniger mehr gibt.

Ziehen Sie die Verwendung von Kapitälchen in Erwägung, was Sie mit CSS über die Premiéra Schrift erreichen können. Leider erkennt der Apple-Browser Safari® keine Kapitälchen (smcp) zum Zeitpunkt dieses Schreibens. Die unten gezeigten Beispiele stammen vom Webbrowser Mozilla Firefox®, sofern nicht anders angegeben.

-webkit-Font-feature-settings: "smcp";
-o-Font-feature-settings: "smcp";
-moz-Font-feature-settings: "smcp";
-ms-Font-feature-settings: "smcp";
Font-feature-settings: "smcp";

Dieses Layout-Set in Premiéra für die Überschrift, den Lead und den Fließtext verwendet Kapitälchen (smcp) für die Hauptrolle, aber sie wirkt zu klein.

Wir werden die Größe des Aufmacherabsatzes Font im Beispiel Nächste erhöhen, um einen etwas größeren Aufmacher mit einem deutlichen Kontrast zwischen ihm und dem Absatz Nächste zu erhalten.

Wir haben jetzt genau das richtige Maß an Differenzierung. In der Version Nächste haben wir hinzugefügt am Abstand zwischen den Buchstaben: 0.02em in den Kapitälchen-Vorsatz, wodurch er sich der Breite des Absatzes Nächste annähert und die beiden Maßnahmen besser miteinander harmonieren.

Ein letztes Detail ist zu beachten: die Wortlänge. Einige der Wörter im Aufmacher sind sehr lang, so dass es schwierig ist, sie in Großbuchstaben zu lesen. Indem wir den Text mit kürzeren Wörtern anpassen, können wir das Maß einhalten und den gewünschten Effekt erzielen.

Ein Layout mit Kapitälchen aufpeppen

Wir haben gesehen, wie man mit Kapitälchen in größerer Schrift die Lautstärke eines Aufmachers erhöhen kann. Kapitälchen sind jedoch besonders nützlich, wenn Akronyme und Abkürzungen in Ihrem Fließtext häufig vorkommen. Vergleichen Sie die beiden folgenden Beispiele aus dem Premiéra Schrift, wo die NASA sporadisch auftaucht. Die Kapitälchen von Premiéra fügen sich natürlich in den Fließtext des oberen Absatzes ein. Im anderen Beispiel sticht die NASA in Großbuchstaben hervor, fast zu sehr.

Sie können die Kapitälchen (smcp) Font-feature-setting, um nasa (nicht NASA) in Kapitälchen erscheinen zu lassen, sofern Ihr Web Font Kapitälchen hat und der Browser Kapitälchen unterstützt.

-webkit-Font-feature-settings: "smcp";
-o-Font-feature-settings: "smcp";
-moz-Font-feature-settings: "smcp";
-ms-Font-feature-settings: "smcp";
Font-feature-settings: "smcp";

Wie bereits erwähnt, unterstützt der Safari-Browser von Apple keine Kapitälchen (smcp) in CSS. Beachten Sie, dass die Kapitälchen, die wir im obersten Absatz verwendet haben, in Safari in Kleinbuchstaben erscheinen (siehe unten). Der Großbuchstabe NASA im zweiten Absatz wird jedoch korrekt wiedergegeben.

Zum Glück gibt es eine Lösung für dieses Problem. Verwenden Sie die Umwandlung von Großbuchstaben in Kapitälchen (c2sc) Funktion. Diese Funktion ist sehr nützlich, egal ob Ihre Web-Typografie in Safari, Firefox oder einem anderen Browser angezeigt wird.

-webkit-Font-feature-settings: "c2sc";
-o-Font-feature-settings: "c2sc";
-moz-Font-feature-settings: "c2sc";
-ms-Font-Eigenschaften-Einstellungen: "c2sc";
Font-feature-settings: "c2sc";


Bei Browsern, die Folgendes unterstützen c2scund mit einem Web Font wie Premiéra, das Kapitälchen hat, erhalten Sie die NASA in Kapitälchen, wie in Firefox zu sehen.

Aber in Safari, wie unten abgebildet, erkennt das Programm nicht c2scwird die NASA nicht in Kapitälchen gesetzt, so dass sie auf die NASA in Großbuchstaben zurückfällt. Das ist viel besser, als wenn es wiederholt und fälschlicherweise als nasa in Kleinbuchstaben erscheint, wenn man smcp.

Wenn es darum geht, Stile für Abkürzungen und Akronyme in Kapitälchen zu definieren, wäre es ideal, sie mit einem relativen HTML-Element zu gestalten. Einst gab es ein <acronym> Element, das semantisch für die NASA geeignet gewesen wäre, aber <acronym> wurde abgeschrieben und wird in HTML5 zum Zeitpunkt der Erstellung dieses Dokuments nicht mehr verwendet. Verwendung des HTML <abbr> Element sowohl für Abkürzungen als auch für Akronyme ist die beste Praxis.

abbr {-webkit-font-feature-settings: "c2sc";
-o-font-feature-settings: "c2sc";
-moz-font-feature-settings: "c2sc";
-ms-font-feature-settings: "c2sc";
font-feature-settings: "c2sc";}

<abbr title="air conditioning">AC</abbr>

<abbr title="application program interface">API</abbr>

<abbr title="business to business">B2B</abbr>

<abbr title="business to consumer">B2C</abbr>

<abbr title="initial public offering">IPO</abbr>

<abbr title="National Aeronautics and Space Administration">NASA</abbr>

Einige Browser können automatisch die <abbr> in Kapitälchen. Und einige Browser fügen eine Linie oder eine gepunktete Linie unter dem <abbr> Element, und dies kann durch Hinzufügen von Textdekoration: keine oder Rand-Boden-Breite: 0 zu seinem CSS hinzufügen. Aber es gibt etwas zu beachten: Wenn sie sichtbar ist, wird die Unterstreichung ist hilfreich, da es als Hinweis für die Leser dient, da bestimmte Browser die <abbr> den Titel des Elements, wenn der Mauszeiger über das Element bewegt wird. Zum Beispiel, wenn der Mauszeiger über NASA würde Ihnen National Aeronautics and Space Administration anzeigen. Wenn eine Abkürzung oder ein Akronym jedoch häufig vorkommt, kann es störend sein, wenn es im gesamten Layout unterstrichen ist. Daher sollten Sie überlegen, ob Sie es nicht mit einer weniger auffälligen Unterstreichung versehen.

Die Krönung des Ganzen

Trotz der Tatsache, dass wir Großbuchstaben mit SCHREIEN gleichsetzen, gibt es Fälle, in denen Großbuchstaben für die Web-Typografie sehr nützlich sind. Die Verwendung von Kapitälchen für häufig vorkommende Abkürzungen und Akronyme ist ein nettes Detail. Und Überschriften in Großbuchstaben erregen die Aufmerksamkeit des Lesers und peppen das Layout auf. Leitartikel und kurze Anführungszeichen eignen sich ebenfalls gut für Großbuchstaben.

Großbuchstaben funktionieren am besten, wenn das gesamte Layout berücksichtigt wird, ebenso wie die Wort-, Zeilen- und Absatzlänge. Letztlich sollten Sie Großbuchstaben sparsam verwenden. Niemand möchte von einem Aufschlag nach dem anderen von Großbuchstaben erschlagen werden.