Herstellung von Anfangsbuchstaben Teil I: Erhabene Initialen

Anfangsbuchstaben, wie erhabene Initialen und herabgesetzte Initialen, sind nicht nur für die Gestaltung von Typografie im Druck geeignet. Anfangsbuchstaben im Web können Hilfe die Monotonie eines Layouts mit einer Einheitsgröße aufbrechen, bei dem die Schrift nicht von Anfang bis Ende gleich aussieht, sondern Sie Ihre Palette um eine größere Typografie erweitern. Es sind die kleinen Dinge - oder in diesem Fall die großen Dinge, die Großbuchstaben -, die Ihre Leser beeindrucken und dazu bringen können, immer wieder zu kommen.

Anfangsbuchstaben damals und heute

Schreiber verwendeten große Initialen in Handschriften, von denen einige bereits aus dem 5. Zierinitialen wurden vom 8. Jahrhundert bis zum 15. Jahrhundert weiter verwendet, als bewegliche Lettern die Massenproduktion von Texten ermöglichten. Ob geschrieben oder gedruckt, die Buchstaben standen für sich allein und im Vordergrund des Textes, aber manchmal wurden die Buchstaben von illustrativen Zeichnungen begleitet, die sie umgaben und Menschen, Orte und Dinge darstellten, die für die religiösen oder historischen Wörter, die sie einleiteten, relevant waren.

Erhabene und nicht erhabene Initialen werden auch heute noch verwendet und finden sich in Newslettern, Zeitschriften und Büchern sowie in der digitalen Typografie im Internet oder in Apps. Man kann sie sogar in der Werbung und auf Schildern sehen. Erhabene Initialen, manchmal auch Aufklebe-Initialen genannt, stehen auf derselben Grundlinie wie der restliche Text, der darauf folgt. Abgesetzte Initialen, manchmal auch "Drop Caps" genannt, sitzen unterhalb der Grundlinie, manchmal hinter dem Rest des Textes oder mit dem Rest des Textes um sie herum.

Diese erste Ausgabe von Über befasst sich mit erhabenen Initialen, die am einfachsten zu setzen sind, da sie auf einer gemeinsamen Grundlinie stehen und normalerweise nicht über die Ränder hinausragen - Probleme, die eine viel feinere Abstimmung erfordern, die leichter zu verstehen sind, sobald Sie die Grundlagen der erhabenen Initialen verstanden haben.

Klassen verwenden

Wie bei allem im Web gibt es mehr als eine Möglichkeit, eine Katze zu häuten, oder in diesem Fall, einen Großbuchstaben zu häuten. Designer , die bereits ein Verständnis für CSS-Elemente, Selektoren und Klassen haben, werden wissen, dass sie eine separate Klasse erstellen können, die als Initial-Cap-Bezeichner dient.
Ihr CSS mit einem Absatzelement und der Klasse initial-cap würde wie folgt aussehen...

p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;}
.myinitialcaps {font-size:48px; font-family: Didot;}

Und Ihr HTML würde erscheinen als...

<p><span class="myinitialcaps">M</span>y initial cap is much bigger here and set in the Didot typeface.</p>

Ich gebe dir...

Klingt einfach? Bis zu einem gewissen Grad ist es das auch. Je nachdem, welche erhabenen Buchstaben Sie haben, müssen Sie Anpassungen vornehmen, da jeder Großbuchstabe eine spezielle Unterschneidung erfordert. Sobald Sie Ihre typografische Wahl getroffen haben, in diesem Fall die Didot® Schrift für erhabene Initialen und die Georgia® Schrift für Fließtext, müssen Sie für jede erhabene Initiale eine eigene Klasse erstellen. In dem untenstehenden CSS wird die Klasse .myinitialcapsi Klasse hat einen negativen Rand auf der rechten Seite, um eine Lücke zwischen der I und n.

.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}

<p><span class="myinitialcaps">I</span>n this case, there&rsquo;s some extra space between the &ldquo;I&rdquo; and &ldquo;n.&rdquo;</p> <p><span class="myinitialcapsi">I</span>ncluding a new class with a negative margin pulls it closer.</p>

Je nach Bildschirmauflösung, in der die Nutzer Ihre Website sehen, könnten im obigen Beispiel das I und das n so aussehen, als würden sie zusammenfließen, weil die Serifen des Iin das n hineinragen. Führen Sie also einige Tests auf verschiedenen Geräten durch, von Mobiltelefonen über Tablets bis hin zu desktop , um zu sehen, wie es aussieht, bevor Sie Ihr CSS endgültig festlegen.

Zitate und andere Details

Und es sind nicht nur Buchstaben, die Sie groß machen können. Sie können eine weitere Klasse erstellen, um ein großes Anführungszeichen an die Spitze zu setzen. In diesem Fall hat die Klasse Anführungszeichen weder eine Größe von 48 noch von 20 Pixeln, so wie es bei unserem erhabenen Anfangs- und Fließtext der Fall ist, sondern eine Größe zwischen den beiden: 30 Pixel. Das Anführungszeichen wurde sogar um 4 Pixel nach unten verschoben, um es optisch an das I anzugleichen und das Layout auszugleichen.

.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}

<p><span class="myinitialcapsq">&ldquo;</span><span class="myinitialcapsi">I</span>ncluding&rdquo; a new class with a negative margin pulls it closer.</p>

Sie müssen jeden einzelnen Anfangsbuchstaben in Ihrem Backend zusammen mit den Anführungszeichen nach eigenem Ermessen setzen, d. h. Sie müssen jeden Buchstaben optisch anpassen, um sicherzustellen, dass er unterschnitten und an der Umgebung, z. B. den Rändern, ausgerichtet ist. So muss beispielsweise der Buchstabe T nach links schweben und außerhalb des Randes sitzen, damit sein Querbalken optisch im Layout sitzt. Auch runde Buchstaben wie C, G, O und Q benötigen eine ähnliche Behandlung. Auch wenn in diesem Fall die Größen 20, 30 und 48 verwendet wurden, müssen Sie die Größen auf der Grundlage der von Ihnen gewählten Schriften , Ihres Layouts und der Bildschirmgrößen und -auflösungen, auf denen Ihre Website aufgerufen wird, erstellen. Denken Sie daran: Im Zweifelsfall sollten Sie es testen.

Pseudo-Elemente und Pseudo-Klassen

Mit einem CSS-Pseudo-Element können Sie ganz einfach eine erhöhte Initiale erstellen, indem Sie ::Anfangsbuchstabe, in diesem Fall das Hinzufügen zu einem Absatzelement. verwenden :first-letter (mit einem Doppelpunkt), wenn Sie für ältere, veraltete Browser entwickeln.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}

p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

.initialb {margin-right:-0.1em;}

.initialn {margin-right:-0.15em;}

Der HTML-Code mit CSS-Klassen, die die Unterschneidung der Buchstaben N und B berücksichtigen, würde wie folgt aussehen...

<p>An inital letter, with the first letter being a capital letter.<br>
With a line break, the next line has no initial cap.</p>

<p><span class="initialn">n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p>

<p><span class="initialb">B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p>

Selbst mit dem Vorteil einer Pseudo-ElementViele kleine Details sind in die Umsetzung eingeflossen, einschließlich separater Stile zur Behandlung von Unterschneidungsproblemen und hinzugefügt am , damit jeder neue Absatz mit seinem erhöhten Monotype Bernard Condensed® Schrift hat extra Luft dazwischen. Bei dieser Methode wird jedoch der erste Buchstabe jedes neuen Absatzes großgeschrieben. Manche mögen diese Methode als notwendig ansehen oder einfach als Ergebnis der Funktionsweise des Codes. Aber zu viel des Guten kann auch schlecht sein, und in diesem Fall ist die übermäßige Großschreibung ein Overkill.

Kombination von Pseudoklassen und Pseudoelementen für intelligenteres Layout

Hinzufügen einer :first-child Die Pseudoklasse hilft, das Problem der Großschreibung zu lösen, indem sie den ersten Buchstaben, und nur diesen, zu einem Großbuchstaben macht.

p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}

Alles zusammen mit HTML...

<p>An inital letter, which is also designated as a first-child, is the only letter that gets the raised initial treatment in this layout.</p>

<p>Because just the first-child gets capitalized, notice how my subsequent first letters have to be capitalized now, which is different from how the prior layout handled the typographic assignment of first-letters. Finally with a hard return, and a new paragraph started, we are back to having just the first letter of the layout capitalized, which looks more elegant than having every single letter of a new paragraph capitalized. Do you agree?</p>

Das Schöne an der Verwendung von Pseudoklassen und ihrer Kombination ist die Einfachheit und die fallweise Handhabung, die sie bieten. Was Über die Negative? Es gibt so viele verschiedene Arten von Pseudoklassen, und man kann sie auf unendlich viele Arten kombinieren, dass es einem schwindlig werden kann. Zum Beispiel kann die :first-child und :first-of-type Pseudo-Klassen können Sie die gleichen Ergebnisse erzielen. Und Sie können nicht nur die Pseudoklasse an Ihr Absatzelement anhängen, aber Sie können es auch an ein <section> oder eine <div> Element, wie unten gezeigt, mit einem erhöhten Anfangssatz in der Didot Schrift am Anfang eines Abschnitts. Beachten Sie das großzügige Randattribut hinzugefügt am rechts neben dem Großbuchstaben Adie sonst mit dem s zu Beginn von Abschnitt.

section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}

section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}

Und mit dem HTML...

<section>
<p>a section gets a raised capital letter applied to the first letter.</p>

<p>And a new paragraph…</p>
</section>

Haben Sie schon Spaß? Wenn Sie sich wirklich abenteuerlustig fühlen, besuchen Sie die Website der Entwickler Webseiten und erforschen Sie verschiedene Methoden, zusätzlich zu :first-child und :first-of-type wie zum Beispiel :n-ter-Typ oder :nth-of-child um zu sehen, wie diese anderen Arten von Pseudo-Klassen könnte für erhabene Initialen verwendet werden. Sie können aber auch bei den hier gezeigten Grundlagen bleiben und sie auf Ihrer eigenen Website einsetzen. Egal, ob Sie über die Grundlagen hinausgehen oder tiefer in CSS einsteigen, sobald Sie wissen, wie man Pseudo-Klassenund lernen Über :first-child, :first-of-typeund :first-letter für Ihr CSS, es ist nur eine Frage der Anwendung es alle richtig auf Ihre HTML.

Die Krönung des Ganzen

Die Verwendung separater Klassen zusammen mit Pseudo-Klassen Die Berücksichtigung verschiedener Buchstaben sowie von Interpunktionszeichen wie Anführungszeichen erfordert Ausprobieren und die Berechnung von positivem und negativem Leerraum. Und es erfordert auch viel Geduld. Buchstaben wie F, G, O, P, Q, T, W, Vund Yund andere erfordern aufgrund des negativen Raums unten rechts in diesen Zeichen eine separate Kerning-Klasse.

Aber der Spaß fängt erst richtig an, wenn Sie Web Fonts in den Mix einbringen und erhabene Initialen schaffen, die über das Gewöhnliche hinausgehen, um die Aufmerksamkeit Ihrer Leser zu erregen und Ihre Website von der Masse abzuheben. Achten Sie auf die Details, damit alles gut aussieht, und Ihre Leser werden den Schwung zu schätzen wissen, mit dem Sie Ihre Website hinzugefügt am gestaltet haben. Halten Sie Ausschau nach ausgelassenen Initialen, auch bekannt als Drop Caps, die demnächst in Teil II vorgestellt werden.

Vielen Dank an Peter Mann für den Hinweis auf einen typografischen Fehler.