So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis

So passen Sie die Textgröße im Webdesign an: Kleiner Text, großes Erlebnis
Kleiner Text, große Erfahrung Sanlian Tutorial
Mit der Verbreitung mobiler Endgeräte wie dem iPad verbringen die Menschen immer mehr Zeit mit dem Lesen auf mobilen Endgeräten und das Leseerlebnis wird immer wichtiger. Schriftarten sind der Schlüssel zum Leseerlebnis. Inwiefern beeinflusst die Schriftart also den Erfolg oder Misserfolg des Leseerlebnisses?
1. Ist es gut erkennbar?
 Schauen wir uns zunächst die Schriftart Consolas an. Wir können feststellen, dass die Breite von i und w gleich ist. Diese monospaced Schriftart hat einen sehr hohen Wiedererkennungswert und eignet sich sehr gut zum Schreiben von Texten, zur Anzeige von Code und für andere Aufgaben.
Nehmen wir dieses Beispiel noch einmal. In Arial ist die Erkennung von i und l sehr gering, und wenn es fortlaufende schmale Wörter wie il gibt, sind die Wörter schwer auszuwählen. Darüber hinaus unterscheiden sich in Georgia der Buchstabe o und die Zahl 0 nur geringfügig in der Größe und sind im Grunde nicht zu unterscheiden, was es schwierig macht, sie auf den ersten Blick zu unterscheiden.
Daraus lässt sich erkennen, dass Monospace-Schriftarten mit fester Buchstabengröße und -dichte weniger von den Buchstaben selbst beeinflusst werden. Diese Art von Schriftart ist einfach und leicht zu erkennen, was die Leseeffizienz erheblich verbessert. Monospace-Schriftarten haben jedoch auch ernsthafte Probleme. Sie opfern die Ästhetik zugunsten einer hohen Wiedererkennung. Daher können sie meist nur in einigen Code-Editoren und anderer Software verwendet werden.
2. Sind Arial und Georgia zum Lesen über längere Zeit geeignet ? Diese beiden Schriftarten werden sehr häufig auf PC-Webseiten verwendet, aber welche ist besser zum Lesen über längere Zeit geeignet?
Obwohl serifenlose Schriftarten einfacher und auffälliger erscheinen, ist ihre Erkennbarkeit nicht so klar wie die von Serifenschriften. Wenn Sie möchten, dass die Leser lange lesen, müssen Sie sie den Text ohne Nachdenken überfliegen lassen, und Georgia bietet genau diese Funktion. Daher ist die Lesegeschwindigkeit von Serifenschriften unter gleichen Druckbedingungen im Allgemeinen etwa ein Fünftel schneller als die von serifenlosen Schriften.
Erstens tragen die Serifenstriche nicht nur dazu bei, dass die Schriftart schön aussieht, sondern helfen auch, die Schriftart zu identifizieren. Zweitens können diese Serifenstriche dafür sorgen, dass die Striche dieser Buchstaben auf der Grundlinie optisch eine gewisse horizontale Führung bilden, die den Blick in horizontale Richtung lenken und den Erkennungskoeffizienten erhöhen kann. Aus diesem Grund sind Serifenschriften wie Georgia auf PCs und im traditionellen Druck so beliebt.
Die serifenlose Arial ist wie eine Dame aus einer Adelsfamilie und eignet sich besser für auffällige Schilder in U-Bahnen und anderen großen Anlässen, während die serifenlose Georgia wie ein schönes Mädchen aus einer kleinen Familie ist und Sie nie müde werden, die Worte zwischen den Zeilen zu lesen.
3. Ist es für mobile Endgeräte geeignet?
 Da die Helligkeit und der Kontrast des iPad-Bildschirms höher sind als bei herkömmlichen Computern, werden viele Schriftarten und Designs, die für herkömmliche Computer geeignet sind, aufgrund der Helligkeit des Hintergrunds zu unscharf angezeigt, wenn sie direkt auf das iPad übertragen werden. Dies ist insbesondere beim Koppeln von Schriftarten ein Problem. Einige dünne Schriftarten sind stark verschwommen, wodurch die ursprünglich passende Kombination nicht mehr übereinstimmt und das Erlebnis ernsthaft beeinträchtigt wird.
Das Retina-Display bietet eine höhere Präzision, bringt jedoch auch mehr Probleme bei der Schriftdarstellung mit sich, da bei der Anzeige gewöhnlicher Bilder ohne Skalierung 4 Pixel verwendet werden, um 1 Pixel im Bild anzuzeigen. Bei der Anzeige von Retina-Bildern entspricht jedes Pixel 1 Pixel im Bild. Daher werden einige Schriftarten, wie beispielsweise „Georgia“, sehr dünn, was dazu führt, dass die Schriftart bei der Anzeige nicht mit dem Design übereinstimmt und das Erlebnis beeinträchtigt.
Tatsächlich haben wir keine Möglichkeit, die Hardware zu ändern, wir können nur versuchen, diese Probleme zu vermeiden. Daher ist es ratsam, die Textgröße (14px-16px) auf mobilen Endgeräten entsprechend zu erhöhen. Darüber hinaus kann man auch die Schriftgröße erhöhen, um zu vermeiden, dass der Text verschwommen klingt. Was die englische Darstellung betrifft, sollte Georgia, einer der Klassiker auf dem PC, mit Vorsicht verwendet werden.
4. Ob der Schriftsatz sorgfältig ist <br />Tangcha hat in dieser Hinsicht sehr gute Arbeit beim chinesischen Schriftsatz geleistet und grundlegende Schriftsatzfähigkeiten wie die Verarbeitung verbotener Regeln, ausgerichteten Anfang und Ende und englische Zeilenumbrüche (Silbentrennung) implementiert. Es wurden auch experimentelle Versuche mit Interpunktions-Plug-Ins (Satzzeichen wie Punkte, Kommas und Semikolons am Ende einer Zeile werden an den äußeren Rand des rechten Rahmens des Textes „gehängt“) und Absatzeinzügen durchgeführt, die den Lesern ein gutes Leseerlebnis gebracht haben.
Darüber hinaus hängt das Leseerlebnis auch von anderen wichtigen Faktoren ab, wie etwa der Verwendung unterschiedlicher Schriftarten bei unterschiedlichen Gelegenheiten, Schriftgröße, Schriftstärke, Länge einer Textzeile, Dichte zwischen den Wörtern usw.
Lesen ist eine große Sache, und jeder Aspekt davon ist untrennbar mit Worten verbunden. Obwohl die Worte klein sind, ist jeder Strich eng mit der Erfahrung verbunden. Für Designer geht es bei einem hervorragenden Leseerlebnis nicht nur um visuelle Schönheit, sondern auch darum, sich um die Leser zu kümmern.

<<:  Eine kurze Diskussion über Flex-Layout und Skalierungsberechnung

>>:  SQL-Implementierung von LeetCode (184. Das höchste Gehalt der Abteilung)

Artikel empfehlen

So verwenden Sie „not in“ zur Optimierung von MySql

Als ich kürzlich in einem Projekt eine Auswahlabf...

Einfache Kapselung von Axios und Beispielcode zur Verwendung

Vorwort Als ich kürzlich ein Projekt erstellte, d...

Implementierung des Imports und Exports von Vue-Element-Admin-Projekten

vue-element-admin importiert Komponentenkapselung...

MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci

Referenz: MySQL-Zeichensatzübersicht utf8mb4 wurd...

Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach

Swiper ist ein mit reinem JavaScript erstelltes P...

Ein Artikel, der Ihnen hilft, mehr über JavaScript-Arrays zu erfahren

Inhaltsverzeichnis 1. Die Rolle des Arrays: 2. De...

Redo-Dateiwartungsmethode der InnoDB-Engine

Wenn Sie die Größe und Anzahl der InnoDB-Redo-Log...

Detaillierte Erklärung der Methoden und Eigenschaften von Vue

Vue-Methoden und -Eigenschaften 1. Methoden Verwe...

So stellen Sie ein Angular-Projekt mit Docker bereit

Es gibt zwei Möglichkeiten, Angular-Projekte mit ...

Mehrere Möglichkeiten zum Speichern von Bildern in einer MySQL-Datenbank

Normalerweise müssen die von Benutzern hochgelade...

Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung

Inhaltsverzeichnis 1. Konstruktor und Instanziier...

Detailliertes Tutorial zum Einrichten mehrerer Instanzen von MySQL 8 auf CentOS 7 (Sie können so viele haben, wie Sie möchten)

Ursache Ich habe vor Kurzem mit der Umstrukturier...

Problem mit Berechtigungen zum Ändern gespeicherter Prozeduren in MySQL

Bei der Verwendung einer MySQL-Datenbank treten h...

IE6 implementiert min-width

Zunächst einmal wissen wir, dass dieser Effekt ei...

So wählen Sie die Transaktionsisolationsebene in einem MySQL-Projekt

Einführung Beginnen wir mit unserem Inhalt. Ich g...