Eine Einführung in die Web Fonts und moderne Web Typografie | Simon Foster | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Eine Einführung in die Web Fonts und moderne Web Typografie

teacher avatar Simon Foster, Digital Lead

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

5 Einheiten (57 Min.)
    • 1. Willkommen in der class, einer Einführung und einem gewissen Kontext.

      13:25
    • 2. Hauptprojekt Teil 1

      9:20
    • 3. Hauptprojekt Teil 2

      15:05
    • 4. Hauptprojekt Teil 3

      11:33
    • 5. Hinzufügen von selbst gehosteten Webfonts über fontsquirrel.com

      7:37
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

724

Teilnehmer:innen

2

Projekte

Über diesen Kurs

Typografie im Internet hat in den letzten Jahren Sprung und Grenzen gefunden und ist immer mehr in der Verbesserung und Weiterentwicklung. Designer haben immer mehr Kontrolle darüber, wie sie Typografie angehen, sondern auch die Schriften, die sie verwenden, und die Behandlungen, mit denen sie sie gestalten, sind mit großer Kontrolle überaus verantwortlich. Typografie im Internet geht nicht nur darum, die neueste hübsche Schriftart, Lesbarkeit, Benutzerfreundlichkeit und geräteübergreifender Skalierbarkeit zu wählen, muss mit der Ästhetik ausgewogen werden.

Wer sollte diesen Kurs nehmen? Dieser Kurs richtet sich an beginner die bereits lernen oder dabei HTML(5) und CSS(3) lernen und ihre typografischen Fähigkeiten im Rahmen moderner ansprechender und vorwärts denkender Design-Techniken verbessern möchten.

Das Projekt. Die Schüler werden in einer Reihe von type-heavy Aufgaben an einem type-heavy arbeiten, den ich bereitstellen werde, die die funktionalen, praktischen aber auch unterhaltsamen Seiten der Arbeit mit dem Typ im Internet abdecken. Du lernst, wie du sowohl gehostete als auch dritte Webfonts verwendest, wie du die Lesbarkeit für den Benutzer maximierst und sichere Rückfälle bereitst, um die Verwechslung zu unterstützen, aber am wichtigsten ist, wie du die Typografie genießen kannst und es als eine spannende Form der Kommunikation betrachtest.

Was wirst du also lernen? Die Kernkompetenzen, die in dem Kurs erlernen werden, sind:

  • Der Unterschied zwischen guter Typografie und der Auswahl einer schönen Schriftart.
  • So verdeutlichen Sie Webfonts mit @font-face und über Dienste von Drittanbietern
  • So machen Sie Ihre Inhalte unabhängig von dem verwendeten Gerät konsistent lesbar.
  • So verwenden Sie CSS(3) Medienabfragen, um das Erlebnis zu verbessern, wenn es geeignet ist.
  • So passen Sie verschiedene Schriftarten zusammen, um sich gegenseitig zu ergänzen.
  • So verwende ich die Typografie, um die Kommunikation zu unterstützen.
  • Wie Typografie mit Bildern besonders gut genutzt werden kann.
  • Wie das responsive Design die Darstellung der Web-Typografie verändert hat und wie du das Erlebnis auf allen Geräten verbessern kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Simon Foster

Digital Lead

Kursleiter:in

I previously ran my own freelance web design business but nowadays I'm Digital Lead at Hamilton-Brown in Farringdon, London. I also regularly write articles, give interviews and my work is regularly featured in well respected publications such as .net Magazine and awwwards.com amongst many others. I work with brands, user experiences, interfaces, systems, products and education.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Willkommen in der class, einer Einführung und einem gewissen Kontext.: - willkommen zu einer Einführung in Waffen auf moderne Web-Typografie. - Mein Name ist Simon Foster und ich bin ein freiberuflicher Webdesigner aus London, England. - Diese Klasse ist im Grunde nicht nur eine Einführung in den Einsatz von Waffen, sondern dient auch als Einführung in die moderne Web-Typografie im Allgemeinen, insbesondere im Kontext des responsiven Webdesigns. - Später, - Ich werde Sie durch eine Art von einem Mock-up-Projekt, das Art sein wird, - wie ich sage, - der Mock Up Web-Artikel, der eine Menge der Techniken und Prinzipien, die ich verwende - in meinem datierten die Verwendung von Typografie und Design. - Aber erstens, - dieses Einführungsvideo wird hoffentlich dieses Auto in einen Kontext bringen, indem es eine Art - kurze Übersicht darüber gibt, wo Topographie im Web begann und wo es jetzt ist. - Also, wo hat alles angefangen? - Nun, - bevor wir Schriftart Gesicht hatten, bevor wir Web Fonts und Type Kit hatten, - Front Deck und Schriftschule. - Außer, dass du auf bist, bevor wir angefangen haben, herauszufinden, wo solche ansprechenden Dinge viel einfacher waren . - Also hatten wir unsere Website Fonds, - welche Art von gab über das Design einer sehr begrenzten Palette von dem, was Sie verwenden könnten, oder sie - könnten Sie Sorry. - Also auch unsere Website-Fonds hatten wir unsere sans serif engen Freunde nutzen unsere Luft hoch - Helvetica comic sans Auswirkungen außer Ihnen. Dann hatten wir unsere Mono-Gewürztelefone, die Curium sehen Sie dort Konsole und dann sind wir jetzt - Serifenschriftarten wie Georgia Times neu ankommen, - usw. - Und das hatten wir im Grunde. - Und nicht nur das, - wir haben eine begrenzte Palette von Schriftarten. - Wir sind irgendwie begrenzt. - Wie Websites aussehen würde, sind Web-Seiten Schnittstellen außer Europa. Wir wussten irgendwie, dass sie auf einem Desktop oder Laptop gesehen werden, und wir wussten, dass wir vorerst eine vorgegebene Menge Platz haben würden und wir wussten, dass wir vorerst eine vorgegebene Menge Platz haben würden. - Topographie Route, - Ort, - toe angesehen werden. - Andi, was? - Das Leben war einfach. - So, - wie so oft der Fall ist, - Dinge haben sich geändert. - Also, während wir ohne bescheidenen Anschlag oder Laptop angefangen haben und wir einen festen Peitschenbildschirm hatten, - und wir wählen jedes Mal viel vom gleichen Typ Blogger aus, - und wir können nicht wissen, wo wir waren. - Plötzlich all diese kleinen Geräte Flut mit Internet und Waffen und so - gut den Anfang der Smartphones. - Mehr Telefone, - Tabletten, - dann mehr Telefone, - mehr Tabletten, - Netzbücher und ja, - würde ich jetzt Philosophie. - Und auf dem Weg, den wir so entworfen haben, wie wir oben jede Topographie im Web sehen, - musste ich mich irgendwie anpassen. - Und so wegen dieser Änderungen, - eine der Möglichkeiten, die als seine Besitzer, - haben wir seine Waffenbesitzer angepasst Wir angepasst an Diese Änderung war es, CSS-Medienabfragen zu verwenden und - responsive Design. - So, jetzt Typografie eine Stunde legen ihr Design. - Unsere Sehenswürdigkeiten haben jetzt gearbeitet und waren lesbar und nutzbar auf Tabletten, - Desktops, - Telefonen, und was auch immer Gerät auf uns geworfen wurde, und ungefähr zur gleichen Zeit ist all diese modern - Gewicht, dass der Weg zu schauen. - Aber in vollem Umfang, - die zuvor vernachlässigten bei Schriftart Gesicht CSS Armut beginnen, etwas Traktion zu gewinnen. - Also plötzlich benutzten wir Waffen und plötzlich hatten wir Schriftarten, - coole Google-Waffen, die für Ihre Dienste funktionieren. - Und dann etwas später hatten wir, - wie, - ein Typ-Kit vor Deck, - und jetzt haben wir eine viel breitere Palette von mutigen Gaumen off Schriften und Schriftarten, die wir - im Web verwenden könnten, - die gerade dort, wo wir jetzt sind. - Ich denke, es ist und der Zweck dieser ganzen Klassen, die jetzt eine Position verbrennen, ist Ehrungen - wo wir keine unbegrenzten Paletten von Schriften und Schriftarten haben, die wir auf unseren Webseiten verwenden können -, - und wir haben auch unsere Verantwortung und ein Verpflichtung bereit für unsere Benutzer jetzt Arten. - Und wer auch immer, dass die Typografie, die wir verwenden, nutzbar ist, war innerhalb mit einer Kombination lesbar - abgesehen von Best Practices und Responsive Design und Medienabfragen schwächen Typografie aus. - Nein, - nur schön unbrauchbar auf einem Desktop, - immer auf einem Tablet oder iPhone oder Smartphone Android, - was immer Sie es nennen wollen. Also, bevor wir mit dem eigentlichen Projekt beginnen, möchte ich ein paar Grundprinzipien durchlaufen. - Verständnis steht in gutem Zustand für das Produkt kommen, - und ich denke, die wichtigsten Fragen als seine eigene a können wir sich selbst ausschalten. - Er hat gekauft ist Typ Pokerfüße, - und ich denke, - vor allem - in erster Linie - Topographie ist eine Form der Kommunikation, die Art und Weise. - Aber das Internet ist etwa 95% Text. - Es ist, wie wir unsere Ideen ausdrücken, - wie wir Produkte oder Dienstleistungen ausgesendet haben, - wie wir miteinander interagieren und wie zuvor, - Formen der Kommunikation. Wenn wir es klar wissen und die Leute nicht verstehen können, was wir sagen, dann hören sie nicht zu. - Also der Unterschied zwischen guter Kommunikation, - schlechte Kommunikation ist im Grunde der Unterschied zwischen Menschen genießen, auf unseren Websites -. - Und nein, - es ist der Unterschied zwischen Leuten, die auf der Nachricht verstehen und nicht unsere Nachricht verstehen. - Wenn l Kommunikation als Beispiel schlecht ist, - dann wird es laut, - wird Qualität, - wird überladen und wird auf der unangenehmen Erfahrung. - Und, äh, - ziemlich bald wirst du nur zum Lärm und zu viel Lärm, als ob alles ist, was es nicht ist. - Es tut unserem Gehirn weh. - Es verwirrt, - geht verloren, - Kommunikation geht verloren und am wenigsten sie nur eine allgemein schlechte Erfahrung. - Also, wie Typografie immer klar wurde. - Einfach, - einfach ein Ständer. - Also bin ich eigentlich immer klar. - Also die große Frage, wie wir Typografie kommunizieren lassen? - Wie macht man es lesbar? - Wie stellen wir sicher, dass eine Nachricht nicht verloren geht? - Was nicht einfach dazu zuerst klingt, macht es immer groß genug, - aber Sie können ein Beispiel sehen. - Der Typ der ersten Zeile ist Herr, also kannst du es lesen. - 2. 9 ist klein, - also hast du es geschafft. - Es klingt ziemlich offensichtlich, aber Sie wären überrascht, wie oft das vergessen wird. - Sogar auf vielen modernen, - responsive Websites. - Ich sehe immer noch viele Websites nach deinem Kopf. - Oh, mein, äh, mein ich Telefon oder was auch immer. - Tom Brady ist noch zu klein, - und andere Dienste besonders wichtig, wenn es um Handheld-Geräte geht. - Wenn Sie die Typografie es auf den Armen links lesen können, aber eine schöne bequeme Entfernung von Ihrem - Gesicht, - dann wird es ein angenehmes und komfortables Erlebnis. - Aber wenn der Typ so klein ist, dass Sie Schielen und bringen Sie es raubt Ihr Gesicht als sicher - das ist keine gute Erfahrung und wurden kontrolliert dies, so sollten wir besser wissen. - Es gibt keine Entschuldigung alles für Ihren Typ, so klein ein Gerät zu sein, dass es nicht un wird - angenehm, es zu sehen. - Nein, - ich nie wichtiger Aspekt aus Typografie ist Kontrast. - Nun, - wenn unser Text uh ist - Farbe Varteks ist zu nah an der der Hintergrundfarbe, - dann hebt er sich nicht sehr ab und hat nicht viel Kontrast, - und deshalb müssen wir uns anstrengen, um es zu lesen. - Und natürlich, - wenn ich, - wenn Sie sich anstrengen müssen, um jeden leidenschaftlichen Text zu lesen, ist es nicht angenehm und und Sie hören auf. - Also müssen wir wirklich sicherstellen, dass es einen guten Kontrast gibt. - Meine Bits. Warum schwarz oder schwarz auf Wydell, was auch immer es sein mag, werde ich mich auffallen lassen, damit er so sein kann, dass wir es lesen können. - Ein weiterer sehr wichtiger Aspekt der Topographie ist der Zeilenabstand oder, - wie es aus dem Druckschweißer führenden bekannt sein. - Jetzt schaue ich Zeilenabstand ist irgendwie, dass der Atemraum zwischen der Linie erkennt. Also, wenn wir uns dieses Beispiel hier ansehen, - wenn wir könnten, ist überragender Text, - können wir es offensichtlich nicht wirklich lesen, weil es zu nah beieinander ist. - Das gibt es keinen Abstand. - Die Linie kommt nicht. Wenn wir uns das ansehen, haben wir einen netten, ... freien Raum und lassen mich heute Abend zwischen den beiden Zeilen. - Dann wird es leicht zu bewerten. - Du musst nicht darüber nachdenken. - Und jetzt ein ähnliches. - Ich denke, das ist der Abstand, den Sie zwischen Buchstaben und Wörtern im CSS haben, - sein Buchstabenabstand der Wörter Abstand. - Wir konnten wieder sehen, dass, obwohl unser Zeilenabstand jetzt in Ordnung ist, weil ich sage, es war - zusammengequetscht , - es wieder ist es schwierig, wirklich , - es ist unmöglich zu lesen. - Und so mag das Spiel sehr offensichtlich erscheinen, aber es ist ein grundlegender Aspekt der Typografie, den wir immer bewusst sein müssen. - Okay, - also der letzte Abschnitt dieser Einführung, aber ich möchte das kurz abdecken, - ist die Idee von Inhalt und Hierarchie. - Und was ich damit meine, ist die Wahl der richtigen Schriftart für das Richtige - Art von Inhalt und auch die Zeichen unseres Textes, - wie es eine gewisse Hierarchie und eine inhaltliche Trennung bezeichnet. - Also, - zum Beispiel, - hier hier beginnen wir mit einem, ob Überschrift und es ziemlich groß, - kalte Zeit ist. - Und wenn Sie dem mit einer Leidenschaft des Textes folgen, - können wir hier sehen, weil wir jetzt schöne und große und aus der Passage I Absätze haben - darunter. Obwohl sie kleiner sind, sind sie immer noch groß genug für Sie, um zu lesen, nicht die Trennung in der Größe. - Das sehen sie uns einfach. - Was ist die Überschrift? - Was ist jetzt zufrieden auf eine andere Weise. - Aber wir könnten noch weiter zeigen, dass gerade jetzt der Absatz Text ist in der gleichen - Schriftart ist Überschrift. - Aber wenn wir das in einen netten Sarah-Film trafen. - Dann wieder, - bekommen wir noch mehr Trennung zwischen Enthauptung und dem leidenschaftlichen Haupttext. - Nein, - ich habe nie Beispiel der passenden Typografie. - Er ist alles, was die Instanz ist. Wir sehen, dass wir Avery kursive Fluid Schrift haben oder Spaß für die Hauptüberschrift dort haben, und es ist in Ordnung. - Wir können es lesen. - Und wenn wir das für Haupttext verwenden und es ist nicht einfach, - unlesbar und unbrauchbar, - also müssten wir bedenken, dass der Typ eine funktionale Sache ist. - Und wenn etwas richtig ist, wie eine Überschrift in der Bretagne, - ein paar Worte, - es ist nicht unbedingt richtig für den Haupttext. - Das schließt Thean Produktionsvideo in die Klasse. - Hoffentlich haben wir dort einige Themen behandelt, die Sie in gutem Zustand stehen können und die Klasse die - Produktgeschichte, die in den Kontext kommt. - Andi. - Aber gehen wir weiter zu Teil zwei 2. Hauptprojekt Teil 1: - auf. - Willkommen beim eigentlichen Projekt, dass wir die Klasse machen werden. - Ich denke, ich werde beginnen, indem ich Ihnen die, äh, - Halterstruktur, die das Projekt. - So sollten Sie in der Lage sein, die ZIP-Datei mit Start-Fellows herunterzuladen. - Und dann fiel jeder mit den konkurrierenden Akten. - Ich habe auch die fertig gestellte aufgenommen, - nur als Referenz. - Also, wenn Sie stecken bleiben oder verloren Utkan haben einen Blick auf das und und es wird Sinn machen übermäßig. - Also fangen wir mit Gott an. - Erste Dinge zuerst. - Ich werde Google-Waffen für diese Übung verwenden. - Andi, das zeige ich dir in einer Minute. - Wie? - Zehe gehen da rein und ein kleines Projekt einrichten und wählen, welche Mittel Sie wollen. Und dann, später, werde ich Ihnen zeigen, wie Zehe Web-Fonts verwendet später, werde ich Ihnen zeigen, wie Zehe Web-Fonts verwendethat. - Selbst von der Vorderseite gehostet. - Sie ist diese Prophezeiung. - Aber zuerst wird es sein, es auszugehen. - Mein Handy gibt Waffen, damit wir nicht wissen, dass das Telefon noch zu viel ist. - Komm schon. - Das später. - Lass mich gehen. - Unsere Bilder. - Du hast eine Hauptheldengrube und dann ein kleineres Kontaktbild. - Aber unser Index macht Sie jetzt Folie, - gehen Sie aus der Mode. Sie und dann haben wir unsere Skripte, dem Moment, als Sie einen,äh, ...die HTML-Fünf haben äh, ... , die ihre Streitsicherung verlagern. - Also, wenn Sie öffnen Sie den Index HTML fallen in Ihrem Browser, - Ich benutze Google Grow Mia und ich drehte. - Als angehende Web-Designer, - werden Sie Chrome oder Safari oder Firefox oder Profis und Materie und Änderung verwenden. - Sie werden sehen, dass es im Grunde auf Stil ist. - Also, weil Elemente und dann tut es in Bildern, - Text und so. - Aber ja, tut es nicht. - Sie könnten Sie senden und keine Show Ihnen eine schnelle Es ist wie eine Vorschau auf die, wie es sollte - aussehen, wenn fertig. - Und aber du hast das nicht viel benutzt, um es dir jetzt zu zeigen. - Und so sehe ich aus. - Lassen Sie mich fertig. - Also habe ich meinen Index geöffnet, der in meinem Stil Schafe in ah, - Texteditor eingereichtwurde. der in meinem Stil Schafe in ah, - Texteditor eingereicht - Ich benutze die Lieferung von Text an, ähm, aber Sie können sich frei fühlen, was Sie wollen. - Kein Pad oder kein Pay Plus oder Kodo, was auch immer du jemanden benutzen willst. - Ich sollte auf ein paar Dinge hinweisen. - Vor allem haben wir, wie man die Seite verantwortungsvoll funktioniert. - Wir haben College-Metta Aussichtspunkt Sache hier mit, wie viele eine Skala Maximalskala im Grunde ist - bedeutet, dass es, weil die Wissenschaft malen wird, also wird es reagieren. - Im Grunde bedeutet es, dass wir eine genaue Darstellung abbekommen. - Wie Sie Dinge wollen, die aussehen und es tut nicht Es tut deaktiviert Zoom, - aber weil wir unsere Top 3 in diesem Fall groß genug machen, - sollten wir es nicht ohnehin einen Titel überblicken müssen Dave verbunden zu wissen gestohlen Form und dann werden - tanzen. - Es ist der Hauptteil der von der Seite von eingewickelt in einer Artikelwoche. - Ich hatte ein hier. - Keine Überschriften. - Ein h zwei Hochzeiten hier. - Geh einen feindlichen Stuhl raus, dann haben wir einen Inhalt Blocks jetzt in einem Rapper. - Wir werden es später erklären, - nicht Absatz nimmt. - Sie haben hier einen Block Zitat und wir haben acht Dreier Relevanz im nächsten Teil des Textes. - Und dann können Sie helfen, dass jedes Bild hier und Art von gemustertem Element. - Die Beschriftung Mach dir nicht zu viel Sorgen. - Yo wird für diese Phase gehen, - so wird es bald Eltern werden, die auf. - Also, wenn Sie Telstar weitermachen, können Sie hier sehen. - Ich habe Scott. - Ein Start aus einem grundlegenden Reset. - Nur so nimmt alle Ränder und Gemälde und Grenzen weg und übertreiben Wir wollen nicht in - die in der Seite. - Andi, - wir haben l für zwei Abschnitte gemacht. - Artikel orazov, - hateem mehr als 18 oder fünf Elemente trotz Block durch die Stimme mich klar beheben, wenn ich irgendwelche brauche - Blockelemente, die schwimmende Elemente in ihnen bekommen haben. - Andi, wir haben die Bilder zu 100% mit heute Abend eingestellt wir haben die Bilder zu 100% mit heute Abend eingestellt. - Auto vor allem bedeutet, dass alle Bilder expansiv 100% die Breite ihres Behälters und - der Rest des Bären. - Der Stil war im Grunde leer. - Wenn wir das Gefühl haben, werden die Minuten allein. - Sie ist, wie ich dir absolut zeigen werde, wie ich die Seite dachte. - Also, jetzt gehen wir in Google-Waffen, und ich werde Ihnen zeigen, wie Sie das Projekt zusammenstellen und das Job-Skript, das Ihnen gegeben wird, in die Seite einfügen , und dann gehen wir von dort. - Okay, - so sind Sie auf Google-Fonds, - Also, wenn wir müssen entschieden, - aber sobald ich auf der Seite verwenden möchte, - Ich will einen starken Sand Saref für die Hauptüberschriften und eine schöne ernsthafte Front für den Hauptkörper - des Textes. - Also gib hier rein. - Also, wenn Sie die Front gefunden haben, die Sie mögen, - Sie können einen Blick werfen, - eine Handgewichte davon machen es größer. - Wenn er Mora mag, hab es einfach. - Behalten Sie es. - Das, damit ich das meiner Sammlung hinzufügen werde. - Sie brauchen die normalen Leichtgewichte. - Diese eine Ehrlichkeit mutig. - Jemand klickt auf fett. - Sie sind hier in eine Sammlung gesteckt. - Es ist so, jetzt ist er es ernst, denn ich werde seinen Gente-um-Buch-Enzian benutzen. - Aber Grundlagen hier ist so klicken Sie auf, dass nicht zeigt eine andere Art von Gewichten und Stilen - es. - Und so werde ich das auch meiner Sammlung hinzufügen. - Und alles, was ich will, ist die normale, und ich will die normale Stadt. - Es war gut, - sie wirklich so verfolgen meine zwei Hauptschriftarten für die Seite. - Also werde ich die Sammlung hier benutzen. - Sehen Sie, - es war den ganzen Tag waren jetzt Genting Book Basic Sie verwenden können und das nimmt uns Teoh Überprüfung - was Sie Cervix ecause Boot hier fett gente und Buch Basic normal und metallics gewählt haben. - Gut. - Ich behalte es nur, dass Latina bricht. - Lassen Sie mich die erweiterte. - Wenn diese Übung Andi, werde ich Job-Skript wählen. - Das gibt Ihnen hier ein kleines Job-Skript, das wir Informationen in Schlepptau einfügen können. - HTML-Seite. - Ich werde okay, nicht auf dich. , Wenn ich zurück in den Texteditor gehe, um zur Station oder Seite in den Kopf hier und die Skripte, werde ich es hier reinlegen und wir können diesen Text loswerden. - Es war textract skippy bedeuten nicht, dass in einer einzigen Datei. - Also ja, wir haben jetzt Geld geladen. - Und wenn wir hier schnell wieder in die Google-Schriftarten zurückgehen, - können wir sehen, dass Ihnen hier auch etwas Code geben, um Ihre Schriften in Ihr CSS zu laden - Front. - Sie deins. - Welt-Sensor von vorne Familie Jetzt, - haben Sie setzen grundlegende Selbst beginnen zu diesem mehr verzögert man glauben einige richtige - Fullbacks und Zeug und die tatsächlich erhalten vielleicht gehen, um Aufsätze zu sehen, - öffentliche 3. Hauptprojekt Teil 2: - Okay, jetzt. - Was wir jetzt tun werden, ist bei Dion CSS gestoppt, um die Seite zu starten. - So funktionierte es im Moment richtig. - Sie, wie Sie schon gesehen haben, - wir haben gerade die Seite und es ist noch nichts zu tun. - Kein Styling. Also, wenn wir in unsere Detektive gehen, gehen wir zu, ich muss es mich kopieren und einfügen lassen, wie Geschwindigkeit. - Also in unserem Körpertyp, - werde hinzufügen, - na ja, - Inventar wir werden sein. Zunächst einmal werden wir die vordere Familie für die ganze Seite im Buch Basic ändern, an das ich mich erinnern sollte, ist diese serifenförmige Form, die wir aus Menschengeldern gewählt haben und wir können - haben eine volle Rückkehr aus Georgia, - dann mal neuer Roman Und so, der im Grunde, was das bedeutet, ist, - wenn, - aus irgendeinem Grund, - aus Waffe nicht arbeitet, - dann zweifeln Sie über, um Georgia zu speien. - Wenn dieser George nicht arbeitet, - haben Sie Zeit verbracht, um römisch zu sein, und das funktioniert nicht. - Es wird angezeigt, was die Standard-Serifenschrift ist, - was sehr ärgerlich ist, um diesen Teil zu erhalten. - Aber in dem unwahrscheinlichen Fall, dass diese Art von Arbeit wir Fullbacks dort, - so behalten wir die Integrität der Seite. - Das nächste, was man sich ansehen muss, ist die Linie. - Ich, - die tatsächlich im Einführungsvideo abgedeckt ist, - ist es der Abstand zwischen den Zeilen. - Also habe ich es zu 1,5 ihnen gesagt, - und ich werde zu ihm kommen, um die Minute dies aber Web Kick nimmt immer anpassen. - Das bedeutet im Grunde, dass, wenn jeder Web-Browser, - der jede Safari auf einem iPad oder einem iPhone beinhaltet, wenn sie das wieder erkennt, - den Akt 100% reproduziert, was im Grunde bedeutet, dass wir eine treue Reproduktion abhalten, wie wir - wollen die sexto aussehen und die besonders, - äh, - relevant für responsive Design. Also, wenn Sie nicht sagen, dass bestimmte Seite, um das drinnen zu zeigen, wir haben irgendwie zu tun, was ein sehr dunkles Grau ist. - Hier ist eine sehr wichtige Sache, die im Grunde das gesamte Layout auf der ganzen Seite informiert wird. - Jetzt werden Browser standardmäßig angezeigt. - Haben Sie täuschen Schriftart Zeichen und 16 Pixel. - Jetzt glaube ich nicht, dass groß genug ist, - also beginne ich immer mit 100 Opfern, - sagte, - was macht ich nicht weiß, - 24 Pixel. - Also standardmäßig, - jeder Körpertext wird 24 Picks groß sein, - und dann können alle anderen Messungen im CSS damit beginnen. - Also 1,5-mal 24, wie es sechs ist. - Hat es getan? - Es gibt im Grunde einen guten Start. - Ein guter Baseball-Kerl in der Seite auf 11 wichtige Konzept begann mit dieser auf dieser Seite. - Ich sollte Industrie hier ist die Konsequenz mit EMS jetzt, - als Maßeinheiten, - ich versuche, Pixel, - oder PX so wenig wie möglich zu verwenden , - besonders responsive Design. - Nun, - ein M bedeutet im Grunde, ein em ist gleich einmal, um den Anblick von DEA vom Typ des Körpertextes zu vergrößern , oder sie bekommen eine vorausschauende von der ich nicht so in diesem Fall, - weil wir es auf 150% gesetzt haben, mein Name ist 24 Pixel, - Also l Zeilenhöhe hier 1,5 mal 24 Pixel sein. - Und ich werde Ziele verwenden, um nicht nur für Topographie, wo es Zehengröße kommt, - Kopfzeilen, - H Einsen und Links. - Und wir sagten, - Sicher, ich werde es benutzen. - Die Block-Level-Elemente wie Wrapper und Geist Sie, - je nach verwendet im Grunde auf der gesamten Website so im Grunde jeder Teil, - das Layout seiner Polsterung, - seine Ränder, - Speicher, - es ist Box Größen, - was auch immer relevant für unsere Startspaß Größe ist. - So im Grunde zeigt, wie ein Teil über Typografie bereit bezeichnen das gesamte diktiert, bis ich - Layout. Also, jetzt weiter zu unserem, weißt du nicht, äh, du weißt schon, hier, das ist im Grunde der Rapper, der unsere Inhalte umhüllt, - Behalte es 29. - Und im Zentral, dass ich so denke. - Wenn ich den Code hier einfüge, - sehen Sie, - wir wurden von 80% ein Maximum von 38 EMS auf und eine Marge oder nein auf Auto ausgepeitscht, - es ist im Grunde zentralisiert es. - Andi, - für GM's, - ist 38 mal 24 Pixel, - was uns mit Off-Seite unseres Inhalts ausgibt. - Und wenn wir das speichern und dann unseren Browser besuchen und wenn wir ihn aktualisieren, sollten wir sehen, vielleicht ist alles, was es immer noch perfekt ist, aber es ist zentralisiert die Inhalte, die wir haben. - Unsere Webfront arbeitet unterwegs. - Wir beginnen zu sehen, wie die Anfänge der Seite schnell zu unseren Al-Inhalten zurückkehren. - Napa. - Hier, - dies max mit 30 a. - M. - Dies gibt uns eine maximale Breite von 912 Pixel. - Was zurück im Browser Holen Sie sich das. - Wir werden an diesem Hebel arbeiten. - Ein Klub. - Große Verzweiflung. - Es ist zur Leichtigkeit. - Nehmen Sie jede Übung. - So, jetzt, um zu unserem hatte einen Abschnitt, der auf den Seiten, - dieser Abschnitt hier h ein h 20 auf einem kleinen Element hier, - den ich den Namen des Autors so gut wieder in ihn gewählt habe. - Zuerst wollen wir, dass du den Text in der Mitte ausrichten willst, und dann werden wir ihn nie überlaufen. - Newsbill nur für den Fall. - Alles, was du tust, ist, dass wir nicht wollen. - Zunächst einmal, - wo hassen eine einige Haupt-Überschrift für die Seite gerade platziert in. - Also hat er ein paar Ränder ausgeglichen . - Die Schriftgröße 3,2 m hat es jetzt auch Großbuchstaben Bully gemacht, - das ist unsere san serif. - Aber wir haben von Google-Fonds gespendet . - Nur in Boulder kam ein bisschen spät, - Abstände und schlechteste Basing hier, - aber auch. - Eine Sache, auf die ich hier hinweisen möchte, ist, wenn ich über Dinge wie Ränder und Schriftgrößen entscheide, außer Ihrer für besonders Typografie. - Ich benutze gerne eine Art präzise, aber eine Art grobe Verwendung aus dem Fibonacci-goldenen Abschnitt. - Wenn ich hineingehe, - kann ich mich auf der Seite hier schämen. - Das ist, wie Fibonacci-Diagramm. , Ich bin sicher,dass Sie das wissen, wenn Sie Design studieren, aber ich werde es sehr kurz gehen. - Der Fibonacci-Goldene Abschnitt, - oder Goldene Regel, - war im Grunde ein Verhältnis von 1 zu 1,6. - Also, - zum Beispiel, - fangen wir mit diesem Quadrat hier an. - Nun, - wenn wir dieses Rechteck das Äußere davon 1,6 mal die Breite machen, - denke ich, - aber ich habe es nie quadriert. - Und dann noch ein Platz. - Und ich war ganz da. - Das war, wo dort nicht quadrieren, dass es alles ist, ist alles 1,6-mal die Größe. Und das gibt uns diese Arche, die im Grunde eine Art formales O. - R. - Ein Muster, das Sie in der Wissenschaft finden, - Mathematik-Design. - Und es wird vertraut aus der Designwelt mit er gut verwendet, - um den Handel, - auch - mit Quantenmechanik aufzuhören - auch . Du meinst, es ist eine Art grundlegendes Sortiermuster, das diese Art von, wenn du eine Formel für das magst, was wir vom Auge als schön empfunden haben. - Also die Hauptsache, sich daran zu erinnern, Dies ist die rassische 1 bis 1,6. Also, wenn ich hier wieder ins CSS gehe , dann habe ich die Marge gemacht. - Oberseite der H ein n 1.6 in der Vorderseite ist 3.2, - was zweimal 1,6 und ich versuchte Zehe. - Wenn ich ausarbeite Rand Salate und Schriftgrößen und so halten eine grobe Art der meisten Arbeit -. - So Treue zu diesem 1.6. - Du könntest also ein 3,2 sein. - Ich gehe vielleicht die Hälfte ihres Marktes 2.4. - Oh, ja. - Im Grunde, - es ist nicht so, dass May seine Art von Ah sendet, - es ist nicht genau, - aber es gibt ihm nur eine schöne geflogen, - und ich Art von Teoh zu dem Layout-Design. Jetzt gehe ich rein, und ich werde jetzt das H zwei stylen, das sich unter dem Hauptversteck an der Grenze befindet. - Also wieder, - Sie haben 1,2, - das ist ein Es ist nicht 1,6 Offiziere. - Piven sind billiger. - Es ist wie 1/4 davon oder so. - Andi, eine Linie, die sich dort bilden soll. - Und jetzt ist das kleine, das ist das kleine, was wieder vom Tank ist. - Wir haben die Marge dort und haben einen Spay-Block. - Wir wurden gemacht. - Italiener hat es kleiner gemacht. Also, wenn wir das denken und dann wieder auf unsere Seite gehen, , haben wir unsere Haupt, die sie treffen. - Wir haben einen Penny unter einem Alter, - zu viel Geld, - auch. - Und wir haben mich dort über dem Tank. - Es ist also zentralisiert. - Es ist ein schönes Verhältnis von Wissenschaft und Zeug und diese Streichelei und ein Raum. - Also, jetzt werden wir etwas mehr Styling des Haupttext-Textes jetzt auf den Links und die H - Freiheiten mit Headern im Hauptteil des Inhalts tun. - Also, - zuallererst, werde ich einige Stile für den Absatz eintragen. - Texas P Also nochmal, wir benutzen hier einen Fibonacci. - Wir haben Marge 1.6 oben, aber was ist halb her unten. - Und weil ein kleines Ding es iPhones bezeugen wird, was es im Grunde bedeutet. - Es trennt lange Wörter in Web-Browsern praktisch. - Also werde und einige aktuelle Leben im Lager, - und dann einige einfach schön lesen das gleiche kann in den Hauptbildern gefangen werden und dann weiter - Angebot. - Sie haben nur eine Unterstreichung. - Andi, - Mit der H drei, - wir werden Schriftgröße von 1.6 haben wurde zurück, um wieder auf einem Rand geschlagen werden, um zu stimmen - für, - die Menschen sind jüdisch. - Und dann bringen wir die auch wieder raus. - Wünsche aus sans serif Text für die, die hier hängt und machen es fett als auch. - Niemand, übrigens. , Ich habe die San Serif E eingeschlossen ich habe Al Fullback-Mittel von den Sensoren wie Vatican Neue Aerial. - Nun ist der Grund, warum wir Helvetica neue an erster Stelle stellen, dass im Grunde, - wie besser gehen auf Apple-Produkte wie Mac iPhone Waiver sieht gut aus, - aber es sieht schrecklich aus auf Windows und Luft. - Ähnlich auf Windows oder Internet Explorer. - Das ist, was Windows PCs sieht dort schön aus, aber sieht schrecklich auf Mac. - Also, was wir hier tun, ist 99,9% von Max, die Petricka Helvetica Neue installiert hat. - Wenn wir das in ihrem Al Max haben, würde das abholen. - Aber das wird wahrscheinlich auf einem PC nicht installiert . - Die PC's werden nach Ariel gehen. - Und wenn nicht, - werde ich zum Sensor gehen, wo, - für einen, - gibt es Grundsätzlich, - es ist eine Verschwendung oder Sicherstellung. - Nun, wenn wir hier eine volle haben müssen, dann sieht es so aus, dass wir das speichern und dann kommen wir runter zu einer Seitenauffrischung. - Und dann sollten wir feststellen, dass wir haben Jetzt können wir sehen, wie hasst Einzelhandel im Gang - mögliche sensorische Front, - schön und groß, - 1,6-mal die Größe des Körpertextes, um ein schönes Verhältnis zu geben. - Wir haben die Brille, aber jetzt, was ist eine schöne Polsterung auf dem weißen Raum. - Also ist es viel lesbarer Res zu lesen. - Und, äh, - ja, was zu erwarten ist. - Also als nächstes werde ich ein Powerblock-Zitat starten, - was sehr üblich ist, wenn Sie besonders sind, wenn Sie in Blockbeiträgen oder Artikeln schreiben - wenn Sie ein Zitat aus einer Art gelehrter berühmter Quelle hinzufügen wollen. - Also habe ich eine Peitsche von 9%, die es uns erlaubt, ein bisschen Schwenken auf der linken Seite zu haben , - auf einem kleinen Ball davon. - Geh zum Frontstern Metallic und ich habe den Text etwas heller gemacht. - Ist da nur ein bisschen Trennung. - Guten Morgen klopft hier nicht auch. - Also, wenn ich das sage, - gehen Sie zurück auf die Seite, - aktualisieren Sie es und wir können hier sehen. - Das ist unser Block-Zitat. - Es ist eine Bohne, die kursiv gemacht wird. - Es ist leichter. - Es ist eine neun Seite hier und nur eine nette kleine Trennung und lässt uns wissen, dass es - etwas von einem leichten, - anderen Peter Inhalt ist. 4. Hauptprojekt Teil 3: - Es ist der Nächste. - Du hast dieses Bild hier. - Diagramm. - Andi hat hier eine kleine Unterschrift. - Jetzt will ich das mehr Stein in der geben und ich will die Zehe trennen. - Das ist immer noch die Beschriftung hier. - Ich will diesen ähnlichen Stil dem Block machen. - Ganz recht. - Wir sind hier, also verzeihen ihn. - Nur das ist der Erfolg für seine, weil ich hier und eine Beschriftung. - Da gehst du. - HTML braucht eine Figur in einer Minute mit dem Bild darin, - und er ist nicht fit. - Bildunterschrift. - Also geh wieder rein. - Also hast du ihm eine andere Fibonacci-Marge gegeben, und in diesem Fall werde ich auf breiteren Bildschirmen anfangen und ich habe die Feigenunterschrift gestoppt. - Es wird zu schweben, aber Position rechts vom On. - Während genug Bildschirme werden auf der weißen auf der rechten Seite veröffentlichen, - sollte ich sagen, aus dem Bild und die natürlichen Metromedia Curries. - Ich werde Ihnen zeigen, wie es zu machen, wenn die Bildschirme und warum ich liebe Gott im Blatt. - Also haben wir einen absoluten Glauben, dass unsere Figur relativ positioniert ist. - So ist die Fit Beschriftung innen absolut positioniert auf, - dann eine Peitsche gegeben und auf 105% rechts vom Bild gesetzt. - Und es ist ein guter Attallah Pier und seine Größe kleiner. - Und es ist dasselbe. - Tyler ist der Block. - Also denken Sie, dass und ich die erste Seite, die Sie im Moment sehen werden. - Es ist irgendwie die Seite hier. - Aber wenn es ein Monitor in voller Größe war? - Schwöre auf Künstler Monate verwenden. - Sehen Sie sich kopieren. - Das ist alles. Also als nächstes, - wenn wir hier unten schauen, wo wir rausgehen, - wie Frauen die Zahl 11 teilen, haben wir Absatz eine Textur herausbekommen, in der sie genannt werden - geteilt. - Jetzt zeigen, dass die Seite mit im Grunde, - wir reden über diesen Papagei Absatz hier. - Was ich jetzt tun werde, ist dir einfach schnell zu zeigen, wie wir es gebrauchen können. - Einige sehen es als drei hier, um eine gespaltene Spalte zu machen. - Hier haben wir uns getrennt. - Ist das macht es der David, der den Absatz umschließt. - Also müssen wir ihn anrufen. - Ich muss Gap beruhigen. - Eine Beule ging, um eine kleine Lücke zwischen den Spalten zu bekommen und dann, wie für fünf Leute, - das ist für Web-Kit und dann einige Margen hier, - und es steht vor und so was hier. - Also, wenn wir das sagen und dann zurück gehen, um riesig zu bezahlen, - Fisch es sein. Wir haben jetzt einen zweispaltigen Absatz hier, das würden Sie normalerweise nicht, aber fragen Siedanach. Wir haben jetzt einen zweispaltigen Absatz hier, das würden Sie normalerweise nicht , aber fragen Sie - Gehen Sie auf diese Weise von einer einspaltigen Gier zu einem Zwei-Säulenraster. - Aber ich habe es nur benutzt. - Nur eine Illustration, wie Sie, - unter bestimmten Umständen, - können Sie die mehrspaltige siehe Aufsätze verwenden. - Gut. - Richtig danke. - Es gibt also nur zwei Bits, in denen wir absortieren müssen. - Wir haben hier eine Liste, die Sie tun, aber brauchen, - ähm, - - Margen. - Und du hast einen Fuß für zwei hier raus, was ihn auch anleitet. Also, wenn wir in unser bis sechs Delta gehen, werde ich wenigstens ein bisschen anfangen. - Sei wieder ein Spielraum für Archie. - 1,6 Punkt acht. - Und dann der Monteur. - Das ist ein Streicheln auf dunklem Hintergrund. - Scheint die Textfarbe und etwas Rand Zeug da, nur um ein schönes Aussehen zu bekommen. - Also sagen Sie, dass wir wieder in unsere Schmerzen gehen, um es zu erfrischen, und dann werden wir es sehen. - Sie haben einen schönen weißen Raum im Armee-Ausstatter. - Ja, das ist im Grunde die Seite fertig in ihrem, äh Nun, - dem ersten Zustand auf der Seite. - Wie auch immer, - wir gehen jetzt weiter und tauchen in unsere Medienabfragen ein, um die Website-Seite Geschichte zu machen - reaktionsschnell. - Andi. - Ja, ich werde dir zeigen, wie wir ich werde dir zeigen, wie wires als Nächstes machen. - Also hier haben wir eine Medienanfragen. - Und was im Grunde tut, ist, dass Medien Maxwell von 1600 Pixel. - Es bedeutet, dass alles, bis 600 Bilder von den Regeln betroffen sind, über die ich hineingelegt habe - hier und das überschreiben, was vorher gekommen ist. Also, zuerst werde ich dieses kleine Fußuntertitel-Ding reparieren, das hier geht, mit Bildschirmen borsten. - Speichern Sie das, wenn Sie zuvor Intel-Seite Gebete erhalten. - Nein, ist er nicht. - Da ist es. - Also, wo ist vorher? - Es ist hier drüben, was ohne Seiten in Ordnung ist. - Nicht von der Breite auf dem Vollbild. - Aber jetzt, wenn der Bildschirm ist es 1600 Bilder von Wunder die Beschriftung. - Er ist wieder auf dem Fleisch. - Richtig. Als Nächstes werde ich mir das Chaos ansehen. - Passionierter Text hier, - der ist derjenige, der gerade in zwei Spalten spuckt, wenn er auf vier Seiten ist. - Screening und erklären. Der Leser war nett, aber als er aufgehört hat, hier oben zu kreischen, haben wir angefangen zu sehen, dass es ein bisschen wird. - Squash ist nicht sehr jeder attraktiv, - nicht gut zu lesen. Also, was wir tun müssen, ist, wenn wir in unsere CIA sagen gehen, ... hast du dich daran erinnert, bevor sie zwei Spalten verbracht haben, werden wir uns hier mit unseren Medienanfragen befassen. Und wenn es zu einem Hauch von 1200 Pixeln unter kommt, geben wir einen Inhalt von einem, der ihn von den beiden Spalten ändert. - Eine Spalte, um das zu speichern. - Geh wieder rein. - Aktualisieren Sie die Seite auf, als er schien, - wir sind wieder ein Betrüger. - Sie ist viel mehr, als nächstes in unseren Medienabfragen würden hier auf maximal 840 Pixel kommen , was irgendwie grob Outs oder Tablet-Größe ist. - Ich versuche, nicht zu Herr zu sein, - aber auf Geräten, die Sie eine Menge Leute in der Medienkarriere sehen, wo genau - Pixel sie sind weg für ein iPad, - dann die genauen Fixes für ein iPhone war ich versuche, das Gerät unabhängig zu sein. - Ich glaube, dass der Inhaltstyp von wäre das Layout schießen Art anpassen, was es braucht - anpassen. - Nein. - Und es ist nur Seiten Design. - Es ist laut, - anders als die nächste. - Aber in diesem Fall, - habe ich Agent 40 gewählt. - Das sollte fangen macht Auge Tabletten Wissenschaften. - Also werde ich einfach unsere neue Kate hier einfügen. - Was ich hier getan habe, - ich habe den UNA Rapper gemacht 85%, während es vorher war, - wenn du hier 80% siehst, macht das ein bisschen breiter. - Also sind Sie mit ihm oder dem Bildschirm geflogen. - Ich habe den H Fonds, - die Hauptüberschrift Schriftgröße ein wenig nach unten gelegt. - Und ich habe die Marge ändern gegeben, um jenseits des Alters zu leben, um ihre und die Überstunden auf - Vorteile für das sagen, dass und dann kommen über Seite hier, - bis an die Spitze hier erfrischend. - Und ich will nicht zur Seite kommen, es wird ihre Hölle sehen. - Es gibt nur eine schönere Lösung, - sogar der Hauptkörper Text. - Dasselbe. - Also ist es lesbar. Es macht den Kopf von ihr besonders, damit wir nicht so viel Platz einnehmen, weil , wir nicht brauchen, wenn du willst. - Kleinerer Wissenschaftler. Also, jetzt werden wir uns befassen, wo die Medienanfragen akzeptieren sollen, all unsere Handheld-Geräte aus Smartphones usw. Also jetzt, wenn wir wenn wirein bisschen hier runterkriechen, werde ich dir später ein paar Papa-Bildschirme von meinem iPhone und iPad zeigen. ein bisschen hier runterkriechen, - Eins. Demonstrieren Sie nur teilweise, aber Sie sehen hier ja. - Ist das die zweite Überschrift? - Hier ist ein bisschen zerquetscht. - Vielleicht ist der Haupttext ein bisschen zu groß, - Ist nicht jeder so groß, dass und Überschriften alle zwei großen. - Also, was machen wir jetzt? - Wenn wir wieder in über CS ist hier, - dann ist das unser mittlerer mexikanischer Gründer Picks Es ist Art, mobile Geräte zu fangen - das wird den neuen Code hier kopieren und einfügen und dann für das, was ich zuerst bin -, - wohingegen vorher, wie auf unserer Körperstimmung - wir eine lustige Größe von 150% hatten. - Jetzt bringen Sie es ein bisschen runter. - 225%. - Gott muss nicht so groß sein. - Und, äh, ich will mich. - Wir haben den Abstand geändert. - Die Worte lassen es im Grunde unser Alter ein wenig ändern. - Sortieren Sie einfach den weißen Raum auf einer Vermutung. - Hier haben wir die Größe runter gekauft. - Es war 1.6 vorher ist jetzt 1.2 und es ist mehr in einigen Berg-Zeug hier und auch - mit unserem Hauptbild. - Wohingegen, bevor es war, - äh denn mit braucht das Team nicht, als warum also, was wir nicht hören, ich habe das Bild gemacht - das Venenbild im Kopf bis zu Arjun 40% und dann geben ihm Marge von minus 20 ist nicht - auf der linken Seite, - was grundsätzlich in ein wenig, aber kleineren Größen annimmt. Also, wenn wir das speichern und dann wieder auf unsere Seite gehen, können wir darauf klicken. das speichern und dann wieder auf unsere Seite gehen, - Und wie wir Ethnik sehen können, aber die Natur, - der Typ Sie noch schön und groß? - Nicht so, weil es vorher viel lesbarer war. - Und wie ich sie im Alter von drei Jahren gesehen habe. - Die sind nicht schön in dieser Größe. - Ja, 5. Hinzufügen von selbst gehosteten Webfonts über fontsquirrel.com: - so, - wie versprochen, - Ich habe ein paar Screen Greifs hier vor allem von Ich finde sie, - ich hatte ihn. - Und nur um zu zeigen, dass sie nicht funktionieren. - Vielleicht auf der Meinungsseite Stuhl. - Und dann, - Okay, - wir haben Text reproduziert gehalten, - und jetzt das, was hier funktioniert und so. - So, aber sehr nett. - Du gehst zum iPad. - Der Kerl Neuigkeiten. - Nein. - Nur skalieren und doch sehr gut lesbar. - Schöne Linienmaßnahme. - Sie waren im Verhältnis. - Musik ist nett. - Nur ein bisschen. - Ich gebe Ihnen Ketzer auf verschiedenen Geräten. - Also im Grunde, - das Letzte, was dir zeigt, - wie versprochen, - ist, ... bevor wir Google Web Fonts benutzt haben, und sie geben dir ein paar Jobs übersprungen und du platzierst es in den Kopf, - Es ist ganz einfach. - Es gibt eine andere Möglichkeit, - wenn Sie besonders kostenlose Mittel verwenden, - Gerichtspapiere auch ist, sie selbst zu hosten. - Also werde ich Ihnen zeigen, wie man das für die Schule macht. - So zum Glück, dass die Mittel, die wir verwendet, bevor auf der Vorderschule, - so geben wir in Oswald. - Hier sind wir, - also klicken Sie darauf. - Schau es, - sagt er. - Und hier haben wir nicht wirklich verschiedene Gewichte und, äh, - - Stil an der Front. - Sie und sie haben ah, - normalerweise in der Vorderschule, - Sie können unten auf der Web-Form kip, - aber wegen bestimmter Lizenz neue Schuhe auf diesem einen, - müssen Sie die O. - T. - F und generieren Sie dann die per Telefoncode selbst. - Also klicken Sie auf Download, - laden Sie Ihre Schriften für immer gehen, um das zu tun, ab und zu können Sie zum World Point gehen - Generator und das gibt Ihnen im Grunde, - nimmt Ihre Front und dann stellt verschiedene Versionen zur Verfügung Version SVG-Version, - die gehen, um mehr in einer Minute, - die Sie auf nicht verschiedene Geräte und Betriebssystem arbeiten können. - Also jeder im Waffengenerator Kick würde Geld hinzufügen. - Und ich gehe von hier aus in Can dich? - Sie ist dran und ich werde aufdrücken. - Nehmen Sie. - Jetzt wissen die Leute nicht, und Sie stimmen zu, dass Sie gehen, - Sie können es nicht tun. - Ja, du bist unten unter dem Kit. - Es wird also da sein und sagen, dass wir es herausfinden und finden - das ist das große Nierenkarte. - Vielleicht bis und im Grunde ist das aus Spaß genommen und machte eine beliebige ot Version spg TTF, auf der - im Grunde alle Basen abdeckt. - Also gehen wir hierher, - wir haben eine Sternform, die wir jetzt öffnen können. - Es braucht zwei, - und dieses Gewicht gibt dir. - Also das ist äußerste Schäden Argentinisches Buch Basic These eine Reform, die wir benutzt haben. - Und das ist unsere Standardfront hier die Luft 31 und haben immer ein kleines Ding hier. - Der Krieg TTF I fixiert Sie im Grunde vier Rücken für verschiedene Geräte. - So, - zum Beispiel, - verschiedene Browser und verschiedene Geräte benötigen unterschiedliche Versionen abseits des Spaßes. - Vielleicht ist es eine Lehrer-Version von welcher Version oder S B J Version oder was auch immer. , Wenn Sie, äh, Google-Mittel verwenden, um meinen Job zu erledigen, ist das nicht für Sie, was großartig ist. - Also kommen wir zurück zu unserem Telefon ist hier. - Ich habe dir die Langeweile erspart, mir zuzusehen, wie ich jeden Fonds einzeln herunterlade. - Also habe ich im Grunde in den Fonds Schule Generator gegangen und ich habe Versionen von Theo - Gold auf der Gente in Buch Basic Metallic und regulär gemacht. - Und das sind all die verschiedenen Mittel, die wir hier in unserer Fondsmappe brauchen. - Also, wenn ich jetzt in unser CSS gehe, - aber wir tun jetzt wird der CSS-Code, den wir vom Generator von der Schule bekommen, und wir - einfügen. - Ich war einfügen, dass unsere Schriftart Gesichtsdekorationen zu der Zeit das Stylesheet. - Also was im Grunde bedeutet, dass es Ihnen erlaubt, zuerst zu laden. - Andi, wenn du hier siehst, haben wir vor der Familie eine sanfte, aber einfache Front. - Bamian Genting Buch Basic metallic und out war, - na ja, - Boot hier und haben auch gerade vor ist in ein bisschen zu. - Vergewissern Sie sich. - Siehst du, - das Jahr l da. - Ich habe Schriftarten dort gelegt, - also im Grunde, - der Browser weiß, in den Schriftartenordner zu suchen, um alle verschiedenen zu finden. - Sie sind sehr dran. - Also, so, - äh, - selbst gehostete Gelder, die in unseren Stil geladen wurden. Sie hat das Gehen gerettet , weil wir die loswerden können. - Ihr Drehbuch hier. - Du brauchst keine Schnitte mehr. - Die Kichermittel schlafen, dass Oh, ja. - Eines sollte ich mich erinnern. - Wir müssen das hier ändern. - Also in unserem CSS gehen wir hier runter, wir machen das genauso wie ein normaler, - und dann werden diese nichts verheißen. - Das denke ich nochmal. - Und dann gehen wir auf eine Seite. - Weißt du, - wir haben Waffen. - Aber jetzt, dass selbst gehostet, bis die Arbeit dagegen tun sollte. - Aber anstatt von JavaScript auf von den kichernden Fronten aufgerufen zu werden, - was ist es, Wir haben jetzt die Selbst-Person-Version. - Damit ist unsere Einführung in Waffen und eine Web-Topographie abgeschlossen. - Haben Sie es genossen? - Du hast nicht von da an. - Bitte fühlen Sie sich frei, - Teoh Zeichnung Bilder und ändern Titel ändern Text auf Dinge, - spielen eine Runde davon und haben etwas Spaß Ich freue mich darauf, euch Jungs kommen mit auf noch -. - Danke. - Nein.