Herstellung von Anfangsbuchstaben Teil III: Feinabstimmung und Spaß

In Teil I und Teil II dieser Serie über Initialbuchstaben haben wir uns mit erhabenen Initialen, die auf der Grundlinie stehen, und vertieften Initialen (auch Kapitälchen genannt), die unterhalb der Grundlinie stehen, beschäftigt. In dieser letzten Folge werden wir nicht nur tiefer in das Testen und Anpassen von erhabenen Initialen und Kapitälchen in verschiedenen Browsern mit HTML und CSS eintauchen, sondern auch ausdrucksstarke Möglichkeiten zur Verwendung von Web Fonts betrachten.

Bevor wir zum spaßigen Teil kommen, ist es wichtig, die Grundlagen des Setzens von Anfangsbuchstaben in der Web-Typografie zu besprechen. Sie müssen die typografischen Eigenschaften im Backend anpassen, um den Anfangsbuchstaben zu vergrößern und an der gewünschten Stelle zu positionieren, und Sie können ein Klasse oder Pseudoklasse um Änderungen vorzunehmen: Font Font Größe, Groß- und Kleinschreibung, Zeilenabstand (Zeilenhöhe), Ränder, Polsterung und Float (für Kapitälchen).

Sie können auch die Gewichtung und die Farbe sowie den Stil anpassen, sei es kursiv oder fett oder fett und kursiv. Und all diese Eigenschaften müssen einzeln angepasst werden, damit sie in verschiedenen Browsern einheitlich dargestellt werden.

Testen und Einstellen

Um ein einheitliches Nutzer Erlebnis zu bieten, müssen Sie Ihre Anfangsbuchstaben in verschiedenen Browsern testen und anpassen: Safari® von Apple, Chrome® von Google, Explorer® oder Edge® von Microsoft und Mozilla Firefox®, um nur einige zu nennen. Hier ist ein Beispiel dafür, was passiert, wenn ein Browser funktioniert, aber andere die Dinge anders darstellen.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

<p>And here is a drop cap <em>A</em> that sits below its own line, and two lines deep. The <em>A</em> is colored to make it stand out for this visual. But there’s a problem. Across two browsers things look wrong. So what has to be adjusted to fix it?</p>

Beachten Sie die unterschiedliche Platzierung des Georgia® Schrift 'A' in den untenstehenden Bildschirmfotos. Firefox sieht korrekt aus, aber Safari und Chrome stellen es falsch dar.

Fehlerhaftes Layout in Safari.

Fehlerhaftes Layout in Chrome.

Das Layout in Firefox, wie wir es wollen.

Auf den ersten Blick scheint es, dass Polsterung oder Marge wirft das Layout durcheinander. Aber das Herumbasteln an diesen Einstellungen bringt uns nicht die richtige Lösung. Die Untersuchung der Chrome- und Safari-Layouts unter dem Gesichtspunkt der Ausrichtung, insbesondere in Bezug auf die Grundlinie, zeigt uns, dass etwas mit dem Zeilenabstand, auch CSS genannt, nicht stimmt Zeilenhöhe. Nach einigen Experimenten finden wir eine Lösung für die Zeilenhöhe und vermerken sie in den CSS-Kommentaren, um sie in Zukunft nutzen zu können.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:140px;}

p { font-size: 32px; line-height: 70px; margin-bottom:48px;}

p:first-child::first-letter { font-family: Georgia, serif; font-size: 280px; /* line-height added for Safari and Chrome fix but will not impact Firefox */ line-height: 198px; float: left; text-transform: uppercase; padding: 0px 15px 0px 5px; color:#F69; z-index:10; margin-top:–10px;}

em { color:#930;}

Wir erhalten das Gewünschte in allen drei Browsern mit dem Zeilenhöhe enthalten. Chrome und Safari erkennen die Dropcaps Zeilenhöhe Anpassung. In Firefox kann das Hinzufügen der Zeilenhöhe macht keinen Unterschied, und das Layout bleibt so, wie wir es wollen.

Pixel oder Ems?

Sizing aller Ihrer Typen in ems bietet einen großen Vorteil: Die Schrift wird auf unterschiedlich großen Bildschirmen, wie z. B. einem Smartphone, Tablet, desktop oder sogar einem Fernseher, vergrößert oder verkleinert, und in den meisten Fällen müssen Sie sich nicht mit dem Hinzufügen von JavaScript™ abmühen, um diese unterschiedlichen Viewports zu berücksichtigen. Aber Vorsicht: Wenn Sie ems Wenn Sie die Größe Ihrer Typografie nicht anpassen, kann es sein, dass das Layout in verschiedenen Browsern nicht einheitlich ist und Sie versuchen müssen, Zehntel- und Hundertstelabstände zu korrigieren. em in dem Versuch, die Dinge richtig aussehen zu lassen. Und egal, was passiert, das Layout sieht vielleicht ein bisschen "daneben" aus oder ist völlig kaputt.

body {font-family:Georgia, "Times New Roman", Times, serif; margin:12em;}

p { font-size: 1em; line-height: 2em; }

p:first-child::first-letter { font-family: Didot, serif; font-size: 9em; text-transform: uppercase; margin:0.07em 0.07em 0.07em –0.05em; line-height: 0.755em; float:left;}

em { color:#930;}

<p>So let’s take a look at setting this in ems to see what our drop cap <em>S</em> does when it comes to using the line-height property to make adjustments and fixes across browsers. Is it as easy as adding the line-height property, and having it look correct in Chrome and Safari? The only way to find out is through some testing, and trial and error. Unfortunately, once you set your initial letter, and choose a typeface, you will have to test it out across as many browsers as possible to make sure that it looks correct and looks the way you want.<p>

Mit dem obigen CSS können wir das Didot® Schrift "S" in Firefox an der gewünschten Stelle platzieren, aber in Safari und Chrome ist das Beste, was wir tun können, ohne das gesamte Layout zu zerstören, dass das "S" immer leicht über der Grundlinie schwebt, an der wir es ausrichten wollen.

Firefox gibt uns die Ausrichtung, die wir wollen.

Aber bei Safari und Chrome wird es noch viel länger dauern, bis es richtig funktioniert.

Alternativ könnte die Tropfenkappe auch in einem größeren weißen Bereich für hinzugefügt am platziert werden, was uns mehr Spielraum für Anpassungen mit Margen und Zeilenhöhe. Das Layout bedarf noch einiger Feinabstimmung, um die gewünschte Grundausrichtung zu erreichen.

Wenn ständiges Herumhantieren mit ems im CSS immer noch nicht die gewünschten Ergebnisse mit den erhabenen Initialen oder Initialen in Großbuchstaben liefert, ist es vielleicht einfacher, zu Pixel für die Größenbestimmung Ihrer gesamten Typografie. Selbst dann könnten Sie noch eine meta Tag zum Anpassen der Inhalte des Ansichtsfensters je nach Bildschirmgröße nach oben oder unten zu skalieren. Aber die meiste Zeit sind es die Dropcaps, die die Größenanpassung mit ems In diesem Fall könnten Sie sich stattdessen mit erhabenen Initialen begnügen.

Größe, Gewicht und Platzierung

Sobald Sie die Backend-Mechanik kennen und wissen, was nötig ist, damit alles in allen Browsern funktioniert, können Sie sich ein wenig austoben. Mit Web Fonts können Sie aus einer Vielzahl von Schriften wählen, um Ihre Anfangsbuchstaben auffällig und ausdrucksstark zu gestalten. Und auch mit dem Layout können Sie sich austoben.

Alle folgenden Beispiele wurden mit der Typecast™-Softwarevon Monotype und ihrem CSS-Editor gerendert.

H' in Shadow Gothic™ Schrift. Beachten Sie, dass das Weiß der Buchstabenform - nicht der schwarze Schatten - an der Grundlinie der zweiten Zeile ausgerichtet ist.

S" in der Aachen® Schrift.

Erhöhte Initiale "T" in der Aachener Schrift.

Drop cap 'T' in der Aachener Schrift.

Sie können die Tropfenkappe in den Rand hineinhängen, um den Text des Abschnitts breiter zu machen.

Für ein unkonventionelles Erscheinungsbild können Sie die Platzierung und Ausrichtung des "O" verändern. Gehen Sie groß und über den Rand hinaus, um eine Asymmetrie zu erzeugen.

Wenn Sie aber keine große Schrift wollen, können Sie auch etwas Dekor mit Schwungbuchstaben hinzufügen, wie die ITC Bodoni™ Seventytwo Swash Schrift. In diesem Fall ist die Haltung des "H" so nach vorne geneigt, dass zwischen dem "H" und der zweiten und dritten Zeile des Schriftzugs eine seltsame Menge an negativem Raum bleibt.

Dieses Drop Cap ITC Bodoni Seventytwo Swash 'A' würde besser aussehen, wenn das 'nd' näher dran wäre, aber leider können wir diese Art von Verfeinerung bei der Web-Typografie nicht vornehmen.

Setzen Sie einen Drop Cap mit einem Tuschzeichen, das einen kantigeren Look hat, wie den Swashbuckler™ Schrift. Wenn die Beispiele mit Swashes Ihre Aufmerksamkeit erregt haben, sollten Sie sich den nächsten Beitrag ansehen: Mehr erfahren Über swashes on the Web.

Mit Anfangsbuchstaben vorankommen

Die Typografie im Web wird dank der Fortschritte bei den Webbrowsern und den Entwicklungen bei den CSS- und HTML-Standards immer besser. Aber wir haben noch einen weiten Weg vor uns, vor allem, wenn es darum geht, Anfangsbuchstaben im Backend festzulegen und zu komponieren. Es gibt keine Standardmethode, um Anfangsbuchstaben im Web zu setzen, zumindest gibt es keinen Standardsatz von Klassen in CSS. Stattdessen müssen Einzelpersonen ihre eigenen Methoden entwickeln oder diejenigen übernehmen, die andere geschaffen haben, bis die Nächste Welle von Webstandards veröffentlicht wird.

Absolute Größenbestimmung in Pixel scheint in allen Browsern besser zu funktionieren als die Größenanpassung der Anfangsbuchstaben mit ems. Wenn wir jedoch JavaScript™ implementieren würden, um die Anzeige und Größenanpassung in verschiedenen Browsern und Ansichtsfenstern zu verwalten, dann besteht eine gute Chance, dass wir es richtig machen könnten mit ems. Drop Caps stellen die größte Herausforderung für das Layout und die Konsistenz dar, da Sie mehr Faktoren anpassen müssen: Zeilenhöhe, Float, Ränder und Polsterung. Wenn Sie also bei der Gestaltung Ihrer eigenen Seiten in eine Sackgasse geraten, können Sie stattdessen erhabene Initialen verwenden, die einfacher zu implementieren sind.

Es bleibt zu hoffen, dass es bald neue HTML- und CSS-Standards geben wird, die eine bessere Kennzeichnung und Handhabung von erhabenen Initialen und Kapitälchen ermöglichen. Bis dahin müssen Sie weiter experimentieren und daran arbeiten. Und denken Sie auch daran, dass es Spaß macht, Typografie zu finden, auszuwählen und zu verwenden.