Drücke die Tasten ◄ ► für weitere Artikel  

Webdesign: Mit dem „Typography Calculator“ die Schriftgröße optimieren

Beim Webdesign stellt sich irgendwann die Frage nach der richtigen Schriftart und Schriftgröße – Zeilenabstand, Laufweite und andere Faktoren kommen dazu. Mit dem „Golden Ratio Typography Calculator“ könnt ihr all das in Ruhe testen und für euer Projekt optimieren.

Webdesign: Mit dem „Typography Calculator“ die Schriftgröße optimieren
Old movable type Letter A on a white background.
Das „Killer Typography Tool“, wie Chris Pearson seinen Typography Calculator auch nennt, funktioniert mit drei einfachen Parametern: der Schriftgröße, einer Angabe für die Breite des Content-Bereichs und – optionial – den Anschlägen pro Zeile. Gibt man Schriftgröße und Content-Breite ein, spuckt der Calculator eine Vorschau mit verschiedenen Varianten aus. Wählen könnt ihr dabei aus 15 , darunter Georgia, Helvetica Neue, Hoefler Text oder Palatino.

Screenshot
Mit dem „Golden Ratio Typography Calculator“ könnt ihr einfach die Schriftgröße für euer Webdesign optimieren. (Screenshot: pearsonified.com/typography)

Webdesign: Per Formel die Schriftgröße optimieren

So könnt ihr euch mit dem Tool nicht nur anschauen, wie das optimale Verhältnis zwischen Content-Breite und Schriftgröße aussieht, ihr könnt euch alternativ auch anzeigen lassen, welche Schriftgröße ihr besser hättet wählen sollen oder welches Verhältnis das beste ist, um die von euch gewünschte Zeichenzahl pro Zeile optimal darzustellen.

Und gerade zu diesem Bereich – den „Characters Per Line“ (CPL) – hat sich Pearson ausführlich Gedanken gemacht. Die optimale Zeichenzahl pro Zeile beläuft sich, das ist keine neue Erkenntnis, auf 50 bis 100 Zeichen, in diesem Bereich ist die beste Lesbarkeit gegeben. Wie aber passt man die Typography auf diese Angabe an? Statt der „guten alten Trial-and-error-Methode“, die Pearson – um es dezent auszudrücken – als nervtötend bezeichnet, schlägt der Webdesigner schlichte Mathematik vor. Wobei schlicht eigentlich der falsche Ausdruck ist. In einem komplexen, aber hochspannenden Artikel führt Pearson uns von den ersten Grundannahmen bis hin zu einem „Zeichen-pro-Zeile-Vorhersage-Algorithmus“. Und: Er leitet daraus eine Zeichen-Konstante („character constant“) ab, mit der er das Verhältnis von Schriftgröße und Zeichenbreite analysiert und für die Optimierung von Fließtext im nutzt.

Vielen ist das vielleicht schon zu komplex, und so kommen wir noch einmal zurück zum „Golden Ratio Typography Calculator“. Vor allem eine neue Funktion, die Pearson kürzlich eingebaut hat, dürfte sich als äußerst nützlich erweisen: Mit einem Klick nämlich spuckt das Tool auch die optimalen Schriftgrößen für „Title“, „Headlines“, „Sub-headlines“, „Primary Text“ und „Secondary Text“ aus. Pearsons Tool gibt Webdesignern so die wichtigsten Bausteine für die Typografie an die Hand – und das mit wirklich wenigen Klicks.

Bildnachweis für die Newsübersicht: © iStockfoto/TinaFields

Weiterführende Links

111 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
3 Antworten
  1. von web frontend | Annotary am 22.05.2013 (16:15Uhr)

    [...] More from Patrick Kohan: android app OS X renovierung Rezepte Sort Share t3n.de       0 minutes [...]

  2. von Werbeagentur Mitarbeiter am 23.05.2013 (15:57Uhr)

    Hört sich nach einem interessanten Tool für Webdesign an. Danke für den Beitrag.

  3. von Typesetwith.me: So prüfst du Typografie… am 21.08.2013 (13:26Uhr)

    […] Webdesign: Mit dem „Typography Calculator“ die Schriftgröße optimieren  – t3n News […]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Webdesign
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben
Google Zeitgeist 2013: Wonach wir in diesem Jahr gesucht haben

Google Zeitgeist 2013 bietet wie jedes Jahr einen Überblick über die am häufigsten gesuchten Begriffe. Wonach in Deutschland gesucht wurde, erfahrt ihr in unserem Artikel. » weiterlesen

Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen
Prototypo: Online-Tool soll die Erstellung von Fonts radikal vereinfachen

Prototypo soll ein extrem einfaches Online-Tool zur Erstellung von Schriftarten werden. Zur Vollendung des Open-Source-Werkzeugs suchen die Macher derzeit nach Unterstützung auf Kickstarter. » weiterlesen

OpenType und CSS: Nützliche Snippets rund um font-feature-settings
OpenType und CSS: Nützliche Snippets rund um font-feature-settings

Mit dem relativ neuen CSS-Attribut font-feature-setting ist es möglich, die Möglichkeiten von OpenType-Schriftarten auszureizen. Ihr wollt Ligaturen, Brüche oder sogenannte „Swashes“ mit... » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen