Wir entwerfen und arbeiten täglich mit Schriftarten. Aber wir haben ihrer Existenz nie ernsthaft Beachtung geschenkt. Wir haben sie nicht gut genutzt oder sogar missbraucht. Das alles liegt daran, dass wir sie nicht verstehen. Schriftart ist eines der wichtigsten Elemente der Typografie; sie ist auch eines der tiefgreifendsten Themen im Design. Lassen Sie uns in diesem Artikel dieses fundierte Wissen mit Ihnen besprechen.
Arten von Schriftarten
Englische Schriftarten (Schriftart) werden in mehrere Hauptkategorien unterteilt. Dies ist das Grundwissen, das Sie kennen müssen, wenn Sie englische Schriftarten verwenden:
1. Serif
Serif ist der dekorative Teil des Strichrandes. Der im Bild unten rot markierte Bereich ist die Serife.
Die ursprüngliche Absicht des Serifendesigns besteht darin, die Enden von Strichen klarer zu markieren, die Erkennungsrate zu verbessern und die Lesegeschwindigkeit zu erhöhen. Darüber hinaus wird die Verwendung von Serifenschriften dazu führen, dass sich Menschen orthodoxer fühlen. Daher verwenden viele unserer gängigen englischen Bücher, insbesondere Essays und Romane, Serifenschriften, um den Text zu vervollständigen.
Zu den im Webdesign häufig verwendeten Serifen gehören Times New Roman und Georgia. Die linke Seite des Bildes unten ist eine 12-Pixel-Schriftart von Times New Roman und die rechte Seite ist eine 12-Pixel-Schriftart von Georgia.
Auf Chinesisch ist die von uns verwendete Song-Schriftart die entsprechende Serifenschrift.
2. Sans-Serif
Wenn eine Schriftart keine Serifen hat, wird sie als Non-Serif oder Sans-Serif bezeichnet. Das Bild unten ist serifenlos.
Es gibt relativ viele serifenlose Schriften, die im Webdesign häufig verwendet werden. Es gibt Arial, Verdana, Tahoma, Helivetica, Calibri usw. Das Bild unten zeigt Arial, Verdana und Tahoma von links nach rechts:
Es ist erwähnenswert, dass Serifenschriften zwar in Büchern weit verbreitet sind, Serifenschriften jedoch im Internet selten verwendet werden. Da die Auflösung des Computerbildschirms nicht mit der von Büchern vergleichbar ist, sind Serifenschriften von 10 bis 12 Pixel im Haupttext auf dem Computerbildschirm nur schwer lesbar. Das Bild unten ist ein Vergleich von 10px Verdana und 10px Times New Roman ohne Cleartype. Wie Sie sehen können, ist Verdana auf der linken Seite leicht zu erkennen. Der Times New Roman auf der rechten Seite ist ziemlich schwer zu lesen.
3. Monospace-Schriftarten
Monospace-Schriftarten gibt es eigentlich nur für westliche Schriftarten. Denn englische Buchstaben variieren in der Breite. Beispielsweise ist i viel schmaler als m. Wenn die Buchstaben nicht gleich breit sind, wird das Layout unschön. In der DOS-Befehlszeile können wir sehen, dass eine Schriftart mit fester Breite verwendet wird.
Die für die Programmierung erforderlichen Schriftartenmit
konstanter Breitemüssen
folgende Anforderungen erfüllen:
2. Einfache, klare und standardisierte Zeichenformen.
3. Unterstützt erweiterte Zeichensätze mit ASCII-Codes über 128
(ASCII: 0× 20) Gleiche Breite wie andere Zeichen
5. Drei Zeichen wie „1“, „l“ und „i“ sind leicht zu unterscheiden.
6. Drei Zeichen wie „0“, „o“ und „ O“ sind leicht zu unterscheiden;
7. Der vordere und hintere Teil von doppelten und einfachen Anführungszeichen ist leicht zu unterscheiden, und es ist am besten, spiegelsymmetrisch zu sein;
8. Klare Satzzeichen, insbesondere geschweifte Klammern, runde Klammern und eckige Klammern.
Zu den gängigen Monospace-Schriftarten gehören Courier und Courier New
4. Kalligraphie
Wie der Name schon sagt, handelt es sich bei Kalligraphie um eine Schriftart im Handschriftstil. Manchmal nennen wir es auch Kalligraphieschrift. Die meisten chinesischen Kalligraphie-Schriftarten sind schwergängig. Persönlich empfehle ich die Verwendung japanischer Kalligraphie-Schriftarten. Japanische Kalligraphie-Schriftarten sind weicher und menschlicher. Der Nachteil der Verwendung japanischer Kalligraphie-Schriftarten besteht jedoch darin, dass es sich bei den meisten um traditionelle chinesische Schriftarten handelt und viele chinesische Schriftzeichen fehlen.
5. Symbol
Der bekannteste Symbolkörper in Windows ist Webdings (ich erinnere mich, dass ich es oft verwendet habe, als ich noch unter Windows 95 war ...). Hier sind einige der Webdings-Schriftarten:
Schriftarten:
Gängige Schriftarten sind: Normal, Fett und Kursiv.
Einfach ausgedrückt bedeutet Fett, dass die Schrift dunkler und „dicker“ ist. Kursivschrift bedeutet, die Textachse leicht zu neigen. Sie werden verwendet, um einen bestimmten Textabschnitt innerhalb des Raums hervorzuheben.
Wenn wir von Fett sprechen, können wir leicht an die Eigenschaft „font-weight“ in CSS denken. Wir wissen, dass der Attributwert „font-weight“ zusätzlich zu den Werten „Normal“ und „Fett“, die wir normalerweise verwenden, auch Attribute wie „Fett“, „Heller“, „100–900“ usw. aufweist. Was ist also der Wert von 100 bis 900? Tatsächlich hat 100 bis 900 keine Einheit. Eine gute Schriftart bietet unterschiedliche Designs für unterschiedliche Stärken. Wenn die Schriftart über vorgefertigte Designs für unterschiedliche Stärken verfügt, entsprechen diese Werte jeweils den einzelnen Stärken. Die Schriftart Zurich umfasst beispielsweise sechs Schriftarten: Zurich Light, Zurich Regular, Zurich Medium, Zurich Bold, Zurich Black und Zurich UltraBlack. Auf diese Weise entspricht Zurich Light den drei Werten 100, 200 und 300, Zurich Regular entspricht 400, was „normal“ ist, Zurich Medium entspricht 500 und Zurich Bold, was „fett“ ist. entspricht 600, 700, Zurich Black entspricht 800 und schließlich entspricht Zurich UltraBlack 900.
Chinesische Kursivschrift wird im Internet grundsätzlich nicht verwendet. Da Chinesisch so viele Striche hat, wird die Verwendung von Kursivschrift die Lesbarkeit erschweren.
Einheiten
Wir werden in unserem Webdesign einige Einheiten verwenden:
1. Punkt (pt, Punkt)
72 Punkte = 1 Zoll, 1 Zoll entspricht 72 Punkten. Außerdem ist 1 Pica = 12 Punkte.
2. Pixel (Pixel, px)
Ein Pixel ist die kleinste Bildeinheit auf dem Computerbildschirm. Laienhaft ausgedrückt ist es der kleinste Punkt auf dem Bildschirm.
3. DPI, PPI
Der vollständige Name von DPI ist Dots Per Inch, Punkte pro Zoll, und der vollständige Name von PPI ist Pixel Per Inch. Sie sind Auflösungseinheiten. Mit anderen Worten: Wie viele Punkte (Pixel) können auf einer Länge von 1 Zoll angeordnet werden? Im Allgemeinen hat unser Monitor beispielsweise eine Auflösung von etwa 72 ppi, was bedeutet, dass auf einer Länge von 1 Zoll 72 Punkte (Pixel) vorhanden sind. Je höher dpi/ppi, desto höher die Auflösung, d. h. je kleiner die Partikel, desto feiner das Bild. Im Allgemeinen liegt die Auflösung von Fotos zwischen 240 dpi und 300 dpi, weshalb Fotos viel detaillierter aussehen als auf dem Bildschirm. Zeitschriften werden mit 133 oder 150 dpi gedruckt, und hochwertige Bücher werden mit 350–400 dpi gedruckt, denn die schönsten gedruckten Bücher werden mit 175 bis 200 dpi gedruckt. Aus diesem Grund ist Text gleicher physischer Größe auf einem Buch viel klarer als auf einem Bildschirm. Aus diesem Grund haben wir bereits erwähnt, dass serifenlose Schriftarten im englischen Buchdruck problemlos verwendet werden können.
Es gibt im Wesentlichen keinen Unterschied zwischen dpi und ppi. Wenn Sie den Unterschied wirklich herausfinden möchten, besteht der einzige Unterschied möglicherweise darin, dass dpi häufig zur Beschreibung von Scannern und Druckern verwendet wird, während ppi häufig zur Beschreibung der Bildschirmauflösung verwendet wird.
4. ex und x-height
werden häufig in CSS verwendet. 1ex = Höhe des Kleinbuchstabens x.
5. em
wird häufig in CSS verwendet. Natürlich stellt em nicht die Höhe des Kleinbuchstabens m dar (tatsächlich entspricht die Höhe des Kleinbuchstabens m im Allgemeinen der Höhe des Kleinbuchstabens x). 1em = 100 % der Schriftgröße. ist ein Triebzug.
Abstand
1. Zeilenabstand (Zeilenhöhe, Zeilenabstand)
Wenn es um den Zeilenabstand (Zeilenhöhe, Zeilenabstand) geht, müssen wir zunächst einen Begriff namens Grundlinie lernen. Erinnern Sie sich an das Rasterbuch, mit dem wir Briefe geschrieben haben, als wir zum ersten Mal Englisch lernten? Die dickste horizontale Linie nennen wir die Grundlinie. Die Grundlinie ist die Linie oberhalb der Unterlänge der Schriftart, wo die meisten Buchstaben „sitzen“. In den meisten Schriftarten werden Großbuchstaben immer nahe und über der Grundlinie platziert. Chinesische Schriftarten sind mit englischen Großbuchstaben identisch. Die rote Linie im Bild unten ist die Grundlinie.
Dann bezieht sich der Zeilenabstand auf den Abstand zwischen den Grundlinien zwischen zwei benachbarten Zeilen. Die Einheit für den Zeilenabstand ist häufig em, die anhand der Schriftgröße definiert wird. In Browsern gibt es keine Richtlinie für den Standardzeilenabstand. Gemäß den Empfehlungen des W3C sollte der Standardzeilenabstand zwischen 1,0em und 1,2em liegen. Tatsächlich gilt beim Festlegen des Zeilenabstands der Grundsatz, dass die Lücke zwischen den Zeilen größer sein muss als die Lücke zwischen den Wörtern. Andernfalls kommt es beim Leser leicht zu „Serialisierungen“, was zu Leseschwierigkeiten führt. Durch einen ausreichenden Zeilenabstand können die einzelnen Textzeilen voneinander getrennt werden, sodass das Auge die vorherige oder nächste Zeile leichter erkennen kann. In den letzten Jahren bevorzugen die meisten Menschen einen Zeilenabstand von 1,5 cm für das Textlayout im Web, insbesondere auf chinesischen Websites. Das heißt, wenn eine Schriftgröße von 12 Pixel verwendet wird, bevorzugen Designer häufig einen Zeilenabstand von 18 Pixel. 1,5em ist in der Tat ein guter Erfahrungswert. Tatsächlich besteht der Standard für chinesische Papiere darin, einen Zeilenabstand von 1,5 cm zu verwenden.
2. Buchstabenabstand (Letter-spacing, Tracking)
Der Buchstabenabstand bezieht sich auf den Abstand zwischen einer Gruppe von Buchstaben. Der Wortabstand beeinflusst die Textdichte in einer Zeile oder einem Absatz.
3. Kerning
Kerning ist ein technischer Prozess, der für visuelle Zwecke durchgeführt wird. Einfach ausgedrückt: Wenn zwei bestimmte Zeichen ausgerichtet sind, können Sie individuell einen eindeutigen Wortabstand für sie festlegen. Wenn beispielsweise auf ein Großbuchstabe A ein Kleinbuchstabe v folgt, entsteht optisch ein größerer Abstand zwischen den beiden Zeichen (eigentlich ist der Wortabstand derselbe), der durch den normalen Zeichenabstand nicht gelöst werden kann. Wenn Sie den Abstand zwischen ihnen verringern, fließen die anderen Buchstaben zusammen. Zu diesem Zeitpunkt ist eine Kerning-Anpassung erforderlich, um damit umzugehen. Das Bild unten ist ein Beispiel für die Anwendung von Kerning:
Absatz
1. Zeilenlänge (Maß)
Die Zeilenlänge bezieht sich auf die Breite eines Textabsatzes. Wie unten gezeigt:
Es gibt zwei Lesbarkeitsprobleme im Zusammenhang mit der Zeilenlänge:
Je länger die Zeilenlänge, desto größer ist der erforderliche Zeilenabstand. Bei zu geringem Zeilenabstand kann es beim Lesen leicht zu Lesefehlern kommen. Wenn der Zeilenabstand zu groß ist, wird der Leser beim Lesen der Zeilen das Gefühl haben, dass der Text unterbrochen ist.
Im Haupttext sind 40 bis 70 Buchstaben pro Zeile angemessen.
2. Ausrichtung
Grundsätzlich gibt es vier Arten der Absatzausrichtung: linksbündig, rechtsbündig, zentriert und im Blocksatz.
Linksausrichtung bezieht sich auf eine Ausrichtungsmethode, die den Textinhalt festlegt, den horizontalen Abstand des Texts anpasst und den Text im Absatz oder Artikel entlang der horizontalen Richtung links ausrichtet. Durch die Linksausrichtung erhält der Text auf der linken Seite des Artikels einen sauberen Rand. Gleichzeitig wird die rechte Seite des Textes uneben. Daher wird die linke Ausrichtung im Englischen auch als „ragged right“ bezeichnet, was bedeutet, dass die rechte Seite ein unregelmäßiges Aussehen hat. Das Gleiche gilt für die richtige Ausrichtung.
Unter „Mitte-Ausrichtung“ versteht man eine Ausrichtungsmethode, die den Textinhalt festlegt und den horizontalen Abstand des Textes so anpasst, dass der Text im Absatz oder Artikel horizontal zur Mitte hin ausgerichtet wird. Durch die zentrierte Ausrichtung wird der Text auf beiden Seiten des Artikels sauber in der Mitte konzentriert, sodass der gesamte Absatz oder Artikel sauber ausgerichtet ist.
Bei der Ausrichtung werden beide Enden des Textinhalts festgelegt und der horizontale Abstand des Textes/der Wörter so angepasst, dass sie übereinstimmen gleichmäßig am linken und rechten Rand der Seite zwischen den Abständen verteilt. „Ausrichten“ verleiht dem Text auf beiden Seiten saubere Ränder.
Nach der Verwendung von „Align“ an beiden Enden sind die Ausrichtungslinien auf beiden Seiten sehr klar und auch das „schnelle“ Gefühl des Textblocks ist deutlich zu erkennen. Wenn die Zeilenlänge beim Englischen jedoch sehr kurz ist, kann die Verwendung der Ausrichtung dazu führen, dass der Abstand zwischen einigen Zeilen zu lang und der Abstand zwischen einigen Zeilen zu kurz ist. Dieser ungleichmäßige Wortabstand fühlt sich sehr unordentlich an mit Flecken überall.
3. Lesbarkeit
Lesbarkeit beschreibt die Leichtigkeit und den Komfort, gedruckten Text zu lesen. Tatsächlich ist dies der grundlegendste Zweck gewöhnlichen Designs. Zusätzlich zu den oben beschriebenen Grundsätzen habe ich auch einige kleine Grundsätze zur Lesbarkeit zusammengestellt, die ich mit Ihnen teilen möchte:
Verwenden Sie in einem Design höchstens drei Schriftgrößen.
Verwenden Sie bis zu drei Schriftarten in einem Design.
Es ist auf einen gewissen Kontrast zu achten, jedoch nicht auf übermäßigen Kontrast. Die Yang-Schrift (schwarze Zeichen auf weißem Hintergrund) ist leichter zu lesen als die Yin-Schrift (weiße Zeichen auf schwarzem Hintergrund). Auf dem Hintergrund von #fff sieht der Text mit #333 komfortabler aus als der Text #000.
Achten Sie auf den Hintergrund des Textes. Der Hintergrund sollte einfach sein. Vermeiden Sie Hintergrundgeräusche.
„Weniger ist mehr“ Verwenden Sie die wenigsten Elemente, um die meisten Informationen zu vermitteln.
Lassen Sie Ihren Link wie einen Link aussehen.
Nutzen Sie Ihren Platz sinnvoll.