Nach einer kurzen Pause mit Vorträgen beginnen wir den Neujahrssprint. Wie vor einem Jahr wird es ausschließlich aus Materialien der großen FrontTalks-Konferenz bestehen, die Yandex in Jekaterinburg abgehalten hat. Beginnen wir mit einer Rede von Anton Kastritsky - einem Entwickler von Yandex.Market. Anton zeigte anhand von Beispielen, wie und aus welchen Schnittstellen sie zusammengesetzt sind, und sprach auch über Texte, deren Design, Zugänglichkeit und Leistung im Kontext moderner Webanwendungen.
- Mein Name ist Anton, ich arbeite als Interface-Entwickler im Yandex.Market-Partner-Interface-Team. Heute möchte ich über Typografie im Web sprechen.
Vorher möchte ich eine kurze Geschichte darüber erzählen, wie sich herausstellte, dass dieses Thema für mich nah und interessant ist.
Einmal habe ich darüber nachgedacht, dass vielleicht nicht jeder versteht, wie man mit Text, Schriftarten und Anzeigen im Web arbeitet. Und vielleicht dachte ich zum ersten Mal darüber nach, als ich auf Yandex steigen wollte. Ich wurde interviewt, ich hatte einen Abschnitt mit Layout. Ich liebe Layout, nichts kompliziertes, ich mag es. Es war notwendig, die Komponente zusammenzustellen, ich habe alles getan, großartig. In der Beschreibung der Aufgabe wurde geschrieben, dass es notwendig war, die Schriftarten einzustellen, da war Arial, Helvetica. Kein Problem, schrieb ich Helvetica, Arial, serifenlos. Alles ist so wie es sein sollte. Aber der Interviewer stimmte nicht zu, sagte, dass ich falsch geschrieben habe. Es hat mich verwirrt, ich dachte, dass Yandex ein großes Unternehmen ist, wahrscheinlich erwarten sie viel von mir. Wissen, was Systemschriftarten sind, was sichere Schriftarten sind. Ich erzählte, wie sie funktionieren und warum ich alles so aufschrieb, wie es ist.
Der Interviewer stimmte mir nicht sofort zu, aber als Ergebnis wurde uns klar, dass wir Helvetica, Arial schreiben sollten und nicht umgekehrt. Also bin ich zu Yandex gekommen. Ich fing an zu interviewen, fand dieses Problem und behebte es. Kommen Sie zu uns, um zu arbeiten. Es ist großartig mit uns.
Bevor wir zur Typografie übergehen, lassen Sie uns darüber sprechen, was Text ist.
Text
Text ist ein Werkzeug, mit dem wir dem Benutzer etwas über seine nächsten Aktionen erzählen können. Ein großer Teil des Inhalts im Internet besteht aus Text. Trotz der Tatsache, dass Dienste wie Instagram und YouTube mittlerweile sehr beliebt sind, konsumieren die Menschen viel Multimedia-Inhalt, der Text nimmt auch im Internet einen großen Platz ein und die Leute lesen ihn immer noch. Es ist sehr wichtig.
Wer arbeitet in Unternehmen, in denen es einen Texter oder Schriftsteller gibt, der sich mit Texten beschäftigt? Fast die Hälfte. Und wer hat den Text für die Bewerbung selbst? Auch die Hälfte.
Manchmal kommt es vor, dass der Designer Ihnen das Design gegeben hat, Sie haben damit begonnen. Es gab jedoch einige unvorhergesehene Umstände, und Sie müssen sich den Text selbst ausdenken. Fast alles wow. In solchen Situationen sollte es eine Schande sein. Ich hatte den Eindruck, dass die Entwickler die Rolle der Texter im Unternehmen unterschätzen, auf sie herabblicken und sie irgendwie präsentieren.
Nur ein Haufen Kunstdamen, die im Büro sitzen und sehr gekonnt die Arbeit simulieren. Dies ist eigentlich nicht der Fall.
Texter - wie dieser Prophet, der versucht, dem Entwickler-Mädchen zu zeigen, wie es in Wirklichkeit sein sollte, und sie versucht ihr Bestes, ihn zu ignorieren.
Die Rolle der Texter ist sehr wichtig. Sie können einen direkten Einfluss auf das Produkt haben und harmonischere Lösungen, Interaktionen und Mechaniken bieten. Eine Person, die den Text auf der Seite gelesen hat, kann Ihr Produkt auf eine völlig andere Weise wahrnehmen. Ihre Rolle ist wirklich sehr wichtig, sie sollten immer gehört werden und nicht wie dieses Mädchen, das versucht zu arbeiten und nicht darauf zu achten, was dieser Prophet ihr sendet. Versuchen Sie, Ihren Textern zuzuhören und ihnen Fragen zu stellen.
Es ist auch sehr wichtig, nicht nur was Sie schreiben, sondern im Allgemeinen im Allgemeinen. Ich möchte ein Beispiel aus dem wirklichen Leben zeigen. Wir hatten eine Komponente, in der der Benutzer eine Telefonnummer hinzufügen musste.
Eine riesige Seite mit Einstellungen, alles ist wie gewohnt. Es gab eine Beschriftung, eine Nummer und die Schaltfläche „Hinzufügen“, der Benutzer klickte darauf und eine Telefoneingabe wurde angezeigt.
Nachdem er die Telefonnummer erfolgreich eingegeben hatte, musste er zum Speichern auf das graue Häkchen klicken.
Als wir mit der Durchführung von UX-Tests begannen, stellten wir fest, dass eine sehr kleine Anzahl von Benutzern sogar vermutete, dass es notwendig war, auf die graue Schaltfläche zu klicken, um die Telefonnummer zu speichern. Was haben wir getan Nachdem der Benutzer die Telefonnummer erfolgreich eingegeben hat, haben wir das Häkchen gelb gestrichen und der Benutzer konnte es speichern.
Wir haben wiederholte UX-Tests durchgeführt. Ein bisschen mehr Leute fanden heraus, wie man eine Telefonnummer speichert.
An diesem Punkt scheint es Ihnen, dass unsere Benutzer Probleme mit der Interaktion mit unseren Schnittstellen haben, sie verwenden sie irgendwie.
Tatsächlich liegt das Problem jedoch nicht bei den Benutzern, sondern bei uns, da wir ihnen nicht klar vermitteln konnten, was wir von ihnen wollen. Daher sieht diese Komponente heute etwas anders aus: Alles klickt auch auf die Schaltfläche, aber jetzt gibt es ein Popup mit den expliziten Schaltflächen "Abbrechen" und "Speichern".
Nachdem er die Telefonnummer erfolgreich eingegeben hat, leuchtet die Schaltfläche „Speichern“ auf und der Benutzer kann unabhängig entscheiden, ob er sie speichern möchte oder nicht. Wenn er außerhalb des Popups klickt, verschwindet das Popup und er hat die Nummer noch nicht hinzugefügt.
Daraus können wir schließen: Haben Sie keine Angst, offensichtliche Dinge zu schreiben. Wir Entwickler verbringen viel Zeit im Internet. Wir sehen viele verschiedene GUI-Optionen, um dasselbe zu tun. Aber nicht alle unsere Benutzer haben diese Erfahrung. Machen wir also einfachere und intuitivere Benutzeroberflächen, damit der Benutzer sie leichter selbst herausfinden kann.
Anzeige
Lassen Sie uns über das Mapping im Allgemeinen sprechen. Es ist leicht zu erraten, dass alle Anzeigeregeln aus dem Druck zu uns gekommen sind.
Es ist wichtig zu ersetzen, dass ich Entwickler bin, und ich kann es nicht schön machen. Ich weiß, wie es funktioniert, und wenn alles in Ordnung ist, hat es produktiv funktioniert. Daher werde ich nicht über Serifen oder verschiedene Arten von Schriftarten sprechen. Ich werde, aber später.
Es gibt viele Textinhalte und Dienste im Internet, bei denen Benutzer ausschließlich etwas lesen.
Es scheint mir, dass einer der bequemsten Dienste Medium ist. Ich denke, jeder kennt ihn, sie kommen herein, lesen die Nachrichten, besonders zum Thema Frontend. Der Dienst präsentiert wirklich Inhalte, die leicht zu lesen sind. Aber ich werde ein Gegenbeispiel geben, das wir alle verwendet haben.
Ich kenne keine einzige Person, die Wikipedia besucht und gerne etwas liest. Es scheint mir, dass dies keine lesbare Option ist, obwohl sie durch Befolgen von nur zwei oder drei Regeln behoben werden kann.
Das erste ist, ungefähr 10 Wörter pro Zeile zu haben.
Wir müssen die Breite des Textinhalts auf etwa 80 Zeichen beschränken. Diese Regel ähnelt möglicherweise den Einstellungen Ihres Linter, da die Anzeige des Codes und des Codes selbst sowie der Text auf den Websites so geschrieben sind, dass er von einer Person und nicht von einem Computer leicht wahrgenommen werden kann.
Der zweite ist der Zeilenabstand. Wenn Ihre Linien zu nahe beieinander liegen, haben Benutzer bereits Schwierigkeiten, dies wahrzunehmen.
Und machen Sie die Schrift etwas größer, um die Wahrnehmung zu erleichtern. Jetzt nimmt Wikipedia eine Form an, die bereits spürbar leichter wahrzunehmen ist.
Wenn Ihnen der Platz auf dem Bildschirm sehr wichtig ist, können Sie Bindestriche hinzufügen.
Dies funktioniert möglicherweise nicht immer korrekt mit russischem Text, kann jedoch dazu beitragen, ein paar Zeilen zu sparen.
Vergessen Sie nicht, dass es in der russischen Sprache viele Rechtschreibregeln gibt. Wir müssen Dinge wie hängende Vorwände loswerden, sicherstellen, dass bei Bedarf große Bindestriche vorhanden sind und so weiter. Tools wie
der Typographer können Ihnen dabei helfen. Führen Sie einfach Ihren Text durch und das war's.
Wenn Sie statischen Text haben, können Sie ein
Babel-Plugin hinzufügen, um ihn beim Erstellen Ihrer Anwendung zu konvertieren. Wenn Ihr Text in einem externen Speicher gespeichert ist, kann ein solches
npm-Paket nützlich sein. Mit ihm können Sie den Text konvertieren, bevor Sie ihn an den Client senden.
Web-Schriftarten
Wie kam es, dass wir im Web verschiedene Schriftarten verwenden können?
Erwachsene Entwickler erinnern sich vielleicht daran, dass wir lange Zeit verschiedene Bilder hinzufügen mussten, um das Erscheinungsbild des Textes auf den Seiten irgendwie zu verändern. Später haben wir ein Font-Tag bekommen. Und heute verwenden wir die Eigenschaft font-family, in der wir die Schriftarten selbst in der Reihenfolge auflisten, in der sie angewendet werden sollen. Wenn der Browser plötzlich keinen findet und nicht erkennt, geht er einfach weiter in dieser Liste und verwendet Folgendes.
Bereits heute haben wir eine Vielzahl von Eigenschaften, um die Anzeige von Text zu transformieren.
Und ich kann nicht anders, als so etwas wie variable Schriftarten zu erwähnen.
Dies hilft uns, die Anzeige unserer Schnittstellen weiter zu verändern. Die Unterstützung ist bereits heute gut genug.
In den letzten Jahren wurde im Internet eine große Menge an Informationen über diese Technologie geschrieben, auf die wir jetzt nicht näher eingehen werden.
Schriftarten
Es gibt eine große Anzahl von Schriftarten. Aber ich wollte mich aus technischer Sicht nähern und sie in verschiedene Typen unterteilen.
Ich denke, jeder, der die Spezifikationen liest, und nicht nur, weiß, dass im Betriebssystem Systemschriftarten vorinstalliert sind. Es gibt installierte Schriftarten, die der Benutzer unabhängig installiert hat. Neben herunterladbaren oder Web-Schriftarten ist dies alles, was der Benutzer herunterlädt, indem er zu Ihrer Anwendung geht.
Ich kann nur sichere Schriftarten erwähnen. Wie stellte sich heraus, dass wir sie hatten? Bisher konnten wir nicht erwarten, dass der Benutzer diese oder jene Schriftart hatte. Daher bot Microsoft Anfang der 2000er Jahre eine Liste von sechs Schriftarten an, die seit Beginn des letzten Jahrzehnts auf allen Systemen vorhanden waren, und Entwickler konnten sie mit gutem Gewissen und Wissen verwenden dass diese Schriftarten bereits bei Benutzern vorhanden sind und keine zusätzlichen Anforderungen senden müssen.
Und hier sehen wir das gleiche Arial. Mit Blick auf die Zukunft: Jemand weiß bereits, dass Helvetica eine Systemschrift unter macOS ist, die es dort seit vielen Jahren gibt. Daher sagte ich in der Geschichte, die ich am Anfang erwähnte, dass wir Helvetica, Arial und nicht umgekehrt aufnehmen sollten.
Danach bemerkte ich diese Aufzeichnung sehr oft auf einer Vielzahl von Ressourcen und fragte mich, woher sie kam und wie sich herausstellte, dass Menschen einen so grundlegenden Fehler machen können. Schließlich lernen wir es, wenn wir gerade erst anfangen, CSS zu lernen.
Ich war sehr überrascht, als ich feststellte, dass es von einer so angesehenen Ressource wie w3schools stammte, ihnen einen Fehlerbericht schickte, aber sie haben ihn immer noch nicht behoben, wie.
Nun zurück zu den Schriftarten. Wie können wir Schriftarten verbinden? Wir haben CSS und JavaScript.
Wir können eine benutzerdefinierte Schriftart deklarieren und verschiedene Formate angeben, aus denen der Browser das erste bekannte Format auswählt und herunterlädt.
- WOFF2 wird am besten von allen modernen Browsern komprimiert und unterstützt.
- WOFF komprimiert etwas schlechter, hat aber eine hervorragende Unterstützung.
- EOT wird ausschließlich für ältere IE benötigt. - TTF, es hat auch eine gute Unterstützung, und durch Herunterladen können wir es auf dem Betriebssystem installieren.
- SVG, das meiner Meinung nach veraltet ist, wird heute nur noch in einem oder zwei Browsern unterstützt.
Wir haben auch eine so coole CSS-Funktion wie lokal, mit deren Hilfe wir überprüfen können, ob die Schriftart im Betriebssystem des Benutzers vorhanden ist. Aber du musst dich nicht wirklich auf sie verlassen. Selbst wenn die Schriftarten denselben Namen haben, bedeutet dies keineswegs, dass sie dieselbe Schriftart haben. Seien Sie daher vorsichtig, wenn Sie es verwenden.
Vergessen Sie nicht, nach Bekanntgabe der Schriftart einige Fallbacks anzugeben, falls der Browser sie nicht herunterladen kann.
Ich denke, viele Leute wissen, dass wir einen Unicode-Bereich für Schriftarten angeben können, und nachdem die Schriftart heruntergeladen wurde, wird sie ausschließlich für die angegebenen Zeichen verwendet. Beispielsweise möchten Sie nur englischsprachigen Text in dieser Schriftart oder nur Zahlen usw. anzeigen.
Außerdem können Sie den Datenverkehr, den wir an Benutzer senden, erheblich reduzieren.
Oben können wir die Schriftart in zwei separate Dateien aufteilen, in einer gibt es nur lateinische Zeichen und in der zweiten - kyrillisch. Wir haben ihnen denselben Namen für die Schriftfamilie gegeben, damit der Browser versteht, dass dies Teile einer einzelnen Schrift sind. Wenn die Seite nur kyrillische Zeichen enthält, lädt der Benutzer nur die zweite Datei herunter, wodurch der vom Benutzer heruntergeladene Datenverkehr verringert wird.
Infolgedessen ist es nicht so schwierig, Teilmengen zu erstellen. Es gibt sowohl GUI- als auch CLI-Tools dafür. Es ist nicht schwierig, sie zu finden und damit umzugehen.
Der Support ist heute ziemlich gut. Seien Sie nicht schüchtern, es zu benutzen.
Vergessen Sie nicht das große Sprichwort „siebenmal messen - einmal sabben“, sonst können Sie in eine eher unangenehme Situation geraten.
Wir können Schriftarten auch mit JS herunterladen. Wir haben eine FontFace-API dafür, sie sieht ziemlich ähnlich aus.
Wir deklarieren eine neue Schriftart, laden sie, sie wird asynchron geladen. Nachdem es geladen wurde, können wir es der Seite hinzufügen.
Auf den ersten Blick mag dieser Ansatz nutzlos erscheinen, es sei denn, Sie sind an einem Schriftartendienst beteiligt. Am Ende des Berichts können Sie jedoch Ihre Meinung ändern.
Nun, wir haben einen Dienst, wir haben mehrere Schriftarten hinzugefügt. Und unser Benutzer kommt auf unsere Seite und trifft sich mit einem solchen Bild.
Wie ist das passiert? HTML ist angekommen, Stile wurden geladen und Schriftarten sind noch nicht eingetroffen. Hier kann das Verhalten des Browsers variieren. Einige der Browser blockieren das Rendern des Textes. Es scheint, dass kein Text vorhanden ist. Tatsächlich zeichnen die Browser den Text jedoch mit ihrer eigenen transparenten Schriftart, da sie wissen müssen, wie viel Platz der Text auf der Seite einnimmt, damit alle Einrückungen ähnlich sind. Wenn die Schriftart geladen wird, wird der Text mit Ihrer Schriftart neu gezeichnet und im Browser angezeigt.
Es wäre großartig, wenn wir in solchen Fällen das Verhalten des Browsers vereinheitlichen könnten. In der Tat können einige Browser Text mit einer transparenten Schriftart rendern, während andere mit einer gefalteten Schriftart. Dafür haben wir nur eine Codezeile.
Grundsätzlich ist nur Block oder Swap für Sie von Nutzen. Durch das Blockieren wartet der Browser und rendert den Inhalt der Seite mit einer transparenten Schriftart, da es durchaus möglich ist, dass Sie eine sehr schöne benutzerdefinierte Schriftart haben, die nicht wie etwas aussieht. Daher möchten Sie nicht, dass der Benutzer den Text sieht. Lassen Sie den Benutzer also warten. Es wird nicht ewig warten, nur drei Sekunden. Danach wird die folgende Schriftart verwendet und auf die vollständige Unendlichkeit gewartet, bis Sie eintreffen.
Oder tauschen Sie aus, wenn der Browser sofort die nächste gefaltete Schriftart nimmt, den Inhalt damit zeichnet und unendlich lange auf das Eintreffen Ihrer Schriftart wartet.
Heute ist die Unterstützung recht gut, diese kann bereits genutzt werden. Schließlich ist CSS kein JS. Wenn der Browser plötzlich etwas nicht mehr versteht, ist dies in Ordnung. Er ignoriert diese Regel und geht weiter. In solchen Fällen erhalten wir das gleiche Verhalten wie zuvor.
Großartig, wir haben den Browser aufgefordert, jetzt haben wir auf fast allen nicht älteren Browsern das gleiche Verhalten.
Aber wir haben das Problem selbst nicht gelöst. Wie kam es, dass Schriftarten so lange kamen? Vor langer Zeit, als ich noch nicht in Yandex gearbeitet habe, bin ich ein wenig gelandet, nichts Besonderes, aber viele Bilder und ein bisschen Stil.
Ich bin auf ein solches Problem gestoßen, dass die Schriftart buchstäblich bei 6-7 Sekunden ankam, und dies nur mit der Drosselung des Netzwerks auf schnelles 3G, obwohl das erste Rendering bereits 2,5 Sekunden lang irgendwo angezeigt wurde und der Benutzer einfach eine leere Seite betrachtete.
Oben wird blaues HTML geladen, dann gehen lila Stile. Wo ist unsere Schrift?
Da ist er. Wie ist es passiert? Wir haben eine kleine Klarstellung, auch wenn wir unsere Schriftart ganz am Anfang unserer Stile deklarieren. Der Browser sendet eine Anfrage erst, nachdem er das gesamte CSS heruntergeladen, vollständig analysiert und festgestellt hat, dass auf der Seite Text vorhanden ist, der mit dieser Schriftart gezeichnet werden muss .
Es wäre großartig, wenn wir dem Browser sagen könnten: Hören Sie, ich werde diese Schriftart definitiv verwenden und sie jetzt herunterladen.
So können wir. Dies wird als Laden von Schriftarten bezeichnet. Wir können dem Browser in nur einer Zeile mitteilen, dass wir diese bestimmte Schriftart herunterladen und eine Anfrage dafür senden müssen, bevor wir die Anfrage nach Stilen senden. Jetzt sieht der Wasserfall der Anfragen anders aus.
Unser Text mit der richtigen Schriftart wird ca. 3 Sekunden lang mit allen anderen Inhalten angezeigt. Dies beschleunigt unsere Website nicht, aber der Benutzer kann sofort mit der Navigation durch diesen Inhalt beginnen. Und das ist gut.
Das Vorladen von Links funktioniert nur in relativ modernen Browsern, und es lohnt sich, es hauptsächlich mit woff2 zu verwenden. Wenn dies nicht der Fall ist, dann nur mit woff. Weil die Anfrage immer gesendet wird.
Eine weitere gute Vorgehensweise beim Vorladen: Sie müssen nur eine Datei angeben, die der Browser versteht. Wenn Sie auf MDN darüber lesen, sehen Sie etwas Ähnliches.
Dies lohnt sich nie, da wir auf diese Weise viele Anfragen nach Schriftarten für jedes Format senden, obwohl der Browser nur eine verwendet. Warum haben sie hier das eot-Format hinzugefügt, das nur für IE verwendet wird, das nicht mehr entwickelt wird und nicht einmal von Microsoft unterstützt wird? Es ist unwahrscheinlich, dass sie uns dies mitteilen.
Ein ähnlicher Code sollte wahrscheinlicher aussehen.
Vielleicht haben Sie andere Aufgaben, die Sie bei der Initialisierung Ihrer Bewerbung erledigen müssen? , , , , , .
— . JS, , , , , .
. , , . . Font style matcher, , CSS , , , , , , “”.
-? , , .
, . ? , , , Yandex Sans. , . , ? , , ?
«», -. , . ? , . .
, system-ui, , stage 2, , Windows, .
, , . , , . , github, Twitter, Medium. , .
, , , , bootstrap. .
, , accessibility, , , , .
? , - ?
, , -, , . , , .
,
axe pa11y , accessibility test runners, CI-. . pa11y .
- . , , ? .
, , . , color picker dev tools, Chromium- — .
, , , , . , , , , , , .
, , , .
.
, localStorage, . , , . , , , - , .
, : localStorage , key-value-, — . - , , .
— . head HTML- . , . , , bounce rate. , — , , .
, , . : , 200 , . — , . , — , , svg. , . svg CSS- .
, . . , , . — svg.
. , , . — : , , , . .
. , . . , . , , .
Sie können wahrscheinlich Ihre benutzerdefinierten Schriftarten deaktivieren, den Datenverkehr reduzieren und die Anzeige Ihrer Inhalte auf der Website beschleunigen. Wenn Sie dies jedoch plötzlich nicht mehr können, sehen Sie sich Optionen wie das Laden und Ersetzen von Schriftarten an. Vielen Dank!