Typografie 10 Nützliche Tools und Ressourcen

In meinem letzten Artikel über Typografie verstehen habe ich darüber geschrieben, was in die Gestaltung von Typografie eingeht und wie man sie manipuliert, um das Layout Ihrer Website zu verbessern und die Benutzererfahrung zu verbessern. In diesem Artikel liste ich auf 10 meiner Lieblingswerkzeuge für Typografie im Internet.

Diese können beim Erstellen von HTML-Rastern und Inhaltsbereichen, beim Erstellen von CSS-Stilen, beim Generieren von Schriftnamen und einer Reihe anderer cooler Dinge hilfreich sein. Schauen Sie sich einige der Links unten an und teilen Sie uns Ihre Meinung im Post-Diskussionsbereich mit.

Literatur-Empfehlungen: Typografie verstehen: Schreiben für das Web

Font Matrix

Dieses Online-Handbuch wurde vom 24ways Design-Blog veröffentlicht. Es enthält eine Matrixtabelle mit allen Standard-Webfonts, die Sie standardmäßig von verschiedenen Softwareanbietern finden. Beliebte Titel sind Windows, Mac OS X, Microsoft Office und Adobe Creative Suite.

Farbkontrastprüfung

Der Farbkontrast ist häufig ein Problem, wenn Sie sich außerhalb des Standard-Schwarzweißmodells befinden. Wenn Sie eine Übereinstimmung finden, fühlt es sich an wie Perfektion des Designs. Eine schlechte Farbkombinationsauswahl sieht jedoch sehr schlecht aus und wird das Gesamtdesign negativ beeinflussen. Mit diesem kleinen Web-Tool können Sie einen Farbsatz auswählen, der sich für jedes Stil-Layout eignet.

HTML-Ipsum

Benötigen Sie ein Lorem Ipsum-Tool, das mehr kann als nur Text ausgeben? Dieser Online-HTML-Generator erstellt Codeblöcke für die häufigsten Seitenelemente. Einige Beispiele umfassen ungeordnete Listen, Definitionslisten, Webformulare, Tabellen und viele andere Lösungen.

Typenkart

Typechart ist eines meiner Lieblingswerkzeuge als CSS-Entwickler. Ich suche häufig, eine bestimmte Schriftart in meinem System einem Webprojekt zuzuordnen, aber ich habe einfach keine Zeit, um meine gesamte Sammlung durchzublättern. Mit diesem großartigen Tool können Sie die beliebtesten Schriftfamilien durchsuchen und sogar den richtigen CSS-Code herunterladen!

PX-to-EM.com

Wenn Sie die Standard-Browsertextgröße nicht zurücksetzen, haben Sie wahrscheinlich Probleme, die Ems mit Pixeln abgleichen. Diese In-Browser-App bietet sowohl eine Konvertierungstabelle als auch eine Benutzeroberfläche für px in em. Es ist zwar ein sehr einfaches Werkzeug, aber es bietet eine praktische Anleitung mit wirklich einfacher Funktionalität - und Sie können den kostenlosen Preis nicht schlagen.

CSS-Typensatz

Ich empfehle nicht, zu lange mit CSS Type Set zu bleiben, da es wirklich ein Anfängerwerkzeug ist. Sie können CSS-Code basierend auf bestimmten von Ihnen ausgewählten Schrifteigenschaften generieren. Obwohl es zunächst sehr nützlich ist, wird es im Laufe der Zeit zu einer Krücke, auf die man sich stützen kann. Und Sie werden nicht motiviert sein, die CSS-Eigenschaften selbst zu beherrschen. Wenn Sie jedoch Zeit für ein Projekt sparen müssen, kann dieses Tool nicht übersehen werden.

typisch spiegeln

Hier ist ein wirklich einzigartiges Beispiel für eine Bibliothek zur Schriftartenvorschau. Das Umblättern von Typical umfasst eine Handvoll Schriftarten, die in Ihrem Betriebssystem enthalten sind. Das Schriftverzeichnis wird automatisch durchsucht, um die websichersten Lösungen zu finden. Sie können sie nebeneinander vergleichen und einfach zwischen Ihren bevorzugten Optionen wählen. Dies ist eine weitere großartige Zeitersparnis, die Sie als Lesezeichen speichern und erst in letzter Minute nachdenken.

Typografisches Gitter

Es wird viel darüber gesprochen, in HTML und CSS rund um das Raster zu entwerfen. Sie kennen wahrscheinlich das Konzept der Funktionsweise von Rastern. Das Messen einer Website in Pixeln ist nicht anders. Dieses Grid-Tutorial von CSS-Tricks ist eher ein geführter Versuch, die Grundlagen der Typografie für das digitale Zeitalter vorzustellen. Es ist ein viel fortgeschritteneres Thema im Bereich Webdesign. Wenn Sie jedoch etwas Geduld haben, empfiehlt es sich, die Details durchzugehen, um zu sehen, wie diese Rastereigenschaften Ihr Seitenlayout beeinflussen können.

WhatTheFont!

Wir haben alle ein Logo oder ein Bild mit einer wirklich coolen, nicht identifizierbaren Schriftart gefunden. WhatTheFont ist seit einigen Jahren im Internet unterwegs und es ist immer noch ein Favorit von mir. Sie wählen ein Bild aus, das Sie hochladen möchten, und ihr Skript analysiert den Text innerhalb des Bildes, um ähnliche Schriftbilder zu finden. Die App verbindet Sie sogar mit externen Produkten, bei denen Sie jede Schrift nach Belieben erwerben können.

Grundlinien- / Linienhöhenrechner

Endlich ein wirklich leistungsfähiges Werkzeug zum Erzeugen von Linienhöhe und Rhythmus-Eigenschaften. Geben Sie einfach Werte für die Basisschriftgröße und die Zeilenhöhe ein oder fügen Sie Ihren eigenen benutzerdefinierten CSS-Code zur Seite ein. Die App generiert Vorschaubilder in verschiedenen Stilen, damit Sie sich ein Bild davon machen können, wie diese Eigenschaften auf Ihrer eigenen Website aussehen würden.