{"id":82720,"date":"2023-04-24T19:13:37","date_gmt":"2023-04-24T17:13:37","guid":{"rendered":"https:\/\/waltersblog.ch\/?p=82720"},"modified":"2026-05-27T03:51:50","modified_gmt":"2026-05-27T01:51:50","slug":"einsteiger-tipps-fuer-eine-bessere-web-typografie","status":"publish","type":"post","link":"https:\/\/walterlernt.ch\/blog\/einsteiger-tipps-fuer-eine-bessere-web-typografie\/","title":{"rendered":"Der Schl\u00fcssel zur Lesbarkeit: Tipps f\u00fcr eine optimale Web-Typografie"},"content":{"rendered":"\n

Eine gute Web-Typografie ist der Unterschied zwischen \u00abliest sich gerne\u00bb und \u00abschliess ich gleich wieder\u00bb. Jeder, der Texte auf Websites ver\u00f6ffentlicht, sollte diese Grundlagen kennen.<\/p>\n\n\n\n

Acht Regeln f\u00fcr lesbare Web-Typografie<\/h2>\n\n\n\n
    \n
  1. Schriftart w\u00e4hlen<\/strong> \u2013 Entscheide dich f\u00fcr 1\u20132 Schriften, die zu deiner Marke passen. Mehr macht das Gesamtbild unruhig. Sans-Serif (z.B. Inter, Open Sans) liest sich am Bildschirm meist besser als Serif.<\/li>\n\n\n\n
  2. Schriftgr\u00f6sse: mindestens 16 px<\/strong> \u2013 Darunter wird’s f\u00fcr Bildschirmnutzer m\u00fchsam. Auf Mobile gerne 17\u201318 px Body.<\/li>\n\n\n\n
  3. Zeilenh\u00f6he 1.5\u20131.8<\/strong> \u2013 Zu wenig Luft erstickt den Text. Zu viel zerlegt ihn.<\/li>\n\n\n\n
  4. Kontrast pr\u00fcfen<\/strong> \u2013 Mindestens WCAG-AA-Verh\u00e4ltnis 4.5:1. Hellgrau auf Weiss ist h\u00fcbsch, aber nicht lesbar.<\/li>\n\n\n\n
  5. Fett, kursiv, unterstrichen \u2013 sparsam<\/strong> \u2013 Wenn alles wichtig ist, ist nichts wichtig.<\/li>\n\n\n\n
  6. Hierarchie schaffen<\/strong> \u2013 Drei Schriftgr\u00f6ssen reichen f\u00fcr 90 % aller Websites.<\/li>\n\n\n\n
  7. Linienl\u00e4nge 45\u201375 Zeichen<\/strong> \u2013 K\u00fcrzer wirkt abgehackt, l\u00e4nger erm\u00fcdet die Augen. max-width: 65ch<\/code> im CSS l\u00f6st das elegant.<\/li>\n\n\n\n
  8. Mobile zuerst<\/strong> \u2013 Was auf 360 px funktioniert, klappt auch auf 1440 px. Umgekehrt nicht.<\/li>\n<\/ol>\n\n\n\n

    Mein Tipp aus der Praxis<\/h2>\n\n\n\n

    Die meisten typografischen Probleme entstehen nicht beim Ausw\u00e4hlen der Schriftart, sondern beim Definieren der Hierarchie. Wer einmal sauber H1, H2, Body und Caption festgelegt hat, hat 80 % der Arbeit erledigt. In meinen Webdesign-Kursen<\/a> sehe ich das immer wieder: ein klares Type-System macht aus einer mittelm\u00e4ssigen Seite eine professionelle.<\/p>\n\n\n\n

    Wer das in Figma vor dem Bauen entwerfen will, ist im Flink mit Figma-Kurs<\/strong><\/a> richtig \u2013 dort baust du dein eigenes Type-System auf und \u00fcbertr\u00e4gst es 1:1 auf deine Website.<\/p>\n\n\n\n

    \n\n\n\n

    M\u00f6chtest du Webdesign von Grund auf lernen?<\/h2>\n\n\n\n

    Im Flink-mit-Figma-Kurs baust du in einem Tag deine erste komplette Website-Vorlage \u2013 inklusive Type-System, Farben, Komponenten.<\/p>\n\n\n\n

    \u2192 N\u00e4chste Kursdaten ansehen<\/strong><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    Eine gute Web-Typografie ist der Unterschied zwischen \u00abliest sich gerne\u00bb und \u00abschliess ich gleich wieder\u00bb. Jeder, der Texte auf Websites ver\u00f6ffentlicht, sollte diese Grundlagen kennen.<\/p>\n","protected":false},"author":1,"featured_media":83271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[264],"tags":[148],"class_list":["post-82720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-kreativitaet","tag-typografie"],"_links":{"self":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/82720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/comments?post=82720"}],"version-history":[{"count":1,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/82720\/revisions"}],"predecessor-version":[{"id":83381,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/posts\/82720\/revisions\/83381"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media\/83271"}],"wp:attachment":[{"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/media?parent=82720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/categories?post=82720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/walterlernt.ch\/blog\/wp-json\/wp\/v2\/tags?post=82720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}