Korrigiert einen alten Artikel über Typografie, für diejenigen, die ihn nicht gesehen haben, wird es für die Überprüfung nützlich sein

Typografie- einer der wichtigsten Aspekte des Webdesigns, weil es grundlegende Informationen vermittelt. Leider haben viele Designer und Kunden Angst vor mutigen Experimenten und wählen für ihre Projekte ein oder zwei „erprobte“ Schriftarten aus.

Dieser Artikel ist also all jenen gewidmet, die sich im Meer der Typografie verirrt haben. Wir sprechen über die Grundlagen der Typografie, was Schriftarten sind und die Struktur von Schriftarten.

Schriftarten vs. Schriftarten – was ist der Unterschied?

Viele Leute verwenden die Wörter Schriftart und Schriftart synonym. Tatsächlich sind dies nicht dasselbe, jetzt werde ich erklären, warum.

Headset ist ein Satz stilistisch ähnlicher Zeichen, die geschrieben/gedruckt werden können. Das sind Zahlen, Buchstaben, Symbole. Schriftart- Dies ist ein engeres Konzept, das von mehreren Faktoren wie Größe und Stil bestimmt wird. Grundsätzlich ist Arial eine Schriftart und Arial Bold eine Schriftart.

Einstufung

Schriftarten können in mehrere Gruppen eingeteilt werden - Serif (Serif), Sans-Serif (Serifenlos), Handschrift (Script), Display (Display). Es gibt jedoch noch andere Klassifizierungsarten.

Serifenschriften, Antiqua (Serif)

Sie werden so genannt, weil jeder Buchstabe kleine Serifen hat. Beim Drucken von großen Textblöcken im Webdesign werden sie nicht empfohlen, da sie als schwer lesbar gelten. Diese Schriftarten werden normalerweise für Überschriften verwendet.

Serifenschriften haben einige Untertypen - zum Beispiel alter Stil (« alter Stil"- sie werden auch humanistisch genannt, humanistische Antiqua) - Die allerersten Schriftarten dieser Klassifikation wurden bereits im fernen 14. Jahrhundert verwendet. Sie Unterscheidungsmerkmal- dass der Teil des Symbols, der sich in einem Winkel befindet, dünn gemacht wird. Schriftartbeispiele sind Adobe Jenson, Centaur und Goudy Old Style.

Übergangs-Serifen (Übergangs-Serifen)- wurden in den 1700er Jahren verwendet. Dazu gehören Schriftarten wie Times New Roman und Baskerville sowie Caslon, Georgia und Bookman. Bei ihnen ist der Unterschied zwischen den dicken und dünnen Stellen der Buchstaben deutlicher als bei Old Style, aber weniger auffällig als bei Modern.

Moderne Serifen (New Style Antiqua)- bereits nach 1700 verwendet und haben einen starken Kontrast zwischen den dicken und dünnen Teilen der Zeichen. Dazu gehören Schriftarten wie Didot und Bodoni

Und endlich , Slab-Serifen (Slab-Fonts)- haben generell die gleiche Dicke aller Linien und große Serifen an den Enden

Gezackte Schriften, Grotesken (Sans Serif)

Serifenschriften werden so genannt, weil sie keine Serifen haben.) Sie sehen moderner aus, außerdem wurden sie im 18. Jahrhundert verwendet.

Hier sind die 4 wichtigsten Arten von serifenlosen Schriftarten: Grotesk (Alt-Grotesk), Neo-Grotesk (Neu-Grotesk), Humanist (Humanistisch) und Geometrisch (Geometrisch).
Alte Grotesken- die allerersten, sie ähneln Serifenschriften, aber ohne Serifen.
Zum Beispiel Franklin Gothic und Akzidenze

Neue Grotesken haben im Vergleich zu den alten Grotesken ein vereinfachtes Aussehen. Viele der heute beliebtesten Schriftarten sind neue serifenlose Schriften wie MS Sans Serif, Arial, Helvetica und Univers.

Humanisten- kalligrafischer als alle anderen serifenlosen Schriften (d.h. sie verändern die Linienstärke). Dazu gehören zum Beispiel Gill Sans, Frutiger, Tahoma, Verdana, Optima und Lucide Grande – sie werden oft zum Füllen des Seitenkörpers verwendet.

Geometrisch basierend auf regulären Zahlen ist beispielsweise "O" ein Kreis usw.; gelten als die modernsten serifenlosen Schriften. Beispiele sind ITC Avant Garde Gothic, Erbar Grotesk, Eurostile, Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko, Spartan.

Handschriftlich (Skript)

Handschriftliche Schriftarten basieren auf der Handschrift. Es gibt zwei Arten solcher Schriftarten - formal (formell) und Kezhl (lässig). Formal, wie von Hand geschrieben, stammen sie aus dem 17.-18. Jahrhundert. Einige Schriften basieren auf berühmten Meistern wie George Snell und George Bickham. Nehmen Sie Kuenstler Script als Beispiel für moderne Schriftarten. Schön und elegant, es passt nicht zum Fließtext der Seite.

Kezhl-Schriften sind eine modernere Version, die im 20. Jahrhundert entstanden ist. Es ist weniger formell, oft mit kräftigen Strichen und einem Pinselstricheffekt. Zu diesen Schriftarten gehören Mistral und Brush Script.

Schriftarten anzeigen (Display)

Die Kategorie Anzeige umfasst jene Schriftarten, die sich im Allgemeinen nicht zum Schreiben von Text eignen. Meistens dienen sie als Akzent. Sie werden normalerweise in der Druckindustrie verwendet, obwohl sie auch auf Internetseiten erscheinen. Unter den Displays findet man zum Beispiel Blackletter – die Originalschriften der ersten Druckmaschinen.

Nicht-alphabetische Schriftarten (Dingbats)

Nicht-alphabetische Schriftarten- das sind die Schriftarten, die überhaupt keine Buchstaben enthalten, sondern Symbole und Ornamente.

Proportional vs. Monospace

In proportionalen Schriftarten nimmt ein Zeichen so viel Platz ein, wie seine natürliche Schreibweise erfordert. Beispielsweise ist Times New Roman eine proportionale Schriftart. Aber in Monospace-Schriftarten haben alle Zeichen die gleiche Breite. Zu diesen Schriftarten gehört beispielsweise Courier New

Stimmung

Die Stimmung einer Schriftart hat großen Einfluss darauf, ob sie in einer bestimmten Situation angemessen ist. Nicht selten werden auch Kontraste eingesetzt – Business-Style wird mit informell, leicht mit dramatisch kombiniert. Zum Beispiel ist Times New Roman eine strenge Schriftart, und genau dieser Typ wird so oft verwendet Geschäftskorrespondenz. Aber zum Beispiel ändert Helvetica im Allgemeinen seine Stimmung in Abhängigkeit von den umgebenden Schriftarten.

Dicke und Stil

Die Dicke der Schriften beträgt: leicht, dünn, normal, mittel, fett, schwer oder schwarz.

Es gibt drei Schriftarten: kursiv, schräg und Kapitälchen. Kapitälchen werden häufig für Überschriften verwendet.

Kursiv und Schräg sind austauschbar, obwohl es sich um unterschiedliche Stile handelt. Oblique ist eine schräge Variante normaler Schriftarten. Verwenden Sie dazu einfach die Free Transform-Distortion-Funktion in Photoshop. Aber Italic ist bereits ein eigener Zeichensatz, der für die schräge Version der Schrift verantwortlich ist.

Schriftstruktur

Jedes Zeichen hat einen bestimmten Satz von Merkmalen, die verwendet werden können, um zu bestimmen, wie es sich mit anderen Schriftarten kombiniert. Hier sind die wichtigsten:

Schriftlinie (Grundlinie)- eine imaginäre Linie, auf der sich der Text befindet. Gerundete Schriften treten manchmal leicht von der Satzlinie zurück.

Kleinbuchstaben (Mittellinie) bezeichnet die Höhe der meisten Kleinbuchstaben, die normalerweise durch die Höhe des "x" bestimmt wird. Hier kommt das Konzept der x-Höhe her.

Obere Zeile der Großbuchstaben (Cap)- Höhe Großbuchstabe"ABER".

Die obige Abbildung zeigt die drei gemeinsamen Teile aller Buchstaben.

Grundschlag, Shtamb (Stamm)- die Hauptvertikale jedes Zeichens, einschließlich des schrägen.

Querstange (Balken)- horizontaler Teil der Schrift

Oval (Schüssel)- der abgerundete Teil der Schriftart.

Obere Fernbedienung (Steigung)- Teile von Buchstaben wie "d", "h" und "b" herauskleben.

Unterlänge- Aufkleben eines Teils von Buchstaben wie "p", "q" und "f"

Serifen- ein charakteristisches Merkmal von Serifenschriften). Bei manchen Schriftarten sind sie stärker ausgeprägt, bei anderen weniger ausgeprägt.

Öffnung- bezeichnet eine Lücke bei offenen Zeichen wie "A", "c" oder "m"

Ohr es ist eine dekorative Ergänzung zu einem Zeichen, wie das "g" im obigen Beispiel.

Verbindungshub (Haarlinie) es ist der dünnste Teil einer Serifenschrift.

Querbalken- eine horizontale Linie, wie zum Beispiel in den Symbolen „A“ und „H“.

Drop (Terminal)- runder oder ovaler (tropfenförmiger) Strich, der mit der Zeichnung einiger Zeichen der Schriftart endet.

Schleife tritt nur bei einigen Kleinbuchstaben g auf und kann vollständig oder teilweise geschlossen sein.

Stachel (Sporn)- eine winzige Kerbe an einigen Buchstaben, zum Beispiel an „G“.

Anhang (Link) verbindet die Ober- und Unterseite des Buchstabens "g".

Der Rücken- die zentrale Kurve, die der Buchstabe „s“ hat.

Ende des Briefes (Ende)- eine dekorative Linie, zum Beispiel auf dem Buchstaben „R“ oder „Q“.

Abschlusselement (Terminal, Finial)- serifenloses Strichende

Schulter- eine abgerundete Linie, die vom Hauptstrich abweicht. (um ehrlich zu sein, auf vielen russischen Seiten geben sie eine völlig andere Definition dieses Konzepts,)

Eines der häufigsten Designprobleme ist das Problem mit .

In diesem Artikel behandeln wir einige Prinzipien guter Typografie und geben Ihnen Tipps, wie Sie viele häufige Fehler vermeiden können.

Dieser Artikel ist kein Buch über Typografie oder die Kunst der Typografie, sondern eher „schnelle Tipps zur Verbesserung der Schriftgrundlage Ihres Designs“.

Regel 1: Je weniger Schriftarten, desto besser

Einer der größten Fehler, den Designer machen, ist zu viel zu verwenden eine große Anzahl Schriftarten und/oder deren Stile. Versuchen Sie, sie auf zwei oder drei zu beschränken. Das heißt, der Haupttext muss dieselbe Schriftart und -größe haben.

Wählen Sie eine für die Überschriften und bleiben Sie dabei, vielleicht zur Not, eine andere für die Unterüberschriften. Haben Sie keine Angst, wenn die Schriftarten sehr unterschiedlich sind. Wenn Sie zwei sehr ähnliche Schriftarten in einem Design verwenden, könnte der Leser denken, dass Sie sich nur vertan und beim Tippen versehentlich die falsche Schriftart ausgewählt haben.

Achten Sie auf die Einheitlichkeit von Farbe, Dichte usw. oder Ihr Text sieht aus, als wären betrunkene Fliegen über die ganze Seite verstreut.

Regel 2

Achten Sie darauf, die Buchstaben nicht zu sehr zu füllen. Wenn Sie Probleme mit zu wenig Platz für Text haben, dann ist es besser, die Schriftart zu verkleinern. Ja, dies wird wahrscheinlich Platz zwischen den Absätzen schaffen, aber es ist in Ordnung, es wird Ihnen beim Lesen etwas Luft zum Atmen geben.

Regel 3. Korrekte Ausrichtung

Bitte zentrieren Sie nicht alles (es sei denn, es handelt sich um eine spezielle Designbewegung). Erwägen Sie die Verwendung eines Rasters. Schließlich ist alles auf der Seite miteinander verbunden. Verwenden Sie Hilfslinien und platzieren Sie Objekte entsprechend. Streuen Sie keine Objekte um die Ecken der Seite herum, als ob Sie sich nicht entscheiden könnten, wo Sie sie platzieren sollen.

Regel 4. Weniger dekorative Schriftarten

Haben Sie schöne dekorative Schriftarten? Wunderbar! Dies bedeutet jedoch keineswegs, dass sie für den Text von Absätzen verwendet werden müssen. Hinter dekorativen Schriften verbirgt sich meistens eine Geschichte oder sie werden in einem bestimmten Fall verwendet, beispielsweise für einen Titel oder Titel. Je einfacher desto besser, weshalb Schriftarten wie Helvetica so beliebt sind.

Regel 5. Größe zählt

Es geht um die Größe der Buchstaben des Textes ;). Überschriften sind gut, wenn sie fett und groß geschrieben sind, aber wenn Sie zu große Buchstaben im Fließtext verwenden, wird es billiger. Denk darüber nach. Sie gehen in ein gutes Restaurant und es kommt oft vor, dass die Speisekarte klein geschrieben ist, es sieht cool aus. (Stellen Sie nur sicher, dass die Schrift nicht so klein ist, dass sie schwer zu lesen ist.) Scheuen Sie sich nicht, Überschriften viel größer als den Fließtext zu machen.

Regel 6

Alles, was Sie tun, wird getan, damit es gelesen werden kann. Dunkler Text auf dunklem Hintergrund ist keine gute Idee. Noch schlimmer ist es, kleinen Text über ein kontrastreiches Foto zu legen. Denken Sie daran, Text nicht über irgendetwas zu platzieren.

Regel 7. Wählen Sie die richtigen Farben

Was ist die beste Farbe für eine Schrift? Ob Sie es glauben oder nicht, im Allgemeinen ist Schwarz oder Weiß oft am besten. Wenn Sie eine andere Farbe als verschiedene Grauschattierungen verwenden, verringern Sie die Sättigung. Bunte Schriftarten können schwer lesbar sein. Hüten Sie sich vor komplexen Vibrationskombinationen wie Rot auf Grün.

Regel 8. Geeignete Gruppierung

Zusammengehörige Informationen werden am besten miteinander kombiniert. Dadurch wird das Design klarer. Beispiel: Schauen Sie sich ein Filmplakat an, alle Daten sind in attraktiven Blöcken gruppiert. Sie können nun als eigenständiges Gestaltungselement betrachtet werden. Beispiele für schlechte Gruppierung - öffnen Sie die Gelben Seiten.

Regel 9. Ausreichende Führung

Dies ist der Abstand zwischen Textzeilen. Es ist sehr wichtig, das richtige Intervall zu wählen. Es ist viel angenehmer zu lesen, wenn die Augen zwischen den Zeilen Platz haben, um sich auszuruhen. Versuchen Sie als allgemeine Regel, mindestens 2 Punkte mehr Zeilenabstand als die Schriftgröße zu verwenden. Beispiel: Für eine maximale Lesbarkeit bei 10pt sollte die Schrift auf mindestens 12pt eingestellt werden.

Regel 10. Achten Sie auf Kerning

Kerning ist der Abstand zwischen einzelnen Zeichen in einem Wort. Es ist wichtig, Erfahrung im Erkennen von schlechtem Kerning zu haben, da Programme wie zum Beispiel Photoshop häufig Fehler bei der Anordnung machen. Dies muss manuell angepasst werden, aber die Hauptsache ist, es nicht zu übertreiben. Wenn Sie den Zeichenabstand nicht mögen, aber nicht wissen, wie Sie ihn verbessern können, wählen Sie eine andere Schriftart.

Versuchen Sie, diese Regeln anzuwenden, wenn Sie mit einer Schriftart arbeiten. Gut gestaltete Schriftblöcke sollten auch ohne Bilder gut aussehen. Ihre Typografie verstärkt bestenfalls den positiven Eindruck des Designs. Es sollte ansprechend und leicht lesbar sein.

Freunde!

In diesem Artikel werde ich weiterhin das meiste analysieren Häufige Fehler angehende Designer.

Heute werden wir über die Verwendung von Schriftarten sprechen. Wissen Sie, wie ich die Arbeit eines Anfängers von der eines Profis unterscheiden kann? Ein Anfänger versucht in der Regel, in seiner Arbeit alles zu demonstrieren, was er gelernt hat. Dies manifestiert sich in der reichlichen Verwendung verschiedener Farben, allerlei Effekten und natürlich zahlreicher Schriftarten in ein und demselben Werk. Im Gegensatz dazu verwendet ein professioneller Designer in der Regel eine, im Extremfall zwei Schriftarten innerhalb eines Projekts sowie eine begrenzte Farbpalette. Und wenn Sie auf Grafikeffekte absolut nicht verzichten können, versucht er, deren Verwendung zu minimieren.

Also, wenn die wichtigste Regel für gutes Design das Bauen ist modulares Raster(siehe Artikel ), dann lautet Regel Nummer zwei: Begrenzen Sie die Anzahl der Schriftarten!

Die Mindestanzahl an Schriftarten fördert die Konformität und Konformität im Design. Je weniger Ihre Arbeit unterschiedliche Stile enthält und voller allerlei Farben und Schriftarten ist, desto aussagekräftiger und professioneller wirkt sie.

Meistens wählt ein Designer eine Schriftart für ein Projekt aus. Außerdem sollte die Art der gewählten Schriftart der kreativen Idee oder der Stimmung des Designs entsprechen. Zum Beispiel, wenn wir eine Broschüre machen, die dem gewidmet ist Mobiltelefon dritte Generation, dann passt am ehesten eine leichte, moderne Sans-Serif-Schrift zu uns. Aber ein Heft zum Thema der Ausstellung der Impressionisten in der Eremitage würde eher zu einer klassischen, „fest auf den Beinen stehenden“ Serifenschrift passen. Generell ist die gelungene Schriftauswahl in der Arbeit eines Designers enorm wichtig, denn die Inkonsistenz der Art der Schrift mit der Idee und Art des Projekts kann die ganze Arbeit im Keim ersticken.

Manchmal ist es notwendig, eine inkrementelle Schriftart zu verwenden. Bei der Arbeit mit zwei Schriften betont die erste Schrift die Stimmung und den Charakter der Arbeit und verleiht ihr oft Individualität. Diese Schriftart wird für Überschriften und Zwischenüberschriften verwendet. Manchmal verwenden Designer zu diesem Zweck ungewöhnliche Schriftarten. Dies geschieht keineswegs aus Gründen der Originalität, sondern um bestimmte Textstellen hervorzuheben, indem der Kontrast zur zweiten, vertrauteren Schriftart erhöht wird.

Da es nicht so viele Überschriften in einem Werk gibt, funktioniert das Kontrastprinzip einwandfrei, zumal die Überschriften viel größer sind als der Fließtext.

Die zweite Schriftart ist dem Auge in der Regel vertrauter und hat nicht die Aufgabe, die Aufmerksamkeit des Betrachters zu erregen, sondern eine rein informative Funktion zu erfüllen. Es sollte gut lesbar sein und die Augen nicht ermüden. Anfänger machen oft den Fehler, große Textblöcke in extravaganten, schwer lesbaren Schriftarten zu erstellen. Zu diesen Schriftarten zähle ich auch die überwiegende Mehrheit der sogenannten "handgeschriebenen" Schriftarten. Solche Schriftarten sind gut, sagen wir, für ein kleines Grußkarte, aber nicht für den Umgang mit großen Textmengen.

Hier sind Beispiele für eine gute Verwendung der Schriftart:

Wie Sie sehen können, werden hier nur zwei Schriftarten verwendet. Eine für Überschriften und eine für Fließtext. Eine solche Arbeit sieht elegant und konsistent aus.

Und hier ist die unglückliche Verwendung von Schriftarten:

Hier verwende ich bewusst einige ungewöhnliche Schriftarten, um Ihnen ein Gefühl für die Disharmonie und Inkongruenz eines solchen Designs zu vermitteln. Verwenden Sie nicht zu viele Schriftarten in Ihrer Arbeit! Es gibt nichts Schlimmeres als einen Job, bei dem 8 verschiedene Schriftarten gemischt werden, und noch extravagantere und schwer lesbare Schriftarten.

Hier ist ein Beispiel für eine solche Arbeit:

Dies ist kein Produkt meiner Fantasie. Ich habe viele solcher Arbeiten gesehen, und sie wurden in der Regel entweder von unerfahrenen Designern oder von Amateuren hergestellt.

Wenn Sie ein Design-Lehrbuch konsultieren, werden Sie höchstwahrscheinlich Empfehlungen finden, eine serifenlose Schriftart für Überschriften und Serifen für Fließtext zu verwenden.

Aber diese Regel ist zu allgemein und muss in der Praxis oft umgangen werden.
Also ein letzter Ratschlag. Wenn die Überschriftenschrift modern aussieht, dann ist es besser, eine serifenlose Schrift als Hauptschrift zu wählen. Wenn Ihre erste Schriftart altmodisch ist, sollte die Hauptschrift serifen sein.

Das Thema der Verwendung von Schriftarten ist unerschöpflich, daher ist es unmöglich, alles in einem kleinen Artikel abzudecken. Soweit möglich, werde ich mein Wissen über die Arbeit mit Schriften mit Ihnen teilen. Übrigens in meiner Indesign-Schulung, schenke ich diesem wichtigen Thema große Aufmerksamkeit.

Um die möglicherweise entstehende Verwirrung zu beseitigen, ist es notwendig, die Bedeutung einiger Schlüsselbegriffe sofort zu klären. Erster wichtiger Satz Schlüsselwörter Definieren Sie die Begriffe "Schriftart" und "Schriftbild".

Eine Schriftart ist ein Satz von Zeichen mit einer bestimmten Größe und einem bestimmten Muster. Eine Schriftart definiert Schriftstilfamilien auf die gleiche Art. Das Schlüsselwort hier sind Stile, die verschiedene Schriftarten in Gruppen oder Familien unterteilen. Zum Beispiel kann es Serif, Sans-Serif, Handschrift, Display, Monospace und andere sein. Wir können sagen, dass eine Schriftart eine Reihe von Schriftarten unterschiedlicher Stile und Größen ist, die durch einen gemeinsamen Ausführungsstil vereint sind. Wie Sie sehen können, ist Schriftart ein enger gefasster Begriff.

Beim Entwerfen eines Webseitenlayouts ist die Auswahl der Schriftart sehr wichtig. Natürlich ist es am besten, Schriftarten aus dem Standard zu verwenden Windows eingestellt oder Mac. Doch manchmal reicht dieses Set nicht aus, um die Idee des Designers zum Leben zu erwecken, und dann fällt die ganze Last auf die Schultern des Layouter. Zum Glück, Google Webfonts bietet eine sehr elegante Lösung für dieses Problem.

Es gibt auch Begriffe wie "Gewicht" und Kerning. Alle können mit CSS modifiziert und auf Absätze, Überschriften oder andere Textelemente angewendet werden. Die Eigenschaft "Gewicht" der Schriftart bestimmt die Dicke der Linien beim Zeichnen. Dies ist ein Wertebereich von 100 bis 900, wobei jede Zahl ein Gewicht angibt, das dem Gewicht der Schriftart entspricht. Normale Schriftart "normal" entspricht der Zahl 400, fett "fett" - 700. Kerning - Änderung des Abstands zwischen Buchstaben in Abhängigkeit von ihrer Form. Es ist der Prozess, die Symbole richtig zu platzieren, indem die Abstände zwischen ihnen angepasst werden, um Harmonie zu erreichen. Obwohl viele dem Kerning nicht viel Aufmerksamkeit schenken, sind es die kleinen Dinge, die dabei helfen, sehr gute Ergebnisse zu erzielen.

Die Regeln brechen

Es wäre vernünftig, die Notwendigkeit zu diskutieren, neue Schriftarten zu erstellen. In letzter Zeit sind viele Websites veraltet. Sie verwenden Standardschriften, die wir schon satt haben.

Heute gibt es Hunderte von Schriftarten, aber anders Betriebssysteme bieten eigene Pakete an. Und nur wenige der Schriftarten sind in diesen Paketen enthalten. Wenn Sie eine Schriftart auswählen, die jemand im System möglicherweise nicht hat, wird die Schriftart durch die Standardschriftart ersetzt. Aus diesen Gründen wird empfohlen, Basisschriften zu verwenden. Aber manchmal können grundlegende Schriftarten die Vorstellungskraft des Designers nicht vollständig anregen. Wenn Sie also sicher sind, dass für Ihr Design eine benutzerdefinierte Schriftart benötigt wird, können Sie Ihre benutzerdefinierte Schriftart in ein Bild umwandeln und auf Ihre Website hochladen. Machen Sie Ihre Kopfzeilen, Kopfzeilen oder Menüs grafisch und verwenden Sie sie.

Achten Sie darauf, dass die Überschriften den Themen der Seite entsprechen. Sie können verschiedene Farben, Unterstreichungen, Hintergrundsymbole oder grafischen Text enthalten. Letztendlich liegt die Entscheidung bei Ihnen.

Darüber hinaus müssen Sie sicherstellen, dass alle Textlinks auf der Website dieselbe Schriftart haben. Die Verwendung von Links mit unterschiedlichen Schriftarten und Designs bereitet dem Benutzer erhebliche Schwierigkeiten bei der Navigation.

Auswahl der richtigen Schriftart

Zu beachten ist auch, dass unterschiedliche Schriftarten die Stimmung der Leser auf unterschiedliche Weise beeinflussen können. Serifenschriften eignen sich in der Regel besser für Drucksachen. Serifen helfen dabei, Platz zwischen Buchstaben zu schaffen und ein Zeichen vom anderen zu trennen. Oftmals vermitteln Serifenschriften ein Gefühl von Persönlichkeit, Respekt, Intelligenz und Professionalität.

Sans-Serif-Schriftarten eignen sich am besten für Webseiten. Bildschirme mit niedriger Auflösung lassen Serifen verschwommen erscheinen und werden wiederum schlecht wahrgenommen. Sans-Serif-Schriften neigen dazu, Gefühle von Rationalität, Stil, Jugend und Modernität auszudrücken.

Beispielsweise vermittelt die Wahl der Serifen ein Gefühl von Professionalität und verbindliche Informationen. Sie können dies oft in Mainstream-Medien wie der New York Times sehen. Kleinere Blogs können eine serifenlose Schriftart mit großer Zeilenhöhe verwenden. Dies gibt Benutzern die Möglichkeit, Blog-Text schnell anzuzeigen.

Sie sollten immer darüber nachdenken, welche Informationen Sie dem Besucher vermitteln möchten. Denken Sie bei der Auswahl einer Schriftart daran, dass fröhliche Botschaften von hellen, luftigen und weichen Schriftformen begleitet werden sollten, während Botschaften mit etwas dunkleren Themen wie Halloween besser von scharfkantigen Schriftarten begleitet werden sollten.

Lesbarkeit

Typografie, und oft auch nur unleserlich, kann die Augen sehr verletzen. Natürlich gibt es einige Ausnahmen, in denen Funky oder andere unleserliche Schriftarten verwendet werden können, z. B. für Werbung in Nachtclubs.

Wenn Sie jedoch beispielsweise Soda, Bored oder Akka verwenden möchten, ist es besser, diese Idee abzulehnen. Wenn der Wunsch noch stark genug ist, dann sollten diese Schriftarten sparsam eingesetzt werden. Zum Beispiel als Titel. Aber dann sollte der Fließtext besser lesbar sein. Dies kann dazu beitragen, Ihrer Website Schwung zu verleihen. Und denken Sie daran, dass die Verwendung solcher Schriftarten ein Designvorteil und kein Nachteil sein sollte.

informativ

Design sollte Ihre Informationen ergänzen. Der Benutzer muss nicht herausfinden, was genau der Designer im Sinn hatte. Die falsche Wahl der Typografie kann zu einer falschen Vorstellung des Benutzers über das Unternehmen und seine Dienstleistungen beitragen.

Beim Design für Geschäftsprojekte sollten Sie hauptsächlich traditionelle glatte Schriftarten verwenden. Dies muss auch dann berücksichtigt werden, wenn Sie kein amtliches Design haben. Vor allem, wenn Sie möchten, dass die Leute Ihre Website ernst nehmen.

Platzierung und Abmessungen

Für ein effektives Design ist es sehr wichtig, wo Sie den Text platzieren müssen und welche Größe er hat. Niemand möchte seine Augen anstrengen, um Informationen zu lesen oder unglaublich große Wörter auf einer Website zu sehen. Der Zweck des Schaffens gutes Design ist, ein Gleichgewicht zu finden. Und der erste Schritt dazu ist herauszufinden, welche Informationen wichtiger sind.

In der Regel müssen Wörter, die Aufmerksamkeit erfordern, etwas mehr ausgeführt werden. Oder umgekehrt - unbedeutend sollte kleiner sein. Alles hängt von der Wichtigkeit ab. Mit anderen Worten, Sie müssen eine Worthierarchie erstellen.

Versuchen Sie, die Platzierung der Schriftarten ausgewogen zu halten. Es ist nicht nötig, Textstücke um die vier Ecken zu streuen. Dies kann Benutzer erheblich ablenken.

Farbe

Dies ist einer der einfachsten Aspekte. Sie müssen eine Farbe wählen, mit der sich der Text vom Hintergrund abhebt und lesbar bleibt.

Ihre Assistenten werden kontrastierende Farben sowie die Verwendung von Effekten wie Strichen (Strich) und Glühen (Glühen) sein. Dies trägt dazu bei, die Website attraktiver und leichter lesbar zu machen. Sie müssen eine Farbe wählen, die die Leute dazu bringt, innezuhalten und zu schauen, und die Informationen zum dominierenden Teil des Designs machen.

Fazit

Die Verwendung von Schriftarten in Photoshop unterscheidet sich stark von der Verwendung in Webseiten. Das erklärt, warum es für einige Designer so schwierig ist, mit Typografie zu arbeiten. Typografie im Web ist ein weites Thema und erfordert viel Recherche. Sie sollten immer daran denken, dass es sehr wichtig ist, einen Ansatz für die Verwendung von Typografie zu finden, der zur Stimmung und Ästhetik des Designs passt. Scheuen Sie sich nicht, verschiedene Arten von Schriftarten zu mischen und anzupassen, stellen Sie einfach sicher, dass sie funktionieren.

Typografie spielt eine Schlüsselrolle im Webdesign, laut Statistik sind 95% der Website-Inhalte Textinhalte. Schriftdesign steuert die Stimmung und schafft eine bestimmte Atmosphäre beim Lesen der Textinhalte von Webseiten.

Moderne Webtypografie basiert auf CSS-Stilen. Indem Sie die standardmäßigen Stilwerte des Browsers ändern, können Sie Textinhalte attraktiver gestalten.

Dieser Artikel behandelt die Hauptaspekte moderner Webtypografie, die Ihnen bei der Auswahl einer Schriftart und eines Textstils helfen.

CSS-Eigenschaften für die richtige Webtypografie

1. Schriftfamilie (Eigentum der Schriftfamilie)

Die Schriftauswahl beginnt mit der Auswahl einer Schriftart.

Headset- eine Schrift oder mehrere Schriften, die eine stilistische Einheit des Stils haben. Es besteht aus einer Reihe von Zeichen (meist Ziffern, Buchstaben, Satzzeichen, Sonderzeichen, kann aber auch ausschließlich aus nicht alphabetischen Zeichen bestehen). Beispielsweise besteht die Schriftart Times New Roman aus regulären, kursiven, fetten und vielen anderen Schriftarten dieser Familie.

Headsets können in zwei Hauptkategorien unterteilt werden: Serife(antiqua und quadratische Schriftarten) und serifenlos(Grotesken).

Serifenlose Schriftarten wirken einfach und übersichtlich Aussehen. Serifenschriften verleihen dagegen einen ernsteren und formelleren Ton.

Die Augen gewöhnen sich beim Lesen an die Hauptschrift und werden müde, wenn Überschriften, Inhaltsverzeichnis und Nebentexte in Schriftarten einer anderen Schriftart getippt werden, die nicht mit der Hauptschrift harmonieren. Daher reicht es bei der Auswahl der Schriftarten aus, bei einer oder zwei Schriftarten stehen zu bleiben und Akzente durch Größe, Farbe, Stil usw. zu setzen.

Wann können mehrere Schriftarten verwendet werden:

• Es gibt keine speziellen Schnitte in der Schrift (fett, fett, kursiv);
• Es ist notwendig, Ähnlichkeit mit einer bestimmten Epoche zu erreichen;
• Zur visuellen Trennung von Texten verschiedener Art (z. B. Kommentare im Text, Codezeilen, Formeln, Texte in einer anderen Sprache);
• Aus ästhetischen Gründen.

TypeTester-Dienst zur Schriftartauswahl

2. Kombination von Serifen- und Sans-Serif-Schriften

Es gibt eine unausgesprochene Regel bei den Empfehlungen für die Kombination von Schriftarten: Für Überschriften wird eine serifenlose Schriftart und für den Fließtext eine serifenlose Schriftart gewählt. Dieser Ansatz ist jedoch nicht so beliebt, wie es scheinen mag.

Tatsächlich gilt diese Regel in erster Linie für gedruckte Veröffentlichungen, Buchdruck. Dies liegt daran, dass eine Serifenschrift (kleine Striche an den Enden der Hauptstriche) sich nahtlos in einer Zeile aufreiht, wodurch der Text leichter lesbar und besser lesbar wird.

Anders verhält es sich bei der Anzeige von Text durch Displays. verschiedene Geräte. Es gibt ein Problem der Glättung und ungleichmäßiger Serifen. Daher eignet sich eine serifenlose Schrift mit etwas erhöhter Kleinbuchstabenhöhe besser für Fließtext.

3. Schriftfarbe (Farbeigenschaft)

Farbe verleiht dem Text Klarheit und Ausdruckskraft. Farbige Überschriften und kleine Akzente im Text können mehr Aufmerksamkeit erregen als schwarzer Text.

Vergessen Sie jedoch nicht, dass jede Farbe ihre eigene Stimmung mit sich bringt und jeder Mensch persönliche Gefühle hat, die diese oder jene Farbe in ihm hervorruft.

Eine warme Farbe lenkt die Aufmerksamkeit aktiv auf den Text und lässt ihn optisch größer erscheinen als eine ähnlich große Schrift in kalten Farbtönen. Für kleine Textelemente eignen sich hellere Farben, der Seiteninhalt der Seite kann mit einer Farbe hervorgehoben werden, die 20-30 % heller ist als die Textfarbe des Hauptinhalts der Webseite.

Bei der Wahl der Anzahl der Textfarben beschränkt man sich am besten auf zwei ausreichend kontrastreiche Farben (ohne Schwarz und weiße Farbe). Schwarzer Text auf weißem Hintergrund ist ein Klassiker mit viel Kontrast.

4. Schriftgröße (Eigenschaft font-size)

Die Basisschriftgröße des Browsers beträgt 16px , und Überschriften werden proportional zur Basisschriftgröße gesetzt (h1 - 2em, h2 - 1,5em, h3 - 1,17em usw.).

Durch Variation der Schriftgröße können Sie dem Text eine visuelle Bedeutung verleihen und die Aufmerksamkeit der Besucher auf die wichtigsten Textstellen lenken. In der Regel gilt: Je größer das Element, desto wichtiger ist es.

Die Größe von Text in einem Browserfenster wird durch die Auflösung des Monitors des Benutzers beeinflusst: Text gleicher Größe erscheint auf einem Monitor mit höherer Auflösung kleiner als Text gleicher Größe auf einem Monitor mit niedrigerer Auflösung.

Schriftarten aus verschiedenen Familien derselben Größe können auch unterschiedliche tatsächliche Größen haben.

Mit dem Wachstum von Bildschirmauflösungen und Monitorgrößen ist es notwendig, die übliche Textgröße von 12-14px zu überdenken. Für Klartext ist bereits eine 14-18px Schriftart weit verbreitet. Bei der Einstellung der Schriftgröße sollte man die Anpassbarkeit nicht vergessen, d.h. die Schriftgröße sollte sich je nach Bildschirmgröße ändern.

5. Textausrichtung (Eigenschaft text-align)

Blocksatz sieht auf einer gedruckten Seite gut aus, da die Wörter gleichmäßig über die Zeilen verteilt werden. Diese Art der Formatierung von Webseiten mit CSS ist nicht möglich, und der Blocksatz von Text in der Breite erzeugt große, unangenehme Lücken zwischen den Wörtern. Daher verwendet die Webtypografie normalerweise die linke Ausrichtung.

6. Buchstaben- und Zeichenabstand (Wort- und Buchstabenabstandseigenschaften)

Der Buchstabenabstand wirkt sich auf die Lesbarkeit von Text aus. Durch Variieren der Textdichte (verdichteter und spärlicher Text) können Sie das Wahrnehmungstempo variieren und ein Gleichgewicht in der Textkomposition der Website erreichen.

Serifenschriftarten sehen mit reduziertem Buchstabenabstand ausdrucksvoller aus .

7. Zeilenabstand (line-height property)

Der optimale Zeilenabstand beträgt das 1,4- bis 1,6-fache der Schriftgröße.

Setzen Sie außerdem nicht zu viele Einzüge zwischen Überschriften und dem zugehörigen Absatz.

8. Leitungslänge

Eine Zeile zum fortlaufenden Lesen sollte 30 bis 75 Zeichen enthalten (ca. 7-10 Wörter pro Zeile). Je breiter die Textzeile ist, desto größer sollte sie sein Zeilenabstand. Der Zeilenabstand sollte nicht kleiner sein als der Abstand zwischen den Wörtern.

9. Schriftstil (font-style-Eigenschaft)

Sie können schöne Typografie erstellen, indem Sie den Schriftstil steuern. Kursivschrift verleiht dem Text beispielsweise eine gewisse Feierlichkeit. Ein fetter Stil plus eine erhöhte Schriftgröße ermöglichen es Ihnen, den gewünschten Inhalt hervorzuheben, aber nur, wenn sich dieser Text vor dem Hintergrund von Objekten in der Nähe abhebt.

Eigenschaft font-variant: Kapitälchen; Verleiht Text typografische Raffinesse, indem Text so transformiert wird, dass alle Buchstaben in Kapitälchen dargestellt werden. Diese Technik eignet sich für kleine Textfragmente.

10. Textstruktur und visuelle Hierarchie

Beim Aufbau einer Webseite werden folgende Objekte unterschieden:

• Logo / Name der Website;
• Titel/Titel;
• Nebenüberschriften;
• Haupt Text;
• Navigation;
• Hypertext-Links;
• Lange Anführungszeichen;
• Seitenleiste;
• Signaturen / Inschriften in Tabellen, Abbildungen.

Jeder Listeneintrag ist ein grundlegender Bestandteil der Website und rechtfertigt die Notwendigkeit, ihn hervorzuheben.

Es gibt sechs Ebenen von Überschriften in HTML, beginnend mit der wichtigsten

und endet mit dem weniger bedeutenden

. Header

müssen in der Dokumentstruktur an erster Stelle stehen, und Überschriften niedrigere Level sollte ihm folgen und die Informationen detaillieren. Um Überschriften hervorzuheben, können Sie die Technik verwenden, einen Teil der Überschrift farblich hervorzuheben.

Zur leichteren Aufnahme sollte der Text in Teile gegliedert werden und für jeden Abschnitt die Überschrift der entsprechenden Ebene gewählt werden. Je höher die Überschriftenebene, desto aussagekräftiger sollte der Abschnitt inhaltlich sein.

BEI Gesamtstruktur Text Besondere Aufmerksamkeit sollten Links gegeben werden, sollten sie sich leicht von den umgebenden Inhalten abheben.

Die visuelle Hierarchie stellt die richtige Struktur auf der Seite her und macht den Text leicht verständlich und lesbar. In den meisten Texten gibt es eine Einteilung des Textes nach Bedeutung. Es gibt mehrere Möglichkeiten, am einfachsten ist es, den Text in Absätze zu unterteilen.

• Hauptstadt;
• Kursivschrift;
• Fetter/fetter Stil;
• Die Größe;
• Farbe;
• Headset-Wechsel;
• Ändern der Position von Zeichen auf dem Textstreifen (Groß- und Kleinschreibung, Einzüge);
• Hervorheben von Zeichen mit grafischen Elementen - Zeiger, Rahmen, Symbole usw.

Eine zu starke Hervorhebung überbetont nicht nur die Aufmerksamkeit eines Fragments, sondern erschwert auch das Lesen.

11. Sichere Schriftarten

Windows-Schriftarten / Mac-Schriftarten / Schriftfamilie

Arial, Arial, Helvetica, serifenlos

serifenlos

kursiv

Einraum

Georgien 1, Georgien, Serife

serifenlos

Lucida-Konsole, Monaco 5, Einraum

serifenlos

Serife

Tahoma, Genf, serifenlos

Times New Roman, Times, Serife

Trebuchet MS 1, Helvetica, serifenlos

Verdana, Verdana, Genf, serifenlos

Symbol, Symbol (Symbol 2 , Symbol 2)

Gurte, Gurte (Gurte 2 , Gurte 2 )

Wingdings, Zapf Dingbats

MS Sans Serif 4 Genf serifenlos

MS-Serife 4, New York 6, Serife

Arial, Arial, Helvetica, serifenlos

Arial Schwarz, Arial Schwarz, Gerät, serifenlos

Comic Sans MS, Comic Sans MS 5, kursiv

Kurier Neu, Kurier Neu, Kurier 6, Einraum

Georgien 1, Georgien, Serife

Aufprall, Aufprall 5, Holzkohle 6, serifenlos

Lucida-Konsole, Monaco 5, Einraum

Lucida Sans Unicode, Lucida Grande, serifenlos

Palatino Linotype, Buch Antiqua 3, Palatino 6, Serife

Tahoma, Genf, serifenlos

Times New Roman, Times, Serife

Trebuchet MS 1, Helvetica, serifenlos

Verdana, Verdana, Genf, serifenlos

Symbol, Symbol (Symbol 2 , Symbol 2)

Gurte, Gurte (Gurte 2 , Gurte 2 )

Wingdings, Zapf Dingbats (Wingdings 2, Zapf Dingbats 2)

MS Sans Serif 4 Genf serifenlos

MS-Serife 4, New York 6, Serife

1 Die MS-Schriftarten Georgia und Trebuchet werden mit Windows 2000/XP geliefert und sind im IE-Schriftartenpaket enthalten (und tatsächlich in vielen Microsoft-Anwendungen enthalten), sodass sie auf vielen Windows 98-Computern installiert sind.

2 Zeichensätze werden nur in angezeigt Internet Explorer, in anderen Browsern werden sie normalerweise durch eine Standardschrift ersetzt (obwohl beispielsweise die Symbolschrift in Opera und Webdings in Safari angezeigt wird).

3 Book Antiqua ist fast identisch mit Palatino Linotype; Palatino Linotype kommt mit Windows 2000/XP und Book Antiqua kommt mit Windows 98.

4 Bitte beachten Sie, dass diese Schriftarten keine TrueType-, sondern Bitmap-Schriftarten sind, sodass sie bei einigen Größen schlecht aussehen können (sie sind für die Anzeige bei 8, 10, 12, 14, 18 und 24 pt bei 96 DPI ausgelegt).

5 Diese Schriftarten funktionieren nur in Standardschriftarten in Safari, aber nicht in Fett- oder Kursivschrift. Comic Sans MS funktioniert auch fett, aber nicht kursiv. Andere Mac-Browser scheinen in Ordnung zu sein, um fehlende Schrifteigenschaften selbst zu emulieren (danke an Christian Fecteau für den Tipp).

6 Diese Schriftarten werden nur während der klassischen Installation auf dem Mac installiert