Lesbarkeit im Web (UI Design Bootcamp, Woche 4

1. Einführung: In der vierten Woche des UI-Design-Bootcamps werden wir uns mit der Lesbarkeit befassen. Wir werden zuerst die verschiedenen Phasen verstehen müssen , wie jemand liest. Wir werden uns einige der Mythen über die Lesbarkeit auf Websites ansehen. Zum Beispiel ist der Mythos, dass serifenlose Schriften leichter zu lesen sind als serifenlose Schriften. Das sind sie also nicht. Natürlich der Mythos, dass wir unsere Körperschrift immer bei 16 Pixel haben sollten . Verschiedene Schriften haben unterschiedliche Größen bei 16 Pixel und verschiedene Geräte oder unterschiedliche Abstände von unserem Gesicht. Stattdessen lernen wir eine nur etwas schwierigere Formel, um sicherzustellen , dass unsere Schriften eine gute Größe zum Lesen haben. Und wir sorgen dafür, dass sich diese Größen gut für verschiedene Geräte anpassen. Wir werden etwas über eine optische Täuschung lernen , die es etwas schwieriger macht, als Sie denken , eine Überschriftenschrift mit einer Körperschrift zu koppeln. Und schließlich schauen wir uns an, wie Sie die Linienlänge und die Zeilenhöhe auswählen die Linienlänge und die Zeilenhöhe sobald Sie die Größe Ihrer Schrift kennen. Am Ende dieses kurzen Kurses wissen Sie, wie Sie die Schriftgröße, die Zeilenlänge und die Zeilenhöhe für jede Schrift auswählen, um sie optimal für die Lesbarkeit im Web zu machen . 2. Wie wir lesen: Bevor wir über Lesbarkeit sprechen können, müssen wir uns ansehen, wie Menschen tatsächlich lesen. Es scheint eine ziemlich offensichtliche Sache zu sein. Aber selbst wenn Sie sich eine Webanwendung ansehen, gibt es zwei verschiedene Arten des Lesens. Eine davon ist, wenn du etwas finden willst. Also deine Navigation und deine Schaltflächen und so etwas, wo du weißt, wonach du suchst, und du verwendest den Text, um dir zu helfen, das Ding zu identifizieren. Und der andere ist, wenn Sie versuchen, Informationen aus etwas zu extrahieren, vielleicht schauen Sie sich eine Datenvisualisierung an oder lesen einen Artikel oder einen Kommentar, jemand geschrieben hat, wenn Sie weiß noch nicht, was drin ist und du versuchst die darin enthaltenen Informationen zu extrahieren und zu verstehen. Das sind zwei sehr verschiedene Arten des Lesens, die uns helfen, den Unterschied zu verstehen . Ich leihe mir eine Definition von Toni Basil. Sie haben vielleicht von Tony Belsen gehört, weil hier ein Speed Reading Champion ist. Er ist ein Experte dafür, wie wir lernen, und er ist der Typ, der Mindmaps erfunden hat. Laut Tony Boson gibt es sieben Phasen zum Lesen. Die erste ist die Anerkennung. Dies identifiziert das E auf der Seite als das, das sich irgendwo in Ihrem Gehirn befindet. größte Teil dieser Arbeit hat erledigt, bevor Sie mit dem Lesen beginnen, wenn Sie erfahren, was jeder der Buchstaben bedeutet, ist die nächste Stufe die Assimilation. Dies ist der physische Teil. Dies ist, wenn das Licht vom Bildschirm in Ihr Auge springt und dann zu Ihrem Gehirn transportiert wird. Die dritte Stufe ist das Verstehen. Hier verstehen wir tatsächlich, was die Worte sagen. Alle Wörter auf der Seite zusammen haben eine Art Bedeutung und verstehen , was diese Bedeutung ist. Die nächste Stufe ist Wissen. Hier wenden wir es auf die anderen Dinge an , die wir zuvor gelernt haben. Vielleicht bilden wir uns eine Meinung darüber, was wir gelesen haben. Wir können es ablehnen oder wir können es in unsere anderen Ideen integrieren. Die ersten drei Phasen werden alle in der Schule gelernt. Aber wenn Sie das College oder die Universität nicht besucht haben, Sie wahrscheinlich nicht wirklich die Wissensstufe gelernt. Sie haben nicht wirklich gelernt, es mit Ihren eigenen Worten umzuschreiben oder eine Meinung zu dem, was Sie lesen, bis Sie zur Universität gekommen sind . Dies ist also eine fortgeschrittenere Lesephase. Wenn wir an unsere Webanwendung zurückdenken , wenn wir Beschriftungen für Seiten, Navigation und Schaltflächen haben, müssen wir uns um diese Phase keine Sorgen machen. Die Leute wussten bereits, wonach sie suchten. Wir müssen uns nur um die ersten paar Phasen kümmern. Aber für alle anderen Teile unserer Anwendung, in denen wir jemandem Informationen geben und sie benötigen, um sie wegzunehmen, sich mit den Informationen zu beschäftigen und sie auf irgendeine Weise zu verwenden. Diese gelten für alle sieben Phasen. Die fünfte Stufe des Lesens ist die Beibehaltung. Dies ist tatsächlich in der Lage, es irgendwo in unserem Gehirn zu speichern , um es später zurückzubringen , wenn wir es tatsächlich brauchen, dann haben wir uns daran erinnert , dass wir diese Informationen wieder herausholen Lagerung , wenn wir es brauchen. Und Tony Buttons, letzte Stufe, siebte Stufe ist Kommunikation. Lage zu sein, diese Informationen, die wir gespeichert und zurückgerufen haben, zu verwenden und jemand anderem zu erklären. Ich denke, es lohnt sich, uns dieser sieben Phasen bewusst zu sein und darüber nachzudenken , wenn wir typografische Entscheidungen treffen. Aber ich werde nicht zu viel Detail auf sie eingehen, sicherlich nicht im Moment. Wenn Sie jedoch eine Entscheidung treffen, wie Sie als Haupttext in einem großen Typografieblock verwenden möchten. Wir haben uns nur die allerersten beiden Dinge angeschaut , die Anerkennung und Assimilation. Wir könnten sagen: Weißt du was? Helvetica ist ein wirklich, wirklich netter Körper. Folgen Sie ihm, weil es für uns sehr, sehr schnell wahrgenommen werden kann. Es ist sehr schnell und effizient für die Assimilation. Es verwendet einfache geometrische Formen. Es ist wahrnehmbar weniger Mühe für uns, die Buchstaben zu assimilieren. Als wir uns die Anatomie der Typografie anschauten, erwähnten wir, dass der Ascender auf einer Helvetica H nicht besonders hoch ist, was ihn fast identisch mit dem n macht. Dies gibt uns sofort Erkennungsprobleme. Ebenso, wenn man sich a anschaut, hat C eine sehr kleine Öffnung und die exakt die gleiche geometrische Form wie ein O oder ein E. Und natürlich haben Groß- und Kleinbuchstaben l ziemlich genau die gleiche Form. Selbst wenn wir diese ersten beiden Phasen bei einer typografischen Entscheidung nur in Betracht ziehen diese ersten beiden Phasen bei , können wir sehen, wie sie sich tatsächlich massiv widersprechen könnten . Helvetica ist eine gute Wahl für die Assimilation, aber eine schreckliche Wahl für die Anerkennung. Und wegen der übermäßigen Nutzung der Helvetica-Schrift ist es wahrscheinlich besonders schlecht für Gedächtnis und Engagement, was bedeutet, dass die meisten Phasen zwischen Verständnis und Kommunikation sein werden negativ beeinflusst durch die Wahl dieser Schrift. Jetzt mag es wie ein unnötiges Detail erscheinen, die Definition jedes einzelnen Buchstabens zu betrachten und Erkennungs- und Assimilationsfaktor für diese winzigen, winzigen kleinen Details zu kritisieren oder zu loben . Aber als Erwachsener schaut man sich beim Lesen fast nie jeden einzelnen Buchstaben an. Und wenn Sie schnell genug lesen, schauen Sie sich selten ein einziges Wort auf einmal an. Das bedeutet, dass wir im Laufe der Zeit aufgrund der Gesamtform dieses Wortes lernen, ein ganzes Wort zu lesen . Es ist vielleicht nicht einmal derjenige, auf den ich mich gerade konzentriere. Es können zwei oder sogar drei Wörter davon entfernt sein. Wenn wir besonders schnell lesen, liegt es also nicht einmal im Fokus, wenn wir es lesen. Die Identifizierung des Unterschieds zwischen einer Helvetica o und einer Helvetica oder C oder E, wenn es nicht im Mittelpunkt unseres Fokus steht, führt zu potenziellen Fehleinschätzungen und wirkt sich daher negativ auf die nach sechs Phasen. Das kleinste Detail einer Schrift, die sich auf die Erkennung, Assimilation, das Gedächtnis oder eines dieser Details auswirkt Assimilation, das Gedächtnis , wird äußerst wichtig, wenn Menschen ein großes lesen Textkörper, weil sie ihn in einem unglaublichen Tempo durchgehen werden. Und das kleinste Detail kann sie emotional beeinflussen oder ihr Verständnis beeinträchtigen. Wenn Ihre Muttersprache Japanisch oder Chinesisch oder irgendwie Mahan oder ägyptische Hieroglyphen war , dann sind Sie es gewohnt, ein ganzes Wort als einziges Symbol zu lesen . Du hast schon ziemlich schnell gelesen. Wir sollten uns aber auch bewusst sein, dass die Wahrnehmungsbemühungen, die erforderlich sind, um ein chinesisches oder japanisches Zeichen zu assimilieren viel schwieriger sind. Und die Bedeutung der Anerkennung, denn wenn die Ähnlichkeiten zwischen den Zeichen es noch wichtiger machen , dass wir diese Faktoren bei diesen Alphabeten berücksichtigen . Laut Tony Boson gibt es sieben Phasen zum Lesen. Wenn wir all diese Faktoren berücksichtigen, können wir auf keinen Fall sagen, dass es eine Schriftart gibt, die wir wählen sollten. Das wird das beste in allen Szenarien sein. Und selbst wenn es so wäre, sprechen wir derzeit nur über das Lesen. Wir sprechen nicht einmal über all die anderen Teile der visuellen Kommunikation, die wir gerade besprochen haben. Wir sprechen nicht davon, Menschen zum Lesen zu motivieren. Wir sprechen buchstäblich darüber, wie gut sie lesen. All diese Faktoren machen einen Begriff wie Lesbarkeit fast unmöglich zu definieren. Aber wir werden uns im nächsten Video eine Art Definition einfallen lassen. Seien Sie sich bewusst, dass es keine Regel ist, die in Stein gemeißelt ist. 3. Lesbarkeit: Wenn wir messen wollten, wie lesbar oder die Lesbarkeit eines Textblocks auf einer Website ist. Es gibt mehrere, mehrere Dinge, die wir berücksichtigen möchten. Die Art und Weise, wie Menschen die Lesbarkeit beurteilen, ist so wild und vielfältig wie die Art und Weise, wie sie die Benutzerfreundlichkeit selbst messen. Es gibt mehrere Techniken, bei denen Menschen die Anzahl der Adverbien zählen. Sie untersuchen, wie komplex die Satzstruktur ist, wie viele Silben pro Wörter im Text enthalten sind. Viele Dinge, die wir uns während dieses Kurses nicht ansehen werden, weil sie nichts mit Typografie zu tun haben. Aber wenn Sie auf eine Website wie readable.com gehen, können Sie einen Textabsatz eingeben und ihn für diese Art von Dingen bewerten lassen . Es gibt viele Möglichkeiten, die Wahrnehmungsgeschwindigkeit zu messen und wie genau wahrgenommene Schriften sind. Es gibt viele Dinge damit zu tun, wie einfach es ist , zwischen Buchstaben in der Schrift zu unterscheiden. Und alles, was ich gerade erwähnt habe, hat nur mit den ersten Phasen des Lesens zu tun , nicht damit zu tun, wie einfach es ist, sich zu erinnern oder wie sehr es dich anspricht und dich dazu bringt dein eigenes zu denken und zu formen Meinungen über den Inhalt. Als Web-Typographen ist es besser für uns, über die Variablen nachzudenken , die wir uns zur Verfügung haben anstatt über alle Möglichkeiten, wie wir Lesbarkeit als Ganzes schreiben können . Sobald wir uns für eine Schrift entschieden haben , werden wir das weitgehend davon tun, wie gut der Charakter der Schrift zur Marke passt. Es gibt drei Variablen , die wir kontrollieren können. Wir können die Textgröße, die Zeilenhöhe und die Zeilenlänge steuern . Möglicherweise haben Sie von Zeit zu Zeit einige Faustregeln über diese drei Variablen gehört, insbesondere mit der Textgröße. Zum Beispiel haben Sie vielleicht gehört, dass Text mindestens 16 Pixel hoch sein muss. Leider ist das eine Faustregel. Und als typografische Designer nützt es uns nicht wirklich. 16 Pixel hoch für eine Schrift sind aus verschiedenen Gründen nicht gleich wie 16 Pixel hoch für eine andere Schrift. Die 16 Pixel beziehen sich auf das umgebende Feld und verschiedene Buchstaben und verschiedene Schriften füllen diese Felder auf verschiedene Arten aus. Sie könnten direkt an die Ränder gehen. Sie haben absolut keine Garantie dafür , dass dies passieren wird. Sie sind vielleicht ziemlich klein in dieser Kiste. Und selbst dann gibt es verschiedene Attribute wie die x-Höhe und das optische Gewicht. Dinge, über die wir in einigen Videos sehr bald sprechen werden , die sich tatsächlich darauf auswirken werden, wie groß es auf der Seite erscheint. Schon damals. Das ist bevor wir überhaupt über Responsive Design sprechen. Wir halten tatsächlich verschiedene Bildschirme in verschiedenen Entfernungen von unserem Gesicht. Also unser Telefon, wenn wir uns den Bildschirm unseres Telefons ansehen, halten wir es viel näher, als wenn wir uns eine Website auf einem Monitorbildschirm ansehen. Es ist nicht möglich, genau zu wissen, wie weit der Benutzer sein Telefon von seinem Gesicht entfernt hält. Im Allgemeinen entspricht eine Typgröße von 16 Pixeln auf einem Telefonbildschirm jedoch nicht einer Typgröße von 16 Pixeln auf einem Monitor. Die anderen beiden Variablen, Zeilenhöhen auf Zeilenlänge, werden in gewisser Weise von der Wahl der Topographie und dann von der Schriftgröße beeinflusst . Es ist also unmöglich für uns, diese Dinge zu klären , bis wir diese Schriftgröße haben. In der Tat wirken sich für jede dieser Variablen die Textgröße, Zeilenhöhe und die Zeilenlänge, die Zeilenhöhe und die Zeilenlänge, die sich ändern , alle drei aus. Wenn Sie sich das Design einer bestehenden Website ansehen und sagen: Wissen Sie was, müssen wir den Text auf dieser Website vergrößern. Das wird sich absolut alles ändern. Wenn wir über die Lesbarkeit als Typographen nachdenken, denken wir über die Textgröße, die Zeilenhöhe und die Zeilenlänge nach. Und wir denken darüber nach, dass all diese drei Dinge gut funktionieren, was zusammen? Für den Rest dieses Kurses werde ich auf die Lesbarkeit verweisen und wie gut diese drei Dinge zusammenarbeiten. Da wir uns bewusst sind, dass es mehrere andere Dinge gibt , die darauf eingehen , ob der Text lesbar ist oder nicht, insbesondere dass wir sogar überlegen könnten, wie gut wir uns an die Informationen erinnern und als Teil der Lesbarkeit. 4. Aspect: Im letzten Video sagte ich, dass die Gesamthöhen der Schrift nicht allzu wichtig uns nicht allzu wichtig sind, wenn wir über Lesbarkeit nachdenken. Und um diesen Punkt zu beweisen, möchte ich Ihnen einige Texte zeigen, die in Verdana geschrieben sind, und dann Textur in genau der gleichen Größe, aber in Garamond. Jetzt ist ein großer Unterschied zwischen Madonna und Garamond, dass Madonna eine sehr, sehr hohe x-Höhe hat und Garamond eine sehr, sehr kleine x-Höhe hat. Wenn Sie eine Schrift verwenden und die Gesamthöhe der Buchstaben durch die x-Höhe teilen , erhalten Sie das Seitenverhältnis. Die x-Höhe beträgt normalerweise etwa die Hälfte der Höhe des Gesamtcharakters. Normalerweise betrachten Sie etwas um Null 0.5 als Seitenverhältnis. Aber es könnte alles sein, von null 0,4 bis zu null 0,6. Garamond hat ein Seitenverhältnis von bis zu 0,38. Die x-Höhe von Garamond ist im Vergleich zur Gesamtgröße sehr klein. Denken Sie daran, dass die Größe der umgebenden Box entspricht. So passen selbst die Großbuchstaben möglicherweise nicht perfekt in diese Box. Denn Donna hat ein Seitenverhältnis von Null, 0,58. Die x-Höhe ist innerhalb der Gesamthöhe des Buchstabens ziemlich groß . Online stehen verschiedene Rechner zur Verfügung, um das Seitenverhältnis Ihrer Schriften herauszufinden. Ich mag diese auf dieser Seite sehr, die ich mit dir teilen werde. Und ich mag es, weil ich den Namen jeder anderthalb Schriftfamilie auf meinem Computer eintragen jeder anderthalb Schriftfamilie auf meinem Computer kann, damit ich alle Arten von verrückten und wunderbaren Schriftdateien berechnen kann , die ich zufällig habe. Wenn wir zum Beispiel Verdana und Garamond zusammen verwenden würden Verdana und Garamond zusammen verwenden oder wenn wir eine als Fallback-Schriftart für die andere verwenden würden, würden wir möchten, dass sie ungefähr gleich groß aussehen und eine haben ähnlicher Rhythmus geht auf der Seite runter. Etwas, worüber wir etwas später sprechen werden. Wenn wir zum Beispiel 16 Pixel nehmen, sagen wir, dass wir einen Vedanta haben , der 16 Pixel hoch ist. Wir können mal das 16 mal null, 0,58, und das gibt uns eine Zahl wie 9,28. Dies ist die x-Höhe der Verdana, die 16 Pixel hoch ist. Wenn wir das jetzt durch 0,38 teilen, was das Seitenverhältnis von Garamond ist, erhalten wir die Zahl vierundvierundvierzig. Vierundzwanzig Punkte zweiundvierzig ist eine ziemlich gute Größe, um Garamond herzustellen, wenn wir für Donna ungefähr die gleiche Größe wie 16 Pixel aussehen wollten . Nun, wie Sie sehen werden, sehe ich ziemlich gleich groß aus. Und ein Teil des Grundes ist, dass ich zwei Schriften als genau entgegengesetztes Ende des Spektrums gewählt habe zwei Schriften als genau entgegengesetztes Ende des Spektrums und sie in keiner Weise ähnlich aussehen. Der Garamond ist ziemlich groß im Vergleich zum Vedanta. Aber es gibt auch ein paar andere Dinge. Garamond ist eine ziemlich offene Schrift, hat große offene Bälle und Öffnungen, hat ziemlich schwere gewichtete Linien und eine ziemlich große Abwechslung. Es gibt verschiedene Aspekte dieser Schrift, die aus solchen Gründen etwas schwieriger zu quantifizieren sind , ich könnte meinem Auge ein bisschen mehr vertrauen als der Mathematik. Vielleicht würde ich die Größe von Fett Garamond ein wenig reduzieren . Jetzt müssen wir nur noch all das Zeug machen , das ich gerade gesagt habe, manuell. Aber irgendwann in nicht allzu ferner Zukunft gibt es eine CSS-Regel, die dies für uns tut. Schriftgröße anpassen. Wenn ich nun etwas Garamond hatte und ihm einen Wert der Schriftgröße gegeben habe , passt Null, 0,58 Null Punkt Fünf-Achtel das Seitenverhältnis von Verdana, dann gib ihm eine Schriftgröße von 16 Pixeln und es würde automatisch 23,2 Pixel hoch machen. Für mich wird unser Browser im Wesentlichen einfach die kleine Gleichung machen, die wir gerade für uns gemacht haben. Das erste, worüber wir die Kontrolle haben , wenn wir darüber nachdenken wie sich unsere Texturen verdoppeln, ist die Schriftgröße, aber die Schriftgröße, Es ist nicht wirklich ein Interesse für uns. Die x-Höhe oder das Seitenverhältnis der Schrift ist für uns interessant. Wir können das Seitenverhältnis der Schriften mit einem Seitenverhältnis-Rechner online herausfinden . Und dann können wir alle zusammen verwendeten Schriften anpassen , damit sie die gleiche x-Höhe und nicht die gleiche Höhe haben . Wir wollen jedoch immer sicherstellen, dass wir unsere Augen benutzen, unseren Augen vertrauen und unsere IEs trainieren. Denn wenn du etwas wie Garamond und Verdana hättest, gibt es so drastisch unterschiedliche Größen , dass sie immer ein bisschen absehen werden, wenn du versuchst, sie einheitlich zu machen . Realistisch gesehen ist dies nur eines der vielen Dinge, die Sie beachten sollten , wenn Sie Schriften finden , die gut zusammenarbeiten. 5. Entfernung des Betrachtungsbereichs: Im letzten Video haben wir darüber gesprochen, wie Sie Ihre Pixel für eine Schrift basierend auf ihren x-Höhen oder ihrem Seitenverhältnis hoch einstellen können. Natürlich möchten wir die Dinge nicht mehr in Pixeln messen, nicht mehr, da alle unsere Displays jetzt basierend auf Referenzpixeln funktionieren. Ein Referenzpixel hat nur die gleiche Größe wie ein Pixel, wenn Sie einen Desktop-Monitor verwenden, und es handelt sich um einen 96 DPI-Monitor. Die Auflösung des Bildschirms beeinflusst, Die Auflösung des Bildschirms beeinflusst wie viele Pixel ein Referenzpixel ist, aber auch, wie weit die Geräte vom Gesicht des Benutzers entfernt waren. Leider können verschiedene Geräte und verschiedene Displays Referenzpixel auf die richtige Größe mit unterschiedlichen Ergebnissen anzeigen . Es lohnt sich also zu verstehen, wie sie funktionieren. Wir werden später mehr darüber sprechen, wie wir auf die Größe unserer Texte verweisen können. Aber vorher möchte ich einen Punkt über Design ansprechen, den ich gerne sage, nämlich dass Designer sich nicht um die reale Welt kümmern sollten. Wir sollten uns um die Wahrnehmung der Menschen für die reale Welt kümmern . Die Anzahl der Pixel auf dem Bildschirm ist nicht. Wichtig ist die Anzahl der Pixel in Ihrem Auge. Ich bezeichne diese gerne als Wahrnehmungspixel, aber Astronomie und Navigation hatten bereits einen Begriff dafür , der Bogenminuten von Bogenminuten ist. Ein Bogenminuten ist im Grunde die Anzahl der Grad, die die Erde in einer Minute dreht, was fast genau 160 Grad entspricht. Warum spreche ich mit dir über diesen Begriff, den Astronomen und Navigatoren benutzen? Nun, der Grund, warum Astronomen über Bogenminuten sprechen, ist dass wir darüber sprechen, was wir von der Erde aus wahrnehmen können . Eine Bogenminute ist so ziemlich eines unserer Wahrnehmungspixel. Es geht darum, wie viel wir mit unserem Auge tatsächlich ausmachen können. Wenn du dir deinen Kopf gerade als die Erde vorstellst, stellst du dir die 360-Grad-Sicht vor, die du hast. Wenn du den Kopf umdrehst und du nach oben und unten schaust. Wenn Sie einen Grad bewegen, bewegen Sie sich nach oben und unten, und nur einen Grad Bewegung nach links und rechts. Und du teilst beide durch 60. Sie haben gerade das Pixelraster erstellt. Das ist es, was man tatsächlich sehen kann. Wenn etwas weniger als die Hälfte der Größe einer Bogenminute hat, können wir es nicht sehen. Und der Grund, warum wir in Grad oder Bogenminuten messen , ist, dass die Entfernung zu unserer KI einen großen Unterschied darin macht , wie gut wir sie sehen können. Nehmen wir an, wir haben etwas in Pixeln gemessen und es war auf einem Display, auf einem Monitor. Monitore sind normalerweise 60 Zentimeter vom Gesicht des Benutzers entfernt. 16 Pixel hoch auf diesem Monitor wären also 24 Arcminutes. Ich gebe dir die Berechnungen dafür später. Wenn wir nun denselben 16-Pixel-Text auf einem Handybildschirm zeigen , den wir normalerweise etwa 30 Zentimeter von unserem Gesicht entfernt halten . Das wäre näher bei 48 Arcminutes. Und auf einem iPad, 45 Zentimeter von unserem Gesicht entfernt, würden sich 36 Bogenminuten anschauen. Dieses Diagramm zeigt also den Unterschied in der Textgröße, wenn jedes dieser Geräte tatsächliche Pixel anzeigt und alle realistisch die gleiche Auflösung aufweisen , da Sie Ihr Telefon näher halten auf dein Gesicht hat es normalerweise eine höhere Auflösung. Tatsächlich gab Apple dem iPhone 300 Punkte pro Zoll oder Pixel pro Zoll Retina-Display, gerade weil Sie es 30 Zentimeter von Ihrem Gesicht entfernt halten . Und das bedeutet, dass ein Pixel fast genau eine Bogenminute beträgt, was es die höchstmögliche wahrgenommene Qualität für einen Handybildschirm macht. Als weitere Randnotiz haben Sie dieses lustige Symbol vielleicht nach den Zahlen in Rot bemerkt . Dieses leicht schräge Ding , das wie ein einziges Anführungszeichen aussieht. Dies ist kein einziges Anführungszeichen, da ein Primsymbol für zwei Dinge in der Typografie verwendet wird. Es wird verwendet, um eine bestimmte Anzahl von Füßen zu sagen, und es wird verwendet, um eine bestimmte Anzahl von Bogenminuten zu sagen. Sie können dies auch abkürzen, indem Sie 48 Uhr morgens, 48 Amen oder 48 Bogenmänner schreiben . All dies sind akzeptable Standards. Ja, das war eine sehr komplizierte Art sagen, dass Dinge, die weiter entfernt sind, kleiner aussehen. Aber das war, also konnte ich Ihnen einen dieser praktischen Taschenrechner vorstellen . Sie legen Ihren Betrachtungsabstand ein , der normalerweise 30 Zentimeter, 45 Zentimeter oder 60 Zentimeter für ein Telefon, iPad oder einen Fernsehbildschirm Möglicherweise möchten Sie etwas anders berechnen einen Bildschirm oder wenn Sie es überhaupt mit TV-Interfaces oder Filmen zu tun haben, Sie in der wahrgenommenen Größe können Sie in der wahrgenommenen Größe 20 oder 22 Bogenminuten sagen. 28 bis 22 Bogenminuten sind vereinbart , um eine recht bequeme Größe für das Lesen zu haben, aber ich werde Ihnen viel später einige bessere Berechnungen geben . Und es wird Ihnen die physische Größe sagen , dass die Texte in dieser Entfernung auf etwas sein müssten , wenn Sie sehen möchten Es ist bei so vielen Bogenminuten. Eine Sache, die Sie an einem dieser Rechner bemerken werden , ist, dass die Ausgabe nicht in Pixeln erfolgt , und das liegt daran, dass Pixel nicht auf einer definierten physischen Größe liegen. Es hängt vom Display ab. Oder es ist Zeit, dass wir zu Referenzpixeln zurückkehren. Wenn ich mir die wahrgenommene Größe hier oben anschaue, werden Sie feststellen, dass eine der Optionen Referenzpixel hier oben sind. Sie werden auch feststellen, dass es aus einer Bogenminuten leider nichts übersetzt werden kann. Die vereinbarte Größe eines Referenzpixels hat leider nichts mit unserer Wahrnehmung zu tun. Es basiert auf einer Anzeige von 96 Pixeln pro Zoll, die wir aus einer Entfernung von 60 Zentimetern betrachten , nur weil dies die standardisierte Größe eines Pixels ist. In den frühen Tagen des Internets entspricht ein Referenzpixel 1,2789 Bogenminuten. Es ist also etwas größer als ein Wahrnehmungspixel oder was wir sehen können. Und es ist auch gleich etwa nichts Punkt nau 213 Grad. Es wäre wirklich praktisch für Designer, die sich um die Wahrnehmung kümmern, wenn sie nur ein Referenzpixel der gleichen Größe wie ein Bogenminuten machen würden. Aber wir werden sowieso nicht zu viel über Referenzpixel sprechen , wir werden es etwas im Implementierungsmodul ansprechen , aber wir werden nicht zu viel darüber sprechen. Und das liegt daran, dass es nicht zu viel Nutzen gibt, weil verschiedene Geräte sie nicht wirklich perfekt übernommen haben . Eine große Rolle bei Design und Front-End-Entwicklung besteht darin, einem Computer niemals zu vertrauen. Man muss verstehen, was es hinter den Kulissen macht denn viele von ihnen werden es falsch machen. Wenn wir alles, was wir über arcminutes wissen, und alles, was wir über das Seitenverhältnis oder die x-Höhe unseres Textes wissen, kombinieren alles, was wir über das Seitenverhältnis oder die x-Höhe unseres Textes wissen , sollten wir in der Lage sein, einige ziemlich gute Berechnungen zu einige ziemlich gute Berechnungen für unsere Typografie. Wir schauen uns noch eine Sache an. Wenn wir uns diesen Artikel im Journal of Vision aus einigen Experimenten ansehen, die in Bezug auf Leseeffizienz und Lesegeschwindigkeit durchgeführt wurden in Bezug auf Leseeffizienz und Lesegeschwindigkeit durchgeführt , können wir eine ziemlich gute Berechnung dafür erhalten eine ziemlich gute Berechnung , wie groß unsere Texte sollten es sein. Wenn wir möchten, dass die Leute effizient lesen, würden wir unsere Leser wirklich bestrafen, wenn wir es so klein wie möglich machen würden, damit es lesbar ist. Wir möchten, dass es für sie bequem und leicht zu lesen ist schnell. Die ideale X-Höhe für die Leseeffizienz an Ihrem Standort beträgt neun Bogenminuten für die Größe der x-Höhe. Dies basiert tatsächlich auf der Untersuchung, die festgestellt hat, dass die perfekte Größe sechs Bogenminuten beträgt. Aber wir werden es ein bisschen aufstoßen. wir also sicher, dass wir für alle Sehverhältnisse sorgen. Eigentlich, wenn Sie eine Anwendung erstellen, bei der die Benutzer vielleicht etwas älter sind oder vielleicht ein schwer erkennbares Problem haben. Vielleicht möchten Sie dies bis zu 12 Bogenminuten drücken . Im Allgemeinen beträgt die empfohlene Größe jedoch neun Bogenminuten für die x-Höhe. Wenn wir zum Beispiel willen Vedanta und den Garamond zurückbringen. Wir können einfach mal neun durch das Seitenverhältnis dieser beiden Schriften. Und das würde Garamond 24 Arcminutes und insgesamt machen, während Madonna insgesamt nur 16 Bogenminuten ist. Oder um dies sofort wieder in eine Messung zu bringen , die jeder verstehen kann. Wir können uns Referenzpixel ansehen. Garamond wäre 18,8 Referenzpixel, während für Donna 12,5 Referenzpixel wären. Dies würde Garamond 2,4 Millimeter auf einem Handy und 4,2 Millimeter auf einem Desktop machen. Und es würde Donna 1,4 Millimeter auf einem Handy und 2,8 Millimeter auf einem Desktop machen. Wir können sehen, dass die empfohlene Größe ganz anders ist. Eigentlich ist keiner von ihnen sogar so nahe 16 Referenzpixel. Ob es uns gefällt oder nicht, wir werden von Zeit zu Zeit immer noch Referenzpixel benötigen . Wie habe ich diese letzte Zahl berechnet? Wir wissen, dass ein Referenzpixel 1,2789 Bogenminuten entspricht. Wenn man also neun durch 1,2789 teilt, bekommt man etwas um sieben. Wir könnten also sagen, dass sieben Pixel geteilt durch das Seitenverhältnis Ihnen die ideale Referenzpixelhöhe für die Schrift bieten. Als Designer beschäftigen wir uns viel mehr mit den Pixeln, die Menschen sehen, als mit denen, die sich auf dem Bildschirm befinden. Wir messen also die Höhe des Textes nicht mit den Pixeln auf dem Bildschirm. Wir machen es mit arcminutes, was dem 160 Grad der wenigen Wochen entspricht, und sehen überall um uns herum, wenn wir unseren Kopf bewegen. Die ideale Größe für Text, damit Personen schnell und effizient lesen können, liegt zwischen 612 Arcminutes. Wir streben idealerweise neun in der Mitte an, damit wir alle Menschen versorgen. Wenn Sie Informationen haben , die beweisen, dass die meisten Ihrer Benutzer ein besonders gutes Sehvermögen oder besonders schlechtes Sehvermögen haben . Vielleicht möchten Sie dies etwas mehr auf eines der beiden Extreme verschieben . Andernfalls streben wir generell eine x-Höhe von neun Bogenminuten an. Hi, das Gerät, das wir betrachten, weiß auf keinen Fall , wie weit unsere Gesichter entfernt sind. Obwohl die Leute versucht haben, kleine Teile von Technologie zu entwickeln, die das tun werden. Wir müssen uns also mit den Maßeinheiten auseinandersetzen , die CSS uns gibt. Wir schauen uns die ein wenig später an. Wir müssen uns vorerst nur Sorgen machen, dass es keine Mindestgröße für Typografie gibt. Es hängt vom Gerät ab und wie weit die Leute dieses Gerät im Allgemeinen von ihrem Gesicht fernhalten. Und dass wir einen Bogenminutengrößenrechner verwenden können , damit wir eine einheitliche Größe zwischen Handy, Tablet und Desktop und möglicherweise TV und Uhren erhalten können. Sollten wir es wollen. 6. Großes Text: Wir wissen jetzt, dass die optimale Größe für unsere Texte, der Durchschnittsmensch sie schnell und effizient lesen kann, darin besteht, dass die x-Höhe neun Bogenminuten betragen sollte. Hi, aber was ist mit dem ganzen Rest des Textes auf der Seite? Was ist mit den Überschriften oder dem Text auf Schaltflächen? All diese Dinge müssen ein wenig auffallen denn Schaltflächentext oder andere UI-Elemente sind Dinge, nach denen wir suchen werden, anstatt aktiv zu lesen, und Überschriften müssen unsere Aufmerksamkeit und Geschworene in. Nun, Lesbarkeit ist nicht unser Problem mit diesen anderen Textteilen oder Button hat zwei Wörter darauf, dass die Überschrift die meisten fünf oder sechs Wörter hat. Wir machen uns keine Sorgen, ob es für jemanden effizient ist , diejenigen mit UI-Elementen zu lesen , war besorgt, ob es leicht ist aus dem Augenwinkel zu erkennen, und Überschriften waren besorgt, ob es Auswirkungen hat und es gibt den Ton der Botschaft des restlichen Textes an. Im Wesentlichen können wir all diese Dinge ein bisschen größer machen als das, was für große Lesebereiche angenehm ist , da dies andere Zwecke löst. Es gibt jedoch einige andere Dinge zu berücksichtigen , bei denen es nicht um Lesbarkeit geht, sondern ganz gut zu dem passen , worüber wir gerade gesprochen haben. Eine Sache, die Ihnen bei all diesen verschiedenen Geräten aufgefallen ist. Ihre Uhr, Ihr Mobiltelefon, Ihr iPad, Ihr Monitor, Ihr Fernseher wie groß sie sind. Je weiter sie von deinem Gesicht entfernt sind , desto größer sind sie. Und ich meine nicht nur, wie körperlich groß sie sind. Ich meine, sie nehmen mehr Arcminutes ein, wenn sie weiter entfernt sind. Wenn Sie gerade bequeme 60 Zentimeter von Ihrem Monitor entfernt sitzen und Ihr Mobiltelefon 30 Zentimeter von Ihrem Gesicht entfernt halten oder bequem halten, werden Sie feststellen, dass Sie immer noch sehen können Ihr Monitor, Ihr Mobiltelefon deckt vielleicht ein Viertel des Bildschirms ab. Wenn Sie ein riesiges Telefon für die meisten unserer Vermögenswerte haben , noch weniger. Wir könnten also sagen, dass wir auf einem Desktop-Bildschirm viel mehr Bogenminuten zur Verfügung haben als auf einem mobilen Bildschirm. Auch hier wahrscheinlich etwas offensichtlich, aber Sie möchten vielleicht fragen, warum wir es im Allgemeinen nicht mögen , große Dinge wirklich nahe an unseren Gesichtern zu haben. Idealerweise wollen wir auch nicht , dass uns große obstruktive Schlagzeilen ins Gesicht geschoben werden. Wenn man sich eine Plakatwand anschaut, ist der große Text massiv und der kleine Text ist ziemlich klein. Das Verhältnis zwischen den Überschriftentexten und dem Textkörper auf einer Plakatwand ist enorm. Natürlich hat eine Plakatwand einen ganz anderen Zweck als ein Mobiltelefon. Sie werden jedoch feststellen , dass je kleiner das Gerät und je näher Sie es an Ihrem Gesicht halten , desto kleiner die Überschriften. Wenn wir einen großen Bannertext auf der Homepage einer Website oder eine Überschrift oben in einer Webanwendung haben. Die Anzahl der Bogenminuten wird bei Geräten, die wir näher an unseren Gesichtern halten, verringern. Wir haben einfach weniger Bogenminuten auf dem Bildschirm verfügbar. Und wir mögen es auch nicht, große Dinge zu nahe am Gesicht zu haben. Eine andere Sache, die Sie bei der großen Typografie beachten sollten, haben Sie heutzutage vielleicht einige Monitore bemerkt, einige echte schicke Fernseher und Monitore wurden haben Sie heutzutage vielleicht einige Monitore bemerkt, einige echte schicke Fernseher und Monitore wurden gekrümmt und fragen sich, was ist der Sinn darin? Nun, hier ist ein interessanter Punkt für dich. Wenn Ihre Augen gerade in der Mitte des Bildschirms positioniert sind , haben Sie mehr Bogenminuten in der Mitte Ihres Bildschirms, dann befinden Sie sich beispielsweise oben links auf Ihrem Bildschirm. Weil die obere linke Seite Ihres Bildschirms immer etwas weiter entfernt ist als in der Mitte. Und aus diesem Grund scheint sich alles so leicht nach außen zu wölben. Es gibt eine Art Linsenverzerrung. Als der Parthenon im antiken Griechenland gebaut wurde, bauten sie es so, dass keine der Mauern gerade ist. Es gibt keine geraden Linien auf dem Parthenon. Alles am Parthenon korrigiert so leicht für diese Art von Linsenverzerrung, die unsere Augen haben, wenn die ersten Schriften Schnitte waren, als die tatsächlichen physischen Metallstücke des Typs geschnitten wurden, Die größeren Buchstaben wurden mit einem anderen optischen Gewicht gefangen mit einem anderen optischen Gewicht die kleineren Buchstaben, um diese Art von Linsenverzerrung zu korrigieren , die wir in unserem Auge haben. Ich habe das vorhin erwähnt. Wenn man sich eine Schrift aus dem 20. Jahrhundert anschaut, als das Schneiden des Typs etwas manueller war, würde der Typenschneider eine kleinere optische oder optische Größe ergeben eine kleinere optische oder optische Größe als das Schneiden des Typs etwas manueller war, würde der Typenschneider eine kleinere optische oder optische Größe ergeben ich warte auf die größeren Buchstaben. Man müsste eine sehr scharfe und reinste Typografie sein , um heute etwas Ähnliches tun zu wollen, aber das ist fast möglich. Mit variablen Schriften gibt es mehrere Gründe , warum wir unser typografisches System ausarbeiten , dass wir die Schrift für die Überschriften nicht dieselbe Schriftart wie der Körper machen werden. Aber einer von ihnen sollte wirklich sein, dass sie sowieso nicht gleich erscheinen . Es gibt eine Handvoll Schriftfamilien , in denen der Typendesigner eine geringfügige Variation für die Überschrift und den Haupttext vorgenommen hat eine geringfügige Variation für die Überschrift und , damit Sie sie in verschiedenen Größen verwenden können. Dies ist eine wirklich gute Option wenn Sie die gleiche Schrift für die Überschriftentexte und den Textkörper verwenden möchten Überschriftentexte und den Textkörper ohne für uns etwas komisch und verzerrt auszusehen. Wir werden etwas später darüber sprechen. Für Überschriftentext oder UI-Text. Wir müssen uns nicht allzu viele Gedanken darüber machen, wie einfach es zu lesen ist, da es normalerweise nicht zu viele Wörter sind, solange es über Lesbarkeitsgröße liegt , über die wir im letzten Video gesprochen haben. Wir wollten jedoch nicht wissen, dass verschiedene Bildschirme im Allgemeinen unterschiedliche Bogenminuten haben , je näher wir sie an unserem Gesicht halten , desto kleiner der Bildschirm. Und deshalb sollten wir diese größeren Teile der Typografie im Vergleich etwas kleiner machen der Typografie im Vergleich etwas kleiner , weil es für sie nicht so wichtig ist, auf uns zu springen, wenn wir sie näher an unser Gesicht halten. Und wir haben nicht so viele Bildschirm-Immobilien. Und als super, super fortgeschrittene Topographie-Lektion habe ich ein wenig darüber gesprochen, wie die optische Größe größer und größerer Text erscheinen wird weil etwas das ist mehr arcminutes groß hat ein wenig Linsenverzerrung. Wenn wir die gleiche Schrift für die Überschriften und den Körper verwenden wollten , können wir eine Schriftfamilie auswählen, die eine bestimmte Überschriftenschrift hat, die tatsächlich eine etwas niedrigere Optik haben wird Dimensionierung. Und viel später werden wir auf das wirklich aufregende Thema variabler Schriften eingehen, das es uns ermöglichen könnte, diese optische Größe auf einer viel detaillierteren Ebene zu steuern . 7. Linienlänge: Wir haben jetzt eine ziemlich gute Berechnung, um die ideale Schriftgröße für große Textkörper auszuarbeiten . Die nächste Messung, die ich mir ansehen möchte, die bei der Lesbarkeit hilft , ist die Zeilenlänge. Wir messen die Zeilenlänge in Zeichen pro Zeile. Aber wie viele Zeichen, einschließlich der Leerzeichen in jeder Zeile erscheinen, haben Sie wahrscheinlich irgendwann eine Regel gehört , die besagt, dass es 50 bis 70 Zeichen pro Zeile für die ideale Zeilenlänge geben sollte . Ich sage so etwas wie 50 bis 70 Zeichen pro Zeile weil jede einzelne Regel, die ich jemals so gehört habe , etwas andere Zahlen hat. Sie basieren alle tatsächlich auf einigen Recherchen aus dem Jahr 1971, die besagen, dass die ideale Zeichenlänge zwischen 5075 Zeichen pro Zeile liegt . Und deshalb möchten Sie idealerweise auf etwa 60 Zeichen pro Zeile zielen . Und dies ist eine dieser Regeln warum Sie nicht einfach etwas über Typografie lernen können , wenn Sie sich speziell mit Web-Typografie befassen , weil sie 1971 nicht mit Web-Typografie getestet wurden. Und als die Leute in 98 und dann Anfang der 2000er Jahre endlich mit dem Testen begannen, stellten sie fest, dass die optimale Zeilenlänge für Typografie auf einer Digitalanzeige 95 Zeichen pro Zeile betrug. Das sind 95 Zeichen pro Zeile ist die optimale Länge für Lesegeschwindigkeit und Effizienz, wenn Sie jetzt von einem Computerbildschirm ablesen , bevor Sie losfahren und jedes digitale Design ändern, das Sie jemals haben gemacht, um zu machen, dass die Texte 95 Zeichen pro Zeile bestehen. Es gibt ein paar andere Dinge, die wir meiner Meinung nach in Betracht ziehen sollten. Erstens sprechen wir immer noch nur über Lesbarkeit. Lesbarkeit war eine Art Benutzerfreundlichkeit und es gibt etwas anderes, was Designer über viel Benutzererfahrung nachdenken . Wenn Menschen einen Textblock auf einem Computerbildschirm sehen, haben sie das Gefühl, schneller und effizienter mit einer kürzeren Zeilenlänge als 95 Zeichen pro Zeile zu lesen effizienter mit einer kürzeren Zeilenlänge . Und sie haben das Gefühl, dass sie mehr Fortschritte machen. Es fühlt sich an, als würden sie schneller lesen, auch wenn sie es nicht sind. Vielleicht liegt es an dem Gefühl des Fortschritts, das wir bekommen, wenn wir das Ende der Linie erreichen und unsere Augen zum Anfang der nächsten Zeile zurückkehren. Oder vielleicht ist es dieses befriedigende Gefühl, wenn wir unsere Maustaste nach unten scrollen können, da wir wissen, dass wir einen ganzen Bildschirm gelesen haben , aus welchen Gründen auch immer wir wissen sollten , dass 95 Zeichen pro Zeile ist möglicherweise die akzeptierte beste Zeilenlänge für die Lesbarkeit auf einem Computerbildschirm, bedeutet jedoch nicht, dass es das Beste für die Benutzererfahrung ist. Wir möchten uns auch bewusst sein, dass Zeichen pro Zeile potenziell ziemlich zweideutig sind. Wenn wir uns die Größe unseres Textes anschauten, werden wir uns eine Bogenminuten ansehen und uns das Seitenverhältnis angesehen. Es gibt einige Schriften, die viel dünner sind als andere Schriften. Wir haben große breite Buchstaben und winzige dünne Buchstaben, je nachdem, welche Schriftart wir wählen. Und es ist möglich , dass wir auf einer längeren Zeilenlänge auf einem Computerbildschirm schneller lesen , da der Computerbildschirm normalerweise 60 Zentimeter von unserem Auge entfernt ist , während gedrucktes Material wie eine Zeitung , Zeitschrift oder ein Buch sind in der Regel etwa 45 Zentimeter von unserem Auge entfernt. Das sind natürlich alles Spekulationen. Mein Punkt ist, dass keine der Untersuchungen, die wir derzeit über die Zeilenlänge haben , genau genug ist , um sie als solide Regel zu verwenden. Ich glaube, dies ist einer der wenigen Fälle, in denen Sie Wissenschaft ein wenig ignorieren und die Benutzererfahrung ein wenig ignorieren und sich ansehen können, was die meisten Leute auf ihren Websites tun , um zu sehen, was unsere Benutzer sind am meisten daran gewöhnt. Und das ist zurück auf das Quadrat eins zwischen 4575 Zeichen pro Zeile. Wenn Sie sich jedoch jemals mit chinesischen, japanischen und koreanischen Schriften zu tun haben , möchten Sie etwa 15 bis 30 Zeichen pro Zeile anstreben , um etwas über die Entfernung des iPad-Buches von dein Gesicht oder bis zu 40 auf einem Computerbildschirm. Ich würde jedoch empfehlen, auf das höhere Ende dieser Zahlen zu drängen , da immer mehr Websites längere Line-Kreditvergabe leisten, möglicherweise basierend auf der Wissenschaft oder möglicherweise aus anderen Gründen. Überstunden gewöhnen sich also mehr daran längere Zeilenlängen auf Mac-Computerbildschirmen zu lesen. Und es wird das Lesen für Ihre Benutzer schneller und effizienter machen , wenn dies Ihr Ziel ist. Aus diesen Gründen würde ich empfehlen, auf einem Computerbildschirm etwa 75 Zeichen pro Zeile anzustreben . Und jetzt können wir wahrscheinlich spekulieren, dass 60 Zeichen pro Zeile ziemlich gut für ein iPad sind, weil wir wissen, dass dies die optimale Länge für gedrucktes Material war und das ungefähr der gleiche Ort ist , an dem wir würden ein iPad halten. Und dann wollen wir es etwas mehr reduzieren , wenn wir zu einem mobilen Display übergehen, möglicherweise irgendwo im Bereich von 50 Zeichen pro Zeile. Und seien Sie sich nochmal bewusst, dass dies keine exakte Wissenschaft ist , auf der ich Ihnen gesagt habe , dass die Experimente basieren, aber seien Sie sich auch bewusst, dass andere Leute versuchen, Ihnen die richtige Menge zu sagen von Zeichen pro Zeile beruhen sie auch nicht auf einer exakten Wissenschaft. Was wäre absolut brillant als könnten wir die Zeile ein wenig variieren , je nachdem, wie breit die Zeichen in der Schrift sind. Und zum Glück können wir dies mit CSS tun, können wir dies mit CSS tun weil wir die Breite mit EM-Einheiten steuern können , anstatt sagen, wie viele Zeichen pro Zeile zum Beispiel. Und wir werden uns das ein bisschen später anschauen , wenn wir die Dinge implementieren über die wir gerade sprechen. Wir messen die Zeilenlänge mit Zeichen pro Zeile, und das sind alle Sonderzeichen, alle Leerzeichen, jedes einzelne Zeichen, das es in der Zeile gibt. Ursprüngliche Untersuchungen haben ergeben, dass 50 bis 75 Zeichen pro Zeile am besten für Lesegeschwindigkeit und -effizienz geeignet sind. Aber das basierte auf Print. Wenn man sich einen Computerbildschirm anschaut, stellt sich heraus, dass die optimalen Zeichen pro Zeile 95 sind. Leute haben jedoch das Gefühl mit kürzeren Linien mehr Fortschritte zu machen. Und daher kann eine kürzere Linie eine bessere Benutzererfahrung sein , auch wenn sie für die Lesbarkeit schlechter ist. Und es wird allgemein angenommen, aber noch nicht bewiesen, dass wir weniger Zeichen pro Zeile wünschen würden , wenn wir das Gerät näher an unser Gesicht um zu versuchen, dies mit dem abzustimmen, was unsere Benutzer sind derzeit von der Nutzung anderer Websites gewohnt. Ich persönlich würde empfehlen, auf einem Desktop etwa 75 Zeichen pro Zeile, 60 Zeichen pro Zeile auf einem iPad und dann 50 auf einem mobilen Gerät zu wählen auf einem Desktop etwa 75 Zeichen pro Zeile, 60 Zeichen pro Zeile auf . Sie werden dies jedoch leicht nach oben oder unten anpassen möchten , je nachdem, ob Ihr Benutzer lieber eine bessere Erfahrung hat oder Sie möchten, dass er schneller liest. 8. Linienhöhe: Wir haben etwas, das wie eine exakte Gleichung aussieht , um die Schriftgröße zu ermitteln. Wir möchten vielleicht ein wenig damit spielen. Wenn wir es uns ansehen, haben wir etwas, das eine Art Gleichung für die Ausarbeitung der Zeilenlänge ist , aber größtenteils darauf basiert, was die meisten anderen Leute tun und nicht auf meisten anderen Leute tun dem, was für den Leser am besten ist. Und wenn wir uns die Zeilenhöhe ansehen, wird sie fast vollständig von mir sein und indem wir unserem eigenen Urteil vertrauen, werden wir langsam weniger wissenschaftlich, wenn wir jeden dieser Abschnitte durcharbeiten , wenn wir schreibe unser CSS. Und deshalb bezeichnen wir dies in der Webentwicklung als Linienhöhen. Aber generell bezeichnen Designer oder jeder, der sich mit Typografie befasst, dies als führend. Und das liegt daran, dass er kleine dünne Bleistücke zwischen die Linien der alten Metallschriften stecken würde . Um die Probleme rund um Zeilenhöhen oder das Lesen zu verstehen, müssen wir verstehen, was es für Menschen effizienter macht , eine längere Textzeile auf einem Computermonitor zu lesen . Unsere Augen hören nicht wirklich bei jedem einzelnen Buchstaben auf und sie hören wahrscheinlich nicht einmal bei jedem einzelnen Wort auf, je nachdem, wie schnell Sie lesen. Wir machen diese sakkadischen Augenbewegungen bei denen unsere Augen von einer Stelle zur nächsten springen, möglicherweise drei oder vier Wörter gleichzeitig gescannt werden, bevor wir einen weiteren Sprung machen. Ich habe das vorhin erwähnt. diesem Grund können Sie mit etwas wie Futura kein OH und ein zu ähnlich aussehen, weil sie wahrscheinlich nicht im Mittelpunkt Ihres Sichtfeldes stehen und möglicherweise ein wenig verschwommen sind. Nun, um unsere sakkadische Augenbewegung an den nächstoptimalen Ort zu bringen, an dem wir die optimale Anzahl von Wörtern aufnehmen können, die wir können. Es ist eigentlich ziemlich knifflig. Wir müssen aus den Zeilenhöhen, der Zeilenlänge und der Schriftgröße genau wissen . Während der optimale Ort für uns als nächstes auf I2 springen kann, wird diese sakkadische Augenbewegung viel einfacher sein , wenn wir einen kleinen Sprung entlang einer geraden Linie machen , dann wenn wir einen großen Sprung machen, ein Winkel zurück zum Anfang der nächsten Zeile. Selbst der kompetenteste Leser wird von Zeit zu Zeit überspringen, insbesondere wenn es sich um eine Zeilenhöhe, Schriftgröße oder Zeilenlänge handelt , die er nicht besonders gewöhnt ist. Eine längere Linienlänge und damit weniger Linien bedeutet, dass mehr Ihrer sakkadischen Augenbewegungen entlang einer flachen Standardlinie verlaufen, aber die Linienlänge erhöht. Wir werden unseren Kopf von links nach rechts neigen alle unsere Augen von links nach rechts belasten , um alle Worte aufzunehmen. Deshalb habe ich im letzten Video vorgeschlagen , dass wir möglicherweise längere Zeilenlängen auf einem Desktop-Display lesen könnten als in einem Buch, nur weil die Typgröße relativ ähnlich ist, Die Zeilenlänge beträgt weniger Bogenminuten auf einem Monitor. Wenn es um Zeilenhöhen geht, möchten wir uns wirklich ansehen, was meisten anderen Websites tun. Und die meisten Websites sagen, dass Ihre Zeilenhöhe etwa 130 bis 150 Prozent der Texthöhe betragen sollte . Wenn Sie beispielsweise entschieden haben, dass 140% die beste Zeilenhöhe ist und Ihre Texthöhe 20 Bogenminuten betrug. Hi, du würdest eine Zeilenhöhe von 28 Arcminutes anstreben . Was sind die Faktoren, die uns sagen würden, eine Linienhöhe von 150 Prozent im Vergleich zu 130% Zeilenhöhe zu erreichen. Nun, das erste ist, wenn Ihre Zeilenlänge relativ lang ist, möchten Sie ein zusätzliches Stück Zeilenhöhe. Das heißt, wenn Sie diese sakkadische Augenbewegung zurück zum Anfang der nächsten Linie machen, die Winkel nicht ganz so eng. Es fügt auch ein bisschen mehr Raum zum Atmen hinzu, ein bisschen mehr Leerzeichen um einen ansonsten ziemlich dichten dunklen Textblock. Jetzt werden wir uns das später genauer ansehen, aber eine übliche Technik besteht darin, eine Textseite anzusehen und Ihre Augen so leicht zu schielen oder der Seite einen Unschärfe-Filter hinzuzufügen. Idealerweise möchten wir, dass die Seite dann eine ziemlich konsistente graue Farbe hat, anstatt große schwarze, dunkle, dicke und dichte Bereiche. Wenn wir uns einen Textblock ansehen, befindet sich der größte Teil des Textes nicht im Zentrum unseres Sichtfeldes sieht daher verschwommen aus. Wir möchten, dass dieser Text für unseren Benutzer angenehm aussieht und auch nicht entmutigend und beängstigend aussieht. Aus diesem Grund, wenn wir eine Schrift wie Vedanta wählen, die eine wirklich hohe x-Höhe hat. Es hat daher per definitionem ziemlich kleine Aufstiege und Abstiege. Daher wollen wir für diese Schriften mit einer großen x-Höhe etwas mehr Zeilenhöhe . Denn je näher sie zueinander kommen, desto dichter machen wir die Farbe auf der Seite und desto entmutigender machen wir das Ganze, nach dem gesucht wird, Benutzer. Wenn wir ein größeres Seitenverhältnis haben, ein größeres Verhältnis von x-Höhe zu Höhe der Schrift. Wir wollen diese Zeilenhöhe auch ein wenig erhöhen. Schließlich basiert die einzige Sache, die uns dazu bringt, die Zeilenhöhe zu ändern , rein darauf, dass wir sie betrachten. Wir müssen irgendwann anfangen, unserer eigenen Wahrnehmung zu vertrauen und zu sehen wie dicht und entmutigend das auf der Seite aussieht. Wenn Sie Zweifel an zwei möglichen Zeilenhöhen für einen Textblock haben, entscheiden Sie sich wahrscheinlich für die größere. Sie machen sich keine Sorgen um Immobilien, wenn Sie es mit digitalen Webanwendungen zu tun haben. Und wenn es besser funktioniert, zögern Sie nicht, es über 150 Prozent zu schieben. Ich habe viele sehr gute Websites gesehen, die alle Mischen bis zu 200% Zeilenhöhe hochschieben . Sie möchten sich niemals strikt an eine dieser Regeln oder andere Regeln halten. Wenn es gut funktioniert, funktioniert es gut, was Sie tun sollten je nachdem, wie erfahren der Benutzer beim Lesen ist, sie werden sakkadische Augenbewegungen oder Sprünge von verschiedenen machen Größen entlang der Linie bis zu einer bestimmten Linienlänge. Diese Sprünge sind einfacher und genauer als zur nächsten Zeile zurückzukehren. Wenn die Linienlänge relativ lang ist , würden wir die sakkadische Augenbewegung zur nächsten Linie machen , einen viel engeren Winkel. Wir möchten also die Zeilenhöhe erhöhen , wenn wir die Linienlänge erhöhen. Eine gängige Technik, die wir uns später ansehen werden, um unsere Textblöcke zu bewerten, besteht darin, den Bildschirm zu verwischen. Der Textblock sollte eine relativ konsistente Farbe haben , sollte aber auch bei einer 0,1-Regel nicht zu dunkel sein, um die Dichte dieser Farbe zu verringern, wenn es sich um eine Schrift mit einer großen x-Höhe handelt. fügte auch mehr Zeilenhöhe hinzu. Eine Schrift mit einer großen x-Höhe hat natürlich einen größeren Teil der Schrift. Näher an der nächsten Zeile fügen wir nur noch ein bisschen Platz zum Atmen hinzu. Wir werden die Zeilenhöhen-Regel viel mehr auf unsere eigene Wahrnehmung stützen die Zeilenhöhen-Regel viel mehr auf , und unsere eigenen Augen zielten auf etwa hundertdreißig, einhundertfünfzig Prozent des Textes ab Höhe. Und das machen wir hauptsächlich, weil die meisten anderen Websites das tun. Es gibt viele Websites , die darüber hinausgehen, 150 Prozent bis zu 170 oder manchmal sogar etwas weiter. Fühlen Sie sich also frei, diese Obergrenze zu überschreiten , wenn es für Ihre Anwendung gut funktioniert. 9. Lokalisierung: In diesem Abschnitt über Lesbarkeit habe ich ausschließlich über lateinische Typografie oder lateinischen Text gesprochen . Und was ich damit meine, ist das Alphabet, das Sie gerade auf dem Bildschirm sehen. Sie können es von Zeit zu Zeit hören, als römisches Alphabet bezeichnet wird. Ich vermeide das, weil das Wort Roman schon etwas in der Typografie bedeutet. Jetzt ein paar schnelle Dinge über unser lateinisches Alphabet. Es ist irgendwie seltsam. Eine einzige Glyphe. Denken Sie daran, eine Glyphe ist eine der Formen, eines der Symbole im Alphabet könnte ein phonetischer Klang sein. Wie das H zum Beispiel einen Ton erzeugt, könnte es mit verschiedenen Glyphen kombiniert werden, wie die th der beiden einen einphonetischen Klang für mehrere Glyphen erzeugen. Wenn wir ein Leerzeichen einsetzen, bedeutet dies, dass ein Wort beendet ist und das nächste begonnen hat. Aber wir haben auch zusammengesetzte Wörter wie wir. Wir könnten sagen wo und manchmal könnten wir einen Apostroph oder einen Bindestrich setzen , um zu sagen , dass die Wörter verschärft werden und manchmal nicht, eine Glyphe könnte ein ganzes Wort wie zum Beispiel ich sein Und in vielerlei Hinsicht ist das lateinische Alphabet ziemlich seltsam, und wahrscheinlich ist die englische Sprache die seltsamste von allen. Aber nur damit wir ein paar Regeln verstehen, geht es zunächst immer von links nach rechts. Es geht nie von oben nach unten. Es geht nie von rechts nach links. Und wir beginnen mit der nächsten Zeile. Wenn wir uns diesen Satz hier ansehen, wie wird sich die Coronavirus-Pandemie ändern? Ramadan für Muslime, lateinischer Text bricht im Allgemeinen immer auf einem Raum es sei denn, es gibt ein besonders langes Wort, wo wir, es könnte eine Silbentrennung n setzen, wo Sie am Ende einen kleinen Bindestrich haben eine Zeile, um Ihnen mitzuteilen, dass das Wort über die Linie gebrochen ist. Jetzt können sich diese Regeln für verschiedene Sprachen ziemlich ändern . In der Tat, selbst diese Silbentrennungsregel, die ich erwähnt habe könnten einige Sprachen den Bindestrich am Anfang der nächsten Zeile haben . Und einige Sprachen haben möglicherweise eine Silbentrennung am Ende einer Zeile und am Anfang der nächsten. Als wir nun unseren Brief erstellt haben, sagte ich, dass es wichtig ist zu wissen , für welche Sprachen Sie erstellen, aber auch wenn Sie sich mit Ihrem Kunden über Sprachen unterhalten, gibt es eine ziemliche einige Dinge, über die Sie ihnen sprechen möchten, weil Regeln für einige Sprachen weniger streng sind als andere. Durch den Rest dieses Videos werde ich Ihnen ein paar schnelle Feuersachen geben, nach denen Sie suchen müssen , wenn Sie es mit verschiedenen Sprachen zu tun haben. Es wäre unmöglich für mich, es überhaupt zu wissen, geschweige denn es Ihnen zu erklären jede einzelne Regel mit jedem einzelnen Alphabet. Das sind wahrscheinlich so viele Alphabete auf der Welt, wie es in diesem ganzen Kurs Videos gibt. Jetzt ein offensichtliches, mit dem Sie sich vielleicht auseinandersetzen müssen. Sie haben vielleicht bemerkt, dass ich meinen Browser auf Arabisch eingestellt habe. Die Registerkarten befinden sich in den obersten Rechten. Alle Knöpfe und alles sind umgekehrt. Und wenn ich mir die Al-Jazeera-Websites auf Arabisch anschaue, können Sie sehen, dass alle Texte, die als Designer und definitiv als Entwickler von rechts nach links gehen Designer und definitiv als Entwickler von rechts nach links , auch Notizen wert sind, sagen, dass im Allgemeinen alles ändert sich von rechts nach links. Das Suchsymbol, das normalerweise oben rechts sein würde , befindet sich jetzt oben links, wir würden im Allgemeinen nur einen Wert und den oberen Teil des HTML ändern , um zu sagen , dass es sich um einen Text von rechts nach links handelt dass wir einfach alle Stile dafür erstellen können. Darüber werden wir im Implementierungsbereich mehr sprechen. Es lohnt sich jedoch, sich bewusst zu sein, wenn Sie ein Designer sind , dass Sie manchmal die arabischen Designs getrennt von den übrigen Designs für andere Sprachen erstellen müssen die arabischen Designs getrennt von den übrigen Designs für andere Sprachen erstellen . Weil sich Schaltflächen usw. oft von links nach rechts nach rechts bewegen werden rechts nach rechts oder sicherlich an den meisten Stellen, an denen ich gearbeitet habe. Es ist normalerweise nicht der Fall, dass ein Designer separate Entwürfe für Arabisch erstellen würde. Wir würden einfach alles entwickeln , um auf die andere Seite zu wechseln . Aber es hängt wirklich alles von dem Kunden ab, mit dem Sie arbeiten. Im Allgemeinen erscheint arabischer Text ungefähr gleich groß wie lateinische Texte. Sofern es keinen guten Grund gibt, können Sie normalerweise die gleichen Textgrößen und Zeilenhöhen beibehalten , aber es kann ziemlich stark davon abhängen welche Schrift Sie für die arabischen Texte verwenden. Eine letzte Sache, die Sie bei Arabisch beachten sollten , ist, dass Sie von rechts nach links gehen. Wenn Sie etwas mitten in arabischen Texten in einer anderen Sprache zitieren sollten arabischen Texten in , die von links nach rechts geht. Dieser Text wird immer noch von links nach rechts oder umgekehrt gelesen. Wenn Sie etwas Arabisch in der Mitte eines anderen Sprachtextes zitieren , wird dieser Text immer noch nach links verlaufen. Das ist okay. Es kann ziemlich schwierig sein , damit umzugehen. Aber eine Sache, auf die Sie achten sollten, ist wenn es über eine Linie bricht, könnten Sie am Ende einen Zeilenumbruch in eine andere Richtung haben . Wenn wir jemals ein Anführungszeichen in einem Alphabet haben, das in einigen Texten in eine andere Richtung geht mitten in einigen Texten in eine andere Richtung geht. Wir möchten es idealerweise in eine Art Spanne umwickeln um zu verhindern, dass es ein MIT-Zitat für Zeilenumbruch hat. Japanischer Text ist möglicherweise die einzige Sprache, das eine Alphabet, in dem Sie die Größe möglicherweise ein wenig erhöhen möchten. Manchmal erhöhen die Leute die Textgröße um etwa 15% , nur weil sie sie ins Japanische übersetzt haben. Und das liegt daran, dass es viele Zeichen gibt, die mit Chinesisch unglaublich kompliziert sind , gibt es eine vereinfachte Version des Alphabets. Manchmal gibt es bei Japanisch bestimmte Buchstaben oder bestimmte Glyphen, die Sie nicht vermeiden können. So oft könnten Leute die Größe erhöhen. Eine andere Sache mit Japanisch ist, dass es nicht unbedingt Räume gibt. Ich bin gerade auf der BBC-Website und manchmal gibt es Leerzeichen, aber wann und wo diese erscheinen, kann leicht diskutiert werden. Es ist durchaus akzeptabel, Japanisch ohne Leerzeichen zu schreiben . Und dieses kleine Satzzeichen des Kreises wird gelegentlich verwendet, um das Ende eines Satzes ein bisschen wie einen vollständigen Stopp zu markieren . Etwas, worüber wir später noch einmal sprechen werden , ist die hängende Interpunktion. Wenn dieses kleine Kreissymbol jemals erscheinen würde, warum würde es am Ende der Zeile hier drüben nicht auf eine neue Linie brechen. Es würde vom Rand hängen, wie es im weißen Bereich rechts erscheinen würde , man sieht oft Leute, die Interpunktion hängen wenn sie ein Zitat in lateinischen Texten schreiben, da das Anführungszeichen erscheinen normalerweise am Anfang der Zeile. Und deshalb hängt das Anführungszeichen über dem Rand auf der linken Seite. So scheint es in den Rand zu drängen. Während wir die gleiche Regel mit Japanisch haben, diesen kleinen Kreis hier, gibt es einen vollständigen Stopp oder hängt am Rand ab, wenn er am Ende einer Zeile erscheint, gibt es eine CSS-Regel für Zeile Brechen genannt Zeilenumbruch, Zeilenumbruch. Wenn wir dies auf strikt setzen, wird es verhindern, dass Teile japanischer Silben über die Linie brechen. Manchmal kann ein japanisches Symbol einfach Teil einer Silbe sein. Sehr ähnlich wie eine einzelne Glyphe auf Englisch einen einzigen phonetischen Klang erzeugt, aber nur ein Teil einer Silbe. Wir können diese CSS-Regel verwenden, Zeilenumbruch streng, um zu verhindern ein Teil einer Silbe in die nächste Zeile übergeht. Oder wenn wir möchten, dass es ohne Leerzeichen völlig gerechtfertigt ist, können wir Zeilenumbruch losschreiben, was es ermöglicht, auf die nächste Folie zu übergehen. Es gibt bestimmte Regeln im eindeutigen Code, für den Sie Ihre Seite festlegen. Normalerweise hätten Sie oben auf Ihrer Seite etwas wie der Unicode gleich UTF-8. Obwohl es sich geringfügig von eindeutigen Codes wie ascii unterscheidet , werden diese Codes bestimmte Regeln festlegen, für die Glyphen in eine neue Zeile aufbrechen können und welche nicht. Diese werden ziemlich oft aktualisiert, daher werde ich hier nicht auf Details eingehen, aber von Zeit zu Zeit müssen Sie möglicherweise überprüfen, was die Unicode-Regeln sind, was in verschiedenen Sprachen brechen kann und was nicht . In südostasiatischen Sprachen wie zum Beispiel erscheinen die Leerzeichen nicht zwischen bestimmten Wörtern, sondern erscheinen tatsächlich am Ende einer Phrase. Die Website weiß, wie und wo man auf eine neue Linie einbrechen muss, da UTF-8 jetzt Regeln enthält, wo man in die nächste Zeile auf Thai einbrechen kann und nicht. Einige südostasiatische Sprachen haben jedoch immer noch keine Rolle in UTF-8, Unicode. Und einige Websites haben immer noch ein seltsames kleines Symbol bei dem Sie früher ein Leerzeichen zwischen Wörtern hinzufügen konnten , ohne dass es physisch auf der Website erscheint , um den Browser darüber zu informieren , wo es könnte Zeilenumbruch sein. Zum Beispiel ist vielleicht irgendwo hier das Ende eines Wortes und der Anfang des nächsten. Benutzer fügen ein Symbol ein, das keinen sichtbaren Abstand hatte , sich aber wie ein Leerzeichen auf der Website verhielt. Jetzt waren diese früher sehr problematisch, weil man diese Räume hinzufügen konnte , die nicht leicht sehen können, dass sie dort waren. Sie könnten aber auch mehrere an einem Ort hinzufügen , ohne es zu merken. Für die meisten südostasiatischen Sprachen ist dies kein Problem mehr. Wenn Sie es jedoch mit einem Vermieter zu tun haben, verwenden Sie Sprache, es besteht die Möglichkeit, dass er diese unsichtbaren Räume immer noch verwendet. Schließlich wollte ich nur ein paar Dinge über Koreanisch sagen . Jetzt, wieder auf Koreanisch, hat einige etwas andere Regeln darüber ob man das mittlere Wort brechen kann, jedes Symbol und Koreanisch ist eine Silbe. Mehrere Silben können natürlich ein einziges Wort machen. Kannst du Midword brechen? Es ist eine andere Sache, die Sie Ihren Kunden oder Ihren Chef fragen möchten . Das Interessante an Koreanisch ist jedes Symbol eine einzelne Silbe ist, aber jede Silbe besteht aus phonetischen Klängen. Koreanisch ist eigentlich ein phonetisch perfektes Alphabet. Diese erste Silbe in der ersten Zeile sagt beispielsweise NAM. Und diese L-Form ist immer ein Klang und dann ist es immer ein Geräusch, und das Quadrat ist immer ein Geräusch. Jedes der phonetischen Symbole wird GVO genannt und das Alphabet heißt Hangeul. Jetzt könnte die Schrift auf zwei verschiedene Arten gespeichert werden. Einige Schriften speichern jedes einzelne Stück der Silbe, jede GVO als separate Glyphe und einige Schriften speichern die gesamte Silbe als Glyphe. Die zweite Option ist heutzutage viel vorzuziehen, aber es besteht die Möglichkeit, dass Sie sich mit der ersten beschäftigen. Dies könnte wichtig sein, wenn Sie mit einer Karriere und einer Schrift arbeiten müssen irgendwann mit einer Karriere und einer Schrift arbeiten müssen , dass es technisch gesehen zwei verschiedene Möglichkeiten gibt , die Glyphen zu speichern. Das ist alles, was ich an dieser Stelle wirklich über die Lokalisierung sagen wollte . Es gibt eine Million andere Dinge, die ich sagen könnte. Dies war ein Schnellfeuer-Video mit mehreren verschiedenen Dingen, die mit verschiedenen Alphabeten zu tun hatten. Ich hoffe, es war hilfreich. 10. Zusammenfassung: Es gibt mehrere Phasen zum Lesen, von der Identifizierung der Shapes auf der Seite bis hin zur Kombination mit Dingen, die wir zuvor gelernt haben , und eine Meinung bilden. Und dann erinnern sich Seen an diese Information und diese Meinung. Als Designer und Entwickler können wir die allererste Stufe nicht überbetonen, wodurch die Formen einfach zu identifizieren sind. Darauf habe ich mich auch hauptsächlich konzentriert. Aber bitte vergessen Sie nicht , dass jemand, der schnell Informationen erwirbt , sinnlos sein kann, wenn er sich keine Meinung gebildet hat und sich daran erinnert. Im Moment hoffe ich, dass Sie sich über alles, was ich zu sagen habe, Ihre eigene Meinung bilden . Sobald wir eine Schrift, die Variablen, ausgewählt haben, können wir die Größe, die Zeilenlänge und die Zeilenhöhe steuern . Wir können Forschung nutzen, um all dies besser auszuarbeiten. Die endgültigen Anpassungen werden jedoch immer von Ihrem fachkundigen geschulten Auge stammen. Je mehr du übst, desto besser wirst du. Manchmal verstehen wir unsere Benutzer vielleicht genug, um vom Forscher wenig abzuweichen. Wenn unsere Anwendung für ältere Menschen gedacht ist, möchten wir diese Schriftgröße vielleicht etwas größer machen. Wenn wir mit Akademikern zusammenarbeiten, können wir die Zeilenlänge etwas länger machen , da sie dadurch schnell lesen können. Nun, wie diese bereits erwähnten Variablen, Zeilenlänge, Zeilenhöhen und Schriftgröße, können wir auch den Stil steuern, indem wir ihn fett oder kursiv machen und zum Beispiel die Schrift färben. In der Regel verwenden wir diese Attribute, um eine bessere visuelle Hierarchie auf unserer Seite zu erstellen eine bessere visuelle Hierarchie auf unserer Seite und unserem Design mehr Stil und Charakter zu verleihen.