Typografie spielt eine große Rolle im Webdesign, und die richtige Schriftauswahl gibt deinem Design-Entwurf oftmals den entscheidenden Schliff. Außerdem macht das Arbeiten mit Typografie natürlich jede Menge Spaß ;-) Mit den zahlreichen 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

Typografie- und Font-Tools

Eine tolle Seite und definitiv 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 vielleicht sogar etwas für dich ;-)

2. What the Font

Typografie- und Font-Tools

Du hast ein Schriftzug oder Logo im Netz gefunden und möchtest wissen, welche Typo verwendet wurde? Dann lade doch einfach bei »What the Font« ein Image hoch, und es wird dir eine Liste der möglichen Schriften angezeigt.

3. Typechart

Typografie- und Font-Tools

Bei Typechart kannst du dir Web-Fonts in verschiedensten Styles ansehen, die Unterschiede zwischen der Ansicht auf Mac und Windows vergleichen, und den dazugehörigen CSS Code kopieren.

4. Fontstruct

Typografie- und Font-Tools

Fontstruct ist ein kostenloser Online-Editor für Schriften. Deinen fertigen Schrift-Entwurf kannst du als TrueType-Font für Mac und Windows speichern.

5. TypeTester

Typografie- und Font-Tools

Mit dem TypeTester kannst du bis zu drei Font-Styles parallel vergleichen. 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

Typografie- und Font-Tools

Fonttester ist ein praktisches Tool, um mehrspaltigen Text anzulegen. Du kannst etliche Schrift-Werte anpassen, und dir den CSS Code für deine Auswahl generieren lassen.

7. CSS Typeset

Typografie- und Font-Tools

Ein super simples und übersichtlich gestaltetes Font-Tool, mit dem du schnell den passenden CSS Code für deine Styles generieren kannst.

8. Em Calculator

Typografie- und Font-Tools

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

9. PxtoEM

Typografie- und Font-Tools

Das praktische Online-Tool PxtoEM konvertiert dir jede Schriftgröße von Pixel zu EM und andersrum.

10. Blindtext Generator

Typografie- und Font-Tools

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

11. Lorem Ipsum Generator Chrome Extension

Typografie- und Font-Tools

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

12. HTML Ipsum

Typografie- und Font-Tools

Wenn du Blindtext direkt in deinen Code einfügen möchtest, kannst du dir bei HTML Ipsum bereits fertig generierte Texte kopieren.

13. Color Contrast Checker

Typografie- und Font-Tools

Mit diesem Tool kannst du herausfinden, wie gut eine bestimmte Text- und Hintergrundfarbe miteinander harmonieren, und ob sich der Text genügend vom Hintergrund absetzt.

14. STC fontBrowser

Typografie- und Font-Tools

Der STC fontBrowser ist ein geniales Tool um Schriften miteinander zu vergleichen, die du auf deinem Computer installiert hast.

15. CSSTXT

Typografie- und Font-Tools

Ein weiteres hilfreiches 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 weitere hilfreiche Webseiten für Typografie und Schrift? Ich freue mich schon auf deine Tipps!