Frontend-Entwicklung ist eine knifflige Angelegenheit und kann ein sehr undankbarer Job sein. Ein Entwickler, der Ingenieurwesen oder Informatik studiert hat, macht diese Art von Code leicht, aber am Ende gibt es immer viel zu viele Details, die korrigiert werden müssen, und ja, es geht oft um Typografieprobleme.
Das liegt daran Es besteht eine deutliche Diskrepanz zwischen den Erwartungen des Designers und der Wahrnehmung der geleisteten Arbeit durch den Entwickler. Mit anderen Worten, im Allgemeinen sieht der Designer eine Reihe von Dingen, die der Entwickler nicht sieht.
Apps zum Prototyping haben definitiv zum Verständnis der Seitenstruktur beigetragen, und einige haben sogar dazu beigetragen, zu verstehen, welche Art von Bewegungsübergängen oder Interaktionen wir benötigen. Sketch zum Beispiel hat dem Designer definitiv dabei geholfen, dem Entwickler alle Informationen zur Verfügung zu stellen: von Größen über Schriftarten bis hin zu Farbcodes ist alles da.
Und trotzdem schaut sich der Designer die Arbeit an, die der Entwickler produziert hat, und die Korrekturen kommen in Strömen:“Diese Schrift hat nicht das richtige Gewicht“,“Dieser Titel sollte in Großbuchstaben geschrieben werden“,“Der Zeichenabstand ist falsch“ und so weiter.
Basierend auf meiner Erfahrung Die meisten der vorgenommenen Korrekturen beziehen sich auf den Text. Alles andere ist weniger technisch und auf einer grundlegenden empirischen Ebene verständlicher, aber nicht die Typografie.
Es steckt viel dahinter, ganze Kurse widmen sich ihrem Design und ihrer Verwendung, daher ist es sehr unwahrscheinlich, dass man sich die Schrift nur ansieht und sofort weiß, was mit ihr zu tun ist, um sie so aussehen zu lassen, wie es der Designer entschieden hat.
Aus diesem Grund habe ich beschlossen, einen Typografie-Workshop zu veranstalten.
Bevor ich auf eine der Erklärungen eingehe, ist es wichtig zu verstehen, wie der Buchstabe funktioniert, in welcher Beziehung er zu seinen Artgenossen steht und wie sich das auf das Wort, den Satz und den Absatz auswirkt.
Grundbegriffe, die gut zu haben sind und die es einfacher machen, über Typografie zu sprechen:
1.2. Anatomie der Typografie
Eine Buchstabenform hat gemeinsame Merkmale wie ihre Artgenossen innerhalb derselben Schrift. Diese Merkmale basieren auf Größen und Proportionen derselben anatomischen Grundmerkmale, die alle westlichen Charaktere betreffen.
Ich dachte, es wäre interessant, sie aufzulisten, aber nicht in der Absicht, sie auswendig zu lernen, weil die Benennung das nicht schafft.
Ein großer Unterschied im täglichen Leben des Grafikdesigners oder Entwicklers.
Ich liste sie auf, um zu wissen, worauf man achten muss, wenn man versucht, Schriften zu vergleichen, und um besser zu verstehen, welche Funktionen verschiedene Schriften aufgrund ihrer Anatomie haben können.
Basierend auf diesen technischen/strukturellen Merkmalen, Interpretationsdefinitionen oder sogar dem historischen Kontext gibt es Klassifizierungen für den Typ. Hier sind einige:
Die am häufigsten verwendeten und in Bezug auf den Code relevantesten sind die berühmten Serif- und Sans-Serif. Der Grund, warum diese beiden die wichtigste Unterscheidung sind, die getroffen werden muss, liegt darin, dass ihr zentrales definierendes Merkmal objektiv und sehr sichtbar ist, wenn man weiß, wonach man suchen muss.
Die Sans-Serif wurde erstellt, indem die Serife entfernt wurde — „sans“ bedeutet „ohne“. Dieser an den Druck angepasste Stil wurde aufgrund seiner Klarheit und Lesbarkeit geschaffen., was für Displays und Werbung nützlich war. Außerdem war es einfacher, in sehr großen Formaten zu drucken.
Andererseits gilt die Serifenschrift als die beste Wahl für lange Texte, wie sie beispielsweise in Büchern oder Zeitungen zu finden sind. Dies ist allerdings fraglich, da vieles, was die gesamte Schriftfamilie lesbarer machen würde, sich auch gegen sich selbst richten kann, abhängig von einigen grundlegenden Merkmalen der einzelnen Schrift - Ich bin mir ziemlich sicher, dass eine Didot, obwohl sie eine Serif-Schrift ist, schlechter sein wird als zum Beispiel Lato, was die Lesbarkeit langer Texte angeht.
Dies liegt daran, dass Didot einen hohen Kontrast zwischen horizontalen und vertikalen Linien hat, was zu viel Rauschen und „Unebenheiten“ im Lesefluss führt, während Lato ein gleichmäßigeres Verhältnis zwischen den verschiedenen Zeilen des Buchstabens darstellt, was es zu einer besseren Option macht als Didot. Es ist keine perfekte Option, aber Sie verstehen das Wesentliche.
Das Wichtigste, was Sie über diese beiden verschiedenen Schriftstile wissen müssen, um zu wissen, welche für was am besten geeignet sind, ist die Funktion der Serife. Ihre Funktion ist leichter zu verstehen, wenn man ihre Geschichte kennt.
Vor all dem, bevor wir - die Menschheit - überhaupt darüber nachgedacht haben, Metallteile zu verwenden, um Wörter zu kreieren und sie gegen Papier zu drücken, um Bücher schneller erstellen zu können. Bevor wir überhaupt über die Idee eines Buches, einer Zeitung oder eines Textes nachgedacht haben, haben wir bereits Visuals erstellt, um zu kommunizieren.
Tausende von Jahren der Evolution machten komplexere Formen der visuellen Kommunikation zu einer Notwendigkeit, daher Alphabete. Diese wurden jedoch nicht aus dem Nichts geboren, sondern waren das Ergebnis ihrer eigenen Mutationen und Anpassungen. Ich finde die Geschichte des Buchstabens „A“ ein sehr einfaches Beispiel dafür, wie die Entwicklung der meisten Buchstaben zustande kam.
Verschiedene Zivilisationen kamen und gingen, Bedeutungen und Laute etablierten sich — einige mutierten, andere nicht — und der Ochsen-/Kuhkopf wurde zunehmend vereinfacht, gedreht, von den Römern geometrisch perfektioniert, um auf Monumenten geschnitzt, von Mönchen geschrieben und verschönert, für eine schnellere und besser fließende Schrift handverzerrt und schließlich von Typografen aufgegriffen zu werden.
Also um weiterzumachen: Die ursprüngliche Geburt der Serifen ergab sich aus der Notwendigkeit, schnell zu schreiben und verschiedene Buchstaben miteinander zu verbinden. Als das Lesen zu einer Sache wurde, die nicht nur für den Beamten und die Monarchie galt, war auch besseres Lesen eine Voraussetzung, und zu diesem Zeitpunkt wurde die Serife für diesen Zweck verwendet. Jetzt weißt du es.
Dann kam die Typografie.
Da es eine gab Erhöhung des Bewusstseins für die Lesbarkeit der Schrift, seine Verwendung und Disposition war auch ein Ziel, das mehr Aufmerksamkeit und Sorgfalt erforderte.
3.1. Zeilenabstand
Etwas so Grundlegendes wie der Zeilenabstand, der direkt von der Schrift und ihrer Größe beeinflusst wird, wirkt sich auf die gesamte Seite aus. Die Erstellung von Rastersystemen trug dazu bei, Regeln zu konsolidieren, die es jedem Designer leicht machen, lesbaren Text und ausgewogene Seiten zu erstellen.
Zeilenabstand - Zeilenhöhe in CSS - ist übrigens der vertikale Abstand zwischen verschiedenen Textzeilen. Dieser Abstand kann für jeden Textbereich entscheidend sein, denn wenn Sie ihn zu klein oder zu groß machen, werden Zeilen übersprungen oder sie immer wieder gelesen (jeder war dort, und nein, es ist nicht deine Schuld).
Für diesen Abstand gibt es eine optimale Größe, die normalerweise zwischen 120% und 145% der Textgröße liegt. Aber nur für den Fall, dass Sie selbst eine Lösung finden müssen, können Sie Folgendes beachten:
Versuche, eine imaginäre Linie in der Mitte der Linien zu zeichnen, ohne dabei an Abwärts- oder Aufstiegslinien zu stoßen. Wenn es durchgeht, sauber, das sollte gut sein.
Beachten Sie auch die Länge der Linien in der folgenden Abbildung. Die Module, die aus den Zeilenhöhen aufgebaut wurden, sind im Vergleich zur Schriftgröße normalerweise ziemlich klein, nicht zufällig, sondern weil es dem Designer mehr Flexibilität beim Organisieren einer ganzen Seite gibt, indem größere oder kleinere Textbereiche berücksichtigt werden, während immer ein guter, proportionaler Abstand zwischen den verschiedenen Elementen eingehalten wird.
Kürzere Zeilen bedeuten auch eine bessere Lesbarkeit.
Es gibt sogar ein gutes Maß für die Länge der Zeilen, die normalerweise etwa 50 bis 75 (obere) Zeichen beträgt, einschließlich der Abstände. Dafür gibt es eine Reihe guter Gründe:
Zu kurze Zeilen zwingen den Leser, den Fluss zu oft zu unterbrechen, indem man beim Leitungswechsel zurückgehen muss. Das könnte dazu führen, dass Leser auch einige wichtige Wörter am Ende der Zeile überspringen, inmitten der Angst, ständig hin und her zu gehen - klingt stressig, oder? Das ist es tatsächlich.
Auf der anderen Seite Linien, die zu lang sind, lassen sich schwerer konzentrieren, weil es schwieriger ist, sofort zu erkennen, wo die Linie endetund erzeugt Angst, jeden Moment zu wechseln. Und wenn der Leser die Leitung wechselt, ist es auch wahrscheinlicher, dass er/sie zur falschen weitergeht, weil es schwieriger ist zu sagen, wo die Leitung ursprünglich angefangen hat.
Es stellt sich heraus, dass der Fokus des Lesers höher ist, wenn eine neue Zeile beginnt, und er lässt nach, wenn man weitergeht, bis man das Ende erreicht, sodass es ein sehr enges Gleichgewicht zu halten gilt. Daher das Intervall von 50 — 75 Zeichen als Faustregel.
Insgesamt sind dies einige der wichtigsten Dinge, die es in Bezug auf die Lesbarkeit zu beachten gilt. Wenn Sie jedoch eine gute Quelle für Grundkenntnisse im Bereich des typografischen Ausdrucks haben möchten, ist der Dokumentarfilm „Helvetica“ genau das Richtige für Sie.
Während des gesamten Dokumentarfilms werden Sie den Denkprozess hinter dem neuen Design in den 50er Jahren erklären und erfahren, wie es ein Bewusstsein geschaffen hat, das auf sozialer Verantwortung basiert — ein Kater aus dem Zweiten Weltkrieg. Außerdem erhalten Sie einen Einblick in einige der wirklich interessanten Designs, die zu dieser Zeit entworfen wurden, und eine Einführung in den Ursprung und Zweck der berühmten Helvetica-Schrift.
Außerdem werden Sie in der Lage sein, den starken Kontrast zwischen den Werbeanzeigen vor und nach International Style zu verstehen und die pragmatischen Auswirkungen, die dies auf die Art und Weise hatte, wie visuelle Kommunikation gemacht wurde/wird.
Es gibt noch eine Menge anderer Dinge, die es zu wissen gilt, und ich werde sie als Nächstes auflisten, aber denken Sie daran, dass es Ausnahmen von diesen allgemeinen Richtlinien gibt, je nachdem, welche Rolle die Typografie bei allem spielt, was Sie tun werden.
Zum Beispiel, wenn Worte isoliert enden. Sei es am Ende eines Absatzes oder am Anfang einer Textspalte. Es sieht wirklich hässlich aus und sie haben sogar einen Namen bekommen - Waisen und Witwen - Huch. Aber fairerweise muss man sagen, dass es nicht so einfach ist, diese zu vermeiden, wenn man mit responsivem Design arbeitet. Es gibt also nur eine begrenzte Menge, die getan werden kann. Das Gleiche gilt für „Lumpen“ und eine Reihe anderer typografischer Situationen mit hässlichen Namen, die ich nicht für nötig hielt zu erwähnen.
Ein weiteres klares „Tun“ oder „Nicht“, das diesmal einfacher zu kontrollieren ist, ist der Zeichenabstand, das ist der Abstand zwischen den Zeichen. Wenn Sie es zu eng oder zu lang machen, wird die Lesbarkeit im Langtext deutlich beeinträchtigt.
Bereits kurze Texte oder Displays können von einer gewissen Stilisierung profitieren, je nachdem, welche Stimmung Sie anstreben.
Was auch immer Sie tun, verzerren Sie Ihren Text nicht manuell. Sie benötigen einen horizontal breiteren Text? Suchen Sie nach „erweiterten“ Schriften. Eine größere, wirkungsvollere Schrift ist das, was Ihnen fehlt? Entscheiden Sie sich für „komprimierte“ Typen, es gibt eine große Auswahl.
Aber wenn Sie eine Schrift manuell verzerren, werden alle Größen innerhalb des Zeichens unverhältnismäßig und das Ergebnis sieht einfach schrecklich aus.
Das Gleiche gilt für die Neigung Ihrer Schrift, um einen „kursiven“ Effekt zu erzielen. Es sieht nicht immer unbedingt schlecht aus, aber es gibt viele gute Alternativen.
Es gibt gut gestaltete kursive Schriften, die nicht nur darin bestehen, ein vorhandenes Schriftbild abzuändern. Sie haben ihre eigenen Proportionen, die sicherstellen, dass die Ablesbarkeit erhalten bleibt und dass sie weiterhin auf harmonische Weise zusammen mit ihrer regulären Version verwendet werden können.
Es gibt noch viel mehr zu sagen und noch viel mehr zu lernen. Gleichzeitig sind dies jedoch so ziemlich die wichtigsten Grundlagen, um zu verstehen, worauf bei der Umwandlung von Typografie in Code zu achten ist.
Wenn du das nächste Mal Frontend machst, wirst du die Routine mehr oder weniger durchschaut haben:“Text-Transformation?“ Prüfen. “Zeichenabstand?“ Prüfen. “Zeilenhöhe?“ Prüfen. „Ist das ein Serife oder serifenlose?“ Jetzt weißt du es. „Moment mal, das ist ein bisschen komisch, sollte diese Schrift in einem Menü verwendet werden?“ Zu früh, zu früh.
Weiterführende Lektüre: Lesbarkeit der Zeilenlänge; Zeilenabstand; Ein Crashkurs in Typografie: Die Grundlagen der Schrift; Ein Crashkurs in Typografie: Absätze und Sonderzeichen.
Bei Imaginary Cloud wir haben ein Expertenteam für UI- und UX-Design. Wenn Sie der Meinung sind, dass Sie Hilfe beim Design gebrauchen könnten, schreiben Sie uns hier!
Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!
Ich bin UI- und Produktdesigner, Illustrationskünstler und Maler. Bekannt für meine Liebe zu trashigen Strandtüchern, Musikproduktion, Typografie und allen Arten von Pizza.
People who read this post, also found these interesting:
