Share
Jedes denkbare Merkmal der Typografie kann mit seinem Namen bezeichnet werden. Unabhängig davon, ob Sie über die Schrift selbst oder über die Anordnung des Typs innerhalb eines Layouts sprechen, es gibt ein umfangreiches Glossar von Begriffen, mit dem Sie die Dinge richtig beschreiben können. Werfen wir einen Blick auf die Elemente der Typografie, die für Sie als Webdesigner wichtig sind.
Es gibt zwei wesentliche Aspekte der Typografie, die Webdesigner direkt betreffen:
Daher ist es ziemlich wichtig, dass Sie Ihre typografischen Meinungen und Entscheidungen (für Kunden oder Teammitglieder) artikulieren können. Wir machen uns keine Sorgen über die Minutien von Ballterminals und Tittles, sondern diskutieren stattdessen die Anatomie der Typografie, wie sie Webdesignern wichtig ist.
Bestimmte grundlegende typografische Eigenschaften können mit CSS bearbeitet werden. Zum Beispiel vielleicht am wichtigsten Schriftfamilie.
Sie hören oft Diskussionen über die Definition von Schriftart gegen Schrift, Daher ist es wichtig, dass Sie den Unterschied kennen. Eine Schrift ist die abgepackte Sammlung von Buchstabenformen. Traditionell physische Blöcke, die beim Drucken verwendet werden, umfassen heutzutage auch digitale Dateien. Es ist der Lieferungsmechanismus.
Eine Schrift ist das, was der Designer erstellt. das Design. Ich habe den Vergleich mit Musik immer gemocht. Sie kaufen eine CD (in Ordnung, wir gehen hier schon ein paar Jahre zurück), um die Musik zu hören. Sie hören nicht wirklich die CD. Es ist eine ähnliche Situation wie bei der Auswahl von Schriftarten, um die von ihnen gelieferten Schriftarten zu verwenden.
Durch CSS können wir unsere bevorzugten Schriftfamilien in der Rangfolge bestimmen. Das nennen wir das Schriftstapel.
Wir können auch manipulieren Schriftgewicht durch Stylesheets. Gewicht ist die Art und Weise, wie wir die relative Stärke des Strichs eines Charakters beschreiben.
Viele Schriftarten werden mit verschiedenen Schriftstärken erstellt, die meisten werden einfach als bezeichnet Licht, regulär, Buch, extra fett, Neben einer Reihe von Varianten. Genauer gesagt, wir können die Gewichtung einer Schrift mithilfe der TrueType-Skala bestimmen, die von 100 bis 900 reicht (400 wird üblicherweise als normal bezeichnet)..
Fonts sollten idealerweise mit tatsächlichen Gewichtsvarianten (numerisch oder benannt) erstellt werden, um durch CSS gesteuert zu werden: font-weight: 300;, Schriftdicke: fett;. Wenn eine Schriftvariante nicht verfügbar ist, versuchen Browser häufig, die Gewichtung selbst wiederzugeben, die Ergebnisse sind jedoch möglicherweise nicht optimal.
Großbuchstaben und Kleinbuchstaben beziehen sich auf die Groß- und Kleinschreibung. Der Begriff Fall stammt aus den Schubladen des Buchdrucks (Großbuchstaben mit Großbuchstaben, Kleinbuchstaben ... Sie erhalten das Bild).
Wir können den Fall (wenn wir möchten) über CSS mit überschreiben text-transform: großbuchstaben; zum Beispiel.
Während wir uns mit dem Zeichenzeichen beschäftigen, ist es bei Großbuchstaben manchmal (besonders bei kleineren Größen) ratsam, den Abstand zwischen den Zeichen zu erhöhen, um die Lesbarkeit zu verbessern. In CSS bezeichnen wir dies als Buchstaben-Abstand und es kann als positiver oder negativer Wert ausgedrückt werden, der normalerweise in Hundertsteln gemessen wird em.
In traditionellen Begriffen bezeichnen wir den Buchstabenabstand als Verfolgung. Die Verfolgung wirkt sich auf die allgemeine Zeichendichte innerhalb einer bestimmten Zeile oder eines Textblocks aus. Der Begriff stammt (wie bei vielen typografischen Begriffen) insbesondere aus dem vergangenen Zeitalter des Satzes Fotosatz, in denen Charaktere durch eine Linse auf Film projiziert wurden. Der Raum um jeden Charakter würde verändert werden, indem ein Prisma entlang einer Spur bewegt wird Verfolgung.
Die CSS-Eigenschaft Wortabstand kann dir auch hier helfen. Bei einer Änderung des Wortabstandswerts wird der Abstand zwischen den Wörtern voraussichtlich größer und kleiner, was sich auch erheblich auf die Lesbarkeit auswirkt.
Spielen Sie mit den Buchstaben- und Wortabstandswerten, die auf den folgenden Textblock angewendet werden, und überzeugen Sie sich selbst, wie die Lesbarkeit beeinflusst wird.
Oft wird mit Tracking verwechselt Kerning. Kerning bezieht sich auf die Anpassung des Abstands zwischen bestimmten Buchstabenformen (nicht einer ganzen Gruppe von Zeichen), um die Lesbarkeit zu verbessern.
EIN proportional Schriftart (im Gegensatz zu einem monospaced Schrift, deren Zeichenabstand einheitlich ist) berücksichtigt bestimmte Zeichenpaare, die zusätzliche Hilfe benötigen, um visuell nebeneinander zu sitzen.
Zum Beispiel in Großbuchstaben V und EIN, Wenn sie zusammen platziert werden, muss das Kerning normalerweise reduziert werden, um den zusätzlichen visuellen Raum zwischen ihnen zu bekämpfen.
Wieder einmal haben wir alte Schriftsätze für den Begriff verdankt, als der Typ als Metallblöcke gegossen wurde. Kern bezieht sich auf die Kerbe in einem Zeichenblock, die es ihm ermöglichen würde, in einen entsprechenden Block einzufügen. Die Positionierung dieser Kerben mit männlichen / weiblichen Elementen würde verhindern, dass nicht übereinstimmende Zeichen nebeneinander platziert werden.
Das Kerning ist jedoch ein Prozess, der mit dem Schriftsatz für den Druck verbunden ist und von der Web-Typografie nicht ohne weiteres akzeptiert wird. Es gibt JavaScript-Tools wie z. B. kerning.js, mit deren Hilfe Designer ihren Typ auf Zeichenbasis bearbeiten können, aber CSS hat noch nicht aufgeholt.
In Bezug auf CSS gibt es einen Vorschlag für die Eigenschaft Font-Kerning in den Werken, aber auch das ist begrenzt, was es für einen typografischen Designer tun kann.
Festlegen der (nicht standardmäßigen) Eigenschaft Text-Rendering: OptimizeLegibility; In einigen modernen Browsern wird das verbessert, indem das Kerning erkannter Zeichenpaare verbessert wird. Wie bei Font-Kerning, Dies bietet weniger Kontrolle als helfende Hand. Es wird auch die Verwendung von ausgelöst Ligaturen wo in einer Schrift verfügbar, was mich schön weiterführt…
Ligaturen bringen Kerning auf die nächste Stufe und bieten Ersatzzeichen für bestimmte Zeichenpaare. In einigen Fällen stimmen die Buchstaben nicht sehr gut überein, unabhängig davon, wie fein sie angeordnet sind. In diesem Fall kann eine Ligatur entworfen werden. Ein klassisches Beispiel ist der Kleinbuchstabe f und ich.
Hier ist einer, mit dem Sie vertraut sind; Erkenne das?
Das kaufmännische Und-Zeichen ist eigentlich eine Ligatur im Ursprung, an die wir uns gewöhnt haben Et (Bedeutung von "und" in Latein / Französisch).
In anderen Fällen können Ligaturen für bestimmte sprachliche Raritäten erforderlich sein (wobei das deutsche ß möglicherweise das bekannteste von diesen ist) und manchmal auch nur zur Dekoration. Letzteres nennen wir als Diskretionäre Ligaturen, wie wo a c und ein t sich zusammenschließen.
Wenn Sie mehr Kontrolle über den Inhalt einer Webseite haben, können Sie zum Anzeigen von Ligaturen Unicode- oder HTML-Entitäten verwenden. Zum Beispiel fi wird Sie mit dem "fi", über das wir gesprochen haben, klären. Wenn Sie lieber JavaScript haben, können Sie mit ligature.js arbeiten, auch wenn es nicht bombensicher ist.
Wenn Sie CSS verwenden, um Ihnen zu helfen, stützen Sie sich möglicherweise auf die Text-Rendering: OptimizeLegibility die wir erwähnt haben, oder Sie könnten die vorgeschlagene verwenden Schriftvarianten-Ligaturen das hat eine Reihe von Werten wie gewöhnliche Ligaturen, Stellen Sie sicher, dass Ligaturen so weit wie möglich angezeigt werden. Die Browser-Unterstützung ist im Moment noch unvollständig, aber es lohnt sich auf jeden Fall, ein Auge zu haben.
Wie wir gleich besprechen werden, können die Proportionen einer Schrift den Abstand zwischen den einzelnen Zeilen beeinflussen. Es ist daher ratsam, das zu berücksichtigen Zeilenhöhe spezifisch für die verwendete Schriftart und passen Sie entsprechend an. Zu wenig vertikaler Abstand führt dazu, dass der Textkörper zu eng wird, und das Auge kann nur schwer zum Anfang der nächsten Zeile zurückkehren.
Zu viel Platz und Lesen wird gleichermaßen umständlich.
Die Verwendung von relativen Messungen ist im Webdesign immer ratsam, insbesondere wenn es um Typografie geht. Die Zeilenhöhe sollte immer eine Funktion der Schriftgröße sein! Verwenden ems Wenn Sie die Zeilenhöhe definieren, bedeutet dies, dass sie immer relativ zur Schriftgröße ist. Schauen Sie sich dieses Beispiel an und sehen Sie, wie die Lesbarkeit durch die sich ändernden Werte beeinflusst wird:
In traditionellen Begriffen bezeichnen wir den Abstand zwischen Zeilen (nicht zu verwechseln mit der Zeilenhöhe selbst) als führend, so genannt wegen der physischen Bleimetallstreifen, die in Druckmaschinen verwendet wurden, um den vertikalen Abstand zu vergrößern und zu verkleinern.
Heutzutage, wenn die Höhe der Linie berechnet wird, halb führend wird sowohl oben als auch unten der Zeichen hinzugefügt. Zum Beispiel würde eine Schriftgröße von 36 Pixeln mit einer Zeilenhöhe von 54 Pixeln (1,5 Zentimetern) dazu führen, dass unter den oben angegebenen Zeichen 9 Pixeln und 9 Pixeln hinzugefügt werden. Tatsächlich zentriert dieser Text vertikal innerhalb seiner Zeile.
Mit unserer CSS-gesteuerten typografischen Anatomie kommen wir zu Rechtfertigung; die Ausrichtung des Textes. In unserem Diagramm ist der Text nach links ausgerichtet, er kann jedoch gleichermaßen nach rechts, zentriert oder (wenn es sich um Textblöcke handelt, die größer als eine Zeile sind) ausgerichtet werden. Das Styling über CSS erfolgt beispielsweise mit der Eigenschaft text-align text-align: center;.
Vollständig ausgerichteter Text entfernt das, was als bekannt ist zackiger Rand…
… Kann aber einen unangenehmen Nachgeschmack in Form von verursachen Flüsse oder Kanäle im Textkörper erscheinen.
In der Welt der flüssigen Layouts, in denen die Breite eines Textkörpers schwer zu bestimmen ist, sollte der begründete Text mit Vorsicht verwendet werden.
Die Auswahl von Schriften kann schwierig sein. Unabhängig davon, ob Sie Überschriften, Textkörper, Anführungszeichen usw. betrachten, es gibt viele Faktoren. Schauen wir uns einige grundlegende Aspekte der typografischen Anatomie an, die es zu beachten gilt.
Zunächst einmal, haben wir es mit einem serif Schrift oder a serifenlos? Serifen sind die zusätzlichen Striche, die einen Hauptstrich beenden. Schriften wie Arial haben diese Striche nicht Sans-serif (eine weitere Französischstunde für Sie dort ...)
Von Serifen wird gesagt, dass sie den Fluss von Buchstabenformen unterstützen, zusammenhängende Wörter miteinander verbinden, das Auge über den Text hinweg unterstützen und das Lesen erleichtern. Manchmal können sie jedoch eine Schrift erschweren, die Ermüdung des Lesers verursachen und somit die Lesbarkeit beeinträchtigen. Das Argument ist seit Jahrzehnten aktuell, und es ist noch nie gelungen, konkrete Beweise dafür vorzulegen, dass beide besser lesbar sind.
In jedem Fall sind Schriftarten manchmal in Serifen- und Sans-Serifen-Geschmacksrichtungen erhältlich (wie in ParaTypes PT), so dass Sie den Luxus haben, den Sie bevorzugen.
Nachdem erwähnt Lesbarkeit, es ist nur fair, dass ich es schnell unterscheide Lesbarkeit. Wir verwenden Lesbarkeit, wenn wir über die feineren Details der Typografie sprechen. die Fähigkeit, einzelne Buchstaben und Wörter zu erkennen. Die Lesbarkeit nimmt eine mehr funktionale Rolle ein, bezogen auf die Praktikabilität eines Lesers, der einen Textkörper aufnehmen kann.
Lesbarkeit ist offensichtlich sehr wichtig. Aus diesem Grund ist es ratsam zu nehmen x-Höhe berücksichtigen. Die x-Höhe des Typs beschreibt die Höhe (schauen Sie sich das x eines bestimmten Gesichts an), von der Grundlinie an die Spitze von Kleinbuchstaben. Schriften mit einer relativ großen x-Höhe sind insbesondere bei kleineren Formaten besser lesbar.
Größere x-Höhe geht auf Kosten der Abseilgeräte und Steigern, die logisch kürzer werden. Dies kann dazu führen, dass zwischen den Zeilen optisch weniger Platz vorhanden ist, über den wir vorhin gesprochen haben.
Ich bin mir nicht sicher, wie ich so weit gekommen bin, ohne die Buchstabenform genau zu definieren Schlaganfall. Wenn es einen Begriff gibt, der hilfreich ist, um die Persönlichkeit einer Schrift zu beschreiben, dann ist es das. Der Strich einer bestimmten Buchstabenform kann horizontal, vertikal, diagonal, sogar gekrümmt sein - und abhängig vom fraglichen Strich kann er auch einen spezifischeren Namen haben.
Der Haupthub (normalerweise aufrecht und schwer) innerhalb einer Buchstabenform wird als bezeichnet Stengel, den Begriff verlassen Schlaganfall dann eine sekundäre Bedeutung zu bedeuten. Der horizontale Strich auf einem Großbuchstaben T wird als bezeichnet Arm, Das, was Sie finden, um die Lücke in einem Großbuchstaben A oder H zu überbrücken, ist a Bar, Die Liste geht weiter…
Striche innerhalb einer Buchstabenform, insbesondere in Serifenschrift, können sich auch in Stil und Gewicht unterscheiden. ein Haaransatz der dünnste anwesend sein.
Dann haben einige Schläge, insbesondere Kurven, entlang ihrer eigenen Länge ein unterschiedliches Gewicht. Dies wird als bezeichnet Modulation. Diese Variation gleicht das Gesamtgewicht eines Charakters aus und vermeidet besonders schwere Bereiche, in denen zwei Striche zusammenkommen.
Eine schlechte Strichmodulation führt häufig zu einer unbeholfenen, schweren Buchstabenform im Verhältnis zu anderen im Satz. David Kadavy bezeichnet dieses Gleichgewicht als Gleichmäßigkeit der Textur und ist oft ein Maß für die Qualität einer gut ausgeführten Schrift. Schauen Sie sich einen Textkörper an und verwischen Sie dann Ihre Augen, um einen Eindruck von der Gesamtstruktur zu erhalten.
Es gibt Tausende von Glossarbegriffen und Adjektiven, um einen Überblick zu erhalten, wenn Sie typografische Aspekte richtig beschreiben möchten. Wir haben hier einige Grundlagen behandelt und ich hoffe, einige davon sind neue Ergänzungen in Ihrem Vokabular! Versuchen Sie, zufällig eines in das Gespräch zu werfen, wenn Sie jemandem das nächste Mal vorgestellt werden - sie werden es sein sehr beeindruckt…
Accentsconagua