Erstellen einer Type (UI Design Bootcamp, Woche 5)

1. Einführung: In diesem Video werden wir in diesem kurzen Kurs ein typografisches System aufbauen. Wir werden zuerst darüber sprechen und erfahren, warum der wichtigste Teil unseres Designrasters das vertikale Gitter ist, insbesondere bei ansprechendem Design. Und deshalb wird unsere Topographie alles diktieren. Wir werden dieses Wissen nutzen, um eine typografische Skala zu erstellen , in der wir uns nur mit der Größe der verschiedenen Überschriften und der Räume, der Polsterungen und Ränder um die verschiedenen Überschriften und Absätze. Wir werden uns einige der anderen Dinge ansehen, die eine visuelle Hierarchie in einem typografischen System aufbauen . Und wir werden uns einige der erweiterten Funktionen ansehen, mit denen wir unser typografisches System ein wenig interessanter gestalten können. Schließlich werden wir all dies diese Woche mit unserem Projekt zusammenstellen , um ein einfaches typografisches System zu erstellen , wie das, das Sie derzeit auf dem Bildschirm sehen können. Ihr typografisches System ist Ihr erster Baustein für den Aufbau eines kompletten Entwurfssystems. Lasst uns das klären. 2. Vertikales Raster: Es gibt viele verschiedene Gründe, warum das absolute erste, was wir beim Entwerfen einer Anwendung tun werden, darin besteht, die Körpertopographie zu beim Entwerfen einer Anwendung tun wählen. Die Wahl der Schrift für die Körpertexte wird die Zeilenhöhe für den Körpertext beeinflussen. Und die Zeilenhöhe für den Körpertext beeinflusst den vertikalen Rhythmus für die gesamte Seite, das gesamte Design der gesamten Site oder Anwendung. Wenn wir uns ein paar Zeilen Text auf meiner Facebook-Seite ansehen , können wir sehen, dass genau das gleiche Basisraster an anderer Stelle für UI-Elemente oder alle Arten von verschiedenen Teilen des Designs dieser Seite verwendet wird für UI-Elemente oder alle Arten von verschiedenen Teilen des Designs dieser Seite einschließlich Icons, Böden, aber auch verschiedene Größen der Typografie. Dies gibt uns ein einheitlicheres Aussehen, das natürlich gut für das Design ist ein schönes uniformiertes Basisraster auf der Seite hat. Aber es wird auch bei der Lesbarkeit helfen. Wie ein Benutzer verschiedene Textbereiche unterschiedlicher Größe liest . Wenn sie diese sakkadischen Augenbewegungen zurückmachen, verstehen sie unbewusst, wo sich das Basisraster befindet. Aus diesen Gründen glaube ich persönlich , dass das absolute erste, was Sie beim Entwerfen einer Anwendung tun müssen , darin besteht, die Körperschrift zu wählen. Die Spur der Schrift bestimmt die Größe der Körperschrift. Die Größe der Körperschrift bestimmt die Linienlänge. Und all diese Dinge zusammen bestimmen die Zeilenhöhe, die den vertikalen Rhythmus für das gesamte Design der Seite bestimmt . Wenn Facebook plötzlich entscheiden Garamond neu zu brandmarken und zu verwenden, müssten sie alles auf der Seite, jeden Rand, jedes Stück Polsterung neu gestalten alles auf der Seite, jeden Rand, , da die Zeilenhöhe würde muss für den Text geändert werden. Der Begriff Baseline-Raster kann ein wenig irreführend sein. Wir sollten es wahrscheinlich wirklich ein vertikales Raster nennen. Ich habe diesen Button gerade ziemlich ähnlich wie bei Facebook genommen. Und ich habe es dir gerade mit einer Zeile gezeigt , die direkt im Raster direkt unter den Buchstaben mehr sehen kann. Realistisch gesehen das Raster auf Facebook und ich weiß es nicht, ich habe nicht auf Facebook gearbeitet. Sieht wahrscheinlich etwas ähnlich aus. Wir sehen tatsächlich, dass mehr nicht ganz auf dem Basisraster sitzt. Und wenn ich das in kleinere Chunks aufteile, ist dies ein Vier-Pixel-Raster. Dies ist ein 16-Pixel-Raster. Ich denke, es sieht wahrscheinlich etwas mehr so aus. Der Text befindet sich in der Mitte davon. Im Wesentlichen beträgt die Linienhöhen von Seymour 16 Pixel, anstatt mit den Buchstaben zu sitzen , die auf der Unterseite des Rasters liegen. Jetzt sind die verschiedenen Gründe, warum wir tatsächlich Grid verwenden, ähnlich diesem. Und der erste ist, sobald Sie dies ins Japanische übersetzen, wird es nicht mehr am Ende des Rasters sitzen. Und natürlich würden wir die Größe für Japanisch sowieso leicht ändern , aber es wird nicht bequem auf dieser Grundlinie sitzen. Es wird in der Mitte sitzen. Die Zeilenhöhe basiert auf dem Raster, nicht auf der Basislinie des Textes. Ein unglaublich häufiger Fehler , den ich Designer mit einem gedruckten Hintergrund gesehen habe, die angefangen haben, Webdesign zu machen, ist, uns zu sagen, was diese Marge ist. Der Rand von der Basislinie eines Textes bis zum Anfang der Überschrift des nächsten Textes. Wie wir wissen, messen wir nicht die Texthöhe, aber wenn wir CSS schreiben, ist es absolut unmöglich, das zu implementieren, was unsere Entwickler brauchen. Oder wenn wir Front-End-Entwickler sind, müssen wir diese Marge wissen. Dies ist der Rand vom unteren Rand des Begrenzungsfeldes. Wenn ich diesen Überschriftentext auswähle, sehen Sie das Begrenzungsfeld. Und wenn ich hier hineinklicke und den Text auswähle, kannst du sehen, wo die Zeilenhöhe oben in diesem Text endet. Und wenn ich hier hinklicke und einen Text auswähle, kannst du sehen, wo die Zeilenhöhe davon ist. Jetzt in CSS können wir dies umsetzen, wenn wir diese Größe hier kennen, wir können sie implementieren. Dies können wir nicht, denn wenn sich dieser Text ändert, wenn sich diese Ränder ändern, wenn sich unser vertikales Raster ändert und sich diese Steuer ändert, wird sich dieser Raum ebenfalls ändern. Ein sehr häufiges Problem bei neuen Designern oder Designern , die einen Druckhintergrund hatten, besteht also neuen Designern oder Designern , die einen Druckhintergrund hatten, darin, zu glauben, dass der Platz aus dem Basisraster für uns von Nutzen ist. Woran wir immer interessiert sind, ist der tatsächliche Raum der Grenzbox, und daher sind wir mehr an der Zeilenhöhe interessiert. Ich habe unsere beiden Favoriten, Garamond und Verdana, zurückgebracht . Und wie ich zuvor gesprochen habe, verwende ich diese beiden als Beispiele, weil es sich um so sehr unterschiedliche Schriften handelt, sie haben sehr unterschiedliche x-Höhen. Jetzt wissen wir bereits, dass wir es idealerweise bei einer Typgröße von 17,5 Referenzpixeln hoch haben wollen, um EB Garamond lesbar zu machen es idealerweise bei einer Typgröße von 17,5 Referenzpixeln hoch haben wollen . Und deshalb habe ich die Zeilenhöhe etwa das 1,25-fache der Schrift gemacht , teilweise weil dies eine ziemlich lange Zeilenlänge ist . Es heißt 75. Zeichen pro Zeile, Zeilenlänge. Und wie Sie gerade sehen können, 75 Zeichen pro Zeile nicht wirklich so lang. Was wir jetzt mit dieser 24 Pixel Zeilenhöhe haben, haben wir eine schöne bequeme Zeilenhöhe um ein vertikales Raster zu erstellen. Ich habe gerade ein vollständiges Pixelraster erstellt. Und wir können sehen, dass alle Linienhöhen gut dazu passen, da sie alle Linienhöhen von 24 sind. Ich habe eine Überschrift erstellt , die auch dazu passt. Und ein Knopf mit Polsterung und Rändern und Sachen, die alle bequem hineinpassen. Wenn ich diesen Raum zwischen ihnen überlagere, können wir sehen, dass die Lücken zwischen jedem Textblock auch ziemlich gut in dieses Vier-Pixelraster passen. Das ist also alles gut und gut für Garamond. Was ist mit DAWNA? Jetzt wissen wir, dass Verdana eine größere x-Höhe hat, sodass wir die Schrift etwas kleiner machen können, aber idealerweise eine etwas höhere Zeilenhöhe wollen. Schauen wir uns an, wie Vedanta aussieht. Ich denke, es sieht hier ganz nett aus. Sie wissen aus den vorherigen Videos, dass wir für Donna idealerweise 12,5 Referenzpixeltexte Höhen wünschen. Und wenn wir das auf die maximale Zeilenhöhe von 150 Prozent setzen , erhalten wir 18,5 Referenzpixel. Jetzt können wir dem nicht so einfach in ein schönes, komfortables vertikales Raster trotzen . Ich habe es in ein vertikales Drei-Punkte-Gitter aufgeteilt. Und bitte vergiss nicht, dass du einen Bruchteil eines Referenzpixels haben kannst. Einige Entwickler, Designer und sogar Software lassen Sie keine Bruchteile eines Referenzpixels verwenden. Bruchteile eines Referenzpixels sind seit der allerersten Version von CSS vollständig akzeptabel. Und es gibt keinen praktischen Grund, dass es ein Problem wäre, wenn man bedenkt , dass ein Referenzpixel sehr selten durch die realen Pixel auf dem Bildschirm teilbar ist . Jedenfalls. Stattdessen habe ich für Donna ein Basisraster von 3,7 Referenzpixeln anstelle von vier angegeben. Und so habe ich die Zeilenhöhe des Überschriftentextes gewählt , der 48,1 Referenzpixel, Zeilenhöhe und die Schaltfläche und den Abstand ist . Jetzt ist das natürlich alles gut und gut in einer perfekten Welt, aber Sie arbeiten sehr selten in einer perfekten Welt. Normalerweise müssen Sie Ihre Entwürfe ziemlich schnell herausfinden und Sie müssen sie ziemlich schnell in andere Sprachen übersetzen . Was viele Designer tun werden und was Sie wahrscheinlich tun werden. Und was ich hauptsächlich für den Rest dieses Kurses machen werde. Runden wir die Zahlen einfach ein wenig auf. Zum Beispiel wissen wir, dass die perfekte Höhe für unseren Vedanta-Text 12,5 Pixel beträgt. Aber vielleicht runden wir das einfach auf 13 ab und wir haben die Zeilenhöhe ein bisschen größer gemacht , damit sie besser in ein vollständiges Referenzpixelraster passt . Und das wird es uns viel einfacher machen, Designsoftware zu verwenden , um mit anderen Designern zu kommunizieren und welche Entwickler zu kommunizieren. Und wir werden unsere Entwürfe schneller herausbringen keine besseren Designs machen. Aber in der realen Welt muss man normalerweise die leichten Kompromisse eingehen. Und ebenso ignorieren viele Designer, wenn sie es zum Beispiel ins Japanische übersetzen, wenn sie es zum Beispiel ins Japanische übersetzen, die Tatsache, dass Sie eine Textgröße von 110% bis 115% erreichen möchten, weil sie es Textgröße von 110% bis 115% erreichen möchten, müssen dann ändern Sie dieses Basisraster ziemlich stark, was möglicherweise die japanischen Benutzer bestraft. Aber wenn wir das zum Beispiel für Donna nehmen, wir es unseren japanischen Lesern nicht erschweren wir es unseren japanischen Lesern nicht, sie zu verwenden. Wir erschweren es unseren englischen Lesern die Verwendung , da wir die Größe des Textes bereits aufrunden. Aber es sind nicht nur Übersetzungen, um die wir uns Sorgen machen müssen. Es ist auch Reaktionsfähigkeit. Wenn ich mir diese nette handliche Garamond-Seite anschaue, habe ich ein vertikales Vier-Pixel-Gitter. Sobald ich das in ein Handy umwandle, reduzieren wir die Zeilenhöhe da die Leitungslänge nicht so lang ist. Und dann wird das mein vertikales Raster komplett verändern. Figma lässt mich nicht einmal einen Bruchteil in der Größe meines vertikalen Gitters haben . Ich musste meine eigenen Raster mit Boxen erstellen. Und Sie können hier sehen, dass das Textil immer noch ganz gut in mein eigenes maßgeschneidertes Gitter passt , das mit Schachteln gezeichnet wurde. Und alle Ränder passen auch gut in dieses Raster. Aber wie wir gesehen haben, müssen wir diese Ränder ein wenig ändern, von der Desktop-Ansicht in die mobile Ansicht subtil geändert , von der Desktop-Ansicht in die mobile Ansicht . Ändern Sie diese Schaltfläche ein wenig, um sicherzustellen, dass wir den vertikalen Rhythmus auf der Seite nicht verlieren. Aus diesem Grund können wir uns nie wirklich darauf verlassen, dass unser vertikales Raster eine schöne, komfortable runde Zahl wie vier Pixel war . Auch in dieser Situation werden Sie realistisch wahrscheinlich ein kleines Opfer für Ihre mobilen Benutzer bringen oder vielleicht für Mobilgeräte optimiert sein und Ihren Desktop-Benutzern ein kleines Opfer bringen . Normalerweise im Interesse von etwas so Wichtigem wie der tatsächlichen Einhaltung der Frist. Im Webdesign ist die Idee eines Basisrasters unmöglich. Wir haben ein vertikales Gitter. Die textbasierte Zeile wird niemals im Raster gesetzt. Das wäre unmöglich, das CSS für die Übersetzungen zu schreiben und auszuarbeiten. Das ideale Basisraster für eine Webanwendung ist die Zeilenhöhe der Körpertexte. Jetzt kann sich die Zeilenhöhe der Körpertexte tatsächlich ändern. Wenn wir uns beispielsweise die Anwendung auf ihrem Mobiltelefon ansehen oder wenn wir den Text auf Japanisch ändern , möchten wir einige CSS-Regeln , die dies aktualisieren können. Wir werden uns dies jedoch vorerst in der Implementierungsphase noch viel genauer ansehen. Sobald wir unsere Schrift kennen und die Linienlänge kennen, kennen wir die Zeilenhöhe. Jetzt haben wir eine gute Vorstellung davon, wie unser Basisraster aussehen wird. Wir können mit der Ausarbeitung einer Typenskala beginnen und schließlich das gesamte Design für unsere Anwendung erarbeiten . Abseits dieser Zeilenhöhe. 3. Visuelle Hierarchie: Natürlich möchten wir, wenn wir unser typografisches System ausarbeiten, eine visuelle Hierarchie darin aufbauen. Wir wissen, dass die visuelle Hierarchie von entscheidender Bedeutung ist , da der Benutzer wissen muss, was zuerst zu lesen ist, was er als zweites lesen und was zu lesen ist. Drittens kennen wir den Inhalt auf der Website. Das tun sie noch nicht. Es liegt an uns, ihnen die Bedeutung der einzelnen Typografie mitzuteilen. Jetzt kennt jeder die alte Regel, dass wichtigerer Text größer und weniger wichtiger Text kleiner ist. Aber es gibt mehrere andere Dinge, die wir tun können, um eine visuelle Hierarchie in unserem typografischen System zu erstellen. Ich habe diese Website hier oben, denke global health.org. Ich habe diese Website noch nie zuvor gesehen, aber ich werde diese verwenden, um einige Beispiele für visuelle Hierarchie in der Topographie zu erkennen . Das erste ist, dass die großen Überschriftentexte oben groß sind, aber es ist eigentlich nicht viel größer als die Körpertexte. Es gibt einen ziemlichen Sprung nach oben, aber es ist nicht viel größer. Es ist Felsbrocken. Aber noch wichtiger ist, dass es zentral gerechtfertigt ist. Es ist das einzige Ding. Dies und das Menü unten sind das einzige, was zentral gerechtfertigt ist. Alles andere bleibt ausgerichtet, alle anderen Texte taucht sofort heraus. Es sieht so aus, als wäre es wichtiger, weil es in der Mitte der Seite und natürlich oben auf der Seite befindet. Und ich frage mich irgendwie, ob wir diesen Text noch weniger fett gemacht haben , ist ein bisschen kleiner, aber er sieht immer noch ziemlich wichtig aus. Eine andere Sache, die etwas visuelle Hierarchie gibt , ist, viel Leerzeichen um sich herum zu haben. Oft müssen wir den Text nicht unbedingt vergrößern, wir müssen nur den Platz vergrößern, den er einnimmt. Diese Think Global Health Box an der Spitze, es hat einen ziemlich großen Spielraum. Und wenn Sie die Lockup in das Menü aufnehmen, wird dieser signifikante Prozentsatz der Seite von diesem Überschriftentext übernommen. Ohne Think Global Health ist so viel größer als eine Größe, die nicht allen passt , hat aufgrund der Menge an Leerzeichen, die um ihn herum existiert , viel wichtiger . Jetzt merke ich, dass jede Nachricht auf dieser Seite ein wenig über Armut, Governance hinausgeht , so etwas, in welcher Kategorie sie sich befindet. Und das war auf eine bestimmte Weise aufgetaucht weil es in allen Kappen ist und eine andere Farbe hat. Es gibt also zwei andere Dinge , die dazu beitragen, ihm Hierarchie zu geben, die helfen, sie zu unterscheiden und zu sagen, dass es etwas anderes ist. Das einzige auf der Seite in dieser orangefarbenen Farbe, die offensichtlich eine der Marken-Highlight-Farben ist, sind die Anmeldeschaltfläche und diese Kategorieschaltflächen. Eine andere Sache, die sie verwendet haben, um die Hierarchie zu identifizieren, ist die Schrift. Wenn wir zu den Überschriften für einzelne Artikel kommen, sind sie in dieser Serifenschrift enthalten, während die Hauptüberschriften alle in dieser serifenlosen Schrift zu enthalten schienen . Wir können sofort feststellen, dass dies verschiedene Dinge bedeuten. Wenn ich auf der Seite nach unten scrolle, werden Sie feststellen, dass es Trennwände mit einem oberen Rand gibt , der in einem fett gedruckten Text geschrieben ist. Diese teilen offensichtlich die Seite nach oben und sind eine andere Überschriftebene. Dieser Teiler ist in gewisser Weise auch ein typografischer visueller Hierarchiemechanismus. Und wenn ich etwas weiter nach unten scrolle, werden Sie feststellen, dass von Zeit zu Zeit unterstützende Texte kursiv geschrieben sind, was uns wiederum sagt, dass es etwas anderes bedeutet als der andere Text auf der Seite. Es ist eine andere Ebene in der Hierarchie. Es sind eindeutig einige Meta-Tags oder eine Beschreibung dessen, worum es in dieser Serie geht. Jetzt ein paar andere Dinge, die sie auf dieser Seite nicht verwendet haben, obwohl ich denke, dass sie die meisten visuellen Hierarchie-Techniken verwendet haben , die ich mir bei Typografie vorstellen kann haben eine Hintergrundfarbe obwohl ich weiß, dass hier steht, abonnieren und weniger und ziemlich große Schriften verwenden. Offensichtlich möchten Sie, dass wir sehen, dass dies einen schwarzen Hintergrund mit weißem Text hat. Stecht also sofort hervor und sieht ganz anders aus als der andere Text auf der Seite. Wir könnten natürlich einen farbigen Block hinter einigen Texten oder ähnlichem haben , um eine visuelle Hierarchie zu erstellen, visuelle Hierarchie zu erstellen ohne den Text selbst einzufärben, aber indem wir ihm einen Hintergrund geben, im Allgemeinen werden Texte mit einem höheren Kontrast zwischen Hintergrund und Vordergrundfarbe als wichtiger angesehen. Und ich konnte nicht umhin zu bemerken, dass diese Textfarbe hier etwas helleres Grau ist als die Überschriften. Und ganz oben scheint Think Global Health ein etwas dunkleres Schwarz zu sein, scheint Think Global Health ein etwas dunkleres Schwarz zu sein wenn diese Unterüberschriften auch in diesen Unterüberschriften sind. Schließlich verfolgt ein anderes visuelles Hierarchie-Tool. Eigentlich diese orangefarbenen Texte, die Armut sagen. Die Kategorieüberschriften scheinen natürlich einen gewissen Platz um die Buchstaben herum zu haben , da sie in allen Großbuchstaben geschrieben sind, sodass sie das Tracking erhöht haben. Zunehmender Buchstabenabstand oder -verfolgung kann jedoch wiederum dazu führen, dass ein Textblock in der visuellen Hierarchie wichtiger erscheint . Wir haben uns diese Think Global Health Website gerade angeschaut , weil sie viele Beispiele für visuelle Hierarchie in der Typografie enthielt. Im Allgemeinen tun Nachrichtenseiten das, weil sie viel Text enthalten. Aber einige der Techniken möchten wir vielleicht über unsere Farbe, unseren Hintergrund, Farbe, Abstand oder die Verfolgung der Ränder, die Menge an Leerzeichen um den Text herum, nachdenken über unsere Farbe, unseren Hintergrund, Farbe, Abstand oder die Verfolgung der Ränder, die . Mit allen Kappen, der Ausrichtung, könnten wir den Text leicht mit Kursivschrift oder Small Caps oder verschiedenen Textstilen einrücken . Wir könnten eine Textur über dem Text haben wenn es sich um eine Überschriftentexte handelt. Sehen Sie, ob es noch etwas gibt, an das ich nicht gedacht habe dass Sie buchstäblich an den Himmel, die Grenzen denken können, aber das sind diejenigen, die wir hauptsächlich in typografischen Systemen zu verwenden schienen. 4. Type: Sobald wir alle Dimensionen für unseren Körpertext haben, können wir die Größe für die Überschriftentexte und die Beschriftungstexte usw. ermitteln , indem wir eine Typskala erstellen, möchten wir die Überschrift, einen, Überschriftentexte , was war die gleiche Größe. Sie möchten, dass alle unsere Untertitel die gleiche Größe haben. Aber wir möchten auch, dass sie das Gefühl haben, Teil derselben Komposition zu sein, wenn Sie möchten, als Körpertext, möchten wir, dass sie in eine Skala passen. Manchmal benutzen Leute manchmal tatsächlich eine der musikalischen Skalen, weil wir wissen, dass diese sich für uns natürlich richtig anfühlen. Ich verwende eher das Goldene Verhältnis oder die Fibonacci-Sequenz hauptsächlich weil ich dieses Verhältnis an anderer Stelle in meinem Design verwende. Und möglicherweise gibt es jedem ein einheitliches Feld, das das gleiche Verhältnis für die Typskala verwendet. Ich bin mir nicht 100% sicher. Ich habe meine Körpertexthöhe auf 16 Referenzpixel hoch eingestellt . Und Sie können sehen, dass dann entschieden wird, dass Sie, wenn Sie die Hauptdrittelskala verwenden und Ihr Haupttext 16 Referenzpixel hat, wenn Sie die Hauptdrittelskala verwenden und Ihr Textkörper 16 Referenzpixel hat, 48,83 sein sollten. Referenz-Pixel. Als Referenzpixel sind nicht genau das Gleiche wie Pixel. Sie können einen Punkt oder einen Bruchteil eines Pixels haben. Es ist also vollkommen in Ordnung für dich, so etwas zu benutzen. Und diese Zahlen werden etwas anders sein. Sie müssen Ihr Auge ein wenig benutzen und sehen, wie es mit anderen Teilen Ihres Designs funktioniert und sich an Ihren vertikalen Rhythmus Ihres Designs anpasst , all diese Dinge. Aber ich denke, dies ist ein wirklich schöner Ausgangspunkt um herauszufinden, was möglicherweise eine ziemlich gute Überschriftengröße für diesen Körpertext sein könnte . Wie ich gerade sagte, verwende ich tendenziell das Goldene Verhältnis. Und der andere Vorteil davon ist, dass dieser Rechner, G R T calculator.com, ich sowieso ein bisschen netter finde. Jetzt habe ich EB Garamond eingefügt , ein Google Fonts, eine kostenlose Version von Garamond, die auf Google Fonts verfügbar ist. Und wir können sehen, dass das Seitenverhältnis von EB Garamond tatsächlich etwas größer ist als von Garamond. Googles Version hat eine etwas höhere x-Höhe als die normale Garamond-Standardschrift. Und wenn ich sieben Referenzpixel durch Null dividiere, 0,4, Sieben Referenzpixel waren ungefähr neun Bogenminuten. Ich werde 17.517,5 erhalten , ist eine ziemlich gute Schriftgröße, um Garamond zu machen, um es für die meisten Leute am besten lesbar zu machen, habe ich die Inhaltsbreite vorerst auf 700 Referenzpixel eingestellt . Und Sie können tatsächlich sehen, ob Sie hier unten schauen, die Skala, es wird die goldene Ratio-Skala vorgeschlagen. Es hat tatsächlich meine 17,5 Referenzpixel abgerundet. Es mag keine Bruchteile eines Pixels in dieser App, aber Sie können sehen, dass es mir die Schriftgrößen für die verschiedenen Höhen sowie die Zeilenhöhe gegeben hat . Wenn ich nun die Inhaltsbreite hier ändere, können Sie sehen, dass die Zeilenhöhe tatsächlich aktualisiert wird, wie wir zuvor gesprochen haben. Wenn wir längere Texte haben, wollen wir auch eine etwas höhere Zeilenhöhe. Was ich an diesem Rechner mag , ist, wenn ich runterkomme, sehe ich einige Beispiele für all die verschiedenen Textgrößen und wie unsere Liste aussehen könnte und all diese Dinge damit Schrift mit dieser Typskala. Wenn ich das auf Verdana umstelle , weil wir schon ein wenig für Dinah gesprochen haben. Jetzt wissen wir, dass für Diana tatsächlich ein bisschen kleiner sein kann als Garamond. Ich setze dies auf 12,5 ein, was nach unseren früheren Berechnungen die beste Lesehöhe für Verdana ist . Und Sie werden sehen, dass die Zeilenhöhe, die es gegeben hat , ein bisschen größer ist und es tatsächlich eine etwas größere Zeilenhöhe gibt, auch wenn wir es genauso groß wie Garamond machen , weil es ist berechnet, dass es eine etwas höhere x-Höhe und daher etwas mehr Platz benötigt. Dieser Rechner könnte ein guter Ort sein, um einige grundlegende Zahlen zu erhalten , bevor wir versuchen, unsere Typskala herauszufinden. Wir wollen diese Zahlen nie einfach nehmen und in unser Design stecken und hoffen, dass es gut aussieht. Wir müssen sie leicht optimieren, da dies alles ziemlich auf einigen grundlegenden Zahlen rund um diese Schriften basiert . Wir können mit unseren Augen viel mehr sehen, als diese Taschenrechner mit diesen Zahlen jemals sehen können. Wir wollen diese Zahlen nur herausnehmen und sie möglicherweise als Ausgangspunkt verwenden bevor wir genau abstimmen, wie diese Typskalen tatsächlich aussehen werden. Sobald wir wissen, was unsere Körperschrift ist, können wir diese verwenden, damit wir wissen, welche Größe unser Körpertext hat, und dann wissen wir, welche Zeilenhöhe unsere Körpertexte haben werden. Und das können wir nutzen, um zwei Dinge zu identifizieren. Welches ist das Basisraster, das wir für die gesamte Anwendung verwenden werden. Und wie lautet die Typenskala? Wie groß werden unsere Überschriften und Unterüberschriften sein? 5. Type erstellen: Im letzten Video haben wir gelernt, wie man einen Online-Taschenrechner verwendet , um einige grundlegende Höhen für unsere Überschriften von eins bis sechs und unseren Absatztext erhalten und sich auch ein Bild von der anfängliche Zeilenhöhe Was ich gerade hier auf meinem Bildschirm gemacht habe ist, dass ich etwas Text in Figma eingefügt habe. Und wenn Sie eine andere Designsoftware verwenden, ist das absolut in Ordnung. Ich werde es einfach in Figma demonstrieren , weil ich das benutze. Und ich habe sechs Textstücke für verschiedene Überschriftengrößen und einen für die Absatzgröße. Jetzt habe ich zwei Dinge mit jedem von diesen gemacht. Sobald ich die Textgröße entschieden habe, habe ich auch eine Zeilenhöhe entschieden. Sie können sehen, ob ich hineinzoome, habe ich ein vertikales Raster mit vier Pixeln an. Sie können sehen, dass die Zeilenhöhe perfekt in dieses Vier-Pixelraster passt in dieses Vier-Pixelraster da ich eine Zeilenhöhe von 64 habe. Aber ich habe auch eine graue Kiste versteckt, was der Rand wäre. Wenn Sie mit dem CSS-Box-Modell nicht vertraut sind, hätten Sie Ihre Zeilenhöhe und Ihre Polsterung usw. in der Box, die sich in diesem Bereich befinden, dann hätten Sie einige Ränder außerhalb des Kastens. Jetzt werde ich nicht zu sehr auf die Details eingehen , worum es beim CSS-Box-Modell geht. Aber alles, was Sie im Moment wissen müssen, ist, dass dieser Graubereich der zusätzliche Platz ist , den wir um die Überschrift herum hinzufügen werden. Und das muss auch rot sein. Die Höhe der gesamten Fläche für die Überschriften-Tags beträgt also 132, was auch ganz gut in unser Vier-Pixelraster passt . Was ich getan habe, ist, dass ich in eine versteckte NAT-Box gegangen bin , damit du es nicht wirklich sehen kannst. Aber Sie können sehen , dass jede Überschrift keinen Abstand zwischen ihnen hat. Und das liegt daran, dass ich für jede der Überschriften diese Randfelder hinzugefügt habe damit wir sehen können, wie sie zusammenpassen würden. Das liegt daran, dass ich für jede dieser Überschriften diese graue Randbox hinzugefügt und versteckt habe. Wir können sie leicht aufstellen und sehen, wie sie mit ihren Margen zusammenpassen würden. Was ich getan habe, ist, dass ich das für alle sechs dieser Überschriftenelemente getan habe . Und einmal für den Absatz der Absatz, wie Sie sehen können, hat der Absatz, wie Sie sehen können, oben und unten nur einen Rand von vier Pixeln . Vielleicht ist das in Ordnung. Vielleicht ist es das nicht. Wir werden es jetzt herausfinden. Und jetzt habe ich diese als Figma-Komponenten erstellt, aber wenn Sie verschiedene Designs verwenden, es gerne tun, wie Sie möchten. Was ich jetzt tun kann, ist, dass ich eine Beispielseite habe und meine Überschriftenkomponente herausziehe, diese in meine Raster einfüge , dann einen Absatz herausziehe und ihn anreihe, damit wir sehen können, dass sie jeden berühren andere. Wenn ich verkleinere, sollte ich in der Lage sein, mir eine Vorstellung davon zu machen, dass diese gut aussehen, wenn ich eine Nummer eins und dann einige Absatztexte habe , sieht das in Ordnung aus? Nun möchte ich auf dieser Seite sicherstellen, dass ich alle Kombinationen ausprobiert habe alle Kombinationen ausprobiert , damit wir sehen, wie sie jetzt aussehen, anstatt zu versuchen, unsere gesamte Anwendung zu erstellen und dann merke, dass etwas nicht funktioniert. Vielleicht habe ich einen Weg zu Rubrik drei. Was ist, wenn ich die dritte Rubrik habe , gefolgt von dem Weg nach? Jetzt fange ich schon an zu denken, dass vielleicht der Platz oben in der dritten Überschrift, die Marge nicht ganz hoch genug ist und der Rand unten vielleicht etwas zu klein ist. Was ich also tun kann, ist, dass ich hierher zurückkommen kann und in meiner Komponente die Marge verschieben kann. Und dann wird es auf all dies aktualisiert und ich kann meine Seite zurücksetzen. Jetzt denke ich, dass es wahrscheinlich noch ein bisschen optimiert werden muss, aber sobald ich es einigermaßen gut aussieht, möchte ich das mit besseren Texten ausprobieren als nur eins Überschrift zweitens, zum frühestmöglichen Zeitpunkt wenn wir ein Designsystem oder eine Typografie-Skala erstellen , möchten wir echte Inhalte darin einfügen, weil wir sehen möchten, wie es mit dem tatsächlichen aussieht Inhalte, die tatsächlich in das Design passen könnten. Überschrift. Eine davon ist eine sehr kurze Überschrift. werden wir wahrscheinlich nie haben. Jetzt gehe ich einfach auf die BBC News-Website und hole mir einen Text. Jetzt habe ich ein neues Stück Text in Überschrift eins, und wir können tatsächlich eine viel bessere Vorstellung davon bekommen wie die Zeilenhöhe funktioniert, weil sie in eine zweite Zeile geht und wir sehen können , wie die Marge um es herum funktioniert. Jetzt möchten wir idealerweise auch unsere Rubrik zwei und unsere Überschrift drei Texte aktualisieren . So können wir anfangen zu sehen, wie das mit echtem Text aussieht . Jetzt werde ich sofort sagen, dass diese Überschrift vielleicht ein bisschen zu weit von diesem Text entfernt ist. Vielleicht reduzieren wir den Rand zwischen Überschrift eins und den Absatztexten um vier Pixel. Und irgendwann werden wir vielleicht sagen wollen, naja, weißt du was, es gibt nicht wirklich genug Definition dazwischen. Die Überschrift drei und die Überschrift zum Text. Ich denke, ich muss die Überschrift drei Texte ein wenig größer oder die Überschrift Volltext etwas kleiner machen. Nun, wir können das einfach in unserer Komponente tun und sehen, wie es auf unserer Beispielseite aussieht. Und es spielt keine Rolle, ob es nicht in den Typenrechner passt , mit dem wir ursprünglich angefangen haben, weil unser Auge viel wichtiger ist als die Mathematik, wenn es auf der Seite gut aussieht und wir können erkennen Sie leicht die visuelle Hierarchie und den Unterschied zwischen den Überschriften. Das ist wichtig. Also verwenden wir diese Skala vom letzten Video als Ausgangspunkt, aber wir werden sie jetzt optimieren und etwas finden, das für uns und für diese Schrift besser funktioniert. Wenn Sie diese Übung machen und dies mit Ihrer Typskala tun, ist eine sehr wichtige Sache, an die Sie sich immer erinnern sollten, dass es vier Pixelraster gibt , das ich erstellt habe. Und Sie können ein Sechs-Pixel-Raster wählen oder ein 3,5-Pixel-Raster wählen. Ich verwende vier Pixel oder verwende eine volle Anzahl von Pixeln, da es schneller ist, das Raster auf Figma einzurichten Ich verwende das vertikale A6-Referenzpixelraster. Und denken Sie daran, wenn es irgendwann besser aussieht, wenn etwas nicht in dieses Raster passt, dann passen Sie es nicht in das Raster. Wir verwenden das vertikale Gitter als Richtlinie, um es ohne zu viel Aufwand besser auszusehen , sobald wir denken, dass es besser aussieht , das Raster zu ignorieren oder das Raster zu durchbrechen, dann sollten wir es unbedingt tun dass wenn ich fein abstimmt. Wenn ich entscheide, dass diese Überschrift drei drei Pixel oben und nicht einen vollen Pixelrand haben sollte drei drei Pixel , dann sollten wir das absolut tun. Das vertikale Raster, der vertikale Rhythmus der Seite ist alles da, um uns zu helfen. Es ist nicht da, um vollständig zu diktieren, wie wir arbeiten. Nehmen Sie also eine der Schriften, mit denen Sie arbeiten und öffnen Sie jede von Ihnen verwendete Designsoftware. Beginnen Sie mit einem dieser Type Scale-Rechner. Wenn Sie es als nützliche Ausgangspunkte finden erstellen Sie Ihre Überschriftentexte von eins bis sechs und Ihre Absatztexte als unsichtbares Feld um ihn herum, das als Rand verwendet wird, und probieren Sie sie dann aus verschiedene Bestellungen. Wie sieht es aus, wenn Sie eine Überschrift drei mit einer Überschrift darunter und dann fünf Textabsätze haben. Wie wird es aussehen? Sieht es zu kondensiert aus? Sieht es zu ausgebreitet aus? Ist es offensichtlich, dass sich die Überschrift auf den darunter liegenden Text bezieht , der nicht darüber liegt. Möglicherweise etwas, bei dem diese Rubrik drei gerade scheitert und möglicherweise eine etwas größere Marge an der Spitze benötigt . Und dann besteht eine Technik, die oft von Typdesignern verwendet wird, darin, Ihre Augen leicht zu schielen oder zu speichern und in Photoshop zu stecken oder so, damit Sie eine Unschärfe verwenden können. Wenn wir nun die Körpertexte verwischen, wollten wir eine schöne konsistente hellgraue Farbe haben damit sie für uns nicht zu schwer aussieht. Aber ein weiterer guter Punkt ist es , unserer Hierarchie zu helfen. Im Idealfall möchten wir, dass die Dichte oder die Dunkelheit der Hauptüberschrift dunkler aussieht als der Absatztext. Wenn Sie mit den Augen schielen, erhalten Sie eine etwas andere Konsistenz für den Überschriftetext und die Absatztexte , die Ihnen zumindest sagen sollten, dass es genügend Differenzierung gibt. Denken Sie daran, dass sich die Leute nicht auf die ganze Seite konzentrieren . Sie konzentrieren sich nur darauf, wo das absolute tote Zentrum ihres Auges zu dieser Zeit schaut, es heißt Fovea. Alles andere auf der Seite erscheint für sie verschwommen und sie müssen sofort erkennen können , wo sich die Überschriften befinden. Wenn die Seite verschwommen ist oder sie unterschiedliche Konsistenzen im Grau für die verschiedenen Überschriften aufweisen. Ich möchte, dass Sie eine zufällige oder eine Schriftart auswählen , mit der Sie gearbeitet haben , und versuchen, einfach diese sehr einfache Typskala zu erstellen. Legen Sie dort etwas echten Text ein und probieren Sie so viele Layouts wie möglich mit der Überschrift zu Überschrift drei, insgesamt vier, um sicherzustellen, dass es gut aussieht. Bevor Sie nun mit der Erstellung des restlichen Typsystems, Ihres Designsystems beginnen der Erstellung des restlichen Typsystems, und dann die Anwendung entwerfen. 6. Type erstelle 2: In den letzten Videos haben wir eine typografische Skala erstellt, die wir für unser Typsystem und unser Designsystem verwenden können . Bisher haben wir eine visuelle Hierarchie nur unter Verwendung der Schriftgröße eingerichtet . Jetzt bin ich auf dem Bildschirm hier gegangen und habe die gleiche Übung gemacht. Ich habe die Überschriften eins bis sechs und einige Absatz-Tags erstellt. Ich habe versucht, eine visuelle Hierarchie zu erstellen , in ich die Typgröße nicht ändere, groß. Ich habe die Absatztexte irgendwie groß gemacht , weil ich weiß, dass ich sie durchgehend verwende. Es ist also 18 Referenzpixel hoch. Aber ich habe den Typ Größe vier gemacht, alle Texte 18 Referenzpixel. Und ich habe versucht, eine visuelle Hierarchie zu erstellen. Nur ein paar Ideen für andere Dinge, die wir tun können , um mit unseren Texten eine Art visuelle Hierarchie zu schaffen. Der erste der wahrscheinlich wichtigsten ist wie groß dieser Rand um den Text herum ist, ist Überschrift eins, er muss nicht unbedingt viel größer sein, aber wenn er einen großen Platz um ihn herum hat, ist er sofort sieht wichtiger aus und passt höher in unsere Hierarchie, oft in einer Typskala, in einem Typsystem, wobei Überschrift sechs nicht einmal größer ist als der Absatztext. Es gibt viele Typsysteme, in denen wir sechs sind , die tatsächlich kleiner sind als der Absatztext, aber vielleicht ist es fett in allen Großbuchstaben oder hat etwas daran, das es hervorhebt. Manchmal könnte das nur sein , dass es mehr Platz hat. Ich denke, diese Rubrik sechs sieht immer noch wie eine Überschrift aus. Ein paar andere Dinge, die zu beachten sind. ich hier eins gehe, habe ich eine Menge Tracking. Es gibt einen großen Abstand zwischen den Buchstaben. Während ich zu Rubrik sechs komme, zerquetsche ich tatsächlich Salat ziemlich eng beieinander. Es gibt offensichtlich Farbe in den ersten beiden Überschriften und dann einen anderen visuellen Indikator in den nächsten beiden Überschriften und die letzten Überschriften, die ich kursiv gemacht habe , nur um ihnen etwas zu geben das die Aufmerksamkeit lenkt sie und lässt sie etwas eher wie eine Überschrift aussehen. Ich habe die Weißen ein wenig benutzt. Dieser ist oben sehr schwer, und wenn wir auf den Grund gehen, ist es ein ziemlich dünner Text. Wir könnten potenziell einen einrücken. Dies könnte leicht eingerückt oder sogar negativ eingerückt werden. Es geht also an den Rand und das wird es sofort hervorstechen und es offensichtliche Schicksale wichtiger machen. Und eigentlich passt es einfach nicht das Raster, ob es vertikal oder horizontal ist, es wird ihm Bedeutung beimessen. Es ist also möglich, dass wir für einige Texte eine visuelle Hierarchie erstellen können für einige Texte eine visuelle Hierarchie erstellen , indem wir sie einfach nicht an dem vertikalen Raster arbeiten, das wir erstellt haben. Jetzt möchte ich, dass du es auch ausprobierst. Sehen Sie, ob Sie zwei verschiedene Möglichkeiten finden, Überschriften zu identifizieren, was ich versucht habe, werden Sie dies im wirklichen Leben nie tun. Dies ist nur zum Üben gedacht, aber mal sehen, ob wir eine visuelle Hierarchie erstellen können, eine Typskala, ohne die Schriftgröße zu berühren. Und dann erstelle ich wie im letzten Video eine neue Desktop-Ansicht. Ich werde sehen, wie diese Elemente aussehen wenn ich sie übereinander lege, wie sieht es aus, wenn ich Überschrift eins und dann Absatztext habe ? Wie sieht es aus, wenn ich Überschrift zwei habe, gefolgt von Überschrift drei, gefolgt von mehr Absatztext. Jetzt habe ich das nicht wirklich ausprobiert. In Ordnung, aber ich kann sofort sehen, dass dies hier viel zu zerquetscht ist. Ich möchte zum Beispiel einen kleinen Spielraum oben in der zweiten Rubrik hinzufügen . Und möglicherweise könnte diese rote Linie , die den ganzen Weg durchläuft ein bisschen zu viel Teiler sein, um sie in der Mitte eines Artikels zu haben. Ähnlich wie im letzten Video. Irgendwann möchten wir diesen Text bearbeiten, um etwas realistischeres zu sein. Sehen Sie nur, ob Sie eine Typskala erstellen können, eine visuelle Hierarchie, die gut aussieht und funktioniert, aber ohne die Textgröße berühren zu müssen , weil es so viele andere Dinge gibt , die wir tun können. Ich bin mir nicht sicher, ob ich es hier noch voll erreicht habe, aber spiele damit herum. Es wird nicht gut aussehen und es wird nicht perfekt sein. Aber es ist eine wirklich schöne Übung Ihr Gehirn dazu zu bringen, über andere Dinge als die Textgröße nachzudenken , bevor wir weitermachen und ein echtes Typsystem erstellen. 7. Design-System: Ein großer Unterschied zwischen gedruckter Topographie und Web-Typografie besteht oft in einer Zeitschrift oder einem Buch. Der Typ wird zuerst geschrieben. Der Schriftsetzer erhält alle Artikel und alle Texte, die bereit sind, ein typografisches System zu erstellen. Während die Artikel und der Inhalt oft mit einer Webanwendung oder einer Website viel später kommen werden. Wenn es sich um Web-Typografie handelt , brauchen wir ein viel solideres System, wie die Bildunterschriften, wie die Zitate und wie all diese Dinge aussehen, weil wir nicht wissen, wie der Inhalt aussehen wird. Wir wissen nicht, ob die Zeitung eines Tages einen wirklich langen Weg haben wird und anderen Tagen einen sehr kurzen Kurs haben wird. Wir brauchen eine Reihe von Regeln, da wir als Designer oder sogar Front-End-Entwickler nicht verfügbar sein werden, wenn jeder Artikel veröffentlicht wird. Ausarbeitung eines soliden typografischen Systems ist ein sehr wichtiger Teil unseres Designsystems. Und ich beginne wieder mit ein bisschen Inspiration, wenn Sie zu Design-Systemen repo.com kommen, sehen Sie tatsächlich Links zu Hunderten und Hunderten verschiedener Designsysteme. Tschüss, manchmal ziemlich große Unternehmen, Uber, IBM ist genau hier. Viele Audi, viele große Unternehmen veröffentlichen ihre Designrichtlinien, die Systeme so gestalten, dass jeder sie sehen kann. Und wir können uns einige davon ansehen, um Inspiration für die Schaffung eines eigenen Designsystems zu erhalten. Und ein großer Teil davon ist, dass ich ein typografisches System habe. Ich schaue mir jetzt einen an, weil es einer der wahrscheinlich berühmtesten ist. Es ist Google, Googles Materialdesign, Designsystem. Und ich schaue mir gerade die Typografie-Sektion an. Jetzt ist das Beste, was sie haben, die Typskala. Wir haben schon ein bisschen darüber gesprochen und wir werden es in diesem Abschnitt gut abstimmen. Sie werden sehen, dass sie eine Skala aller Überschriften und des gesamten Haupttextes und des unteren Textes haben und wie all diese aussehen werden. Wir haben hier tatsächlich eine praktische kleine Tabelle , die zeigt, dass es zwei Arten von Texten gibt. Das ist ein Knopf. Der Knopf ist in allen Großbuchstaben. Und es sagt uns nicht nur, welche Schrift wir verwenden sollen, wo, ob es leicht, normal oder mittel ist. Es gibt uns die Größe und die Referenzpixel an, ob die Schaltfläche oder die darüber liegenden Großbuchstaben vorhanden sind. Und sagt uns tatsächlich auch den geringeren Abstand da diese Überschriften ziemlich groß sind, also werden wir ihn ein wenig verschärfen wollen. Während dieser Buttontext, obwohl Buttons, wir über begrenzte Immobilien verfügen, ist er in allen Großbuchstaben. Der Buchstabenabstand oder die Verfolgung wurde dort ein wenig erhöht. Wir können uns das ansehen und uns eine Vorstellung davon geben, wie Google das nutzt. Ein paar interessante Dinge die Sie beachten sollten, sind zunächst, obwohl dieses Diagramm Referenzpixel enthält, schlagen sie vor, später mehr RAM-Einheiten zu verwenden. Aber wenn wir ein wenig runterkommen, haben sie ein paar Dinge darüber, wie man die Typskala anwendet. Dies sind Regeln, die in das Designsystem geschrieben werden, damit die Leute, die es benutzen , genau einige Ideen sehen können, wie man es benutzt. Nun, eine Sache, die ich für das Materialdesign von Google für ziemlich interessant halte , ist, wenn sie die Überschriftenschrift ersetzen. Möglicherweise haben Sie bemerkt , dass sie Roboto für Überschriften und Textkörper verwendet haben. Sie schlagen jedoch vor , wenn Sie die Überschriftenschrift ersetzen die Überschriftenschrift genau dieselben Anforderungen, genau die gleiche Typgröße, zu verwenden . Und ich würde davon ausgehen, dass das gleiche Tracking, Zeilenhöhe und alles andere ist. Trotz der Tatsache, dass sie in diesem Design eine sehr, sehr schwer gewichtete Schrift haben . Und diese haben dies für ein leichtes Scripting mit einer sehr hohen x-Höhe. Sie schlagen vor, genau dieselbe Typgröße zu verwenden , die Sie mit Roboto verwenden würden. Wenn ich jedoch ein wenig weiter nach unten scrolle, deutet dies darauf hin , dass bei Dingen wie den Untertiteln eine kleine Warnung ausgegeben wird, dass Sie eine nicht verwenden möchten, um eine Schriftart für die Untertitel auszudrücken. Das tun sie. Versuchen Sie, die Regeln einzuschränken , wenn Sie zum Hauptteil und dem kleineren Titeltext gelangen. Aber insgesamt ist dies ein sehr guter Ort, um sich inspirieren zu lassen, wie ein Typsystem jetzt in den nächsten Videos aussehen wird , sicherlich am Ende dieses Abschnitts, wir werden ein sehr solides Typensystem für unsere eigenen Anwendungen haben , an denen wir arbeiten. Eine Möglichkeit, wie sich die Web-Typografie massiv von der gedruckten Topographie unterscheidet , ist oft die Web-Typografie Wir müssen das Typsystem ausarbeiten lange bevor ein Großteil des Inhalts jemals geschrieben wird. Ein Webtyp-System muss viel mehr Regeln haben viel mehr Regeln bevor wir unsere eigenen Typsysteme fertigstellen. Es lohnt sich, sich ein wenig inspirieren zu lassen, indem einen Blick darauf werfen, wie Google Typ System funktioniert, oder Uber oder irgendein anderes ziemlich großes Unternehmen , von dem du glaubst, dass es ein sehr gutes Design hat. 8. Figma: In diesem Video und in den nächsten beiden Videos zeige ich Ihnen, wie Sie einige der erweiterten Open-Typ-Funktionen für verschiedene Softwareteile verwenden erweiterten Open-Typ-Funktionen können. In diesem Video werde ich über Figma sprechen. Wenn Sie Figma nicht verwenden, wechseln Sie entweder zu Adobe XD oder Sketch , um zu sehen, wie Sie diese Funktionen für diese Anwendungen aktivieren . Jetzt habe ich in Figma diese eine Textzeile geschrieben , in der Figma steht, und sie ist in Roboto geschrieben. Roboto verfügt über einige offene Funktionen, die wir einschalten können. Wenn ich hier unten auf diese drei Punkte klicke. Eigentlich ist Figma absolut am einfachsten mit diesem Zeug zu arbeiten, denn wenn ich auf diese drei Punkte klicke, erscheint dieses wirklich lange Menü mit all den Dingen, die für diese Schrift verfügbar sind. Wir können nur für ein kurzes Beispiel Ligaturen einschalten. Und was das tun wird, wenn man sich das F und das I von Figma anschaut, wird diese dort einfach ganz gut verbinden. Obwohl wir eine ziemlich Standardschrift verwenden, Roboto, eine ziemlich häufig verwendete Schrift. Wir können diese Leistung einschalten und es wird ihm ein bisschen mehr Charakter geben, was ganz nett für uns ist. Und dann gibt es noch eine andere, die seltene Ligaturen genannt wird. Werfen Sie einen Blick darauf, warum Sie später zu diesen wechseln und alle Funktionen, die für verschiedene Schriften verfügbar sind . Aber nur damit Sie wissen, wenn Sie ein Figma-Benutzer sind, greifen Sie so auf die offenen Funktionen einer Schrift zu. Wenn eine der Funktionen wie die derzeit ganz unten auf dem Bildschirm gezeigten Funktionen ausgegraut ganz unten auf dem Bildschirm gezeigten ist. Das bedeutet, dass die spezifische Schrift, der spezifische Text, der derzeit ausgewählt ist, keine Option für dieses Feature zum offenen Typ hat. Wenn Sie nicht wissen, was offener Typ bedeutet, sich keine Sorgen, wir werden in diesem Abschnitt darüber sprechen . 9. Skizze: Wenn Sie nun ein Skizzenbenutzer sind, möchten wir irgendwann die Features des offenen Typs für einige Texte in Skizze aktivieren. Ich habe gerade Skizze 50 geschrieben , weil das die Version der Skizze ist, die ich verwende. Ich habe eine Weile nicht mehr für die Skizze bezahlt. Sie sehen die Dinge vielleicht etwas anders, wenn Sie eine neue Version von Skizze haben, ich habe diesen Text in Playfair Display geschrieben. Wenn ich das jetzt auswähle, kann ich zu View Show Fonts kommen. Und es wird mir all die verschiedenen Schriftarten zeigen die mir gerade zur Verfügung stehen. Und wenn ich ganz oben auf das Zahnrad klicke und Typografie auswähle. Dies sind alle offenen Funktionen, die derzeit für das Playfair-Display verfügbar sind. Wenn ich das einfach hierher verschiebe, wenn ich diesen Text nur auswähle, möchte ich diese Zahlen vielleicht in Kleinbuchstaben ändern , weil er inline ist. Auch Kleinbuchstaben werden eigentlich alte Stilfiguren genannt. Wir werden später mehr darüber sprechen. Aber wenn ich das wähle, wirst du sehen, dass es diese Zahlen in Kleinbuchstaben umwandelt . Wenn Sie hier verschiedene Typografiefunktionen sehen , als die, die ich derzeit habe. Das liegt wahrscheinlich daran, dass Sie eine andere Schrift ausgewählt haben . Wenn ich zum Beispiel stattdessen Roboto auswähle, wirst du sehen, dass ich verschiedene Optionen zur Verfügung habe. Wenn Sie jetzt nicht verstehen, was alte Zahlen noch sind, ist das in Ordnung. Wir werden in Kürze ein Video dazu haben. Aber jetzt wissen Sie, wie Sie auf alle offenen Typ-Features in Sketch zugreifen können. Es ist also einfach anzusehen, Schriftarten anzuzeigen und dann oben auf das Zahnrad zu klicken und auf Topographie zu klicken. Und das wird dieses Fenster hochbringen. 10. Andere Software: Ich habe einige Zeit damit verbracht herauszufinden, wie man offene Funktionen in Adobe XD oder in InVision Studio einschalten kann. Und ehrlich gesagt, wenn Sie dies tun möchten, müssen Sie möglicherweise einen Code schreiben, unglaublich kompliziert werden kann. Meine persönliche Meinung ist, dass, wenn Sie Sketch oder Figma derzeit nicht für UI-Designs verwenden, jetzt ein guter Zeitpunkt ist, um einfach zu lernen, wie man Figma benutzt. Denn um ganz ehrlich zu sein, haben Adobe XD und InVision Studio ihren Traum , ein vollständig skizzierender Konkurrent zu sein, nie wirklich verwirklicht . Und ich denke, dass ihr Mangel an Unterstützung für offene Funktionen nur einer von vielen Gründen ist , warum diese Software vielleicht noch nicht für das UI-Design verwendet werden kann. Natürlich ist dies möglicherweise nicht möglich, je nachdem, wo Sie arbeiten, aber selbst wenn Sie gezwungen sind , eine dieser Software für die Arbeit zu verwenden, lernen Sie vielleicht ein bisschen über Figma oder ob Sie entscheiden sich dafür zu skizzieren, nur damit Sie mit den offenen Funktionen herumspielen können , über die wir in diesem Modul sprechen werden . 11. Styling: Für den Rest dieses Abschnitts werden wir einige Schnellfeuer-Videos darüber haben, wie Sie Stil und visuelles Interesse hinzufügen können, um Ihrer visuellen Hierarchie zu helfen , Ihre typografische Skala in ein vollständiges System umzuwandeln , das bereit ist in einer Anwendung oder einer Website verwendet werden. In diesem ersten Video möchte ich darüber sprechen, was wir allgemein als Typstil bezeichnen, der fett und kursiv ist. Es gibt ein paar wirklich schnelle Regeln, die ich für eine davon aufstellen möchte ist, dass Sie, wenn Sie wirklich schwere Überschriftentexte haben, Sie nicht fett machen wollen. Wenn ich die Überschrift zu Montserrat ändere, hat Montserrat ein extra fettes Schwarz auch wenn sie es Black Option nennen. Jetzt ist es ziemlich intensiv, deine Nummer eins so dick zu machen . Es verlangt ein bisschen zu viel Aufmerksamkeit. Und um ehrlich zu sein, diese Schrift, Montserrat, hat nicht die Art von Detail um in diesem Maßstab zu arbeiten, und dass das Warten nicht gut auf diese Größe skaliert wird, aber es ist auch unglaublich dicht und unglaublich unglaublich druckvoll. Eine Sache, die Sie tun könnten, wenn Sie dies tun müssten, ist, dass Sie die Farbe tatsächlich so leicht senken könnten . Wenn ich das realistisch etwas helleres Schwarz mache, wird es ungefähr die gleiche Farbe wie der Rest des Textes aussehen , weil es so viel dichter ist, es wird sowieso schwärzer aussehen. Manchmal, wenn Menschen viel zu dichte Textbereiche haben, können sie diese Farbe ein wenig reduzieren, um ihr entgegenzuwirken. Aber du solltest das wirklich nicht machen. Natürlich könnten wir unsere Hauptüberschrift in einem schwarzen Montserrat haben , aber einfach nicht so groß, wie wir neue Stile einführen uns bei unserer visuellen Hierarchie helfen, wir müssen uns nicht auf die Größe verlassen so viel mehr. Aus ähnlichen Gründen, wenn ich diese Rubrik sechs oder sogar einen Teil meines kleineren Textes bekommen habe. Und ich habe diese Monstera auch gemacht. Und ich entscheide mich für Montserrat, weil ich weiß, dass es viele Weiße hat. Wenn ich Montserrat extra leicht gemacht habe, wird es an dieser Rubrik sechs einfach nicht funktionieren, je nachdem, wie gut die Monitore von jemandem sind, sie können das möglicherweise nicht einmal richtig sehen. Es wird möglicherweise nicht korrekt auf dem Bildschirm gerendert. Die Linien sind viel zu dünn. Wenn wir sicherstellen, dass wir unsere größte Überschrift und die kühnsten Texte und unsere kleinste Überschrift nicht in den leichtesten Text setzen, wird es natürlich unsere größte Überschrift und die kühnsten Texte und unsere kleinste Überschrift nicht in den leichtesten Text setzen die kühnsten Texte und unsere kleinste , nicht funktionieren. Sie sollten sich darüber im Klaren sein, wenn Sie sich noch in der Entwurfsphase befinden, ob Sie eine Schriftart haben , die keine fett gedruckte Schriftdatei hat oder keine kursive Schriftdatei hat. Einige Browser werden das für Sie korrigieren. Es wird Ihnen nicht sagen, dass Sie keine kursive Schriftdatei haben. Es wird tatsächlich die Buchstaben schräg, Kursivschrift sind keine schrägen Versionen derselben Buchstaben. Sie sind eine völlig neue Original Cliff , um das Styling einer Kursivschrift zu haben. Es geht nicht nur darum, den Buchstaben zu schrägen, sondern der Browser wird dies für Sie in einer schrecklichen Funktion tun , die einige Browser haben, wo sie den Text nur für Sie schrägen. Und gelegentlich sind einige Browser sogar bekannt, dass sie den Text für Sie bolden, ohne die fett gedruckte Schrift zur Verfügung zu haben. Wir möchten vorsichtig sein, wenn wir ziemlich große Textgewichte haben ziemlich große Textgewichte , die wir nicht auch ziemlich fett machen, es wird ein bisschen zu viel sein. Und wenn wir einen ziemlich kleinen Text haben, wollen wir ihn nicht zu dünn machen. Wenn wir jemals einige Texte etwas zu dicht auf der Seite machen , können wir die Dunkelheit oder Leichtigkeit der Farbe so leicht anpassen . Und es wird von unseren Benutzern fast bemerkbar sein da der dichtere Text ohnehin dunkler erscheinen wird. Also korrigieren wir das nur. Und wenn wir kursiven Text oder eine bestimmte Gewichtung von fett gedrucktem Text verwenden , möchten wir sicherstellen, dass wir die richtige Schriftdatei haben , da sie manchmal unbemerkt bleiben kann , wenn der Browser die Tatsache, dass wir es nicht tun. 12. Ligaturen: Werfen wir einen Blick auf einige dieser Funktionen, die wir gerade gesehen haben, wie wir sie in Figma und Skizze aktivieren können. Ich wähle diese Typ-II-Überschrift aus. Ich habe es in einen faireren Sand umgestellt. Ich benutze Angst ein Gefühl aus dem Grund, dass es hier viele Alternativen zu den Typstilen gibt. Wenn ich einfach FF schreibe, FF II sogar du wirst sehen, wie das F irgendwie in die Augenpunkte kollidiert. Nun möchten Sie dies möglicherweise so gestalten , dass f nicht in den Punkt des I stürzt. Oder Sie möchten, dass es so aussieht. Dort sind Ligaturen nützlich. Ich habe gerade FI ausgewählt und im Typ-Details-Panel schalte ich Ligaturen ein. Und du wirst sehen, dass das I und F Now zu einem einzigen Buchstaben kombiniert werden. Und tatsächlich hat diese Schrift auch so genannte seltene Ligaturen, wo ich das FF auch einschalten kann, wenn ich möchte, dass die FF zusammen kombiniert werden soll. Und das ist jetzt in eine einzige Glyphe von drei Charakteren zusammengefasst . Jetzt lohnt es sich, sich ein wenig anzusehen , wenn Sie Ihre Schrift auswählen. Denn manchmal können diese subtilen Änderungen tatsächlich eine Schrift ganz anders aussehen lassen. Und dann gibt es Ihnen einige potenziell interessantere Optionen. Möglicherweise möchten Sie, dass die Ligaturen nur für Teile der Texte erscheinen , aber nicht für eine andere. Oder Sie möchten sie vielleicht überhaupt nicht benutzen, aber es lohnt sich, einen Blick darauf zu werfen. Nun, Farah-Sounds hat tatsächlich einige andere Dinge. Zum Beispiel die, diese interessanten Symbole hier, die - und ausgeschaltet werden können. Ich weiß ehrlich gesagt nicht, was das so weiter ist. Oder vielleicht muss ich zum Beispiel die Kurzschrift für Nummer als nein verwenden. Wenn ich das einschalte, kann ich N O dot schreiben und es wird das hier automatisch in dieses Symbol umwandeln. Wenn wir eine Anwendung oder eine Website erstellen , auf der viele Mathematiksachen , möchten wir wahrscheinlich Notizen machen, dass es bestimmte mathematische Symbole gibt , die einige Schriftarten zulassen werden wir um ein- oder auszuschalten. Auch hier haben wir stilistische Variationen, wo auch immer sehr traditionell hier eine Form ist. Aber wenn wir möchten, können wir dies mit dem G. einfacher machen . Sie können sehen, wie es geringfügige Änderungen gibt , die Sie an einer Schrift vornehmen können , um mehr Interesse zu erzeugen, erzeugen möglicherweise eine gewisse Variation. Aber sicherlich werden dies einige davon mathematische Symbole sein, die Sie möglicherweise für die Anwendung benötigen , die Sie erstellen. Wenn Sie jetzt eine Software verwenden und eine Schriftart verwenden und Sie sich ziemlich sicher sind , dass sie diese Optionen haben sollte, aber Sie sehen sie nicht. Es ist erwähnenswert , dass es von der Art der Schriftdatei abhängt , die Sie haben. Und wir werden in der Implementierungsphase über ein bisschen mehr sprechen . Diese werden jedoch manchmal als Open-Typ-Features bezeichnet . Der Dateityp des offenen Typs ermöglicht es Ihnen, diese zu haben, ebenso wie der Dateityp W OFF. Wenn Sie eine ältere Schriftartdatei verwenden, haben Sie möglicherweise nicht unbedingt die Ligaturen für diese Schrift verfügbar. Und das bedeutet natürlich, dass wir sicherstellen möchten , dass wir auch die richtige Schriftdatei auf unseren Websites laden . Das sind Ligaturen und stilistische Alternativen, wo immer Sie es mit der Schrift zu tun haben, prüfen Sie, ob es einige zusätzliche Glyphen gibt , um einige der Buchstaben zu kombinieren oder Alternativen für einige der Buchstaben, die möglicherweise besser mit den Designs funktionieren, die Sie erstellen werden. Vorausgesetzt, wir verwenden eine offene Schrift- und OTF-Datei oder eine Datei im Web Open Font-Format und ein W0 OFF, haben wir Zugriff auf Funktionen des offenen Typs wie Ligaturen und stilistische Alternativen. Es lohnt sich, einen Blick darauf zu werfen was dort verfügbar ist, da einige davon unserer Schrift helfen werden , die Botschaft zu vermitteln, die wir vermitteln möchten. Und manchmal gibt es einige Arten von Symbolen , die wir tatsächlich für unseren Text verwenden müssen. 13. Kleine Kappen: Manchmal sieht man dies in geschriebenen Büchern und manchmal sieht man es vielleicht auf Websites, aber das Starten eines Absatzes oder eines Textabschnitts mit ein paar Worten von Small Caps kann uns dazu beitragen, in anderthalb, ein ein bisschen visuelles Interesse am Anfang des Textes. Also werde ich diese Schrift tatsächlich ändern. Es ist gerade später drin, und ich werde es in Allegorie ändern, oder das liegt daran, dass Sie feststellen werden, dass die Schrift jetzt komplett geändert ist. Und ich wähle einfach die ersten drei Wörter aus. Und das wird noch einmal, denken Sie daran, dass dies in der Skizze anders funktionieren wird, aber ich klicke hier unten. Und ich werde hierher kommen und es gibt hier einen Stil für Small Caps. Was wir jetzt haben, ist, dass wir dieses funky bisschen haben, wo der Absatz mit drei Wörtern in Small Caps beginnt. Jetzt gibt es mehrere Gründe, warum wir uns entscheiden könnten, kleine Lager zu Beginn oder in der Mitte eines Satzes oder möglicherweise für unsere Überschriften zu haben kleine Lager zu Beginn oder in der Mitte eines Satzes . Wenn wir jemals zwei Schriften im selben Absatz verwenden wollten und die andere Schrift von Small Caps mit den Kleinbuchstaben dieser anderen Schrift einstimmen . Wir werden versuchen, die Small Caps mit der x-Höhe auszurichten . Sieht eigentlich so aus, als wären wir hier schon ziemlich nah dran. Möglicherweise möchten wir eine kleine Menge an Tracking erhöhen , um die Unterscheidung zwischen diesen Elementen zu unterstützen. Ich setze vorerst nur zwei Leerzeichen ein. Nur um sicherzustellen, dass wir sie leicht trennen. Wir könnten Small Caps für eine der Überschriften oder so verwenden , aber es wird häufiger als kleiner Anfang für einen Textabsatz verwendet . Wir könnten möglicherweise eine andere Schrift für die Small Caps verwenden , wenn die, die wir verwenden, keine kleinen Kappen hat, zum Beispiel wenn wir die x-Höhe mit der Oberseite der kleinen Kappen auskleiden möchten . Und da es sich um Caps handelt, möchten wir das Tracking möglicherweise so leicht erhöhen und möglicherweise etwas mehr Platz am Ende des Abschnitts der Small Caps haben. 14. Buchstaben-Abstand: Lassen Sie uns Abstand, Zeichenabstand und Nachverfolgung drei verschiedene Namen für im Wesentlichen genau dasselbe sind . Wenn Sie dies überprüfen, ist der Abstand zwischen jedem einzelnen Buchstaben. Wenn ich oben auf der Seite eine große Überschrift habe, ist dies vielleicht der am häufigsten verwendete Grund für das Tracking. Wenn ich eine übergroße Überschrift habe, eine ziemlich große Überschrift, werde ich das Tracking etwas unter 0 reduzieren. Also nehme ich einen Teil des überschüssigen Leerraums zwischen den Buchstaben heraus. Die verschiedenen Gründe, warum Sie dies in einer übergroßen Überschrift tun könnten. Eine davon ist, dass es einfach größer ist, sodass mehr Platz zur Verfügung steht , um es zu zerquetschen. Natürlich haben Sie wahrscheinlich einen begrenzten Speicherplatz auf Ihrem Bildschirm, insbesondere auf Mobilgeräten. Es kann also mehrere Gründe geben, warum Sie es reduzieren müssen. Der gesamte Bildschirm wird also nicht von einer Überschrift aufgenommen. Aber auch die meisten anderen Websites entfernen einige Tracking aus den großen übergroßen Überschriften. Es könnte also jetzt etwas seltsam aussehen, wenn Leute große Überschriften sehen, die das Tracking nicht reduziert haben. Im Allgemeinen werden wir für unsere Hauptüberschrift das Tracking leicht reduzieren. Und dann für zwei und die Überschrift drei werden Sie jedes Mal etwas weniger verfolgen. Je weiter du runterkommst, desto mehr Platz hast du zwischen diesen Buchstaben. Wenn Sie zu irgendeinem Zeitpunkt eine Überschrift haben, die in allen Kappen oder sogar ziemlich fett ist, ziemlich schwergewichtig allen Kappen oder sogar ziemlich fett ist, , dann wird es ein bisschen zu viel aussehen. Sie werden also zusätzliche Nachverfolgung dieser Briefe wünschen . Auch hier können wir dies tun, indem wir die Seite verwischen oder unsere Augen schielen und sehen ob sie eine einigermaßen konsistente graue Farbe darüber hat. Wir wollen keine großen, dichten Blöcke dunkler Farbe. Und so kann das Tracking uns helfen , sicherzustellen, dass wir diese entfernen. Wenn es um Benutzeroberfläche, Textschaltflächen und Menüs und ähnliches geht , gibt es wahrscheinlich einen Grund, das Tracking manchmal zu erweitern und manchmal zu reduzieren. Möglicherweise haben Sie sich für alle Obergrenzen Ihres UI-Textes entschieden. Es könnte möglicherweise ziemlich klein oder ganz Leben sein, je nachdem, wofür Sie sich entschieden haben. Wenn es ziemlich klein ist und alles Caps ist, müssen Sie sie ein wenig ausräumen. Sie möchten, dass Ihre UI-Elemente auffallen und leicht zu identifizieren sind. Aber auf der anderen Seite könnte dies aus diesen Gründen sein, dass Sie den Text etwas größer gemacht haben, wie ich es getan habe. Vielleicht machst du alles Caps und dann kannst du nur so viele Menüpunkte auf den Bildschirm bringen. Vielleicht möchten Sie das Tracking reduzieren und diese UI-Elemente ein wenig zusammendrücken. Tracking ist also eine wirklich gute Möglichkeit Dichte auf der Seite zu reduzieren und auch den Speicherplatz zu reduzieren, den einige weniger dichte Textstücke einnehmen können, aber es könnte auch für die visuelle Hierarchie verwendet werden. Zum Beispiel habe ich hier meinen überliegenden Text, der über einigen Texten eine andere Farbe haben kann. Wir werden uns später einige der anderen Optionen ansehen. Aber vielleicht möchte ich, dass dieser Text auffällt und ganz anders aussieht. Vielleicht füge ich einfach eine Art lächerliches Tracking ein. Und es wird eine visuellere Hierarchie schaffen , da sie sofort ganz anders aussieht als die anderen Elemente. Sowie die Notwendigkeit einer Verfolgung, um die Dichte auf der Seite und unsere Raumnutzung zu steuern . Es kann uns auch helfen, eine interessantere visuelle Hierarchie aufzubauen . Wir können den Buchstabenabstand, den Zeichenabstand oder die Verfolgung, wie Sie es nennen möchten, verwenden, um die Dichte verschiedener Textblöcke zu erhöhen oder zu reduzieren . Wir können damit aber auch helfen , unsere visuelle Hierarchie zu etablieren und Textelemente mit etwas mehr visuellem Interesse zu erstellen . 15. Kerning: Wir haben uns nur den Buchstabenabstand angeschaut oder verfolgt, wie viel Platz zwischen jedem Buchstaben vorhanden ist. Aber Kerning ist der Unterschied zwischen dem Leerzeichen bestimmter Buchstaben. Zum Beispiel wollen wir nicht, dass ich und dieses d zu nahe sind, weil es ziemlich große Buchstaben sind, aber so etwas e und dieses a kann etwas näher kommen, weil sie diese abgerundete Kante haben und es gibt weniger von der Dichte des Charakters am Rande der Glyphe aus diesen Gründen, wenn wir herausfinden, wie viel Platz zwischen jedem Buchstaben vorhanden ist. Wir machen uns damit keine Sorgen. Wir kümmern uns nicht um die Lücke. Wir beschäftigen uns mit der Gegend. Wir machen uns damit Sorgen. Lassen Sie mich den Text einfach weiß machen, damit Sie es einfacher sehen können. Haben diese beiden gelben Bereiche ungefähr die gleiche Fläche? Die Form auf der linken Seite sieht etwas größer aus, aber das ist wahrscheinlich mehr, weil ich gerade Linien am Rand des E und des A gezeichnet habe . Wir können die Leerzeichen zwischen diesen Buchstaben sehen. Der Bereich zwischen ihnen ist ungefähr gleich. Nun, wenn Sie das Glück haben, mit einer Schrift mit einigen offenen Schriftfunktionen zu arbeiten . Wir können hier zurückkommen und Kerning-Paare einschalten. Dafür ist es eigentlich schon eingeschaltet. Aber wenn ich es ausschalte, können Sie sehen, dass dies tatsächlich noch mehr Platz zwischen H und E hinzufügt . Bestimmte Buchstaben sind für die Software oder den Browser ziemlich schwierig zu identifizieren, wie groß dieser Platz sollte sein. Was passiert ist, wenn Leute die Schrift erstellen, wenn sie die Schriftdateien erstellen, sie in eine Kerning-Tabelle einfügen , damit sie erkennen können, welche Lücken zwischen bestimmten Problembriefe , wenn sie zusammenpassen. Wenn Sie über alle Kombinationen aller verschiedenen Buchstaben nachdenken und prüfen, ob sie gut aussehen. Es könnte Ihnen helfen zu verstehen, warum die Erstellung von Schriften buchstäblich Jahre dauert. Es hilft Ihnen möglicherweise auch einige der Unterschiede zwischen den wirklich teuren und denen zu verstehen den wirklich teuren und denen , die Menschen kostenlos verschenken. Probleme zwischen einem Großbuchstaben und einem Kleinbuchstaben sind immer ein Problem. Und so enthält die Font-Datei einige Kerning-Daten um uns mitzuteilen, dass dieses E näher sein sollte als dieses h. Jetzt versucht Ihre Software oder Ihr Browser manchmal dies selbst herauszufinden. Es gibt einige spezielle Berechnungen , um herauszufinden, wie es in den Buchstaben vorkommen sollte, welche sollten näher und weiter voneinander entfernt sein? Eigentlich macht die Software, die ich gerade mit der vollständigen Videobearbeitung verwende, das. Wenn Sie sich also die Titelbildschirme für diese Vorträge ansehen, bemerken Sie möglicherweise gelegentlich ein dunkles Kerning. Eine Menge Software hält dies nicht für zu wichtig, und viele Browser tun es auch immer noch nicht. Und doch ist es ziemlich wichtig, wenn Sie darüber nachdenken, wie viel von Ihrer Website besteuert wird und wie Sie sie benötigen, um bequem Platz zu sein, leicht zu lesen, bequem zu lesen und nicht sieh komisch aus für deine Nutzer. Kerning ist ein unglaublich wichtiger Teil des Webdesigns, und dennoch können Sie es nicht richtig machen. Die meisten Browser werden dies nicht korrigieren, und die meisten Schriften werden auch nicht zu viel tun. Aber es wird besser. Und wir werden uns das ansehen, wenn wir uns die Implementierung ansehen. Aber es gibt einige JavaScript-Bibliotheken , die wir verwenden können tatsächlich ein bisschen optisches Kerning für uns machen und einige dieser Zahlen herausfinden. Wenn wir eine Schrift haben, die keinen guten Kerning-Tisch hat. Dieses hier verwende ich eine kostenlose Google-Schriftart namens Laura. Ich würde sagen, sieht ziemlich gut aus. Und du musst dein Auge darauf trainieren. Auch hier habe ich tatsächlich ein wirklich cooles Spiel namens type method gefunden , bei dem man die Buchstaben selbst ausprobieren muss, also gibt es dir die Buchstaben auf dem Bildschirm. Ich muss versuchen herauszufinden, ob der Abstand zwischen jedem dieser Buchstaben gleich ist, nicht von Punkt zu Punkt, sondern der tatsächliche Bereich dazwischen. Also denke ich, dass V etwas näher dran sein muss. Wenn du damit zufrieden bist, klickst du auf „Vergleichen“. Und du wirst sehen, dass ich es wirklich, sehr schlecht gemacht habe. Ich war die meiste Zeit meiner Karriere Webdesigner. Und Kerning ist etwas , das auf Websites noch vor kurzem nicht wirklich möglich war. Ich war noch nie gut im Kerning. Aber folge dem, was ich sage, nicht was ich mache und vergleiche es und probiere es aus denn das ist etwas , das jetzt möglich ist. Bestimmte Schriften haben jetzt diese Kerning-Tabellen in den offenen Typ-Features. Es gibt einige JavaScript-Funktionen, die uns realistisch helfen , wenn wir in unseren Designs darüber nachdenken . Alles, was wir beachten müssen, ist, dass es massive Einschränkungen bei den Schriften und den Browsern gibt. Und wir möchten sicherstellen, dass wir nur minimal einige der Kerning-Probleme sind, die wir sehen könnten. Kerning ist der Abstand zwischen bestimmten Buchstaben. Also passen wir uns Buchstaben an, die näher erscheinen, weil sie dichter sind oder gerade Linien nebeneinander haben. In eine gute Schrift ist eine Kerning-Tabelle eingebaut, um sich an einige der Problembuchstaben anzupassen. Solange wir eine OTF - oder eine W OFF-Schriftdatei haben, können wir diese Kerning-Paare einschalten. Wenn nicht, möchten wir unsere Augen vielleicht etwas trainieren, um Kerning-Probleme mehr zu erkennen , da wir jetzt JavaScript verwenden können , um einige Kerning-Probleme zu beheben. 16. Absatzausrichtung: Wir haben hier einen kleinen Bereich unseres Textes mit unserem aktuellen Designsystem verspottet. Ich habe einen kleinen Abschnitt dessen, verspottet. Ich habe einen kleinen Abschnitt dessen unsere Texte aussehen würden, mit zwei Überschriften und einigen Absätzen verspottet. Eine Sache mit den Online-Absätzen, die im Vergleich zu zwei Absätzen in einem Buch im Allgemeinen ziemlich kurz gehalten wurden, haben Menschen viel weniger Patienten sobald sie an ihren Computer kommen. Gehirn hat sich angepasst, seit wir angefangen haben, Computer zu benutzen. Und wenn wir zwei größere Textblöcke sehen , die zu entmutigend sind, haben wir Angst und hören auf, ihn zu lesen. Wir halten unsere Absätze im Allgemeinen ziemlich kurz, aber auch bei Drucktext haben Sie normalerweise einen kleinen Einzug am Anfang des Absatzes wie diesem. Es gibt einen kleinen Indikator dafür, dass der Absatz dort beginnt. Das sieht man nie wirklich online. So machen wir das nicht. Was wir tendenziell tun, ist ein bisschen Platz um die Absätze zu legen . Wir haben das bereits mit unserer Marge gemacht, aber es ist erwähnenswert , dass dies mehr damit zu tun hat, wie wir online lesen. Im Allgemeinen wird ein Textabsatz in einer Webanwendung oder einer Website so geschrieben , dass er aus dem Zusammenhang gerissen werden kann , weil Menschen im Allgemeinen abspringen und vielleicht eine Überschrift finden, die klingt Rafael wie das, worüber sie noch einmal lesen wollten und gelegentlich einen Absatz überspringen wollten. Die Absätze werden normalerweise so geschrieben, dass sie etwas eigenständiger sind als in einem Buch. weniger wahrscheinlich, dass sie dem folgen , was zuvor geschrieben wurde, eher ein in sich geschlossener Textblock für sich. Wenn Sie einen Text schreiben würden und möchten , dass er in einem ähnlichen Stil wie ein Buch gelesen wird, könnte es ein durchaus nützlicher visueller Indikator für die Hälfte dieser Einzüge sein und nicht die Ränder zwischen den Absätzen. Eine andere Sache, die Sie online sehr selten sehen Texte, die den Flur von links nach rechts gerechtfertigt sind, Sie haben diesen Lappen immer ganz rechts. Es gibt einige CSS-Regeln, die dazu führen , dass sich die Texte vollständig erstrecken und einfach den Abstand vergrößern, damit alle Textzeilen im selben Raum enden. Leider werden diese CSS-Regeln von kaum Browsern nicht unterstützt. Und ich bin mir nicht ganz sicher, warum du es tun würdest. Jedenfalls. Es schafft eine schreckliche Flüsse des Weltraums in der Mitte deiner Absätze. Es sieht irgendwie hässlich aus und hat keinen allzu großen Vorteil. Eine andere Sache, die Sie im Druck im Allgemeinen nie sehen würden , ist, ein verwaistes Wort unten wie dieses zu haben , ein verwaistes Wort unten wie dieses Normalerweise würden wir absichtlich ein paar Worte nach unten drücken , um einen schöneren Lappen zu erzeugen die rechte Seite hier. Und um sicherzustellen, dass wir mindestens zwei oder drei Wörter in der neuen Zeile haben. Auch hier sind diese Dinge online nicht unbedingt so möglich, daher akzeptieren wir normalerweise einfach, dass wir uns damit auseinandersetzen müssen. Es gibt wieder einige JavaScript-Bibliotheken, oder wir könnten JavaScript schreiben, um sich um die verwaisten Wörter zu kümmern und sie zu berücksichtigen. Aber es ist ein ziemlich schlechter Kompromiss, wenn es Ihre Website verlangsamt oder welche Dinge Sie entscheiden müssen, wie wichtig das überhaupt für Sie ist. Etwas, das Sie sehr selten sehen würden , ist Texte wie diesen zentral auszurichten oder zentral zu rechtfertigen . Für ein paar Zeilen ist das in Ordnung, aber denken Sie daran, wie Ihr Auge lernen muss zum Anfang der nächsten Zeile zurückzukehren. Und wenn sich das bewegt hat, wird es schwieriger größere Textblöcke Text normalerweise nur zentral rechtfertigen wenn es sich um einen sehr kurzen Text handelt. Ein Grund dafür, dass Sie Text von Zeit zu Zeit im Wesentlichen rechtfertigen können , ist, dass er maßgeblicher aussieht. Es erinnert an Flyer im alten Stil und andere Grafiken, die zentral ausgerichteten Text haben , wären normalerweise etwas ziemlich maßgebliches. Wir haben uns früher eine Nachrichtenwebsite angeschaut und es hatte ein zentral ausgerichtetes Logo in der Mitte. Es lässt die Zeitung etwas maßgeblicher erscheinen . Für unsere Absatztexte werden wir dies fast nie zentral rechtfertigen. Wenn wir Textabsätze darlegen, möchten wir uns bewusst sein, dass die Leute nicht so online lesen , wie sie in einem Buch lesen. Wir haben also nicht die gleichen Regeln. Wir fügen Ränder zwischen den Absätzen hinzu und wir rücken nicht weil sie nicht so viel voneinander folgen . Wenn wir versuchen, eine Erklärung abzugeben und die Menschen dazu zu ermutigen, auf lineare Weise zu lesen. Vielleicht möchten wir uns stärker vom Printdesign beeinflussen lassen. Wir machen uns meistens keine Sorgen um Dinge wie verwaiste Wörter am Ende eines Absatzes oder Dinge wie der Lappen auf der rechten Seite eines Absatzes ist viel zu schwer für uns, um Regeln zu setzen unser System, um sicherzustellen , dass diese nicht passieren. Und wir rechtfertigen einen Text nur zentral , wenn er sehr kurz ist, ich zitiere oder möglicherweise die Hauptüberschrift, kann ein bisschen maßgeblicher aussehen, wichtiger aussehen, wenn wir es tun. Und es hebt es auf jeden Fall hervor. 17. Nummern und Daten: Ein wirklich wichtiger Punkt bei der Auswahl einer Schrift und bei der Auswahl der Stile und ihrer Verwendung durch unser typografisches System sind Zahlen und Daten. Weil es bei unseren Zahlen und unseren Daten alle möglichen Dinge zu beachten gibt. Wir haben schon ziemlich viel darüber gesprochen wie Sie mit Ihrer Schrift sicherstellen möchten, dass Sie Zugriff auf alle mathematischen Symbole haben , die Sie mögen. Einige Schriften haben Glyphen für Brüche oder für bestimmte mathematische Symbole, die möglicherweise andere nicht tun. Sie müssen nicht kämpfen oder Ersatzstoffe finden. Sie müssen eine Schrift finden, die alle Glyphen enthält , die Sie benötigen. Eine Sache, die ich auch früher angesprochen habe , ist, dass es sich um Großbuchstaben handelt, wenn ich einige Zahlen in die Mitte dieses Textes lege . Diese sehen wahrscheinlich in der Überschrift gut aus, obwohl es sich um eine Kleinbuchstabenüberschrift handelt, aber in der Mitte eines Absatzes ist , der irgendwie seltsam diese großen klobigen Zahlen zu haben, lenkt es sogar ziemlich ab, und es sieht einfach ein bisschen komisch aus. Was wir hier tun wollen, ist, dass wir für unsere Absätze das einschalten möchten, was manchmal als alte Zahlen bezeichnet wird , aber Sie können sich als Kleinbuchstaben vorstellen. Sie können sich Großbuchstaben vorstellen, da Zahlen ausgekleidet wurden. Wenn ich das umschalte, können Sie jetzt sehen, dass die Zahlen in der Mitte dieses Absatzes in unseren Kleinbuchstaben jetzt bequem auf dieser Grundlinie sitzen. Sie müssen uns genauso schicken wie einige der Kleinbuchstaben. Natürlich, wenn Sie es mit Chinesisch, Japanisch und Koreanisch zu tun haben , wo es kein Konzept von Kleinbuchstaben gibt. Darum musst du dir keine Sorgen machen. Dann stellt sich die Frage wann die Daten in einer Tabelle enthalten sind. Jetzt haben wir uns noch kein Tool angeschaut, aber natürlich befinden sich Ihre Daten manchmal in einer Tabelle. Die gebräuchlichste Regel , die Sie wahrscheinlich bereits gehört haben , ist , dass Sie, obwohl Sie alle Textspalten ausrichten, eine Zeile schreiben sollten. Die Zahlenspalten. Normalerweise hättest du so etwas. Und ein Teil des Grundes ist, dass es etwas einfacher ist zu erkennen, was von diesem Dezimalpunkt richtig ist. Diese Top-Zahl, die ich hier angegeben habe, 1.27, ist etwas einfacher mit der Zahl unten zu vergleichen , wenn die Dezimalpunkte alle ausgerichtet sind. Aber da diese Zahlen größer werden und Sie bereits einige Unterschiede erkennen können einige Unterschiede hier statt eine 0 haben, werden diese Punkte eine Linie verpassen. Im Idealfall möchten Sie die Schrift eher auf den Dezimalpunkt als nach links oder rechts ausrichten können die Schrift eher auf den Dezimalpunkt als nach . Nun, das wäre ziemlich schwierig, aber wir haben ein System, um das zu umgehen. Und es ist ähnlich wie diese Monospaced-Schrift ist, wir haben über Monospaced Schrift etwas früher gesprochen. Dies ist, wenn jedes Zeichen die gleiche Breite mit Zahlen hat, verwenden wir normalerweise nicht das Wort Monospace, normalerweise verwenden wir das Wort Tabula. Aber wenn ich all diese auswähle, gibt es eine andere Möglichkeit, Monospace- oder Tabula-Zahlen zu haben eine andere Möglichkeit, Monospace- oder Tabula-Zahlen , die auch Groß- und Auskleidung sind. Wenn ich darauf klicke, jetzt, egal wie viele Zahlen ich hier links bekomme und was auch immer diese Zahlen sind, diese Dezimalstellen werden alle später tatsächlich mit dieser Schrift übereinstimmen, das tut es nicht scheint einen zu großen Unterschied zu machen. In dieser Notiz. Ich möchte nur darauf hinweisen, dass später tatsächlich einige ziemlich nette Optionen für die Zahlen hat einige ziemlich nette Optionen für die Zahlen und in einer Tabelle ziemlich gut funktioniert. Dies ist also eine wirklich nette Schrift, die für Tabellendaten verwendet werden kann. Es gibt also wirklich drei Dinge , über die man mit Zahlen und Daten nachdenken muss. Und die erste besteht darin, sicherzustellen, dass die Schriftart, die Sie verwenden, alle mathematischen Symbole enthält, die Sie benötigen. Wenn Sie viele Brüche verwenden , stellen Sie sicher, dass die Schrift Glyphen für Brüche enthält. Als Nächstes, wenn Sie wissen, werden Sie oft Zahlen in der Mitte der Absätze verwenden . Stellen Sie sicher, dass es eine Option für Kleinbuchstaben oder alte Zahlen gibt. Und wenn Sie viele Zahlen in Tabellen verwenden, stellen Sie sicher, dass es eine Monospace-Version der Zahlen gibt, die manchmal auch als tabellarische Version der Zahlen bezeichnet wird. 18. Typografische Systeme: In dieser Phase haben wir absolut viele Informationen darüber, wie wir eine gute Entscheidung treffen können, indem wir für unsere Marke und für das Projekt, das wir mit dieser Marke erstellen, eine Schrift gegenüber einer anderen unsere Marke und für das Projekt, das wir mit dieser Marke erstellen, wir haben absolut viel darüber gelernt, die Größen und die Linienlängen usw. für eine gute Lesbarkeit zu korrigieren. Dann haben wir uns angeschaut, wie man sich die verschiedenen Überschriftengrößen ansieht und eine gute visuelle Hierarchie mit anderen Techniken als nur der Größe erstellt eine gute visuelle Hierarchie , der beste Weg für uns, alle diese Fähigkeiten zusammen bestehen darin, ein typografisches Designsystem zu schaffen , das wir in einer Anwendung verwenden würden, wenn wir es erstellen. Jetzt habe ich drei davon als Beispiel erstellt , und ich werde Sie durch sie sprechen. Jetzt. In allen drei dieser Beispiele habe ich eine Wikipedia-Seite nicht vollständig zufällig aufgenommen. Ich wollte ein paar ganz andere bekommen, aber fast vollständig zufällig. Und ich habe versucht, mein neues typografisches System zu verwenden. Wir sind möglicherweise nicht in der Lage, dass wir ein Layout für die Seite haben oder genau wissen , was der Inhalt ist. Aber wenn wir versuchen, unser System zu erstellen, möchten wir über die Möglichkeiten nachdenken und wir möchten reale Inhalte verwenden. Wir möchten keinen Platzhaltertext verwenden. Es wird anders aussehen und wir werden nicht vollständig verstehen, wie das fertige Ding funktionieren wird. Wenn wir tatsächlich mit der Erstellung einer Anwendung beginnen, werden wir natürlich feststellen, dass es verschiedene typografische Stile gab, wenn wir anfangen, alle verschiedenen Seiten und Elemente zu entwerfen Seiten und Elemente feststellen, dass es verschiedene typografische Stile gab, wenn wir anfangen, alle verschiedenen Seiten und Elemente zu dass es verschiedene typografische Stile gab, wenn wir anfangen, alle verschiedenen wir müssen uns leicht ändern. Aber solange wir unser Designsystem haben, haben wir eine einzige Quelle der Wahrheit, die wir mit allen unseren Autoren, Entwicklern und anderen Designern teilen können . Das erste Beispiel ist, dass ich dieses über die gebärende Yacht genommen habe , und ich habe mich entschieden, Sie haben vielleicht bemerkt, dass ich auch einige erste Entscheidungen über Farben und Dinge getroffen habe , die nicht unbedingt worüber wir in diesem Kurs sprechen, aber es lohnt sich, es einzuwerfen während Sie versuchen, dieses Designsystem zu erstellen, da es Ihnen eine viel bessere Vorstellung Größen und Schriftoptionen gibt. Wenn wir auf das System zurückblicken, werden Sie sehen, dass ich nicht mit dem Namen „ eins“ auf Rubrik sechs aufgehört habe. Ich habe ihnen Namen gegeben , je nachdem, wie sie stattdessen in der gesamten Anwendung verwendet werden würden . Und wir haben keine super große Displayüberschrift auf Haaren, die auf der Homepage erscheinen könnten oder so, weil es einfach nicht auf der Seite verwendet wird. Ich habe dann für dieses Typsystem erstellt. Wenn ich eine Anzeigeüberschrift hatte, ist dies der Stil, mit dem ich gegangen bin, mit den Ligaturen und allem. Aber ich habe es nicht im Design verwendet, also habe ich es gerade aus dem typografischen System genommen , denn wenn es nicht verwendet wird, möchte ich es nicht im System haben. Alles, was wir auf diesem Block auf der linken Seite haben, hat alle richtigen Größen mit den Linienhöhen, den Linienlängen und den Rändern um sie herum. Wie ich denke, dass sie auf einer Seite gut funktionieren werden. Und dann habe ich eine Seite erstellt. In Wirklichkeit werden Sie mehrere verschiedene erstellen und sehen, wie es in verschiedenen Teilen Ihrer Anwendung oder Website funktionieren könnte Ihrer Anwendung oder Website um sicherzustellen, dass mein typografisches System etwas ist, das ich bin jetzt glücklich , denn es ist eine ziemlich exotische, traditionelle Sache, die eine Yacht chartert. Es hat ein sehr, sehr traditionelles Gefühl der Oberschicht. Ich habe mich für eine Schrift im Baskerville-Stil entschieden, die, wie wir wissen, eine traditionelle Serif ist. Und ich denke, es passt ziemlich gut dazu, wie ich glaube, dass das Branding vier Seiten über das Chartern einer Yacht sein würde. Wenn wir uns mein zweites Beispiel ansehen, habe ich mich für Blockchain entschieden. Ich habe die Wikipedia-Seite für Blockchain genommen und ich habe mich für etwas entschieden, das ein bisschen technischer aussieht , das ein bisschen technischer , natürlich etwas technischere Farben. Diese Schrift hier ist Mary Weather und hat eine etwas modernere Serif. Ein interessanter Kontrast in der Topographie und einige ziemlich interessante Formen , ohne wirklich da draußen und bizarr zu sein. Es sieht sehr modern aus, ohne zu stilistisch zu sein. Es sieht sehr modern aus. Und ich denke, für eine Art Spitzentechnologie ist dies eine besonders gute Wahl. Und Sie können sehen, dass ich ein paar Ebenen in meiner typografischen Hierarchie hinzugefügt habe, die ich dann noch einmal versuche, auf einer Seite, meiner Anfangsseite und zu sehen, wie gut die Zeilenhöhe abläuft. Es ist möglicherweise ein bisschen offizieller, was eine Zeitschrift aussehen könnte, weil es wahrscheinlich ziemlich informativ ist und über Spitzentechnologie spricht und möglicherweise versucht um Menschen von neuen wissenschaftlichen Erkenntnissen darüber zu überzeugen, wie gut Blockchain ist oder so ähnlich. Also habe ich es ein bisschen mehr wie ein Tagebuch dargelegt, aber mit ein paar Dingen, die es ein bisschen anders machen , um zu zeigen, dass es sich um eine Art Spitzentechnologie handelt. Und dann habe ich mich endlich für etwas mit ein paar Daten entschieden. Ich bin auf diese Seite über das BIP von Wikipedia gegangen. Und dafür habe ich mich zentral auf die Überschriften ausgerichtet, wie ich bereits sagte, dies gibt den Dingen immer mehr ein maßgebliches Gefühl, wenn wir über etwas wie Daten sprechen als vielleicht zentral ausgerichteter Text ist eine gute Idee. Die Überschriften und der Haupttext sind alle in Roboto. Jetzt ist Roboto eine wirklich gute Wahl für diesen Stil der Seitenliste von allen, da es alle Zahlen enthält, die wir benötigen, um sicherzustellen , dass es richtig ausgerichtet damit wir unsere Zahlen richtig. Aber ein Grund, warum ich denke, dass Roboto wirklich gut für diesen Seitenstil ist, ist, dass dies eine Seite ist, die von Leuten gelesen wird, die Analysten sind und sie Non-Unsinns-Stile mögen. Ohne das wirklich zuzugeben, werden sie genauso vom visuellen Styling beeinflusst wie alle anderen. Ich denke, Roboto hat eine Art von Ästhetik ohne Unsinn, obwohl er immer noch sehr freundlich ist, hat er ziemlich schöne abgerundete Kanten und Dinge. Und so glaube ich, dass ich beschreiben würde diese Schriften keine ganz einladende Persönlichkeit haben, aber es ist subtil genug, dass Datenanalysten und Menschen , die nicht glauben, dass es Emotionen gibt oder dass es wirkt sich auf sie aus. Andere Leute, die vielleicht dieses kleine bisschen Stil rutschen lassen werden. Es ist natürlich ziemlich ironisch, darauf hinzuweisen, dass manche Leute völlig logisch sind. Glauben Sie einfach, dass sie einen Artikel lesen möchten, nur um die Daten zu erhalten, wenn Sie über etwas wie den Vergleich der BIP-Zahlen über Länder hinweg sprechen , was fast völlig unlogisch ist, weil der Weg wir messen, dass das BIP jetzt lächerlich ist. Aber manche Leute sehen einfach gerne Zahlen und vertrauen unbegrenztes Vertrauen in Zahlen. Und ich verstehe , dass diese Art von Leuten diese viel einfachere No-Nonsense-Schrift wollen werden viel einfachere No-Nonsense-Schrift weil Roboto ziemlich gut abeinander liegende Zeichen mit guten x- Höhe und große Zähler wie zum Beispiel im Betriebssystem und so habe ich es geschafft, es ein bisschen kleiner zu machen , während ich immer noch gut lesbar bin. Wenn wir hier einfach zur Seite kommen, können Sie das typografische System selbst sehen . Wenn Sie jetzt verwenden, verwende ich Figma-Haar, wie ich bereits sagte, ich verwende Figma und wenn Sie sie auf der Seite ansehen, möchten Sie sich daran erinnern, dass Sie die Ansicht auf 100% setzen , wenn Sie es sind entscheiden, ob Sie denken, dass es eine gute Größe hat und gerade auf meinem Bildschirm lesbar ist. Und es könnte anders sein, mit der Größe Ihres Bildschirms und der unterschiedlichen Videoabmessungen zu tun der Größe Ihres Bildschirms und der unterschiedlichen . Aber gerade auf meinem Bildschirm schaue ich mir das bei 100% an. Dies ist also die genaue Größe, die auf dem Bildschirm aussehen würde , wenn wir dieses Design genau gleich erstellen würden. Aber das wird sich ein wenig ändern, wenn Sie Ihr ansprechendes typografisches System erstellen möchten . Also nur für dieses System habe ich die mobile Version erstellt. Dies ist eine mobile Seite der exakt gleichen Seite der erstellten mobilen Version. Und das ist das mobile System. Dies sind alle Ränder und Typengrößen für Mobilgeräte. Eine Sache, die Sie bemerken werden, ist, wenn Sie suchen, wenn Ihre Abmessungen etwas wie mein Bildschirm sind, dies viel zu klein aussieht, um sie zu lesen. Aber das liegt natürlich daran, dass Sie Ihr Mobiltelefon nicht so weit von Ihrem Gesicht fernhalten . Wenn wir Designsoftware verwenden und wirklich sicherstellen möchten , dass wir unsere Designs an unsere Entwickler übergeben oder sie mit dem Rest unseres Teams in den Größen teilen mit dem Rest unseres Teams in den Größen , die tatsächlich auf der Bildschirm und die tatsächlichen physikalischen Dimensionen. So möchten wir unser Typsystem und unsere Entwürfe erstellen. Wenn wir es jedoch auf unserem Desktop-Display betrachten, wenn wir auf einem Laptop oder einem Desktop-Computer sitzen, möchten wir sicherstellen , dass wir uns die mobile Version ansehen , auf die wir zoomen und 200 Prozent eingeben machen Sie die Tatsache aus, dass der Bildschirm so viel weiter von unserem Gesicht entfernt ist als wir normalerweise unser Mobiltelefon halten würden. Nun, wie gesagt, verwende ich Figma und es ist erwähnenswert, wenn Sie Figma auch verwenden, dass es eine mobile App namens Figma Mirror gibt, in der Sie sich einmal einloggen, je nachdem, welche Zeichenfläche Sie haben Die auf der Desktop-App ausgewählte App wird auf Ihrem Mobiltelefon gespiegelt. Sie können ganz bequem auf Ihr Telefon schauen und genau sehen, wie dieses Design auf einem Mobiltelefon aussehen wird. Dies ist eine weitaus bessere Möglichkeit zu beurteilen , ob wir der Meinung sind, dass die Typengrößen gut sind und dann einfach auf 200% zoomen. Ich habe zuvor andere Designer gesehen, die Dinge tun wie einfach die Art Board für die mobile Ansicht doppelt so groß wie auf ihrem Desktop, damit sie alles doppelt so groß sehen, dass sie alles doppelt so groß sehen , um sie zu erhalten eine Vorstellung davon, wie es im Vergleich aussehen wird. Ich denke, wir wollen uns immer mit der tatsächlichen physischen Größe beschäftigen , die alles sein wird, wenn wir es mit den Designdateien zu tun haben, damit es weniger verwirrend ist, wenn wir es mit dem Rest von teilen unser Team. Nur ein paar Hinweise darauf, dass Sie beim Überprüfen der mobilen Ansicht mit Ihren Typengrößen spielen. Vergessen Sie nicht, das Design entweder zu vergrößern oder einfach nur direkt auf einem Telefon anzusehen, da es nicht wie es in einer Desktop-Ansicht aussieht . Die große Herausforderung, das ist die große große große Design-Herausforderung ist, dass Sie ein Designsystem erstellen. Verwenden Sie jetzt die Anwendung, die Sie erstellen werden, egal ob es sich um eine Web-App handelt oder ob es sich um einen Blog oder eine Zeitschrift handelt. Und denken Sie an all die Dinge wir bereits über die Wahl der Schrift gelernt haben. hatten wir schon ausprobiert. Erhalten Sie die richtigen Typengrößen, Zeilenhöhen und all diese Dinge, die mit der Lesbarkeit zu tun haben. Und jetzt denken Sie über die visuelle Hierarchie und all die Dinge nach, die wir optimieren können , um eine schöne visuelle Hierarchie zu erhalten. Ob es sich um Farbe handelt, ob es sich um kleine Kappen handelt, ob es sich um mehrere Schriften handelt, um größere Ränder um Dinge zu schaffen, um zu entscheiden, was eine schöne visuelle Hierarchie erzeugt , während Sie mit arbeiten den Inhalt, den Sie haben und das Branding, das Sie haben. Je öfter Sie diese Herausforderung meistern, desto besser. Warum also nicht tun, was ich getan habe, und holen Sie sich einfach eine Wikipedia-Seite und sehen Sie, ob Sie Schriften finden, von denen Sie glauben, dass sie dieselbe Nachricht kommunizieren. Finden Sie heraus, wie Sie diese Schriften gut lesbar machen können, und erstellen Sie dann eine visuelle Hierarchie für genau diese Wikipedia-Seite. Je öfter Sie dies tun, desto besser werden Sie typografische Systeme erstellen. 19. Zusammenfassung: Das Stylen und Formatieren unseres Textes hat verschiedene Vorteile. Wir können beispielsweise Ligaturen verwenden, um in unseren Texten einzigartige Kombinationen zu erstellen , die ihm mehr Persönlichkeit verleihen. Aber wir könnten auch so etwas wie Kleinbuchstaben in einem Absatz und Zahlen mit fester Breite in einer Tabelle verwenden so etwas wie Kleinbuchstaben in , wo es viel nützlicher sein wird. Wenn wir uns für eine kostenlose Schrift entscheiden, haben wir diese Optionen möglicherweise nicht immer. Das kann ein entscheidender Faktor sein, wenn wir die beste Schrift für unser Projekt auswählen. Wir können offensichtlichere Stile wie Farbe und fett gedruckten Text verwenden , um eine visuelle Hierarchie in unserem gesamten Design zu erstellen . Wir möchten, dass unsere Benutzer sofort erkennen, wo sie suchen sollen zuerst und haben nur sehr wenige Gegenstände, die zu jeder Zeit um unsere Aufmerksamkeit kämpfen. Wir könnten damit beginnen, eine typografische Skala mit der Fibonacci-Sequenz oder einer musikalischen Skala zu erstellen eine typografische Skala mit der Fibonacci-Sequenz oder , wenn wir sicherstellen möchten, dass wir in unserem gesamten Design konsistente Verhältnisse haben, je nach Art der Anwendung, die wir entwerfen, möchten wir möglicherweise, dass die Typgröße für den größeren Text weniger dramatisch zunimmt. Es ist also nicht so groß. Wir brauchen nicht unbedingt auf jeder Seite eine Plakatwand, aber wir müssen immer die endgültigen Entscheidungen über die Größenbestimmung ohne Augen treffen. Es gibt verschiedene optische Gewichtungen und verschiedene Farben, die dazu führen können, dass die Größe etwas anders anfühlt. Wir müssen unser Auge trainieren. Alles, was wir verwenden können, um eine Überschrift, Farbposition, Hintergrundfarbe Randfarbe und Ränder zu unterscheiden , kann verwendet werden, um die einfache Typskala in Sway ausgeklügeltes typografisches System zu konvertieren die einfache Typskala in . Sobald wir die Mehrwertsteuer haben, sind wir bereit, endlich einen Code zu schreiben.