15 Online-Typografie-Tools, die alle Designer kennen sollten

Typografie ist die Grundlage jedes Designs, denn Lesen ist eines der grundlegendsten Dinge, die wir im Web tun. Die von Ihnen gewählte Typografie hat Auswirkungen auf mehrere Aspekte einer Website, einschließlich Lesbarkeit, Stimmung und die allgemeine Benutzererfahrung. Es ist für Designer und Entwickler unerlässlich kennen die Grundprinzipien der Typografie zu Erstellen Sie lesbare, ansprechende Designs.

Wir haben bereits über Font-Pairing-Tools gesprochen, und heute geben wir Ihnen Tools zur Verfügung, mit denen Sie die von Ihnen erstellten und / oder gestalteten Websites besser lesen können.

Hier sind die Plugins, Online-Tools und Skripte, die Ihnen dabei helfen werden Erstelle tolle Schlagzeilen und sauberer lesbarer Text.

Typenschild

Es werden keine Entwurfsentscheidungen für Sie getroffen, sondern das richtige Markup mit Stil für gängige typografische Vorlagen definiert. Es kann Ihnen auch Tipps geben, wie Sie Textkopien richtig gestalten.

Auschecken: Demo | Dokumentation

Gutenberg

Gutenberg ist ein flexibles und benutzerfreundliches Typografie-Starter-Kit für Entwickler und Designer. Es hilft Ihnen, die Basistypgröße, die Zeilenhöhe und die maximale Breite festzulegen. Gutenberg ist ein Open-Source-Projekt, also können Sie es gerne beitragen, anpassen und modifizieren.

Auschecken: Demo | Dokumentation

Beschriftung.js

Lettering.js ist ein jQuery-Plugin, mit dem Sie den Kerning-Typ steuern können. Es ermöglicht Ihnen, das redaktionelle Design mit Leichtigkeit zu erstellen und Code zu verwalten. Die Website enthält erstaunliche Beispiele für Typografie, die mit diesem Plugin zur Inspiration erstellt wurden.

Auschecken: Demo | Dokumentation

Typebase.css

Typebase.css ist ein anpassbares Typografie-Stylesheet. Es enthält sowohl Versionen als auch weniger und kann leicht in moderne Webprojekte umgewandelt werden.

Auschecken: Demo | Dokumentation

FitText

FitText ist ein Plugin, das die Schriftgrade Ihrer Website flexibel gestaltet. Damit können Sie skalierbare Überschriften für verschiedene Bildschirmauflösungen erzielen. Mit anderen Worten, machen Sie Ihre Typografie ansprechbar. Es ist nur für die Anzeige von großem Text gedacht.

Auschecken: Demo | Dokumentation

Kerning.js

Mit Kerning.js können Sie Ihre Typografie mit CSS automatisch transformieren, skalieren und ändern. Es ist einfach, mit Kerning.js anzufangen.

Auschecken: Demo | Dokumentation

Typesettings.css

Typesettings.css ist Ihr Spielplatz für minimalistische Webprojekte oder Blogs. Alle hier verwendeten Typografie-Stile sind von den Grundlagen des Grafikdesigns inspiriert.

Auschecken: Demo | Dokumentation

Rucksack

Mit Rucksack können Sie dank einer neuen, reaktionsschnellen Eigenschaft der Schriftgröße erstaunlich flüssige Typografie erzeugen. Das Erstellen von responsiven Typografien ist außergewöhnlich einfach.

Auschecken: Demo | Dokumentation

FlowType.JS

Die am besten lesbare Typografie enthält zwischen 45 und 75 Zeichen pro Zeile, aber dieses Gleichgewicht zu finden, ist eine Herausforderung für Entwickler. FlowType.JS ändert die Schriftgröße und anschließend die Zeilenhöhe basierend auf der Breite eines bestimmten Elements.

Auschecken: Demo | Dokumentation

Blast.js

Blast.js hilft Ihnen beim Trennen von Texten, um die Manipulation der Typografie zu erleichtern. Es enthält 4 eingebaute Trennzeichen: Zeichen, Wort, Satz und Element. Es kann auch benutzerdefinierte Ausdrücke und Ausdrücke zuordnen.

Auschecken: Demo | Dokumentation

slabText

slabText ist ein einfaches Skript, das Überschriften in Zeilen aufteilt, um den verfügbaren horizontalen Raum optimal auszufüllen. Das Skript berechnet eine ideale Anzahl von Zeichen, die in jeder Zeile festgelegt werden sollen, indem die verfügbare Breite durch die Pixelgröße der Pixel geteilt wird.

Auschecken: Demo | Dokumentation

Typ Skala

Mit Type Scale können Sie eine Vorschau anzeigen und den richtigen Typ für Ihr Projekt auswählen. Es gibt keine Regeln - spielen Sie einfach mit Schriftgröße, Skalierung und verschiedenen Webschriftarten.

Auschecken: Demo | Dokumentation

Typografische

Typografisch hilft Ihnen, Typografie ansprechbar zu machen. Sie müssen nur ein paar Schriftarten auswählen, ein paar Einstellungen vornehmen und Sie erhalten eine ansprechende Typografie.

Auschecken: Demo | Dokumentation

Typi

Typi ist ein Saas-Mix, mit dem Sie leicht responsive Typografie erstellen können. Es erstellt Schriftgröße und Zeilenhöhe für HTML und andere Elemente. Typi verfügt außerdem über eine vertikale Rhythmusfunktion zur Berechnung der Zeilenhöhe.

Auschecken: Dokumentation

Lining.js

Mit dem Lining.js-Plugin haben Sie die vollständige Kontrolle über die Web-Typografie. Es wird von den meisten gängigen Browsern wie Safari, Google Chrome, Opera und Mozilla Firefox unterstützt.

Auschecken: Demo | Dokumentation

Bonus: 2 weitere Tools!

Zustand des Webtyps

State of the Web Type ist eine Website, die aktuelle Daten zur Unterstützung von Typ und Funktionen im Web bietet. Sie können Suchen oder Kategorien wie Kerning, Großraumabstand, Laden von CSS-Schriftarten usw. verwenden, um genau das zu finden, was Sie benötigen.

Typograph

Typograph ist ein fantastisches Web- und Skizzen-Plugin, mit dem Sie nach Ein-Buchstaben-Wörtern geschützte Leerzeichen setzen und die Nummer mit der Einheit verbinden können. Es entfernt auch doppelte Leerzeichen, Eingaben, Punkte und andere Tippfehler, sodass Sie eine saubere, schöne und leicht lesbare Typografie erzielen können.

Auschecken: Dokumentation