\n Hier diskutieren wir nur die UX- und Typografie-Verbindung, ohne die Rolle der Typografie bei der Gestaltung der visuellen Pers\u00f6nlichkeit der Website zu erw\u00e4hnen, Ihre Marke zu definieren und die Aufmerksamkeit des Lesers zu erregen. Lesen Sie diesen Artikel<\/a>, um mehr zu erfahren.\n<\/p>\n \n Die Wahl der Typografie f\u00fcr diese Kirchenwebsite f\u00f6rdert nicht nur die UX auf der Website, sondern hilft auch, die visuelle Identit\u00e4t der Marke zu formen).\n<\/p>\n \n Wie k\u00f6nnen Sie UX auf Ihrer Website steigern, indem Sie die Typografie optimieren?\n<\/p>\n \n Es gibt mehrere M\u00f6glichkeiten, wie Sie die UX auf Ihrer Website steigern k\u00f6nnen, indem Sie die Typografie optimieren. Da UX und Typografie eng miteinander verbunden sind, optimieren Sie durch die Optimierung der Typografie auch die Lesbarkeit Ihres Textes und tragen so zur Gesamt-UX Ihrer Website bei. Mal sehen, was die Regeln zur Optimierung der Typografie sind:\n<\/p>\n \n Wenn Sie m\u00f6chten, dass Ihre Website stimmig und professionell aussieht, verwenden Sie bis zu drei Schriftarten (nicht mehr). Verschiedene Schriftarten auf einer Website prallen aufeinander und lenken den Benutzer vom Lesen des Textes ab. Die Verwendung mehrerer \u00e4hnlich aussehender Schriftarten hilft Ihnen, eine Koh\u00e4renz der UX auf Ihren gesamten Website-Seiten zu schaffen, und befreit die Benutzer von h\u00e4ufigen Stil\u00e4nderungen.\n<\/p>\n \n Genau das sollten Sie auf Ihrer Website vermeiden.\n<\/p>\n \n Oft reicht die Verwendung nur einer Schriftart. Wenn Sie immer noch das Gef\u00fchl haben, dass Sie ein paar Schriftarten ben\u00f6tigen, w\u00e4hlen Sie Schriftarten mit derselben Zeichenbreite. In diesem Fall werden sich die Schriftarten nicht zu sehr voneinander unterscheiden und den Leser ablenken.\n<\/p>\n \n Diese umgestaltete Website verwendet die unkonventionelle Six Caps-Schriftart, um die visuelle Identit\u00e4t der Website zu verbessern. Diese Schriftart wird mit Roboto Condensed kombiniert, um zwei Schriftarten zu haben, deren Zeichenbreiten \u00fcbereinstimmen.\n<\/p>\n \n Eine weitere gro\u00dfartige Idee zum Kombinieren einiger Schriftarten besteht darin, die Schriftarten, die die Handschrift imitieren, mit den normalen zu heiraten. Handgeschriebene Typografie verleiht Ihrem gesamten Website-Design eine pers\u00f6nliche Note und entwickelt den visuellen Charakter Ihrer Website.\n<\/p>\n \n Diese Website hat mit der Caveat Handwriting-Schriftart ein weiches und feminines Gef\u00fchl.\n<\/p>\n \n Serifen sind die kleinen Linien am Ende von Buchstabenstrichen. In der Drucktypografie helfen Serifen dabei, gedruckte Buchstaben schneller und besser zu erkennen. Auf dem Bildschirm, insbesondere auf einem Nicht-Retina-Bildschirm, sind Serifen jedoch nicht so gut umrissen wie auf dem Papier, was das Lesen teilweise beeintr\u00e4chtigt.\n<\/p>\n \n Sans-Serif-Schriftarten sorgen nicht nur f\u00fcr eine bessere Lesbarkeit, sondern sprechen auch mutiger und minimalistischer.\n<\/p>\n \n Ich pl\u00e4diere hier nicht daf\u00fcr, auf Serifenschriften komplett zu verzichten. Ein besserer Rat w\u00e4re, vorsichtiger mit ihnen umzugehen und diejenigen zu verwenden, die sauber und pr\u00e4zise sind.\n<\/p>\n \n Diese Website f\u00fcr kreative Fotografie verwendet beispielsweise die serifenlose Schriftart Open Sans, die der Website hilft, eine mutige, stilvolle und entschlossene Aussage zu treffen.\n<\/p>\n \n Der Speicherplatz im Internet ist unbegrenzt. Aus diesem Grund ist es nicht erforderlich, sie zu speichern und auf kleine Schriftgr\u00f6\u00dfen zu setzen, die den Benutzern eine zus\u00e4tzliche Augenbelastung auferlegen. Leser mit eingeschr\u00e4nktem Sehverm\u00f6gen k\u00f6nnen Schwierigkeiten haben, kleinen Text zu lesen, w\u00e4hrend selbst Leser mit gutem Sehverm\u00f6gen m\u00fcde werden und Pausen einlegen m\u00fcssen, um an das Ende von, sagen wir, 10pt-Text zu gelangen.\n<\/p>\n \n Wenn Sie nicht m\u00f6chten, dass sich Ihre Benutzer mit dem Lesen des von Ihnen pr\u00e4sentierten Textes oder dem Vergr\u00f6\u00dfern abm\u00fchen, entscheiden Sie sich f\u00fcr Schriftgr\u00f6\u00dfen von 16pt und mehr. Solche Schriftgr\u00f6\u00dfen minimieren die \u00dcberanstrengung der Augen und helfen Benutzern, ihr Ziel auf Ihrer Website ohne visuelle Ersch\u00f6pfung zu erreichen.\n<\/p>\n \n Die Malcolmy-Website verwendet lesbare 16pt-Typografie f\u00fcr ihre Homepage und Blog-Seiten.\n<\/p>\n \n Auf Ihrer Website sollten Sie nicht den gesamten verf\u00fcgbaren Platz mit Ihrem Text vollstopfen. Indem Sie auf eine optimale Zeilenl\u00e4nge achten, halten Sie sich an ein hohes Leseerlebnis. Wenn die Zeilen zu kurz sind, m\u00fcssen die Augen des Lesers beim Lesen des Textes hin und her wandern, was zu einer zus\u00e4tzlichen Augenbelastung f\u00fchrt. Wenn die Zeilen zu lang sind, ist es zu schwierig, sich auf das genaue Wort zu konzentrieren, das Sie gerade lesen, und zu leicht, sich zu verirren.\n<\/p>\n \n Um beide ung\u00fcnstigen Situationen zu vermeiden, halten Sie sich an 60 Zeichen pro Zeile (f\u00fcr Tablet-\/PC-Bildschirme).\n<\/p>\n \n Dieses Bild zeigt, dass die Texte mit zu kurzen oder zu langen Zeilen schwerer zu lesen sind als die Texte, die sich an die Zeilenl\u00e4nge der \u201egoldenen Mitte“ von ~ 60pt halten.\n<\/p>\n \n Die optimale Leitungsl\u00e4nge f\u00fcr mobile Ger\u00e4te (z. B. Smartphones) ist k\u00fcrzer. Damit der Text auch auf kleinen Bildschirmen lesbar ist, sollte die Zeile etwa 30 \u2013 40 Zeichen umfassen.\n<\/p>\n \n Wie Sie wissen, ist die Schriftgr\u00f6\u00dfe f\u00fcr \u00dcberschriften normalerweise gr\u00f6\u00dfer als f\u00fcr Flie\u00dftext. Die \u00dcberschriften unterscheiden sich auch in der Gr\u00f6\u00dfe und reichen von der kleinsten bis zur gr\u00f6\u00dften. Auf Ihrer Website m\u00fcssen Sie f\u00fcr verschiedene Elemente (z. B. Schaltfl\u00e4chen, Beschriftungen, Navigationselemente usw.) unterschiedliche Schriftgr\u00f6\u00dfen sowie unterschiedliche Schriftst\u00e4rken zur Hervorhebung verwenden.\n<\/p>\n \n Um die Unterscheidbarkeit Ihrer Website-Elemente zu gew\u00e4hrleisten, entscheiden Sie sich f\u00fcr eine Schriftart, die in verschiedenen Gr\u00f6\u00dfen und Gewichten erh\u00e4ltlich ist. Wenn Sie sich f\u00fcr eine der Standardschriften entscheiden, z. B. Google Fonts Roboto, sehen Sie alle Variationen, die es gibt. Einige Schriftarten gibt es in mehr als 10 Variationen, andere haben nur ein paar. Entscheiden Sie sich f\u00fcr eine Schriftart mit zahlreichen Variationen, um eine vielf\u00e4ltige Inhaltsdarstellung auf Ihrer Website zu gew\u00e4hrleisten.\n<\/p>\n \n Verschiedene Schriftstile der Roboto Google-Schriftart.\n<\/p>\n \n Die Zeiten bunter, kreischender Webseiten sind vorbei. Jetzt sind Lesbarkeit und Kontrast die bestimmenden Kr\u00e4fte, die die Farbauswahl bestimmen. Zuallererst sollten Ihre Inhalte lesbar sein, und die Kombination, die viele Jahre lang als die beste angesehen wurde, ist schwarzer Text auf wei\u00dfem Hintergrund. Diese Kombination sorgt f\u00fcr maximalen Kontrast und stammt noch aus klassischen Typografie-Zeiten.\n<\/p>\n \n In letzter Zeit wird jedoch oft argumentiert, dass schwarze Farbe die Augen st\u00e4rker belastet als dunkelgrau. Die dunklen Graut\u00f6ne kontrastieren auch gut mit wei\u00dfem Hintergrund, sind aber etwas weniger dicht und sorgen f\u00fcr ein angenehmeres Leseerlebnis.\n<\/p>\n \n Dies sind die Graut\u00f6ne, die Schwarz \u00fcbertreffen, um ein angenehmes Leseerlebnis zu gew\u00e4hrleisten.\n<\/p>\n \n Eine Website-Seite, die Dunkelgrau als Slider-Textfarbe verwendet.\n<\/p>\n \n Stellen Sie bei der Farbauswahl sicher, dass Sie sie auf verschiedenen Ger\u00e4ten und in verschiedenen Umgebungen testen. Der Text, der in einer typischen B\u00fcroumgebung gut lesbar ist, kann auf einem Smartphone schwer zu unterscheiden sein, insbesondere wenn es im Freien verwendet wird. Es ist schwierig, alle Faktoren zu ber\u00fccksichtigen, aber Ihr Ziel sollte es sein, die Mehrheit der Umgebungen zu ber\u00fccksichtigen und verschiedenen Benutzergruppen ein komfortables Surferlebnis zu bieten.\n<\/p>\n \n Das Minimieren der Zeilenh\u00f6he, um mehr Inhalt unterzubringen, ist keine gute Praxis. Wenn die Zeilen zu nahe beieinander liegen, springt ein Leser eher zur vorhergehenden oder nachfolgenden Zeile und bleibt h\u00e4ngen. Der Abstand zwischen den Zeilen (F\u00fchrung) sollte 30 % gr\u00f6\u00dfer sein als die H\u00f6he der verwendeten Zeichen. Ein solcher Zeilenabstand gew\u00e4hrleistet beste Lesbarkeit des Inhalts und dessen klare visuelle Wahrnehmung.\n<\/p>\n\n 1: Minimieren Sie die Anzahl der verwendeten Schriftarten
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6732fd6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db69aa1c0.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6be2a86.webp\")
<\/a><\/p>\n\n 2: Setzen Sie auf serifenlose Schriftarten, um die Lesbarkeit zu verbessern
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6dd779a.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db6fd1dae.webp\")
<\/a><\/p>\n\n 3: Achten Sie auf eine anst\u00e4ndige Schriftgr\u00f6\u00dfe
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7281e6e.webp\")
<\/a><\/p>\n\n 4: Beachten Sie die optimale Leitungsl\u00e4nge
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db74aca13.webp\")
<\/a><\/p>\n\n 5: Entscheiden Sie sich f\u00fcr Schriftarten, die in verschiedenen Gr\u00f6\u00dfen gut funktionieren
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db76e5445.webp\")
<\/a><\/p>\n\n 6: Treffen Sie eine intelligente Farbauswahl
\n<\/h5>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7896ca6.webp\")
<\/a><\/p>\n![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7ad9849.webp\")
<\/a><\/p>\n\n 7: Experimentieren Sie nicht mit der Zeilenh\u00f6he
\n<\/h5>\n
![\"\"](\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289319-6382db7de6206.webp\")
<\/a><\/p>\n