Der ultimative Typografie-Ratgeber!

Webtypografie für anspruchsvolle Designs

Setze dich mit hochwertiger Typografie von der breiten Designmasse ab.
Das Kit hilft dir mit vielen Anleitungen, praktischen Beispielen, Tipps und kreativen Inspirationen deinen Designprozess zu optimieren.

Typografie Kit 45

Warum ein Typografie Kit?

Content is king“ und „Web Design is 95% Typography“ – diese zwei bekannten Zitate zeigen die Bedeutung von guter Typografie.

Aber während auf Farben, Bilder, Grafiken viel Wert bei der Auswahl und Gestaltung gelegt und entsprechend Zeit investiert wird, bleibt Typografie zu oft eher ein Randaspekt.

Wenn du aber weißt, wie du gute und passende Schriften findest, sie kombinieren kannst und vor allem damit Texte gestalten kannst, dann schaffst du hochwertige Designs, die ihren Zweck erfüllen und gut aussehen.

Gute Typografie ist der Anfang von allem (ok, zumindest von allen Designs). Wenn du das demnächst auch in deiner Arbeit schaffst, dann setzt du dich damit klar, von der breiten „Designmasse“ ab…

Ein praktischer Ratgeber

Das Webtypografie Kit ist nicht wirklich ein Online-Kurs, der von A bis Z durchgearbeitet werden muss und eigentlich doch nur selten angeschaut wird.

Das Kit ist nicht wirklich ein Handbuch, das dir viel Theorie erzählt und du nachher doch nicht genau weißt, was du machen sollst.

Das Kit ist eher sowas wie das Beste aus allen Formaten:
Ein umfassender praktischer Ratgeber, der vielfältiges theoretisches Wissen vermittelt – immer in Verbindung mit praktischen Beispielen, Tipps und Handlungsempfehlungen.

Du bekommst also nicht nur das theoretische und praktische Wissen, sondern auch Hilfestellung für die Anwendung, um deinen Arbeitsprozess zu erleichtern.

Das Kit ist so angelegt, dass du für einzelne Fälle, Fragen und Herausforderungen jeweils die passende Antwort bekommst. Du musst dafür nicht alles von vorne bis hinten durchlesen (kannst du aber natürlich), sondern schnappst dir einfach den Abschnitt, der gerade für dich wichtig ist.

Das lernst du alles:

Praktisches Wissen, das du sofort in deinen Designprojekten einsetzen kannst!

Typografie Kit 46

Typografie-Grundlagen

Lerne die wichtigsten Grundlagen kennen, um gute Typografie gestalten zu können.

Typografie Kit 47

Schriften finden

Lerne die wichtigsten Webfonts-Anbieter kennen und wie du Webfonts einbindest.
Dazu stelle ich dir über 30 Fonts-Hersteller vor, um auch einmal andere professionelle Schriften einsetzen zu können.

Typografie Kit 48

Schriftarten auswählen und mischen

Erfahre, nach welchen Kriterien du du Schriften auswählen solltest und wie du mehrere Schriften mischen kannst.

Typografie Kit 49

Schriftempfehlungen & -kombinationen

Aus der unendlichen Vielfalt an Schriften, bekommst du eine kurtierte Auswahl: Ich stelle dir über 235 professionelle Fonts von bekannten und weniger bekannten Anbietern und Herstellern vor. Dazu bekommst du über 45 Schriftkombinationen, die miteinander harmonieren und die du direkt einsetzen kannst.

Typografie Kit 50

Texte professionell gestalten

Lerne alles Wichtige über Schriftgrößen, -farben, Zeilenabstände, -längen und weitere Aspekte kennen, die nachher aus einem Text ein harmonisches typografisches Gesamtbild schaffen.

Typografie Kit 51

Für scann- und lesbare Texte sorgen

Lerne dem Leser einen schnellen Überblick zu bieten, wie eine gute Lesbarkeit entsteht und was du im Detail zu beachten hast.

Typografie Kit 52

Passende CSS-Anweisungen

Zu den einzelnen typografischen Punkten steht immer gleich der passende CSS-Code dabei. Dazu erhälst du einen „CSS-Spickzettel“, in dem alle wichtigen typografischen Anweisungen stehen.

Typografie Kit 53

Jede Menge Typografie-Inspirationen

Fontsempfehlungen, Praxis-Beispiele, Demo-Dateien, Merkzettel, Tools- und Artikellinks – das Kit ist auch voll mit Anregungen und Vorbildern für deine tägliche typografische Arbeit.

Was du durch das Kit erreichen wirst:

Und so ist das Kit aufgebaut:

Typografie Kit 54

Theorie-Wissen
Das notwendige Wissen wird kompakt und verständlich in Textform vermittelt.

Typografie Kit 55

Infografiken
Vielfältige und detaillierte Infografiken visualisieren nachvollziehbar wichtige Inhalte.

Typografie Kit 56

Reale Beispiele
Beispiele echter Websites verdeutlichen die Theorie-Inhalte anschaulich.

Typografie Kit 57

CSS-Codes
Die CSS-Anweisungen stehen mit Beispielen bei den entsprechenden Inhalten, so dass schnell die Brücke vom Design zum Frontend geschlagen werden kann.

Typografie Kit 58

Empfehlungen
Zu jedem Hauptabschnitt gibt es Tipps und Richtlinien, so dass du direkt mit passenden Werten anfangen kannst.

Typografie Kit 59

Merkzettel
Die wichtigsten Infografiken sind noch  einmal kompakt zusammengefasst. So hast du sie schnell im Zugriff und kannst sie direkt neben dich und deine Arbeit legen.

Typografie Kit 60

Demo-Dateien
Mit Hilfe der Demo-Dateien kannst du direkt praktisch selber loslegen: Du kannst deine neuen Kenntnisse ausprobieren, bzw. sie bei deinen Designprojekten direkt einsetzen.

Kit-Inhalte im Detail:

Grundlagen Webtypografie

49 Seiten
  • Was ist Typografie?
  • Warum ist Webtypografie überhaupt so wichtig?
  • Schriftarten vs. Fonts
  • Lesbarkeit
  • Begrifflichkeiten
  • Klassifikation – Welche Schriftarten gibt es?
  • Serifenschriften
  • Serifenlose Schriften
  • Schreibschriften
  • Dekorative Schriften
  • Monospace
  • Schriftschnitte
  • Schriftfamilien
  • Typografie Fails

Fonts finden & Fontsanbieter

29 Seiten
  • Wo bekommt man Schriften her?
  • Webfonts-Anbieter
  • Weitere Fonts-Anbieter
  • Webfonts laden & einsetzen
  • Variable Fonts

Schriften auswählen & mischen

59 Seiten
  • Grundsätzliche Kriterien für die Schriftwahl
  • Schriftart wählen – Fließtext
  • Schriftartenempfehlungen Fließtext
  • Schriftart wählen – Headline
  • Schriften kombinieren
  • Schriftkombinationen, die du nicht einsetzen solltest

Kombinationsempfehlungen

25 Seiten

über 45 Schriftkombinationen
mit über 90 Google Fonts

Ausgewählte Google Fonts

157 Seiten
über 85 Fonts

  • Sans-Serif-Schriften
  • Serif-Schriften
  • Monospace-Schriften
  • Superfamilien

Ausgewählte Adobe Fonts

107 Seiten
über 50 Fonts

  • Sans-Serif-Schriften
  • Serif-Schriften
  • Monospace-Schriften
  • Superfamilien

Ausgewählte Fonts anderer Fontshersteller

58 Seiten
über 100 Fonts
+ 12 „Superfamilien“

Textgestaltung

87 Seiten
  • Einführung Textgestaltung
  • Designprozess
  • Ausrichtung
  • Schriftgröße
  • Zeilenlänge/Spaltenbreite
  • Zeilenabstand
  • Schriftfarbe
  • Schriftschnitte Vertikale
  • Abstände
  • Zeichenabstand
  • Großbuchstaben/Versalien
  • Besondere Zeichen
  • Links Überschriften
  • Text auf Bild
  • Accessibility
  • Typografisches System
  • Text als Gestaltungsmittel

Infografiken

14 Infografiken
  • Überblick Schriftarten
  • Serifenschriften
  • Sans-Serif-Schriften
  • Ablauf der Wahl einer Schriftkombination
  • Gute Lesbarkeit & Absatzproportionen
  • Schriftgröße
  • Zeilenhöhe
  • Zeilenlänge
  • Beispielgrößen
  • Schriftsystematik
  • Visuelle Hierarchie
  • Kriterien Schriftwahl
  • Textauszeichnungen

Demo-Dateien

3 HTML-/CSS-Dateien
  • Testseite – Alle HTML-Typo-Elemente
  • Fonts testen – Beispielinhalte
  • Responsive Typografie

Tools & Quellen

über 80 Typografie-Links

Checkliste

über 90 Punkte
  • Checkliste Textgestaltung
  • Checkliste Schriftauswahl

CSS-Spickzettel

über 20 typografische CSS-Eigenschaften kurz und bündig erklärt

Das Kit hat also insgesamt:

  • über 640 PDF-Seiten
  • über 670 Abbildungen

Vorteile des Kits:

Gestalte höherwertige Designs

Du lernst die wichtigsten theoretischen Typografie-Grundlagen und die praktischen Umsetzungen. Dank des Kits wirst du bessere und höherwertige Design-Leistungen anbieten können.

Ein „Kurs-Handbuch“

Du kannst das Kit der Reihe nach durcharbeiten – und wirst jede Menge lernen. Oder du holst dir punktuell immer genau die Hilfe, die du gerade brauchst. Die übersichtliche Struktur hilft dir dabei.

Praxisnah

Die theoretischen Inhalte werden direkt an praktischen Beispielen erläutert.
Reale Best Cases und Worst Cases vertiefen und verdeutlichen die Beispiele.

 

Optimierung Arbeitsprozess

Durch die knackigen Hilfestellungen kommst du schneller zu guten Ergebnissen.
So muss du bspw. nicht mehr selber stundenlang alle möglichen Schriftanbieter durchsuchen, sondern bekommst eine Auswahl an tollen Schriftarten geliefert. Alleine das spart dir schon bei jedem Projekt mehrere Stunden Arbeit…

Übungsdateien & "Spickzettel"

Das Kit enthält HTML-/CSS-Dateien, um das Gelernte direkt selber auszuprobieren und um bei deinen künftigen Designprojekten Testdateien und -texte parat zu haben.

Dazu sind die wichtisten Infografiken kompakt zur schnellen Übersicht als „Spickzettel“/Poster/Merkblatt zusammengefasst.

Lerne überall
und von jedem Gerät

Das Kit kommt digital zu dir, vor allem in Form von PDF-Dateien. Diese kannst du also auf jedem Rechner, auf jedem System zu jeder Zeit anschauen und lernen.

Mehr digitale Freiheit geht nicht, kein einloggen in irgendwelche Systeme, keine zwingende Internetverbindung usw.

14 Tage Geld-zurück-Garantie

Falls dir der Kurs nach dem Kauf doch überhaupt nicht gefällt, hast du eine Geld-zurück-Garantie von zwei Wochen.
Dein „Risiko“ bleibt also überschaubar…

„Gute Typografie wird so oft unterschätzt!

Ich kenne dies aus der eigenen Webdesignpraxis:
Kunden, Designer und (zu) oft auch ich selber legen Wert auf Farben, Bilder und Grafiken. Dabei dreht sich eigentlich immer alles um die Texte – und damit um die Typografie!“

Typografie Kit 61

Hi, ich heiße Martin Hahn, bin seit über zwölf Jahren selbstständig als Webdesigner.
Darüber hinaus arbeite ich als Dozent, habe ein Webdesign-Fachbuch und mehrere Online-Kurse geschrieben.

Du hast Fragen zum Typografie-Kit?
Dann schreibe mir doch einfach: 
martin@webdesign-journal.de

Das Kit gibt den Texten und der Typografie die Bedeutung, die sie verdient haben!

Das Kit ist dein praktischer Ratgeber, um deine Projekte auf ein neues Designlevel zu heben. Dein Nachschlagewerk bei Fragen und Problemen. Deine Anleitung, um Typografie wirklich gut zu beherrschen. Deine Inspiration für kreativen Input.

Das war mein Ziel beim Erstellen der Inhalte: Ein Kit, was ich selber gerne neben mir liegen haben würde, in dem ich für typografische Fragen und Probleme konkrete Antworten und Empfehlungen bekomme.

Ein Kit, das ich durcharbeiten kann, um mich weiterzubilden oder einfach mal zum drinnen „rumschmökern“, um Anregungen und Inspirationen zu bekommen.

Ein Kit, das mit hilft, meine typografische Arbeit deutlich zu verbessern.
Was soll ich sagen, nach mehreren hundert Stunden Arbeit ist hier das Kit, und sprichwörtlich: Aus der Praxis für die Praxis!

Werde Teil der Webdesign Journal-Community:

Über 8.000 Newsletter-Abonnenten
Über 500 Kit-Käufer

Dein ultimativer Ratgeber:

Webtypografie
für anspruchsvolle Designs​

Typografie Kit 45

Mögliche Zahlungsarten:

Typografie Kit 63
nur

194,– €

zzgl. gesetzl. MwSt.

Und das bekommst du alles:

Typografie Kit 64

In den letzten Jahren kauften
über 500 Webdesign Journal-Leser ein Kit.
Sei auch du dabei!

Der Wert des Kits:

Machen wir eine kleine Rechnung auf:
Wie lange würdest Du brauchen, um all die Infos des Kits zusammenzusuchen, zu strukturieren, gedanklich zu erfassen und – anhand praktischer Beispiele – nachvollziehen zu können?

Rechnet man sehr konservativ mit einem Arbeitsaufwand von bspw. 4 Arbeitstagen und einem branchenüblichen Stundenlohn von 90,- €, dann hat allein der Arbeitsaufwand einen Wert von € 2.880 !

Ich will ganz offen zu dir sein:
Über 170 Stunden saß ich an der Erstellung des Kits! Von der ersten Ideenfindung, über die Erstellung bis zur Reinzeichnung – da kommt einiges zusammen.

Mein Ziel war aber immer ein Kit zu erstellen, dass ich einerseits selber gerne gehabt hätte, bzw. in das ich zukünftig selber auch gerne  nachschauen werde. Und ich denke, das ist mir gelungen 🙂

Der eigentliche Wert des Kits ergibt sich aber aus dem Wissen und der Erfahrung, die darin stecken. Du bekommst nicht einfach ein Haufen an Typografie-Infos. Du bekommst eine Mischung aus Theorie-Wissen, praktischen Anwendungsbeispielen, realen Best Cases und vielen Empfehlungen für eine gelungene Typografie.

Du schaffst damit bessere Typografie, kannst höherwertige Designs erstellen und somit deine Leistungen teurer verkaufen.

Du siehst,  der eigentliche Wert des Typografie-Kits ist also deutlich höher und konkret in Euro fast gar nicht mehr zu beziffern…

Häufig gestellte Fragen:

Für wen ist das Typografie-Kit?

Das Typografie-Kit hilft allen, die zuerst einmal mit Gestaltung zu tun haben wie Grafik-, UI- und Webdesigner. Aber durchaus auch Marketing-Verantwortliche, Frontendentwickler oder Konzeptioner können hier lernen und Input für die eigene Arbeit bekommen.

Das Kit hilft sowohl (Solo-)Selbständigen, Freelancern und Unternehmens-/Agenturmitarbeitern.

Designern wird das Kit helfen die eigene Arbeit zu verbessern. Verantwortlichen einer Unternehmenswebsite und des Online-Marketings wird es helfen auch mal eigene Designs anspruchsvoll zu gestalten oder aber Designer/Agenturen zu briefen, bzw. deren Arbeit besser beurteilen zu können.

In welchen Formaten liegen die Dateien vor?

Die Templates kommen als PDF-Dateien zu dir (insgesamt über 640 PDF-Seiten mit über 670 Abbildungen).
Die Demo-Dateien liegen in HTML und CSS vor.

Gibt es eine Benutzungseinschränkung?

Du kannst alle Dateien frei und beliebig oft (für beliebig viele Projekte) einsetzen.
Was du nicht darfst: Die Dateien weiterverkaufen oder verschenken.
DU kaufst die Dateien, also darfst DU diese nutzen! Möchte sie jemand anders nutzen, so möge er/sie das Kit ebenfalls kaufen!

Gibt es ein Rückgaberecht?

Naja, digitale Dateien zurückgeben… merkst du selbst, oder!?
Ok, es gibt ein gesetzlich vorgegebenes 14tägiges Widerrufsrecht.
Mein Tipp: Überlege es dir einfach gut, ob das Kit dich und dein Business weiterbringt, bzw. dir bei deiner Arbeit helfen könnte.
€ 194,- ist ja auch keine Unsumme – vor allem im Vergleich, was du dadurch an Arbeit sparen wirst. Bist du dir unsicher, dann frage mich einfach vorher:
martin@webdesign-journal.de

Typografie Kit 45

Hole dir das Webtypografie-Kit für nur € 194,–

zzgl. MwSt.

Du hast eine Frage, ein Problem oder dir fehlen
noch Informationen zum Typografie-Kit?

Kein Problem, ich bin Martin und für dich da.
Melde dich gerne bei mir und schreibe mir
eine Mail an martin@webdesign-journal.de.

Bewertungsergebnis: 5 / 5. | Anzahl der Bewertungen: 1

Nach oben scrollen