Der Begriff "Typo" hatte zu meiner Zeit als Lehrling in Sachen Grafik eine andere Bedeutung als heute. Es war die "hohe Schule der Gestaltung". Im Internet sind kümmerliche Reste verblieben. Es kommt mir noch immer als ein "Kampf" mit stumpfen Waffen vor. Die wichtigsten Typo-Eigenschaften sind mit CSS3 realisierbar. Wichtige Typo-Eigenschaften, die sich bei Publishing-Programmen etabliert haben, erinnern beim Bau einer Website noch immer an einen "Bastelabend".

Schriftwahl, Webfonts

Erfreulich, dass immer bessere Webfonts nutzbar sind (Teure Schriftlizenzen sind nicht in jedem Projekt einsetzbar). Wichtige Webadressen:

Google Fonts > Direkt über DCN-Links in einer Website verfügbar, die Fonts sind auch als TrueType für den Desktop/Printbereich zum Download bereit.
FontSquirrel > Feines Angebot an Schriften, als TrueType zum Download, Genetaror um Webfonts zu generieren die auf dem eigenen Server hinterlegt und mit CSS eingebunden werden.

Typo für die Titel

Standard-Grössen der Titel siehe unten!
LetterSpacing Titel (Buchstabenabstand) Bsp: 0.02px
Der zwischen den Buchstaben, bei viele Schriften wirkt sich auch auf den Wortabstand aus (nicht immer).
Ausrichtung Titel wählen:
Es stehen Linksbündig, Zentriert, Rechtsbündig und Blocksatz zur Auswahl
Browser kennen weder Trennprogramme noch Zeichenausgleich, sie sperren den Text auf die Breite des umgebenden Containers. Blocksatz ist mit Vorsicht zu geniessen bei einem Responsiv-Template.
Schriftstärke Titel wählen:
Ist eine Fontfamilie in den Schnitten Regular, Italic, Bold und Bolditalic installiert, ist es von Vorteil, jeweils die entsprechende Schrift aufzurufen. Viele Schriften werden mit der Verwendung der Ikone "B" als Fettschrift "gequetscht", gute Fontfamilien wechseln die Schrift.
Schriftvariante Titel wählen:
Als Schriftvariante wird "Normal" oder "Kapitälchen" angeboten
Schrifttransformierung Titel wählen:
Grossbuchstaben, Kleinbuchstaben, *Capitalize macht jeden ersten Buchstaben gross (Sprachen) oder *FullWidt zeigt keinen Zeichenausgleich (Screenfonts).

Typo für den Text

LineHeight Titel (Durchschuss) Bsp: 18px
Die Zeilenhöhe ist beim umbrechen der Titel entscheidend, der Abstand nach unten wird beeinflusst
LetterSpacing Titel (Buchstabenabstand) Bsp: 0.02px
Der zwischen den Buchstaben, bei viele Schriften wirkt sich auch auf den Wortabstand aus (nicht immer).
Ausrichtung Titel wählen:
Es stehen Linksbündig, Zentriert, Rechtsbündig und Blocksatz zur Auswahl
Browser kennen weder Trennprogramme noch Zeichenausgleich, sie sperren den Text auf die Breite des umgebenden Containers. Blocksatz ist mit Vorsicht zu geniessen bei einem Responsiv-Template.
Schriftstärke Titel wählen:
Ist eine Fontfamilie in den Schnitten Regular, Italic, Bold und Bolditalic installiert, ist es von Vorteil, jeweils die entsprechende Schrift aufzurufen. Viele Schriften werden mit der Verwendung der Ikone "B" als Fettschrift "gequetscht", gute Fontfamilien wechseln die Schrift.
Schriftvariante Titel wählen:
Als Schriftvariante wird "Normal" oder "Kapitälchen" angeboten
Schrifttransformierung Titel wählen:
Grossbuchstaben, Kleinbuchstaben, *Capitalize macht jeden ersten Buchstaben gross (Sprachen) oder *FullWidt zeigt keinen Zeichenausgleich (Screenfonts).

Andere Grössen für die Titel

Die Standardgrössen der Browser sind nicht immer gewünscht. Sie lassen sich hier benutzerdefiniert einstellen. Die Standeigrössen sind:

h1 > 36px
h2 > 30 px
h3 > 24px
h4 > 18px

Hauttitel h1

Untertitel h2

Untertitel h3

Untertitel h4

Die Standard-Grössen können beliebig überschrieben werden. Es ist aber vorteilhaft, die übliche Semantik und Reihenfolge zu behalten.

Typo