Typografie: Möglichkeiten

Stefan Nitzsche, 10. November 2006

Ziel dieses Artikels ist das Aufzeigen von verschiedenen typografischen Möglichkeiten, die sich trotz der für sehr eng gehaltenen Grenzen im Internet nutzen lassen.

Inhalt:

Initiale

Eine Initiale (v. lat.: initium: „Anfang, Beginn“) ist ein schmückender Anfangsbuchstabe, der im Werksatz als erster Buchstabe von Kapiteln oder Abschnitten verwendet wird[1]. Mangels Semantik führt diese Methode bei deaktivierten Style Sheets zu einer neutralen Darstellung.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

span {
	color: #4c8fbf;
	float: left;
	font-size: 6em;
	font-weight: bold;
	height: 1.05em;
	margin-top: -.23em;
	width: .8em;
}

Kapitälchen

Kapitälchen sind Großbuchstaben (Versalien), deren Höhe der Normalhöhe (x-Höhe) der Kleinbuchstaben (Gemeinen) entspricht. Ihre Strichstärke und ihr Grauwert orientieren sich an denen der Gemeinen[2].

Lorem ipsum dolor sit amet.

Code:

span {
	color: #4c8fbf;
	font-size: 1.2em;
	font-variant: small-caps;
}

Sonderzeichen

Sonderzeichen, wie zum Beispiel typografische Anführungszeichen, sind UTF-8-kodiert problemlos darstellbar und damit auch zu benutzen.

Sonderzeichen
Sonderzeichen Beschreibung
fetter Mittepunkt
© Copyright-Zeichen
® Registrierungs-Zeichen
Trade-Mark-Zeichen
Apostroph
‚‘ dt. einfache Anführung
„“ dt. Anführung
»« Anführung
›‹ einfache Anführung
Ellipse/Dreipunkt
Gedankenstrich
langer Gedankenstrich
Kreuz

Kerning

Beim Kerning spricht man von Reduktion bzw. Produktion von Abständen zwischen der einzelnen Zeichen.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

Code:

span.class-1 {
	letter-spacing: .5em;
}

span.class-2 {
	letter-spacing: normal;
}

span.class-3 {
	letter-spacing: -.075em;
}

Einzug

Als Einzug bezeichnet man einen Leerraum zu Beginn der ersten Zeile eines Absatzes. Dem Auge wird es so erleichtert, die Absätze zu erkennen, ohne dass der Lesefluss unterbrochen wird, wie es bei Leerzeilen der Fall wäre.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Code:

p {
	text-indent: 1em;
}

Abkürzungen und Akronyme

Erklärungen zu Abkürzungen und Akronymen kann man, neben der für XHTML typischen Variante mit title-Attributen der Tags <abbr> bzw. <acronym> (XHTML 2 verwendet das Element abbr für jede Art von Abkürzung, einschließlich Akronymen [3]) auch direkt im Fließtext auszeichnen. Hierzu bedient man sich einfach des semantisch neutralen <span>-Tags und formatiert diesen per CSS. Mangels Semantik führt diese Methode bei deaktivierten Style Sheets zu einer neutralen Darstellung.

CSS (Cascading Style Sheets)

XHTML (Extensible Hypertext Markup Language)

Code:

span {
	font-size: .8em;
	font-variant: small-caps;
	letter-spacing: .05em;
	vertical-align: super;
}

Mediäval-Ziffern

Mediäval- oder Minuskel-Ziffern sind indo-arabischen Ziffern mit variierenden Oberlängen und Unterlängen im Vierliniensystem (Schriftlinien). Man bezeichnet sie auch als Gemeine Ziffern, Charakterziffern oder Nautische Ziffern [4]. Zahlen und Daten, die mit diesen Ziffern gesetzt werden, sind besser lesbar. Für den Tabellensatz verwendet man jedoch die dicktengleichen Majuskel-Ziffern. Es gibt eine Bildschirmschrift, die solche Mediäval-Ziffern zur Verfügung stellt – die Microsoft-Schrift ist die Georgia, ihr Mac-Äquivalent ist die Times.

0 1 2 3 4 5 6 7 8 9

10. November 2006

13.6.2007, 12:48 Uhr

Redaktionelle Reduzierung der Flatterzone

Da man im Internet nicht mit Trennungen und weichen bzw. harten Leerschritten arbeiten sollte und Blocksatz ein absolutes Tabu ist, kommt es bei linksbündigem Flattersatz oft zu einer breiten Flatterzone. Wenn ein anspruchsvolles, leicht lesbares Schriftbild gewünscht ist, sollte der Text redigiert werden, um die Flatterzone möglichst schmal zu halten.

[1] Quelle: Wikipedia Deutschland

[2] Quelle: Wikipedia Deutschland

[3] Quelle: X/HTML 5 Versus XHTML 2

[4] Quelle: Lexikon der Typographie

Bemerkungen/Erklärungen

Links zu diesem Thema: