Auswahl von Typeface (UI Design Bootcamp, Woche 3)

1. Einführung: Diese Woche werden wir Schriften für ein UI-Design auswählen . Wir werden damit beginnen , darüber zu sprechen, was eine gute Typografie-Kombination ausmacht. Was macht einen guten Körpertext aus und was macht einen guten Anzeigetext aus und muss ihn miteinander koppeln. Und dann wird das Projekt, an dem Sie diese Woche arbeiten werden , darin bestehen, einen Künstler auszuwählen , der Ihnen Spaß macht. Denken Sie darüber nach , welche Eigenschaften der Künstler hat, und finden Sie dann Display - und Körpertexte, die dem Kunststil entsprechen gut miteinander verbinden. Typografie macht fast alles aus, was wir im Internet sehen, und die Fähigkeiten, die wir diese Woche gelernt haben , werden uns helfen, die besten Schriften für unsere UI-Designs auszuwählen . Lasst uns anfangen. 2. INSPIRATION: Bevor wir jetzt mit der Auswahl von Schriften beginnen können, müssen wir unser Gehirn mit Inspiration füllen. Wir müssen uns Entwürfe aus allen verschiedenen Branchen ansehen und ein Gefühl dafür bekommen, was da draußen ist. Welche verschiedenen Schriften lassen uns das Gefühl geben. Wirklich, wir sollten ziemlich viel Zeit und wahrscheinlich ziemlich regelmäßig damit verbringen Zeit und wahrscheinlich ziemlich regelmäßig andere Designarbeiten anzuschauen und darüber nachzudenken, was sie kommuniziert, darüber nachzudenken, was sie kommuniziert, was es uns sagt und wie wir uns darüber fühlen. Es gibt uns auch Vorstellungen darüber, wie wir die Schrift verwenden können. Wie Pablo Picasso bekanntermaßen sagte, kopieren gute Künstler, große Künstler stehlen. Jetzt wollen wir nicht unbedingt Arbeit der Menschen direkt stehlen, aber wir möchten uns von guten Dingen inspirieren lassen , die wir in der Designbranche gesehen haben . Jetzt befürworte ich mich immer dafür, Arten von Design abzuwenden, nicht Webdesign, nicht App-Design, sondern das Design als Ganzes zu betrachten , damit wir eine viel breitere Palette von Inspirationen haben und möglicherweise etwas schaffen etwas einzigartiger oder wussten, dass andere Designer in der Branche es nicht tun. Wir könnten auf eine Website wie Design-Inspiration kommen. Es gibt offensichtlich viele Design-Inspirationswebsites, aber wir könnten dazu kommen, Inspiration zu entwerfen und nach Typografie zu suchen. Und wir werden ziemlich viele handgeschriebene Schriftzüge sehen, wenn ich ehrlich oder ziemlich funky kleine Illustrationen mit Buchstaben bin. Aber all diese Briefe werden uns ein Gefühl vermitteln. Sie werden uns das Gefühl geben, dass sie zu etwas gehören. Dieser Buchstabe hier oder diese Nummer. Es sieht sehr königlich aus, es sieht sehr wichtig aus. Es sieht wertvoll aus. Und es sieht etwas zart aus. Und ich denke, es liegt an den enormen Kontrasten zwischen den großen dicken Flächen und den sehr dünnen Linien. Und möglicherweise weil es nur ein paar leicht gerade Bereiche gibt, sieht es aus und wenn wir nach etwas suchen , das diese Eigenschaften kommuniziert, haben wir vielleicht dafür gearbeitet Eine ziemlich hochwertige Marke oder Schmuckmarke, zum Beispiel, dann können wir nach einer Schrift suchen , die diese Eigenschaften aufweist, aber viel einfacher und klarer und einfacher zu lesen ist , wenn wir eine Schriftart wählen. Jetzt könnte man sagen, nun, das ist alles gut und gut. Ich erstelle eine App für eine Bank. Warum sollte ich also irgendetwas mit solchen Eigenschaften wollen ? Nun, eigentlich, ich, Bank, wird immer noch viele sehr spezifische Eigenschaften haben. Und ich habe diese Briefe hier aus einem Fußballspiel ausgewählt , so wie es aussieht. Es sieht sehr sicher aus, sehr sicher, sehr vertrauensvoll und würde jeden Fall auf einer Bank-Website funktionieren. Und dann lautet meine Frage, warum ist das so? Liegt es daran, dass es sehr dicke Buchstaben oder weil die Buchstaben keinen Kontrast haben? Hat es mit der Verfolgung dieser ziemlich viel Abstand zwischen jedem Buchstaben zu tun. Hat es überhaupt mit der Ausrichtung zu tun, wie dies zentriert ist und der Text ganz zentral ausgerichtet ist. Es gibt viele typografische Entscheidungen, die in dieses sehr einfache Poster eingeflossen sind, die es halb flach und vertrauenswürdig machen , das für einen Bankantrag funktionieren würde. Versuchen wir darüber nachzudenken, was jetzt ist, damit wir, wenn wir unsere Schriften auswählen, einige Vorstellungen davon haben, wonach wir suchen. Jetzt könnte ich immer noch Design-Inspiration und nächstes verwenden und einfach nach Web-Typografie suchen. Also bekomme ich Dinge, die etwas spezifischer sind , und Sie werden sehen einige Ideen für tatsächliche Webanwendungen auftauchen. Aber vielleicht möchten wir an dieser Stelle zu einer anderen Inspirationsgalerie wie dieser wechseln , Schriftarten, die verwendet werden, denn wenn wir genauer werden, werden wir uns fragen, was sind diese Schriftarten? Kann ich auf sie zugreifen? Eine Sache, die mit Schriftarten und Verwendungen sehr nett ist, wir sehen viele verschiedene Designs, aber wir finden auch heraus welche tatsächlichen Schriften sie verwenden. So ähnlich wie wir gerade versucht haben, uns von verschiedenen Medien inspirieren zu lassen. Wir könnten hier nachschauen und es sei denn, wir sehen viele Albumcover und Poster und allerlei Sachen. Oder vielleicht möchten wir an dieser Stelle anfangen, basierend auf Dingen zu filtern , die uns sehr ähnlich sind. Wir könnten uns Webseiten ansehen, vielleicht könnten wir uns die Verpackung ansehen. Ich meine, vielleicht gibt es einige interessante Inspiration, die wir von der Verpackung bekommen können. Während wir hier durchsuchten, können wir aufgreifen, was die Schriften sind. Und manchmal steht uns diese Schrift aus verschiedenen Gründen möglicherweise nicht zur Verfügung, aber wenn wir wissen, was es ist, wird uns helfen, etwas Ähnliches zu finden. Ein paar andere nützliche Inspirationsgalerien, wir haben Typ Wolf. Jetzt gibt es wieder ein paar wirklich schöne Designs, aber es sagt dir auch, was die Schriften sind. Das ist also absolut brillant und diese sind ein bisschen einfacher und klarer und ein bisschen ähnlicher dem, was Sie tatsächlich auf Ihrer Website verwenden werden. So sehr gut für eine spätere Inspiration. Was mit der Typ-Wolf-Website ganz schön ist, ist, als hätten sie tatsächlich viele Beiträge geschrieben , wenn Sie sich wirklich mit Typografie beschäftigen möchten , dies ist ein weiterer guter Ort. Und schließlich möchte ich Ihnen zeigen, wie es könnte, wo diese kleinen Modelle auf unserer Website aussehen könnte, wo diese kleinen Modelle wie es aussehen könnte. Interaktive UI-Elemente in Überschriften und Links. So können Sie genau sehen, wie es aussehen wird, wenn es sich in einer Webanwendung befindet. Dies ist also viel nützlicher, nachdem Sie Ihre Inspiration abgeschlossen haben und Sie tatsächlich Schriften auswählen werden, insbesondere weil es wiederum Google Fonts verwendet. Wenn Sie also ein Budget haben, sind die meisten Dinge, die sie hier verspottet haben, unsere Schriftarten, die kostenlos verwendet werden können. Ähnlich wie bei dieser Inspirationsgalerie gibt es hier eine namens Font-Paar, in der Sie buchstäblich nur Google-Schriftarten finden können, die gut zusammenpassen, damit Sie sie nach filtern können. Ich möchte eine San Serifenüberschrift mit einem Serifen-Text. Und es wird Ihnen all die verschiedenen Google-Schriftarten geben , die sich ziemlich gut miteinander verbinden können. Und Sie können einfach nach unten schauen und sehen , welches Gefühl hat , das Sie als sehr schnelle und einfache Art der Auswahl haben wollten , aber auch damit Sie sich inspirieren lassen können und sehen, wie diese sehen zusammen aus. Schließlich wollte ich Ihnen nur dieses Chrome-Plugin namens Typbeispiel zeigen , das Ihnen bei der Installation in Chrome hilft herauszufinden, welcher Typ auf verschiedenen Websites verwendet wurde. Wenn Sie nicht zu technisch versiert sind, kann das sehr nützlich sein. Es gibt auch eine Website, die als Schriftart bezeichnet wird , auf der Sie Bilder hochladen können und die Ihnen sagt , welche Schriften Sie in ihnen verwenden. Nur ein Takeaway aus diesem Video, das sicherstellt, dass Sie Ihr Gehirn mit großer Inspiration füllen . Wenn Sie sich diese Inspirationsgalerien ansehen, versuchen Sie darüber nachzudenken, was jede Schriftart und wie sie verwendet wird Ihnen tatsächlich mitteilt , wie Sie sich fühlen und was die Botschaft ist dass die Schrift hat. 3. Die Marke definieren: Vor irgendeinem visuellen Designprojekt arbeiten Sie mit Ihrem Kunden zusammen, arbeiten Sie mit um festzustellen, was die Marke bedeutet, wofür sie steht was sie kommunizieren soll. Verschiedene Designagenturen verwenden sehr unterschiedliche Techniken, um darüber zu sprechen. Vielleicht sind Sie zuvor auf Marktforscher gestoßen als verrückte Fragen wie, welche Art von Auto fährt Ihre Marke? Sie versuchen, ein gemeinsames Verständnis dafür zu schaffen , was die Persönlichkeit der Marke ist. Die wahrscheinlich am häufigsten verwendete Technik besteht darin, fünf Adjektive zu erstellen , die die Marke erklären. Da es in diesem Kurs nicht um Branding an sich geht. Lassen Sie uns diese Technik benutzen. Wenn Sie mit einem Team oder einem Kunden zusammenarbeiten, können Sie ein paar Stunden beiseite legen und dies versuchen. Treffen Sie sich einfach und brainstormen Sie alle Adjektive, die Sie fühlen, kommunizieren Sie die Marke und sammeln Sie sie alle auf einem Whiteboard oder auf einem großen Blatt Papier. Dann diskutiere darüber, welche Wörter das Gleiche bedeuten. Streichen Sie einige aus, entscheiden Sie, welches dieser Wörter das bessere ist. Anhand der Wörter, zwischen denen Sie noch übrig sind, haben Sie eine Diskussion, um zu entscheiden, welches haben Sie eine Diskussion, um zu entscheiden, welches der fünf Adjektive einzigartig ist und die Persönlichkeit der Marke am besten beschreibt. Sobald Sie diese Sätze von fünf Adjektiven haben, fassen Sie den Schalter zusammen, was die Marke ist. Es hilft später bei Designkritiken. Es hält uns davon ab, uns darüber zu unterhalten ob wir die Ästhetik mögen, und stattdessen unterhalten wir uns darüber, ob der ästhetische Stil die Persönlichkeit der Marke kommuniziert. Wenn Ihr Team wieder zusammenkommt, um sich die Designs anzusehen, können Sie sie an die fünf Adjektive erinnern , die die Persönlichkeit der Marke zusammenfassen und sagen: können Sie sie an die fünf Adjektive erinnern, die die Persönlichkeit der Marke zusammenfassen und sagen: Diese Farbpalette, diese Typografie, all diese Komposition kommuniziert die Persönlichkeit. Und niemand muss sagen, ob es ihnen gefällt oder nicht. Es ist unmöglich, ein Team von Designern und Kunden dazu zu bringen, ein Design zu mögen. Ein Team von Designern und Kunden dazu zu bringen , zuzustimmen, dass ein Design eine Markenpersönlichkeit kommuniziert , ist etwas nützlicher und möglicherweise ein bisschen realistischer. Sie können von Zeit zu Zeit sehen, wie Menschen Design-Slips mit gleitenden Skalen zwischen jugendlich und erfahren, stark und zart erstellen gleitenden Skalen zwischen jugendlich und . Wenn Sie Vorschläge wünschen, die Übungen in diesem Kurs für jedes Modul, in dem wir einige praktische Aktivitäten haben, durchzuarbeiten für jedes Modul, in dem wir . Dann erstelle ich fünf Branding-Adjektive , die du verwenden kannst. Ich erstelle für jeden Abschnitt verschiedene Stile, damit Sie ganz unterschiedliche Stile erstellen für jedes dieser Module ganz unterschiedliche Stile erstellen können. Ihre Übung für dieses Video besteht darin, sich mit Ihren Kunden, Ihrem Designteam oder beiden zu treffen Ihrem Designteam oder beiden zu und fünf Adjektive zu identifizieren , die Ihre Marke zusammenfassen. Wenn Sie alleine arbeiten, könnten Sie sich alternativ fünf Adjektive einfallen lassen, die Ihrer könnten Sie sich alternativ fünf Adjektive einfallen Meinung nach irgendwie cool klingen. Oder ich füge fünf an die Ressourcen dieses Videos an. Und wenn Sie Ihre Schriften während des restlichen Moduls auswählen , sollten Sie diese fünf Adjektive im Auge behalten. Machen Sie einfach die Schriften, die Sie auswählen helfen, diese Branding-Adjektive zu kommunizieren. Der Zweck dieses Videos besteht darin, sicherzustellen, dass Sie immer nur an ästhetischen Designarbeiten arbeiten, immer nur an ästhetischen Designarbeiten arbeiten wenn Sie wissen, was die Marke zu kommunizieren versucht. Wenn Sie nicht festgestellt haben was die Persönlichkeit der Marke ist, können Sie unmöglich eine Schriftart wählen , die dies kommuniziert oder eine der anderen Arten von Designaktivitäten ausführen. Wenn Sie an einem realen Projekt arbeiten, setzen Sie sich mit Ihren Kunden zusammen, wählen Sie andernfalls einen anderen Designer oder Sie können dies möglicherweise alleine tun , nur zum ersten Mal zum Üben. Und zwischendurch brainstormen und herausfinden, was Ihre Branding-Adjektive sind. Fünf Adjektive, die vermitteln, was Ihre Markenpersönlichkeit ist. Die meisten von Ihnen arbeiten noch bei der Arbeit mit einer echten Marke. also etwas Übung zu bekommen, wählen Sie vielleicht eine bestehende Marke oder eine vorhandene Website, mit der Sie gelegentlich arbeiten. Und überlegen Sie sich, was die fünf Adjektive ihre Persönlichkeit beschreiben. 4. Font Shops: Offensichtlich müssen Sie irgendwann einige Schriftarten finden. Natürlich finden Sie einige Schriften, die verwendet werden sollen. Du hast deine Inspiration. Sie wissen, was die Anforderungen sind, wo werden Sie nach ihnen suchen? Und oft wird es Google Fonts sein. liegt daran, dass sie kostenlos sind, einfach zu implementieren sind und es viele potenziell ziemlich gute Schriftarten gibt. Werfen wir zunächst einen kurzen Blick auf Google Fonts. Wir können suchen, ob wir den Namen kennen oder wir können hier einen Text eingeben, wenn wir möchten, dass er hier in den kleinen Beispielbits verschiedene Texte sagt und alle, wir können ihn nach Kategorien filtern. Jetzt unterscheiden sich diese Kategorien nicht geringfügig von verschiedenen Kategorien , auf die Sie auf verschiedenen Websites gestoßen sind. Sie alle kategorisieren sie etwas anders, aber wir wissen, was eine Serif ist. Wir wissen, was eine Serifenlose ist. Es geht darum, ob es die kleinen Füße nicht gibt. Display bedeutet nur eine Schrift , die speziell für Überschriften entwickelt wurde. Handschrift bedeutet, dass es ein humanistisches handgeschriebenes Gefühl hat? Und Monospace bedeutet natürlich, dass die Breiten jedes Zeichens oder des gleichen Zeichens normalerweise für die Codierung verwendet werden. Eine Sache, über die wir nicht zu viel gesprochen haben , ist, wenn Sie eine andere Sprache auswählen würden , wie zum Beispiel , wir haben Japanisch ausgewählt. Japanisch neigt dazu, seine eigenen Klassifizierungen zu haben, aber Google Fonts, Es wird diese einfach gleich klassifizieren . Wenn Sie zum Beispiel nach einer japanischen Schrift suchen, wird es etwas schwieriger sein, eine zu finden, die genau Ihren Anforderungen an Google-Schriftarten entspricht , da sie sie nicht in gewisser Weise klassifizieren dass die Leute erwarten könnten japanische Schriften klassifiziert werden. Aber wir können auch sehen, dass es im Grunde acht zur Auswahl gibt. Also musst du einfach den auswählen, den du willst. Eine Sache, die auch an Google-Schriftarten besonders schön ist, ist, dass wir einige der Schrifteigenschaften auswählen können. Zum Beispiel möchten wir vielleicht, dass es ziemlich eng ist, weil wir hauptsächlich Dashboards für eine sehr schwere UI-Website entwerfen , die vielleicht nicht viele Blogbeiträge enthält und wo rein darauf konzentrieren, was gut in Menüs und Schaltflächen passt. Wir werden wollen, dass es sich um eine ziemlich schmale Schrift also können wir einfach nach diesem glatten Haar filtern und das wird die Anzahl der verfügbaren Optionen reduzieren. Idealerweise besteht eine große Sache bei der Wahl einer Schriftart darin, alle auszuschließen, die nicht passen. Und dann hast du noch eine Handvoll zur Auswahl. Schließlich eine ganz nette Funktion, die Google Fonts hat, was eine ziemlich neue Funktion ist. Wir werden später mehr über variable Schriften sprechen. Aber wenn ich dieses Kontrollkästchen anklicke, zeige hier nur variable Schriftarten an. Es gibt derzeit 34 variable Schriftarten bei Google und es gibt eine Variable. Ich zeige es dir mit Roboto-Platte. Wenn Sie hier schauen, gibt es, wenn Sie dies importieren würden , und wir werden in der Implementierungsphase viel mehr darüber sprechen . Wenn Sie dies jedoch importieren, könnten Sie versucht sein, diese neun verschiedenen Schriftdateien zu importieren, sodass Sie alle unterschiedlichen Gewichte haben. Eigentlich könntest du diese eine Font-Datei einfach importieren. Und es hat 900 verschiedene Gewichte, die Sie später mit einer Variablen in Ihrem CSS steuern können. Dies ist besonders schön, um genau das richtige Weiß zu erhalten , insbesondere wenn es sich um reaktionsschnelles Design handelt , bei dem es mehrere verschiedene Größen für die Schrift geben könnte . Wir werden wollen, dass es auch mehrere verschiedene Gewichte gibt. Und wir können jetzt kontrollieren, dass auf einer viel detaillierteren Ebene, zunehmend mehr mit Web-Typografie, wir auf einer viel detaillierteren Ebene, zunehmend mehr mit Web-Typografie, nach variablen Schriftarten suchen werden. Und wie wir gerade gesehen haben, hat Google Fonts selbst bereits 34 variable Schriftarten. Verschiedene variable Schriften haben andere Variablen als Weiße. Aber Google Fonts haben derzeit nur diese mit den weißen Variablen. Das ist also echt nett. Jetzt ist der nächste Ort, den es zu erwähnen gilt, nur für Personen, die ein Adobe Creative Cloud-Konto haben. Denn wenn Sie Adobe Creative Cloud haben, wären Sie verrückt, irgendwo anders als fonts.adobe.com zu gehen , um Ihre Schriften zu finden. Erstens, und das liegt daran, dass Adobe eine wirklich beeindruckende Sammlung , die Creative Cloud-Benutzern zur Verfügung steht. Sie möchten jedoch eine Frage, ob die Person, die die Website veröffentlicht, auch über eine Lizenz zur Verwendung der Schrift verfügt . Was ich damit meine, ist, wenn Sie Kundenarbeit leisten und persönlich über das Creative Cloud-Konto verfügen, benötigen sie eine andere Lizenz, damit sie dieselbe Schriftart auf der Website des Kunden verwenden können . Jetzt, bei Adobe-Schriftarten, werden Sie bereits sofort feststellen, dass die Klassifizierungen hier größer sind. In der Tat sind Handschrift und Drehbuch in zwei verschiedene Klassifizierungen unterteilt. Wir haben einen schwarzen Brief, über den wir früher gesprochen haben, wer wäre ziemlich seltsam, das auf einer Website zu verwenden, aber vielleicht wirst du es tun. Und Slab Serif. Wir haben also schon eine reichhaltigere Auswahl an Klassifizierung zur Auswahl. Und wir können diese Eigenschaften nicht ganz auf einer gleitenden Skala wie bei Google auswählen, aber wir könnten eine auswählen, die eher schmaler oder schwerer gewichtet ist , oder sogar eine auswählen, die ziemlich hoch ist oder niedrige x-Höhe. Und wir wissen bereits, dass das möglicherweise sehr nützlich sein könnte . Auch hier ist eine andere Sache, die mit Adobe Fonts wirklich nett ist, wenn ich Japanisch auswählen würde und sie hier ein wenig Japanisch ausgewählt haben. Sie werden feststellen, dass sich die Klassifizierungen tatsächlich ändern. Wenn Sie es mit japanischen Schriften zu tun haben, ist es möglicherweise einfacher, eine zu finden, die Ihrer genauen Klassifizierung in Adobe Fonts entspricht . Aber auch hier ist anzumerken, dass es nur sieben japanische Schriften gibt . Wie nützlich ist es also, nach den verschiedenen Klassifizierungen filtern zu können . Ich bin mir nicht sicher. Adobe Fonts ist absolut erstaunlich, wenn Sie die Adobe Creative Cloud-Lizenz haben Jetzt das nächste Paar Ich zeige dir einfach schnell unsere Schrift shop.com und lüge keinen Typ. Und das sind Websites, die Schriften aller Gießereien verschiedener Typen sammeln. Und sie positionieren sie auf ihrer Website sodass Sie einfach eine große Anzahl von kaufbaren Schriftarten durchsuchen eine große Anzahl von können, die von verschiedenen Designern gekauft wurden. diesen Kurs rausgeflogen, ich verwende Branding mit Typ für die Schriften, die dort verwendet werden. Relativ erschwinglich und ich mag ihren Stil sehr. Sie möchten vorsichtig sein, wenn Sie von einzelnen Designern kaufen , die Sie verstehen, was die Lizenzierung ist. Wenn ich mir zum Beispiel das Branding mit Typenlizenzierung anschaue , können wir sehen, dass es tatsächlich eine völlig separate Lizenz gibt , die wir für mobile Apps verwenden müssen , wenn wir sie verwenden es auf einer Website. Wir müssen uns also bewusst sein wo wir es für die Lizenz verwenden können, die wir haben, da es sehr einfach sein kann , die Lizenzierung falsch zu machen. Ich zeige dir nur schnell ein paar etwas teurere. Das ist Spieltyp. bieten tatsächlich ein provisionsbasiertes Typdesign an, bei dem Sie mit Ihren Anforderungen zu ihnen gehen können , und sie werden tatsächlich die Schrift für Sie erstellen , wenn Sie an einem Projekt mit arbeiten ein sehr großes Budget, das sind Hoefler und Co, und sie haben hier ein paar wirklich nette Schriften. Eine Sache, die Sie bemerken werden, ist, dass es nach einem wirklich guten Preis-Leistungs-Verhältnis aussieht , weil es neunundneunzig Dollar für die Schrift sagt . Aber tatsächlich, wenn Sie es im Internet verwenden möchten, was Sie natürlich tun als die Lizenz. Und es wird ziemlich viel steigen, je nachdem , wie viele Eindrücke auf der Website sind und wie lange Sie für all diese Dinge leben. Lassen Sie sich also nicht zu sehr von einem recht niedrigen Preis täuschen . Dies ist ein interessantes Projekt, auf das ich kürzlich gestoßen bin , das Prototyp genannt wird, bei dem Sie Ihre eigene Schrift entwerfen können. Sie können die Serifenhöhen wählen, und es funktioniert wahrscheinlich mit variablen Schriftarten irgendwie können Sie die Breite der Serif und den Kontrast wählen. Und es gibt alle Arten von verschiedenen Schiebewaagen bei denen Sie genau steuern können, wie die Schrift aussieht, und möglicherweise Ihre eigenen mit minimalem Aufwand entwerfen können. In diesem Video werde ich hauptsächlich mit Ihnen darüber gesprochen , wo werden Sie Ihre Schriften finden, Ihre Schriftdateien? Und realistisch gesehen möchten Sie, wenn Sie ein Adobe-Konto haben, sofort zu Adobe-Schriftarten wechseln und diese verwenden, um Ihre Schriftarten zu finden. Andernfalls werden wir, abhängig von Ihrem Budget, hauptsächlich in Google-Schriften sein. Wenn Sie also etwas zusätzliches Bargeld haben, sollten Sie sich einige dieser Websites ansehen , auf denen Sie eine Schriftart speziell kaufen können. Ansonsten werde ich den Rest dieses Kurses mit Google Fonts verbringen , nur weil ich glaube, dass etwa 90% von Ihnen dort etwa 90% Ihrer Zeit verbringen werden. 5. Body: Wenn 95% unserer Anwendung Topographie sind, dann ist vielleicht etwa 85 bis 90% die Körpertopographie. Der Haupttext, der Text in den Absätzen in Blogbeiträgen, die Texte in Beschreibungen rund um Infografiken, Textbereiche, die erklären, wie Sie die Anwendung verwenden. All dieser Text im Körperstil ist der Großteil jeder Website. Daher wählen die meisten Typographen oder die meisten Designer zuerst die Körpertopographie. Ich schlage das jetzt vor und ich schlage es später noch einmal vor, aber aus ganz anderen Gründen. Jetzt ein paar Dinge, an die Sie denken sollten , wenn Sie Ihre Körpertopographie wählen. Wir wollen uns nicht etwas zu Verrücktes aussuchen. Zum Beispiel werden wir unsere handgeschriebene Schrift nicht wählen , um die Körpertopographie unserer Webanwendung zu erstellen. Es könnte in riesigen langen Textabsätzen sein, die Allgemeinen Geschäftsbedingungen. Vielleicht wollen wir, dass es individuell und einzigartig ist. Wir wollten mitteilen , wer die Marke ist und welche Persönlichkeit der Marke ist. Aber wir wollten es auf die minimalste und subtilste Weise tun, wie es möglich ist. Wir werden später lernen, wenn wir uns Lesbarkeit befassen , dass unsere Körperschrift idealerweise eine etwas überdurchschnittliche X-Höhe hat. heißt, wenn wir uns Roboto hier ansehen, hat es eine ziemlich große x-Höhe und eine sehr schöne Größe. Wir schauen uns die Größe der Kleinbuchstaben an. Sie sind ziemlich groß im Vergleich zur Gesamtgröße. Das ist also wirklich gut, um eine kleine Größe zu lesen. Aber wir wollen auch nicht zu viel Kontrast. Etwas wie Baskerville ist wahrscheinlich nicht ideal für Körpertexte, besonders wenn es ein bisschen klein ist, weil es ziemlich viel Kontrast zwischen einigen der dünnen und dickeren Striche gibt. Hier haben wir Playfair Display und es hat eine sehr dünne Linie auf dieser Seite der A und eine sehr dicke Linie auf dieser Seite des A. Wenn das zu viel kleiner war, wird es uns einige Probleme bereiten um Dinge zu unterscheiden und sicherzustellen, dass wir es richtig sehen können. Nun, Playfair Display, wir werden in ihrem Namen über die Anzeige sprechen , was darauf hindeutet, dass wir es als Überschriftentexte und nicht als Körpertexte verwenden . Aber eine Sache, auf die man achten sollte, ist etwas mit zu viel Kontrast. Hier haben wir eine PT-Serife und das hat einen gewissen Kontrast, aber viel weniger als Display-Sand. Wir könnten wahrscheinlich damit davonkommen dies als Körpertexte zu verwenden. Vielleicht möchten wir es etwas größer machen als unsere durchschnittliche Körpertopographie. Das nächste, worüber Sie nachdenken sollten, ist, dass wir mehrmals unterschiedliche Gewichte von fett formatiertem Text und möglicherweise kursivem Text verwenden möchten unterschiedliche Gewichte von fett formatiertem Text und möglicherweise kursivem Text um auf Dinge aufmerksam zu abhängig vom Zweck unserer Körpertexte . Aber wenn wir ziemlich viele Texte auf unserer Website verwenden würden, werden wir sicherlich mehrere Stile wünschen, mehrere Stile wünschen in denen wir Schrifteigenschaften haben. Wir können tatsächlich sagen , dass wir danach suchen , dass es mehr als eine bestimmte Anzahl von Stilen gibt, um sicherzustellen , dass wir nur solche sehen, bei denen wir auch kursiv und fett formatierte Optionen haben werden. Jetzt haben wir unsere Spezifikationen aus unserem Brief. Wenn wir anfangen, alle Schriften auszuschließen, die wir nicht verwenden können , bleiben uns nur so viele zur Auswahl. Wenn wir zum Beispiel eine Schrift für eine Bank und einige unserer Marken-Keywords wählen eine Bank und einige unserer Marken-Keywords , sagten Dinge wie sicher und vertrauenswürdig. Wir werden wahrscheinlich etwas wie Poppins vermeiden, das hier sehr interessante einzigartige Formen rund um das G hat , oder die Eisenbahn, die diese ziemlich extravagante Crossover mit der WWE hat . Und wir werden uns für etwas entscheiden, das etwas zuverlässiger aussieht als kreative Ruderboote, WER könnte tatsächlich eine gute Wahl für eine Bank sein. Aber wenn wir immer noch wollen, dass es eine Art Persönlichkeit hat, vielleicht nicht, wäre Morley vielleicht eine interessantere Option. Unabhängig davon, was unsere Marke und unsere Keywords sind, wollen wir nicht, dass die Körperschrift zu viel Persönlichkeit hat. Bis der Leser zu den Körpertexten kommt, bereits entschieden, dass er daran interessiert ist, den Artikel zu lesen. Sie haben bereits entschieden, dass sie die Anwendung verwenden werden. Wir haben bereits die Persönlichkeit der Marke mitgeteilt und worum es bei uns geht. Jetzt wollen wir es ihnen so einfach wie möglich machen , zu lesen. Ich habe mir den Auftrag gegeben, eine für eine selbstsichere, sichere Bank zu finden . Es wird nur Sans Serif haben. Wir wollen die Splay-Texte nicht da drin. Und wir haben dies sofort auf 139 eingegrenzt. Vielleicht möchte ich, dass es irgendwie eng ist, weil ich es auch für meine UI-Elemente verwenden werde. Und dann bleibe ich bei Sarah Burn. Indem ich mir einfach spezifische Regeln basierend auf meinem Designbrief festlege , habe ich sofort eine Schriftart gefunden, die perfekt ist. Jetzt möchte ich, dass Sie den von Ihnen erstellten Brief übernehmen, unabhängig davon, ob Sie ihn selbst oder Ihre Arbeit, den Kunden, erstellt haben, um ihn zu erstellen. Ich möchte, dass du noch einmal etwas Zeit damit verbringst , dir die Inspirationsgalerien anzusehen. Aber jetzt hast du eine Vorstellung davon, wonach du suchst. Also wird es deine Augen dazu zwingen , Dinge zu sehen, die du vorher nicht gesehen hast. Dann möchte ich, dass Sie zu Google Fonts kommen oder wenn Sie ein Adobe-Konto haben, können Sie Adobe Typekit verwenden und versuchen es einzugrenzen und eine Schriftart zu finden , die nicht zu viel Kontrast hat. Es hat nicht zu viel Persönlichkeit, hat aber die Persönlichkeit, die Sie subtil suchen Sie glauben , dass für Ihr Projekt gut funktionieren wird. 6. Single: Bevor wir anfangen, über passende Schriften zu sprechen, um mehrere Schriften in unseren Entwürfen zu verwenden und wie man diese Schriften findet , die gut zusammenpassen. Es lohnt sich, sich eine Minute zu nehmen, um nachzudenken, kann ich mit einer Schrift davonkommen? Es ist durchaus möglich, ein wirklich schönes Design mit viel Charakter mit einer einzigen Schrift zu erstellen ein wirklich schönes Design mit viel . Es kann wirklich gut aussehen, es kann minimalistisch aussehen und es wird schneller und einfacher für Sie zu erstellen sein. Möglicherweise besteht der Hauptnachteil bei der Verwendung einer einzigen Schrift darin, dass die Überschriften, der Anzeigetyp wirklich dazu beitragen können, Charakter, Marke, Persönlichkeit zu kommunizieren und Menschen wirklich anzulocken. Aber es hilft auch , diese visuelle Hierarchie zu erstellen, indem es eine wirklich klare Unterscheidung zwischen Überschriften und Textkörper macht. Und wie wir bereits darüber gesprochen haben, der Text aufgrund der Art und Weise, wie wir eine Art visuelle Verzerrung bekommen der Art und Weise, wie wir eine Art visuelle Verzerrung wird der Text aufgrund der Art und Weise, wie wir eine Art visuelle Verzerrung bekommen, nicht wie dieselbe Schrift aussehen, eine große Größe wie bei geringer Größe, es könnte sein sieht ein bisschen aus wie ein Fehler. Es gibt tatsächlich einige Lösungen wenn Sie keine einzige Schriftart auswählen und sie für alles auf Ihrer Website verwenden würden einzige Schriftart auswählen und sie für alles auf Ihrer Website verwenden . Es gibt gerade bestimmte Schriften auf dem Bildschirm, wir haben Platte. Und Sie haben vielleicht bemerkt, dass es zwei Versionen gibt, eine namens Slab 013 Pixel und eine namens Slab 027 Pixel, die Ihnen die genauen Größen angeben, für die sie für diese zu verwendenden Schriften entwickelt wurden. Wir können sehen, dass derjenige, der größer verwendet werden soll, etwas schmaler ist , denn wenn Sie lange Überschriften haben, wird es ziemlich viel Speicherplatz auf dem Bildschirm einnehmen. Und sie haben wahrscheinlich das visuelle Warten auf die beiden verschiedenen Größen leicht angepasst . Wenn Sie sich jetzt umsehen, gibt es mehrere Schriften, bei denen eine separate Schriftart oder eine separate Schrift zur Anzeige der Körpertexte erstellt wurde , und manchmal sogar eine separate Schrift für Beschriftungstext. Ich zeig dir einfach noch eins. Dieser nennt sich DM-Serifentext und DM Serif Display. Ich denke, das ist wirklich eigenartig, denn das dM Serif Display wurde offensichtlich mit etwas mehr Kontrast in den Buchstaben entworfen, sodass Sie es viel größer verwenden können, aber dm Serifentext wird wahrscheinlich nicht besonders gut funktionieren, wenn es etwa 14 Pixel, vielleicht 16, möglicherweise sogar 18 war . Idealerweise wäre dies ein separater Text für Unterüberschriften zwei Hauptüberschriften. Selbst wenn ich in Google-Schriftarten darauf klicke und nach den Paarungen suche, empfiehlt es fast konsequent DM-Serifentext als Überschriftenschrift zu verwenden bis ich richtig dazu komme unten , wo es heißt, dass ich vielleicht Playfair Display und DM-Serifentext verwenden könnte. Ich glaube nicht einmal, dass das eine besonders gute Kombination ist eine besonders gute Kombination die wir später sprechen werden. Aber um es klar zu sagen, gibt es viele Möglichkeiten, bei denen eine Schrift mit einer separaten Schriftart für den Anzeigetext und für den Textkörper entworfen wurde . Wenn Sie daran interessiert sind, eine einzelne Schrift zu verwenden , ist dies eine ziemlich elegante Option. Eine andere Sache, auf die Sie achten sollten, wenn Sie eine einzelne Schriftart verwenden, stellen Sie sicher, dass sie viele unterschiedliche Gewichtungen hat. Stellen Sie sicher, dass es kursive Optionen hat. Möglicherweise könnten kleine Lager wie für Untertitel oder Untertitel verwendet werden . Aber stellen Sie sicher, dass es eine große Abweichung hat. Denn wenn Sie Ihr gesamtes Designsystem aufbauen möchten, benötigen Sie all diese zusätzlichen Teile. Das werden wir uns im Styling-Bereich mehr ansehen. Aber seien Sie sich gerade bewusst , dass Sie, wenn Sie eine einzige Schriftart für alles verwenden , viel mehr Optionen haben möchten. Okay, als Nächstes schauen wir uns Paarung mit unserem Anzeigetext an. 7. Text anzeigen: Bevor wir eine Schrift finden, die wir mit unserem Körpertext kombinieren können, um einen schönen Überschriftentext zu finden , der mit diesen Körper-Tags übereinstimmt, müssen wir den Zweck der Überschrift der Topographie verstehen. Wir bezeichnen dies manchmal als Anzeigetext. Wenn es sich um die Körpertexte handelt, beschäftigen wir uns viel mehr mit den technischen Details darüber, wie Sie es lesen können, die Lesbarkeit, die Sie in großen Bereichen gleichzeitig lesen werden. Wir werden uns sehr bald mit der Lesbarkeit befassen. Die Überschriftentexte dienen jedoch einem ganz anderen Zweck. Es muss Leute anlocken. Es muss sie dazu bringen, es zu lesen, auch wenn es etwas ist, das jemand für die Arbeit oder aus einem anderen Grund lesen muss, müssen sie es dennoch lesen wollen, um sicherzustellen, dass sich voll und ganz mit dem Text und holen Sie das Beste daraus heraus. Die Überschriftentexte geben den Ton an. Es sagt uns, wenn wir in einem spielerischen Ton oder einem sehr ernsten Ton sprechen , sagt es uns, wer die Person ist, mit der wir uns unterhalten. Was ist die Persönlichkeit, die gerade mit uns spricht. Darüber hinaus schafft es ein gewisses Maß an visuellem Interesse. Wenn unsere Typografie, wenn unsere Schrift genug Emotionen kommuniziert und die Crack-Abstufung kommuniziert, müssen wir möglicherweise nicht einmal ein Bild oder andere grafische Elemente verwenden , um den Ton für die Seite festzulegen, wir kann tatsächlich ein viel minimalistischeres Design erzeugen, wenn wir besser eine gute Displayschrift auswählen können. Denn je mehr Persönlichkeit der Marke durch die Schrift kommuniziert wird , müssen wir uns auf Illustrationen, Bilder oder Texturen verlassen . Wenn wir darüber sprachen, wie eine Kommunikation nonverbal ist, können Sie hier den größten Teil Ihrer nonverbalen Kommunikation in den Anzeigetext einfügen, wo dies Lesbarkeit nicht beeinträchtigt . Und es wird von Anfang an den Ton geben. Nun die Kehrseite von all dem, wenn wir keine Gedanken in unser Display einbringen, könnte Typografie so sein, wie Sie es bei Bootstrap sehen würden , bevor Sie den Code bearbeitet haben, wir haben eine sehr langweilige, langweilige Persönlichkeitsliste, die hier übergeht. Und es schafft kein Engagement, kein Interesse. Und es bringt dein Gehirn schon davon aus, dass dies ein langweiliger, uninteressanter und ehrlich gesagt unwichtiger Text sein wird uninteressanter und ehrlich gesagt . Und es sieht wohl wie ein Fehler aus. Es ist wie wenn Sie ein sehr einfaches Symbol finden nur 20 Pixel hoch ist und es in die Luft sprengt, um riesig zu sein. Es sieht falsch aus , weil es nicht genug Details hat, um so groß zu sein. Die Topographie und die Überschrift hier ist eindeutig eine Körpertopographie. Es hat nicht genug Details und Interesse, um auf diese Größe gesprengt zu werden. Es sieht aus wie ein Fehler. Tatsächlich habe ich das CSS tatsächlich leicht bearbeitet, um diese ziemlich hässliche Überschrift für diese Website zu erstellen. Es ist unmöglich für uns, alle Vorteile bei der Auswahl eines effektiven Anzeigetextes für unsere Überschriften zu ignorieren . Denn wenn wir nicht versehentlich alle negativen Auswirkungen der Überschrift haben alle negativen Auswirkungen der , die gerade auf dem Bildschirm ist. Der Zweck des Anzeigetextes besteht viel mehr Branding und Festlegen des Tons als um Lesbarkeit. Dies ist der Ort , an dem wir unter dieser bewussten Ebene wirklich kommunizieren können . Und es fungiert als eine Art von Bildern Menschen anzieht und sie dazu bringt, lesen zu wollen, selbst wenn jemand den Text auf der Seite lesen muss, muss er ihn zuerst lesen wollen um sicherzustellen, dass er vollständig ist engagiere dich damit. Und ihr Gehirn interessiert sich für das Material, ob wir eine Zeitung, einen Blog, das gesamte Dashboard für eine Banking-App erstellen , dass Überschriftenanzeigetext sowohl das Interesse der Menschen als auch interessieren muss kommuniziere die Persönlichkeit. 8. Meta-Informationen: Wir werden darüber sprechen, zwei Schriften zu koppeln. Aber natürlich gibt es viele Situationen, in denen Sie mehr als zwei Schriften wählen können. Eine übliche ist für Meta-Informationen für Untertitel, zum Beispiel wenn Sie es mit einer sehr inhaltlichen Webanwendung oder Websites wie möglicherweise einer Nachrichtenwebsite zu tun einer sehr inhaltlichen Webanwendung haben. Ich habe gerade den Wächter auf dem Bildschirm, dann brauchst du natürlich eine viel ausgeklügeltere visuelle Hierarchie. Es gibt viele weitere verschiedene Arten und Bedeutungen für den Text auf dem Bildschirm. Und daher ist es viel schwieriger für uns, zwischen Dingen wie dem Datum oder der Bildunterschrift für ein Bild zu unterscheiden , die für so viele Leser, 99% der Leute, die lesen, nicht wirklich wichtig sind dieser Artikel muss die Beschriftung auf dem Foto nicht lesen. muss nicht wirklich wissen, um wie viel Uhr es gepostet wurde, und wir wollen uns nicht in diese neunundneunzig Prozent der Leser einmischen . Wir möchten auch visuell deutlich machen , dass die Beschriftung etwas anderes ist, dass das Datum etwas anderes ist. Wir können eine andere Schrift wählen , um diese Differenzierung vorzunehmen. Aber auch weil wir wissen , dass nur sehr wenige Leute das lesen müssen, können wir es tatsächlich etwas kleiner machen als die unangenehme Lesegröße, wir können es unangenehm machen zu lesen. Der Guardian hat die Beschriftung auf diesem Bild viel kleiner gemacht als die Körperschrift. Sie haben es zu einer serifenlosen Schrift gemacht, und sie haben es auch zu einer helleren Farbe gemacht, so dass es weniger Kontrast zum Hintergrund hat, sowie ein Symbol oder einen kleinen visuellen Indikator dafür hinzugefügt , dass es ist eine Beschriftung und die Form eines Dreiecks. Es sieht ein bisschen aus wie ein Pfeil, der auf das Bild zeigt. All diese Dinge zusammen machen uns wirklich klar , dass dies nicht wichtig ist und nicht Teil des Artikels ist und wir es einfach überspringen können. den sehr seltenen Fällen muss jemand wissen, wer der Fotograf war oder wann der Artikel genau veröffentlicht wurde. Und sie haben zufällig ein ziemlich schlechtes Sehvermögen. Sie können jemanden um Hilfe bitten. Sie könnten einen Bildschirmleser benutzen, sie könnten hineinzoomen. Wir müssen uns in diesen unglaublich seltenen Edge-Fällen nicht allzu viele Sorgen um die Lesbarkeit machen. Denn wenn wir das tun, wird es die Lesbarkeit für die neunundneunzig Prozent beschädigen , die nur hier sind, um den Artikel zu lesen. Wenn wir uns in einer Situation befinden, in der wir eine inhaltliche Anwendung haben , die wir entwerfen, und wir entscheiden, dass wir eine neue Schrift für die Käuferzeilen, die Daten, die Untertitel oder andere Meta-Informationen benötigen , die Daten, die Untertitel . Das Wichtigste ist wenn wir es unglaublich klein machen, können wir es trotzdem lesen? Und abgesehen von diesen einzelnen Punkten, die anderen Regeln, über die wir sprechen werden, damit zu tun Ihre Körperschrift mit Ihrer Überschriftenschrift zu kombinieren. All dies gilt immer noch, wenn Sie eine dritte Schrift für Ihre Meta-Informationen entwerfen. Wenn wir an einer sehr inhaltsreichen Website arbeiten , wie zum Beispiel einer Nachrichtenwebsite oder einer Anwendung mit einem Dashboard mit vielen Datenvisualisierungen. Dann steigt der Bedarf an einer dritten Schrift mit zunehmender Komplexität des typografischen Systems. Wenn wir eine dritte Schrift für unsere Meta-Informationen wählen , sind unsere Untertitel unsere Daten für ein Beispiel, dann ist es das Wichtigste , wenn wir sie wirklich klein machen, ist sie noch lesbar? Und abgesehen davon gelten immer noch alle Regeln für die Paarung der Topographie und wir werden uns diese als nächstes ansehen. 9. Schriftart-Paarung: In diesem Video werden wir darüber sprechen, wie man Schriften paart. 99% der Fälle, wenn wir eine Anwendung oder eine Website entwerfen, wählen wir mehr als eine Schrift aus. Wir werden eine für die Überschriften und eine für die Körpertexte und möglicherweise eine dritte Schrift für Dinge wie Bildunterschriften haben die Überschriften und eine für die Körpertexte und möglicherweise eine dritte . Jetzt haben wir ein paar festgelegte Regeln. Es gibt einige Regeln, die uns helfen zu entscheiden, ob eine Schriftart gut mit einer anderen funktioniert. Leider gibt es viel zu viele Variablen auf die man sich auf diese Regeln verlassen kann. Du musst immer lernen, deine Augen zu trainieren. Aber sobald Sie Ihre Augen darauf trainiert haben Schriften zu paaren, die gut zusammenpassen, können Sie eine ganze Karriere machen , wenn Sie möchten, indem Sie Schriften in effektiven Kombinationen kombinieren können aber auch einzigartige Kombinationen sind ein wirklich wichtiger Eckpfeiler für Ihre Entwürfe. Nehmen wir an, ich habe EB Garamond als meine Körperschrift gewählt . Und ich habe das teilweise gewählt, weil wir Garamond im nächsten Abschnitt oft verwenden werden . Aber zuallererst ein paar Dinge, die wir über diese Schrift wissen. Wir wissen also, dass es sich um eine traditionelle Serifenschrift handelt. Wir wissen, dass es ein absoluter Klassiker ist. Es ist einer der frühesten anderen als vielleicht Jensen, das heute noch verwendet wird. Aber Jensen hat einige Eigenschaften , die es ein bisschen zu sehr zurückziehen. Während Garamond immer noch wie eine moderne Schrift aussehen kann . Und aus diesen Gründen nutzen viele Anwälte, Anwälte und Buchhalter Garamond gerne. Es lässt die Dinge ziemlich offiziell und klassisch aussehen. Ich habe kürzlich mit einem Anwalt zusammengearbeitet und jedes Word-Dokument, das ich ihm geschickt habe, änderte er die Schrift, den Garamond. Wenn wir für eine Sekunde davon ausgehen, dass ich einen Brief habe , um einen Antrag für Anwälte oder jemand anderen mit einem sehr professionellen rechtlichen Hintergrund zu stellen, dann ist Garamond vielleicht eine gute Wahl für die Körpertexte. Oder wenn ich eine Anwendung mit einer etwas verrückten Ausreißerschrift entwerfe , verwende ich Garamond vielleicht nur für die Seite „Allgemeine Geschäftsbedingungen“, auf der ich möchte, dass die Dinge ein bisschen aussehen offizieller. Wie könnten wir das dann mit einer Überschrift verbinden? Nun, wir können uns einige dieser Inspirationsgalerien ansehen , über die wir gesprochen haben, wie Typ Wolf. Und ein weiterer Ort, an dem Sie sich ansehen können, ist offensichtlich unten auf der Google-Fonts-Seite. Es wird einige Dinge vorschlagen, die ziemlich häufig damit kombiniert werden . Jetzt habe ich nur vorgeschlagen, dass mein Auftrag darin besteht, einen Antrag oder eine Website für Anwälte oder andere ähnliche Fachleute zu stellen. So etwas wie Hummer wird definitiv nicht funktionieren. Wir könnten das sofort durchstreichen. In ähnlicher Weise nehme ich an , eine Schrift wie Spiel, die als Play bezeichnet wird , weil es an Computerspiele im alten Stil erinnert. In der Tat sieht es aus, dass fast Monospace vielleicht ein ganz bestimmtes Genre anzieht. Und deshalb können wir auch viele ignorieren, die uns verlassen. Und offensichtlich haben wir Hunderte anderer Überschriftenschriften, aber wir drei Möglichkeiten, von denen Google sagt, dass sie durchaus üblich sind, nämlich Roboto, Montserrat und Oswald. Jetzt ist Roboto unglaublich überbeansprucht. Einige App-Designer werden einfach Roboto verwenden. Ohne darüber nachzudenken, werden sie Roboto einfach an alles halten. Ich zögere immer, so etwas zu verwenden , da die Möglichkeit, dass unser Benutzer während der Nutzung unserer Anwendung schläft, mit etwas wie Roboto unglaublich hoch ist . Jetzt habe ich nicht wirklich das Gefühl, dass Montserrat so gut ist, als wäre es etwas, das mit Montserrat Regular zu tun hat, vielleicht wenn ich es mittel oder fett gemacht habe, aber etwas, das es zu tun hat eine sehr Art von schmalen Strichen, wodurch ich mich ein wenig mit Garamond zusammenstößt und wir werden später etwas mehr darüber sprechen . Aber ich fühle mich ziemlich von der Idee angezogen , Oswald mit Garamond zu verwenden. Und ein großer Vorteil ist sofort, dass dies eine sehr wirkungsvolle Überschrift ist. Sie fühlen sich so schnell davon angezogen, es ist so groß und dicht und es erregt Ihre Aufmerksamkeit fast wie eine dieser Plattenserien. Aber ohne Konnotationen von viktorianischen England-Plakaten zu haben. Ich habe das Gefühl, dass es einen wirklich schönen Kontrast zwischen diesen beiden Schriften gibt. Ich werde die jetzt nach Figma bringen , Oswald und Garamond. Und ich werde einige der Gründe erläutern warum diese Schriften zusammenarbeiten. Hier haben wir Oswald und Garamond als Textblock wie sie möglicherweise auf einer Website oder Webanwendung erscheinen können. Und du siehst, dass sie zusammen ziemlich gut aussehen. Ich denke, eine Sache, die ich für Oswald als Überschrift in einer Randnotiz halte für Oswald als Überschrift in einer , ist, dass es so sehr auffällt und solche Auswirkungen hat, man es als Überschrift ein bisschen kleiner machen kann. Und deshalb sehen wir vielleicht schon etwas professioneller aus für unsere Anwalts-Website oder Webanwendung, die wir möglicherweise erstellen. Wenn wir jetzt Schriften paaren, wollen wir nicht Schriften, die zu ähnlich sind, sie werden kollidieren. Es wird wie ein Fehler aussehen. Und wir werden später mehr darüber sprechen. Aber Sie haben eine optische Verzerrung , wenn Sie eine Schrift vergrößern. Und das könnte es möglicherweise wie eine andere Schrift aussehen lassen und als würde es mit sich selbst kollidieren. Selbst wenn wir nur genau dieselbe Schrift für die Überschriften verwenden , sieht es vielleicht ein bisschen so aus, als würde es kollidieren. Wir wollen, dass es offensichtlich anders aussieht. Wir wollen, dass es wie eine absichtliche Entscheidung aussieht. Und das wird uns auch bei unserer visuellen Hierarchie helfen . Es wird es unterscheidbarer machen, dass es sich um eine Überschrift handelt. Wir wollen also nie eine Überschrift haben, die dem Textkörper zu ähnlich aussieht. Soweit wir gerade sehen können, sehen diese ziemlich drastisch anders aus. Ich bin ziemlich breit in Kleidungsstücken, ist ziemlich offener Raum und Oswald ist sehr kondensiert. In der Tat wäre dies ziemlich gut für UI-Elemente. Es gibt auch eine verkürzte Version von Oswald, aber sie haben tatsächlich ein paar Ähnlichkeiten. Wir wollen auch nicht, dass sie vollkommene Gegensätze aussehen. Wenn sie wie vollständige Gegensätze aussehen, sehen sie aus wie zwei Dinge aus verschiedenen Welten, die wir zusammengeschoben haben. Sie brauchen einige Ähnlichkeiten. Wir wollen gleiche Persönlichkeitsmaße. Wenn unser Anzeigetext, wenn ich Texte übertrage, viel zu viel Persönlichkeit hat, wollen wir einen ziemlich konservativen Körpertext und umgekehrt. Schauen wir uns nun ein paar der Dinge an, die sie ähnlich haben , weil sie gerade ganz anders aussehen. Eine Sache, die wir immer immer immer wollen, dass sie zwischen dem Anzeigetext und dem Textkörper zumindest relativ ähnlich sind, ist die x-Höhe. Hier habe ich also ein Kapital L und ein paar Kapital x sowohl in Oswald als auch in Garamond. Und wir können sehen, dass Oswald eine etwas höhere X-Höhe hat als das Kleidungsstück, aber es ist nicht drastisch höher. Es sind etwa 57% der Höhen in Oswald und bei EB Garamond sind es etwa 50%. Im normalen Garamond ist es etwas kleiner, hier gibt es ein bisschen Platz, aber sie sind relativ ähnlich. Das ist wirklich wichtig und wir werden später mehr darüber sprechen. Aber wir wollen immer, dass unsere Anzeigetexte und unsere Körpertexte eine ähnliche x-Höhe haben. Wir wollen nie eine mit einer wirklich hohen x-Höhe und eine mit einer wirklich niedrigen x-Höhe. Das nächste, was ich mir ansehen möchte, ist wenn man sich dieses E von beiden anschaut, kann man sehen, wie die Gewichtung ziemlich ähnlich ist. Bei einer traditionellen Serif wie Garamond gibt es keinen großen Kontrast . Wenn man sich die kleine Querlatte des E und dann die Seite des E. anschaut, sieht man , dass der Kontrast beim Warten ungefähr dem Kontrast entspricht, den sie auf Oswald warten. In dieser Hinsicht sind sie ähnlich. Wenn wir uns für eine Schrift wie eine moderne Serif entscheiden würden, wird sie ganz drastisch anders aussehen als etwas wie Oswald. Und wir werden versuchen wollen, andere Wege zu finden , um es ähnlich zu machen. Vielleicht könnten wir einen Überschriftentext mit ähnlicher Breite finden . Der Kontrast im Strich ist zwischen diesen beiden Schriften ziemlich ähnlich. Und dann endlich die eigentliche Form. Der Garamond hat offensichtlich viel größere Öffnungen. Wir können sehen, wie es viel breiter ist und dieser Raum im E viel größer ist und Garamond nach Oswald. Aber die tatsächliche Gesamtform der Buchstaben, zum Beispiel die a, ist die traditionelle Form in beiden. Und ich habe mir die Schrift angeschaut. Die meisten Gitter haben ähnliche Formen. Und ich habe das erwähnt, denn wenn ich diesen Oswald um mehr als zwei, vielleicht eine Futura a oder so, tausche diesen Oswald um mehr als zwei, , wirst du sehen, dass er eine ganz andere Form hat. Und selbst wenn dies zusammenhängt und all die anderen Wege, dann wird es einen Kontrast dazu schaffen. Es gibt Ähnlichkeiten zwischen diesen Schriften, die sie so aussehen lassen, als gehöre sie zusammen, während sie genügend Kontrast haben , um ein visuelles Interesse zu erzeugen. Natürlich wird die Kombination einer Serif mit einer Serifenlose immer sofort die Spannung erzeugen, die zwischen den beiden kontrastiert. Aber wir könnten auch viele Dinge tun , die mit der Gestaltung des letzteren, dem Kontrast des Schlaganfalls, wie humanistisch er aussieht, zu tun Kontrast des Schlaganfalls, wie humanistisch er aussieht, haben. Manchmal sieht etwas wie Futura geometrisch aus, während einige Garamond fast leicht handgeschrieben aussehen. Es hat einen fließenden Schlaganfall. Wir könnten das als humanistisch bezeichnen und wir würden die Zukunft als rational bezeichnen. Und wenn wir Schriften wählen, die gut zusammenpassen, wollen wir einen gewissen Kontrast und einige Ähnlichkeiten. Es geht darum, diese beiden Dinge auszugleichen. Aber die eine Sache, die wir bei den x-Höhen keine Kompromisse eingehen wollen . Es muss immer eine relativ ähnliche x-Höhe haben. Das ist eine Schriftpaarung mit Oswald und Garamond. Sehen Sie, ob Sie Anzeigetexte finden können, die Ihrem Brief entsprechen und auch ganz gut zu Ihrem Körpertext passen. Denken Sie daran, dass Sie möchten, dass es einen erheblichen Kontrast hat , aber trotzdem so aussieht, als gehöre es zusammen. Im Idealfall sollte es einige Ähnlichkeiten und einen gewissen Kontrast geben. 10. Font: Bevor wir anfangen, unser Typ-Pairing zu üben, wollte ich dir dieses wirklich coole Spiel zeigen, das ich gefunden habe Es heißt Typverbindung. Und die Typverbindung beschreibt sich scherzhaft als typografisches Dating-Spiel. Um dich zu trainieren, um Schriften zu koppeln. Es wird uns zunächst fünf hier geben. Und ich entscheide mich für Garamond , weil wir uns Garamond bereits angeschaut haben. Und dann gibt es uns hier eine Art vollständige Regeln darüber, wie wir einen guten Partner für Garamond wählen könnten einen guten Partner für Garamond wählen , und schlägt vor, dass wir uns entweder auf die Familie verlassen könnten, in diesem Fall wählen Sie ein eine andere Schrift aus derselben Familie, eine andere traditionelle Serifenschrift. Oder um etwas zu suchen , das ganz ähnlich aussieht , oder etwas mit ziemlich starkem Kontrast zu betrachten oder etwas mit einer Art historischer Verbindung zu finden . Nehmen wir an, ich wollte etwas finden , das ziemlich ähnlich aussah. Ich klicke hier und es gibt mir drei Möglichkeiten. Und einer von ihnen ist laut dieser Website die richtige Kombination. Und zwei von ihnen sind Dodds, die mit Garamond nicht sofort gut aussehen werden . Wir wissen, dass dies hier eine moderne Serif ist, dieser Pm, und das muss ich nicht aussprechen. Also würde ich sagen, dass dies wahrscheinlich nicht der Crack-Tänzer ist. Und dieser sieht hier ziemlich übergangsweise, aber auch sehr starke Plattenserien aus. Und wenn ich mir die Skriptbeschreibung anschaue, heißt es, dass sie eine hohe x-Höhe hat, lässt mich irgendwie mit dieser einen Option übrig , nämlich dass diese Schriftart vielleicht am besten zu Garamond passt. Und was hier wirklich cool ist, ist, dass ich einige der Funktionen darüber sehen kann , wie die Querlatte aussieht. Es besagt, dass es einen kleinen Zähler mit SCOTUS gekennzeichnete Kopfserif hat . Und wenn ich auf die andere Schrift umschalte , gibt es auch eine keilförmige Kopfserif und eine kleine Theke. Es hat also viele Ähnlichkeiten. Und das, was wir gesucht haben, war eine ähnliche Schrift, sagen wir mal. Und es heißt: Gut gemacht, ich habe eine Schrift gefunden, die gut zusammenarbeitet. Komm und spiele mit diesem Spiel, denn manchmal wird es dir sagen , dass du falsch liegst und es wird erklären warum. Und Sie können einige Details über die Schrift sehen und es wird Ihnen wirklich bei einigen dieser Anatomiewörter helfen Ihnen wirklich bei einigen dieser Anatomiewörter über die wir bereits gesprochen haben, und so etwas. Dies kann ein ziemlich lustiges Spiel , um zehn Minuten zu spielen. Jetzt möchte ich Sie auch sehr schnell nur an ein paar Seiten erinnern, die wir uns früher angeschaut haben , als wir über Inspirationstyp Wolf sprachen , wo es Ihnen nur Schriften zeigen wird , Kombinationen und Schriftpaare, bei denen es Ihnen Kombinationen von nur Google Fonts zeigt. Wenn Sie sich bereits für Ihre Körperschrift entschieden haben, könnte es praktisch sein, nur zu sehen, was diese Websites empfehlen, gut dieser Schrift zu passen. Und dann können Sie anhand der Optionen, die gut funktionieren, eine sehen, die zu Ihrem Auftrag passt. Jetzt könnte ein guter Zeitpunkt sein, um Ihre Inspiration noch einmal zu überdenken , nachdem Sie sich bereits für eine Körperschrift entschieden haben . Als nächstes habe ich eine Herausforderung für Sie, die ich möchte, dass Sie so oft wie möglich ideal wiederholen so oft wie möglich ideal , indem wir schließlich lernen, ich möchte, dass Sie einen berühmten Designer oder Künstler oder Musiker mitnehmen oder irgendjemand wirklich, und versuche ein sehr einfaches Modell zu wie eine Seite über sie aussehen könnte. Wir möchten, dass es andere Anzeigetexte für Körpertexte und dann möglicherweise mit einem Bild ausgeblendet wird. Wirklich, ganz einfach. Bevor wir ein ganzes typografisches System erstellen, möchten wir eine Art damit herumgespielt haben , um zu sehen, wie es auf einer Seite aussehen und funktionieren könnte. Ich habe das sehr schnell nur dreimal für Dieter Rams, Jackson ******* und Frank Gehry gemacht, wo ich mich für jede Schriften entschieden habe. Und dann lege ich sie auf eine Seite damit ich sehen kann, wie sie aussehen. Nun, Dieter Rams für diejenigen unter Ihnen, die es nicht wissen, war er ein sehr berühmter Designer , der bei Braun gearbeitet hat. Und ich habe zwei Schriften gewählt, Haare, Ubuntu und Cabin. Und ich habe mich für diese entschieden, weil sie sehr minimalistisch und sehr modern aussehen oder modern was Dieter Rams als Zeit angeht. Aber beide haben eine sehr subtile Verspieltheit für sie. Wenn wir uns die beiden Rams-Arbeit ansehen, sehen wir, dass er eine sehr, sehr subtile, sehr einfache Verwendung von Farbe und Muster verwendet sehr einfache Verwendung von Farbe und , um sie ein bisschen verspielt zu machen und bestimmte Charaktere zu haben. Und ich denke, diese offenen zwei Texte, das B ist absolut perfekt so, wie es diese kleine Kurve knapp über die Grundlinie und über die oberste Linie nach oben und nach unten hat diese kleine Kurve knapp über die Grundlinie und über die oberste Linie nach oben und nach unten . Und es wölbt es aus und sieht irgendwie ähnlich aus wie ich sehe Dieter Rams es wert ist, gesehen zu werden. Ich habe gefunden, was ich für eine ziemlich vernünftige Paarung zwischen den beiden halte. Und wieder, wenn ich in den Körpertext zoome, kann man sehen, dass er einen gewissen Kontrast hat, aber auch wieder ein gewisses Maß an Ähnlichkeiten. Wieder hat eine kleine Menge an Verspieltheit. Eine Sache, die ich für besonders schön halte , ist, dass Dieter Rams sagt, neues Unternehmen ist es. Also und es hat tatsächlich die Glyphe mit O und E zusammen, was absolut wichtig ist, wenn ich gehe um eine Seite zu erstellen, die über Dieter Rams schreibt. Und nachdem ich diesen berühmten Designer ausgewählt und dann diese beiden Schriften ausgewählt habe, und später auf einer Seite, kann ich sehen, dass dies wirklich die genaue Botschaft vermittelt, die ich will. Es ist eher ein Gefühl als alles andere. Aber diese beiden Schriften arbeiten zusammen. Sie sind sehr modernistisch, aber sie haben die gleiche Art von Verspieltheit, die Dieter Rams meiner Meinung nach mit seiner Arbeit haben würde. Der zweite, den ich wählte, war Jackson *******, dem ich dachte, dass es ein ganz anderes hätte. Nähern Sie sich ihm. Er hat eine Menge Sachen mit spritzender Farbe auf Leinwand gemacht. Und wenn ich hineinzoome, ist der Überschriftentext Cuando und der Haupttext ist Judson. Und wenn ich hinzoome, sieht der Überschriftentext fast wie gespritzte Farbe auf der Seite aus. Wir können sehen, dass es ziemlich verspielt ist. PII schließt sich jedoch nicht ganz an. Es sieht ziemlich humanistisch aus. Einige der Formen, so wie sich der schmalere Teil des E in einem leichten Winkel befindet. Es sieht aus, als wäre es handbemalt. Es gibt eine gewisse Bewegung in den Serifen der Spitze des W und des H. Ich kann mir fast vorstellen, dass dies von jemandem gezeichnet wird , der Farbe heruntertropft, vielleicht tippen. Aber zumindest hat es das Gefühl, dass Expressionisten dafür fühlen. Und dann hat der Körpertext ein ähnliches Gefühl, denke ich, aber es ist viel subtiler. Es leitet nichts von der Lesbarkeit ab. Wenn du eine Seite über Jackson ******* erstellt hast, denke ich diese Texte, es ist absolut fantastisch. Wir können sehen, dass die Form des T sehr ähnlich ist, aber diese ist viel sauberer und einfacher zu lesen. Eine kleine Größe. Natürlich bin ich für Serifs mit Jackson ******* gegangen. Ich wollte so viel Extravaganz und Detail wie möglich. Und wenn ich auf einer Seite neben diesem Bild liege, konnte ich nicht sagen, dass ich mit dieser Entscheidung ziemlich zufrieden bin . Ich habe das Gefühl, dass dies eine ähnliche Art von Botschaft kommuniziert. Dann habe ich endlich eine sehr schnelle einfache Seite für Frank Gehry erstellt und hier eines seiner architektonischen Gebäude angelegt . Er ist ein Architekt ähnlich wie Dieter Rams ist sehr modernistisch. Ich habe mich für Sans Serifs entschieden, aber er hat einen anderen Stil der Verspieltheit. Es ist postmodern, es ist unsinnige Verspieltheit. Die Schriften, die ich hier ausgewählt habe, sind sechs Kappen und Joseph im Sand. Und Sie können sehen, dass die sechsten Großbuchstaben wollen , dass Kleinbuchstaben eigentlich kleine Großbuchstaben sind, was irgendwie verrückt ist und es keinen Sinn ergibt. Es ist nur da, um etwas anderes zu geben, was Frank Gehry meiner Meinung sehr mögen würde , um ehrlich zu sein. Auf den ersten Blick sehen Joseph und klingt es vielleicht nicht so aus, als hätte es diesen verrückten Postmodernisten, aber ich werde hineinzoomen und du kannst dieses E sehen, es hat aber ich werde hineinzoomen und du kannst dieses E sehen, einen wirklich seltsamen Winkel abgeschnitten. Es ist gedreht. Dieses Z oder Z. Wenn Sie in den USA sind, hat es eine seltsame Lippe, wo es am Ende einfach hochspringt und das W überquert. Besonders merkwürdig. Aber insgesamt hat es immer noch ein modernistisches Aussehen. Es hat nur diese wirklich verrückten kleinen Wendungen hier und da, die Frank Gehry einfach vor mir retten. Also meine Herausforderung für Sie, und ich denke, Sie sollten dies genauso oft tun, wie Sie Zeit haben, einen Künstler auszuwählen, einen Designer auszuwählen, einen Musiker auszuwählen, wenn Sie möchten, zu versuchen, eine Körpersteuer zu finden und zu versuchen, eine Körpersteuer zu finden und ein Anzeigetext, der gut zusammenarbeitet. Aber du hast das Gefühl, dieselbe Botschaft wie der Künstler zu vermitteln , die dir das gleiche Gefühl vermittelt. Wenn Sie an niemanden denken können oder Sie eine zusätzliche Herausforderung wünschen . Was ich denke, dass es wirklich Spaß machen könnte, wäre, eine Website wie ein Wiki roulette.co zu benutzen . Ich bin gerade zum Wiki-Roulette gekommen und es gibt mir zufällig den Namen eines ukrainischen Politikers, der auch Baumeister und Elektriker ist. Und ich denke, es könnte Spaß machen, einfach eine zufällige Wikipedia-Seite zu machen eine zufällige Wikipedia-Seite und zu sehen, wie man sie neu gestalten würde. Welche Schriften würdest du wählen wenn es nur für diese eine Seite wäre? Sie haben vielleicht Glück und bekommen eine Person wie Haare, aber manchmal bekommen Sie eine Theorie oder einen Ort und sehen, ob Sie sich eine Vorstellung davon machen können, welche Emotionen vom Marketplace oder jener Theorie oder was auch immer auf dieser Wikipedia-Seite ist. Und sehen Sie, ob Sie dann eine wirklich einfache Komposition wie diese von dieser zufälligen Wikipedia-Seite erstellen diese von dieser zufälligen Wikipedia-Seite könnte die nächste Stufe dieser Herausforderung sein. Ich möchte wirklich, dass du weggehst und das tust, und ich möchte, dass du weggehst und es mindestens dreimal machst. Denn je öfter du es machst, desto mehr wirst du eine Vorstellung davon bekommen welche Persönlichkeit und welche , welche Persönlichkeit und welche Gefühle Schriften haben und natürlich, wie gut sie mit anderen Marken oder anderen Ideen kombinieren du versuchst, Designs zu erstellen. 11. Zusammenfassung: Wir brauchen zwei Dinge, bevor wir mit der Auswahl einer Schrift beginnen können , wir brauchen Inspiration. Wir brauchen jede Menge Inspiration. Wo werden diese Schriften häufig verwendet? Welche Optionen von Schriften gibt es und wie werden sie verwendet? Dann müssen wir sicherstellen, dass wir unsere Anforderungen im Voraus kennen. Anforderungen können sich ändern, wenn wir Ideen erhalten und wenn wir mit einem Kunden oder Stakeholder zusammenarbeiten, können sich auch die Anforderungen ändern. Wir müssen also sicherstellen, dass es definiert ist bevor wir anfangen zu kaufen. Während wir einkaufen, gibt es kostenlose und kostenpflichtige Schriften. Bezahlte werden einzigartiger sein, können aber auch eine bessere Ausrichtung haben und mehr Glyphen stehen uns zur Verfügung. Freie werden entweder von Hobbyisten gebaut , die ihr Minimum aufgebaut haben. Alles, was sie von Google oder Microsoft erstellt werden , kopieren zu oft beliebte Schriften und können daher weniger unterscheidbare Zeichen geben . Für die meisten Projekte. So etwas wie Google-Schriftarten sind jedoch Ihr Anlaufshop oder vielleicht Adobe-Schriftarten, wenn Sie ein Creative Cloud-Konto haben oder wenn Ihr Kunde dies tut, können professionelle Schriften sehr sein teuer und es ist sehr wichtig, dass Sie sicherstellen, dass Sie die richtige Lizenz für unseren Anzeigetext und unsere Überschriften haben. Wir wollen etwas Einzigartiges, das den Charakter der Anwendung zum Ausdruck bringt und ihr ein seltenes und wertvolles Gefühl verleiht. Wir brauchen jede Schriftkombination, um miteinander zu kontrastieren und uns zu gleichen Teilen zu ergänzen. Wenn wir unseren Haupttext auswählen, ist eines der wichtigsten Attribute wie einfach es für unseren Benutzer ist, zu lesen.