27.12.2007
Recherche-Fundstücke: Typografie im Web
Auf der Suche nach Lösungswegen, wie man iditionsicher und supereasy einen verblockten Absatz für eine Überschrift in ein CMS integrieren kann, so dass der spätere Anwender sich nicht um Grafikprogramme oder Letterspacing sorgen machen muss, stieß ich auf viele gute Seiten … leider noch nicht auf die Lösung für etwas, das jede halbpopelige Textverarbeitung kann: eine mehrzeilige Überschrift optisch verblocken. Linktipps werden gerne entgegengenommen.
Genug geblubbert. Die Linktipps zum Thema Typografie:
Das beste zuerst — Schrifteinstellungen optimieren mit korhoens Typeviewer
Ich habe identische Eingaben in allen drei Fenstern und diese dann auf meinem Desktop neben einander gestellt. Schön auch zu sehen, wie font-weight die Darstellung beeinflusst. Was mir am besten gefiel:
text {font-size: .9em;font-family: Trebuchet MS;font-weight: normal;font-style: normal;font-variant: normal;text-transform: none;text-align: left;line-height: 1.5em;word-spacing: .25em;letter-spacing: .15em;}
Und sonst:
- Fontscrape (Freefont für Windows PC)
- Fontleech (best freefonts)
- Pixelfonts (wenns besonders futzelig gebraucht wird)
- Glashaus (absolut wunderschön gestaltete Flash-Website)
- Isaries Flashfont-Librarie (sIFR)
- Übersicht der aktuellen Methode für Typo im Web
- Mezzoblue gleich mit zwei Seiten:
- Übersicht: Image-Replacement-Techniken (Gleiches Thema auf deutsch.)
- Schriften unter der Lupe
- Bulletproof graphic Linkbuttons
*Seufz* Lauter Links, die nicht wirklich mit dem Problem aus dem 1. Absatz in Bezug stehen.
Ich muss an dieser Stelle erst einmal abbrechen. Selbst die Beschäftigung mit der PHP-Funktion imagettftext() oder den Möglichkeiten und Unwegbarkeiten von Javascript (letter-spacing und font-size mit Javascript-Schiebereglern so bearbeiten, dass ein Block entsteht, der wie in der Grafik oben eine grafisch ansprechende Überschrift ergibt, die dann per Inlinestyle vom CMS in den <h [1-6]>-, bzw. in <span>-Tags übernommen werden können.
Ein weiterer Linktipp nicht nur typo-bezogen: Code-Schnipsel für Webdesigner (eine wahrhaft beeindruckende Sammlung nützlicher Dinge.)
Ornament-Bildquelle: Gutenberg.org Hans Christian Andersens Märchen
Filed under: Design
No Comments