Typografie spielt eine große Rolle im Webdesign, und die rich­tige Schriftauswahl gibt deinem Design-Entwurf oft­mals den ent­schei­denden Schliff. Außerdem macht das Arbeiten mit Typografie natür­lich jede Menge Spaß ;-) Mit den zahl­rei­chen Online-Tools für Webdesigner ist die Entscheidung für eine bestimmte Schrift auch gar nicht mehr so schwierig. Und den CSS Code für die Schriftwahl gibt’s dann meist gleich gratis dazu.

1. CopyPasteCharacter

Eine tolle Seite und defi­nitiv ein Browser-Lesezeichen wert, wenn du auf der Suche nach HTML-Codes für Sonderzeichen bist. Und wenn du ein wahrer Fan von Sonderzeichen bist, ist der CopyPasteCharacter-Kaffeebecher ja viel­leicht sogar etwas für dich ;-)

2. What the Font

Du hast ein Schriftzug oder Logo im Netz gefunden und möch­test wissen, welche Typo ver­wendet wurde? Dann lade doch ein­fach bei »What the Font« ein Image hoch, und es wird dir eine Liste der mög­li­chen Schriften angezeigt.

3. Typechart

Bei Typechart kannst du dir Web-Fonts in ver­schie­densten Styles ansehen, die Unterschiede zwi­schen der Ansicht auf Mac und Windows ver­glei­chen, und den dazu­ge­hö­rigen CSS Code kopieren.

4. Fontstruct

Fontstruct ist ein kos­ten­loser Online-Editor für Schriften. Deinen fer­tigen Schrift-Entwurf kannst du als TrueType-Font für Mac und Windows speichern.

5. TypeTester

Mit dem TypeTester kannst du bis zu drei Font-Styles par­allel ver­glei­chen. Du kannst aus einer Liste von Web-Safe, Windows und Mac-Fonts wählen und u.a. die Werte von Schriftgröße, Farbe und Hintergrund anpassen.

6. Fonttester

Fonttester ist ein prak­ti­sches Tool, um mehr­spal­tigen Text anzu­legen. Du kannst etliche Schrift-Werte anpassen, und dir den CSS Code für deine Auswahl gene­rieren lassen.

7. CSS Typeset

Ein super sim­ples und über­sicht­lich gestal­tetes Font-Tool, mit dem du schnell den pas­senden CSS Code für deine Styles gene­rieren kannst.

8. Em Calculator

Du willst deine Schriftgrößen von Pixel in EM umwan­deln? Dann ist dieses Tool dein neuer bester Freund ;-)

9. PxtoEM

Das prak­ti­sche Online-Tool PxtoEM kon­ver­tiert dir jede Schriftgröße von Pixel zu EM und andersrum.

10. Blindtext Generator

Um dein Design-Layout oder dein Theme mit Blindtext zu füllen, kannst du dir die pas­senden Texte mit dem Blindtext Generator erstellen.

11. Lorem Ipsum Generator Chrome Extension

Und falls du mit Google Chrome arbei­test, ist die Lorem Ipsum Generator Extension ein toller Tipp.

12. HTML Ipsum

Wenn du Blindtext direkt in deinen Code ein­fügen möch­test, kannst du dir bei HTML Ipsum bereits fertig gene­rierte Texte kopieren.

13. Color Contrast Checker

Mit diesem Tool kannst du her­aus­finden, wie gut eine bestimmte Text- und Hintergrundfarbe mit­ein­ander har­mo­nieren, und ob sich der Text genü­gend vom Hintergrund absetzt.

14. STC font­Browser

Der STC font­Browser ist ein geniales Tool um Schriften mit­ein­ander zu ver­glei­chen, die du auf deinem Computer instal­liert hast.

15. CSSTXT

Ein wei­teres hilf­rei­ches Online-Tool, um den CSS Code deiner Schriftauswahl online zu generieren.

Wie gefallen dir diese Font-Tools für Webdesigner? Arbeitest du selbst mit den Tools, oder kennst du wei­tere hilf­reiche Webseiten für Typografie und Schrift? Ich freue mich schon auf deine Tipps!