Dirk Metzmacher 21. Juni 2010

Typo-Tools: Kleine Helferlein für die Web-Typografie

Im Webdesign spielt die Auswahl der gestalterischen Merkmale des Schriftsatzes zumeist nur eine kleine Nebenrolle. Dabei sind Lesbarkeit und Räumlichkeit auch und gerade im Netz sehr wichtig. Geeignete Schriften und deren Formatierung entdeckt man weitaus leichter mit diesen Tools.

Typetester

Der Typetester erfreut den Gestalter schon mit seinem ansprechenden Design. Ein veränderbarer Beispieltext wird dabei in allen erdenklichen Formaten abgebildet. Über das Interface kann dieser Text vielseitig angepasst werden. Bei der Auswahl der Schriftart unterscheidet Typetester schon in einen sicheren Bereich mit Schriften, die weit verbreitet sind, und Schriften, die nur mit bestimmten Betriebssystemen, wie etwa Windows, Mac oder Windows Vista, mitgeliefert werden.

Weiter kann die Formatierung bei der Größe, dem Zeilenabstand, der Laufweite, der Ausrichtung, dem Abstand der Wörter sowie in den Farben des Textes und seinem Hintergrund beeinflusst werden. Drei gleich editierbare Spalten stehen dem Anwender zur Verfügung, wobei zu jeder der CSS-Code aufgerufen werden kann.

PX to EM

Um herauszufinden, wie sich Pixel zu der Einheit em verhalten, sollte man das Tool PX to EM einsetzen. Mit nur einem Klick erhält man basierend auf den Body font die entsprechenden Werte. Damit man diese nicht von Hand eintragen muss, kann über einen zweiten Punkt der CSS-Code angezeigt werden. Ein dritter Punkt mit dem Namen Learn bietet nach dem Aufrufen noch einige Informationen an, wie etwa zur Berechnung der verschiedenen Einheiten.

CSStype

Sehr einfach gehalten ist das Tool CSStype. Nach der Eingabe eines Beispieltextes kann die Schriftart und –farbe, deren Größe und Hintergrundfarbe bestimmt werden. Auch Wort- und Buchstabenlaufweite lassen sich regeln. Spezieller sind die Einstellungsoptionen zur Breite des Absatzes und dem Padding. Auch eine Beschriftung für einen Button kann man festlegen. Ein Klick auf Generate CSS ruft dann den CSS-Code auf.

HTMLipsum

HTMLipsum ist, wie der Name schon andeutet, ein Vorlagenanbieter für weitere Versatzstücke, die der Webdesigner ständig benötigt. Statt einem Blindtext, wie bei Lorem Ipsum, werden hierbei allerdings Code-Schnippsel für Absätze, Listen, Formulare, Tabellen und sogar Navigationsgrundlagen zum sofortigen Einsatz angeboten.

Typographic Grid

Typographic Grid ist kein Framework, sondern eine Formatierungsvorlage. Wer also mit seinem Entwurf gleich auch eine anspruchsvolle Formatierung des Textes vorstellen möchte, der erhält hiermit eine saubere Vorlage. Die 32 KB große Datei kann auf der Seite kostenlos heruntergeladen werden und enhält neben den Dateien für das Grid auch zwei PSD-Files.

CSStypeset

Beim CSStypeset muss man nicht erst die CSS-Datei aufrufen. Sie wird direkt neben dem Text dargestellt. Die Schriftart und –größe gibt man numerisch ein, die Laufweite der Buchstaben und Wörter kann man über Schieberegler steuern. Auch der Zeilenabstand wird so angesprochen. Die Fontfarbe und auch die des Hintergrundes wählt man bequem über einen Farbwähler aus. Einige Buttons lassen den ganzen Text fettgedruckt oder kursiv, links- oder rechtsbündig erscheinen. Ein einfaches Tool, mit guter Aufteilung.

Dummy Text Generator

Es gibt wirklich unendlich viele Lorem Ipsum-Generatoren. Im Webdesign ist solch ein Lückenfüller ja auch sehr nützlich, wenn schnell für neutrale Inhalte gesorgt werden soll. Allerdings mal ehrlich: Etwas langweilig wird das schon mit der Zeit. Und so freut man sich beim Dummy Text Generator über zehn verschiedene Blindtexte, mit Cicero und Li European lingues, Far Far away und Pangram, Kafka und Werther. Die Anzahl der Wörter oder Zeichen sowie die Absätze können hierbei bestimmt werden.

Flipping Typical

Das Tool Flipping Typical bietet einzig das Eintippen eines Wortes oder kurzen Satzes an. Sofort wird die Eingabe auf die verschiedensten Schriftarten umgesetzt, um diese besser vergleichen zu können. Gefällt eine Schrift besonders und möchte man diese vergrößert betrachten, so klickt man deren Namen an. Die größere, einzelne Vorschau wird dann ausgetauscht.

Typograph

Den Typograph auf lamb.cc sollte man besser nicht mit dem Internet Explorer oder Opera öffnen. Da mag der nicht funktionieren. Browser wie Mozilla Firefox oder Apples Safari zeigen keine Probleme und einen Text in der Mitte, der von einigen Dialogen umrahmt wird, die sich auch neu positionieren lassen. Darüber lassen sich die Schriftgröße anpassen, der Zeilenabstand beeinflussen und das generelle Layout verändern.

Identify und FontIdentifier

Dank Identify kann man sehr schnell herausfinden, wie der Name eines Fonts lautet, der nur als Grafik vorliegt. Man gibt zunächst an, wie beim Q das “Strichschwänzelchen” positioniert ist, dann wird das $-Symbol und die Baseline analysiert. Es folgen weitere Fragen, bis eine Schriftart abgegrenzt wurde, die sich womöglich als die gesuchte erweist. Ganz ähnlich geht auch der Service FontIdentifier vor, allerdings werden hierbei weitaus mehr Optionen abgefragt.

FontTester

Beim FontTester können bis zu drei Absätze verschieden formatiert werden. Generell kann für jeden Bereich der Text inhaltlich geändert oder sein CSS-Code abgerufen werden. Einstellen lassen sich dann die Textgröße, die Schriftart und –farbe, die Ausrichtung und zahlreiche weitere Optionen, wie etwa die Zeilenhöhe, die Laufweite oder Textdekorationen.

Web-Typografie-Tool

Jan Quickels bietet das Web-Typografie-Tool an. Das ist eine Matrix zum Berechnen von Schriftgröße und Zeilenabstand in em und px. Nach der Eingabe der Schriftgrößen zeigt die Matrix die entsprechenden Werte an. Auch wird der Sourcecode zum schnellen Kopieren angeboten.

(mm),

Dirk Metzmacher

Dirk Metzmacher

Dirk Metzmacher ist der Herausgegeber des Photoshop-Weblogs, sowie Fachjournalist und Photoshop-Profi, dessen Tutorials seit über 12 Jahren Leser von Fachpublikationen wie Galileo Press, DigitalPhoto, Dr.Web, Print24, PSD-Tutorials oder Noupe von den Grundlagen zum Thema Photoshop bis hin zu professionellen Arbeitsweisen begleitet haben. Sein Twitter-Account und seine Facebookseite.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

11 Kommentare

  1. Guter Artikel :)

    Das eine oder andere Tool wird ich mir sicher mal genauer ansehen…

  2. …und „Font Lister 2.0“ soll nicht unerwähnt bleiben –

    http://www.heise.de/software/download/font_lister/7723

    Font Lister erstellt eine Übersicht installierter Fonts als HTML-Datei. Es berücksichtigt wahlweise alle oder nur eine Auswahl bevorzugter Fonts, nimmt die Schriftgröße entgegen und überlässt dem Anwender die Eingabe eines Beispieltextes, der die Schrift präsentiert.

    Update: …für 5€ als Shareware „FontLister 3.4.9“ bei ZDNET.de
    http://www.zdnet.de/windows_schriften_anwendungen_fontlister__shareware_download-39002345-35-1.htm

  3. Auch zu empfehlen beim Identifizieren eines Fonts. Bei WhatTheFont kann man ein Bild der gesuchten Schrift angeben und bekommt Vorschläge, was es denn sein könnte.

    http://www.myfonts.com/WhatTheFont/

  4. Sehr schöne Auflistung! Für alle die alternative Schriftarten in Ihren Seiten einsetzen wollen, gibt es ja mit SifR & Co. zahlreiche Möglichkeiten (http://webdesigns-rosenheim.de/58-0-Der+schnellste+Weg+zu+sIFR.html). Allerdings gibt es ein Supertool mit dem es möglich ist, Fonts direkt einzubinden ohne die Umwege über Bilder, Flash u.ä. gehen zu müssen. Wir haben diese Technik schon erfolgreich in zahlreichen Projekten getestet. Hier der Link http://www.fontsquirrel.com/fontface/generator

    Vielleicht hilft dies dem Einen oder Anderen…

    Grüße aus Rosenheim

  5. Es gibt da wirklich klasse Tools und hier an den Ergänzungen sieht man auch mal wieder sehr schön, wie wertvoll so eine Kommentarfunktion sein kann, um noch weitere Highlights zu entdecken.

  6. Tolle Sammlung!
    Nur ein Tool fehlt mir was ich häufig für ideale Formate, Abstände und Größe verwende.

    http://goldenratiocalculator.com/

  7. Dieses Tool ist auch nicht schlecht: http://riddle.pl/emcalc/

  8. Eine sehr schönen Zusammenstellung. Da bleibt ja kaum etwas offen in Bezug auf Textgestaltung für Webseiten. An Stelle einer langen Liste von Bookmarks reicht jetzt diese Seite.

  9. servs,

    super beitrag!
    aber ich denke der hier http://new.myfonts.com/WhatTheFont/ fehlt noch :)

    grüße
    steffen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.