Ewolucja typografii ze zmiennymi czcionkami: wprowadzenie

Cienki, gruby i wszystko pomiędzy: FF Meta Variable od Monotype

Słowa mają moc, a typografia jest ich głosem

Przez stulecia pisanie było sposobem, w jaki „słyszymy” to, co czytamy. Zrozumiałe jest również, że kroje pisma i typografia są kluczowym elementem brandingu, ekspresji i zasięgu głosu. Świetna typografia wpływa na zrozumienie, nastrój i znaczenie na niezliczone sposoby i jest istotną częścią projektowania. Niestety przez wiele lat po pojawieniu się Internetu nie byliśmy w stanie zastosować do treści online wszystkiego oprócz najbardziej podstawowego projektu typograficznego. Dzięki możliwości używania prawdziwych czcionek i funkcji OpenType - takich jak ligatury, określone zestawy rysunków, ułamki i prawdziwe kerning - krajobraz typograficzny znacznie się poprawił. Ale rzeczywistość oglądania treści w Internecie wskazuje, że szybkość jest najważniejszym aspektem projektowania - dlatego zmieniliśmy typograficzny „zakres głosu” na szybkość strony. Oznacza to mniejszą wagę czcionek oraz niższą wierność marki i głos.

Z wielu jeden (paradygmat: przesunięty)

Zmienna czcionka to pojedyncza czcionka, która działa tak samo
- John Hudson

Pojawienie się czcionek zmiennych zmienia całą dynamikę. Jak opisał John Hudson, zmienna czcionka to pojedyncza czcionka, która działa tak wiele: wszystkie warianty szerokości i wagi, pochylenia, a nawet kursywy mogą być zawarte w jednym, bardzo wydajnym i ściśliwym pliku czcionek. Co więcej: format (który technicznie jest częścią specyfikacji OpenType 1.8) jest całkowicie rozszerzalny. Projektant typów ma pełną kontrolę nad używanymi osiami, ich zakresami, a nawet definicją nowych osi. Obecnie istnieje 5 „zarejestrowanych” osi (szerokość, waga, nachylenie, kursywa i wymiarowanie optyczne), ale projektant może zmieniać dowolną wybraną oś. Niektóre przykłady obejmują wysokość wznoszących i opadających, ocenę tekstu, a nawet kształt szeryfowy. Możliwości są prawie nieograniczone. Usuwając barierę wydajności, otwieramy drzwi dla bardziej interesującego i dynamicznego designu oraz znacznie większej zdolności do wyrażania prawdziwego głosu marki. Wszystko to przy zachowaniu wierności samemu krojowi pisma: można zmieniać tylko osie odsłonięte przez projektanta typów. Niedozwolone jest sztuczne zniekształcenie.

Projektowanie stron internetowych na nowo

Podczas gdy technologia wciąż się rozwija, a projektanci pracują nad tym, aby stać się bardziej płynnym w tym nowym sposobie pracy, obietnica projektowania w Internecie jest przełomowa. Typowym scenariuszem byłoby ograniczenie dowolnego projektu do 3–5 różnych czcionek, aby reprezentować każdy aspekt języka projektowania głosu i głosu - w tym każdą kombinację dla kopiowania treści i nagłówków. W najprostszej implementacji zmienne czcionki dawałyby nam swobodę używania różnych wag dla każdego poziomu nagłówka - znacznie zwiększając ich przejrzystość i czytelność.

Ampersands od 100 do 900 wag

Można również użyć nieco węższych szerokości znaków do nagłówków lub do wyświetlania informacji o dużej gęstości danych. W rzeczywistości cały system typograficzny można zaprojektować tak, aby był proporcjonalny: waga i szerokość mogłyby stać się mnożnikami w standardowych ustawieniach kopiowania treści. Pozwoliłoby to na łatwe skalowanie tych aspektów wraz z kopią ciała, gdyby jego ustawienia zmieniły się w zależności od rozmiaru ekranu lub preferencji użytkownika. Wszystko to przy jednoczesnym wzroście wydajności z powodu mniejszej liczby żądań HTTP (mniej plików czcionek) i ogólnej oszczędności danych do pobrania (choć będzie to różnić się w zależności od użytej czcionki i kompresji).

Ale chociaż te wolności pozwalają nam być bardziej wyrazistymi, niektóre z naprawdę interesujących możliwości pomogą przekształcić samo czytanie. Ta strona (cóż, sama strona demonstracyjna) została ustawiona nową wersją FF Meta o zmiennej czcionce, klasycznym bezszeryfowym projekcie Erika Spiekermanna, wydanym po raz pierwszy w 1991 roku. Nawet z jedną osią zmienności (ciężaru) obu w wersjach rzymskiej i kursywy można osiągnąć wspaniały zakres głosu przy ogromnym wzroście wydajności: 18 plików i ponad 288 tys. zastąpiono jednym plikiem o wielkości zaledwie 84 tys.

Ponownie opracowane czytanie na ekranie

[Meta] musi robić coś więcej niż ładnie wyglądać: musi ciężko pracować
—Erik Spiekermann

Niektóre z największych wyzwań w tworzeniu dobrego czytania są związane z brakiem finezji w proporcjach i drobnych szczegółach. Połączenie nowoczesnych funkcji i odmian CSS i OpenType stanowi potężną kombinację. Możliwość ustawiania funkcji, takich jak ligatury i dzielenie wyrazów na podstawie języka, włączanie i wyłączanie dzielenia wyrazów na podstawie rozmiaru ekranu, a nawet dostosowywanie szerokości znaków na najmniejszych ekranach w celu dopasowania większej liczby znaków w wierszu bez zmniejszania rozmiaru czcionki, może znacznie poprawić płynność i komfort czytania.

Gotowy na zbliżenie

XVIII-wieczny krój Garamond w rozmiarach optycznych. Pierwszy obraz ma rozmiar 6pt, drugi ma 72. Zwróć uwagę na różnicę kontrastu obrysu. Jest znacznie bardziej wyrafinowany w większym rozmiarze.

Kolejną cechą, która była powszechna w typach metalowych, ale zagubiona w tłumaczeniu na skład tekstu i cyfr, była zmiana rozmiaru optycznego (cóż, niektórzy projektanci wciąż tworzą osobne rozmiary optyczne dla różnych zakresów, ale jest to rzadkie i nieco ograniczone). Nie tak często spotykany w projektach bezszeryfowych, ale w poprzednich dziesięcioleciach (tak naprawdę przez wieki) często fizycznie mniejsze rozmiary kroju pisma były cięte nieco cięższymi pociągnięciami, bardziej otwartymi miskami i licznikami oraz w w niektórych przypadkach nawet szersze otwory w celu zachowania czytelności. W szczególności gazety uznały to za kluczowe, aby linie się nie zgubiły lub litery nie ucierpiały zbytnio z powodu atramentu.

Rozmiar optyczny zwrócił się w zmiennych czcionkach i może być automatycznie stosowany, jeśli jest dostępny, lub jawnie ustawiony przez projektanta lub programistę. Jak wspomniano, nie jest to tak częsta cecha w czcionkach typu sans-serif, jak ten, ale może być używana do dość dramatycznego efektu w projektach seriali o większym kontraście.

Polski i opanowany

Biorąc pod uwagę już omówione zalety, argumenty dotyczące czcionek zmiennych są dość przekonujące. Ale dobra typografia to nie wszystko. Zakres osi, takich jak szerokość i ciężar, daje nam ogromną swobodę w zakresie przyjmowania bardziej redakcyjnych projektów w Internecie bez konieczności ładowania ogromnej liczby zasobów plików. A ponieważ mamy już te kilka wymaganych czcionek zmiennych, istnieje możliwość udostępnienia ich do wykorzystania przez samych wydawców treści. Wyobraź sobie rolę projektantów w systemie zarządzania treścią (lub CMS), w którym mieści się strona internetowa. Ten projektant mógłby użyć kilku prostych kontrolek wbudowanych w CMS, które pozwoliłyby mu na pisanie konkretnych nagłówków lub cytatów, umożliwiając zupełnie nowy poziom projektowania podobny do tego, co mamy w druku, bez konieczności pisania niestandardowego kodu za każdym razem.

Być może wciąż jesteśmy u progu nowej ery, ale przyszłość z pewnością jest jasna

Od maja 2018 r. 3 z 4 głównych przeglądarek internetowych obsługują już czcionki zmienne, oprócz obu dominujących platform mobilnych (sprawdź wsparcie na caniuse.com). Mając to na uwadze, jesteśmy gotowi, aby rozpocząć oświetlanie Internetu już dziś.

Oto pełna strona CodePen. Rzuć okiem na całość i rzuć okiem na CSS, który ją napędza. Obejmuje to skalowany system typograficzny, który stworzyłem na podstawie pomysłów, których nauczyłem się od Jen Simmons i Tima Browna, z wykorzystaniem jednostek rzutni, niestandardowych właściwości CSS (czyli zmiennych) oraz wielu obliczeń. Możesz wyświetlić go bezpośrednio w CodePen lub sprawdzić, czy jest osadzony poniżej.

Kilka przemyśleń na temat kroju pisma i projektu

Zawsze byłem fanem twórczości Erika Spiekermanna i uważam, że chronologia i historia Meta, Officina i Fira są naprawdę interesujące i bardzo w moim mniemaniu w ciągu 25 lat. Szansa na zrobienie kroju pisma z tego rodzaju historią i wpływami w świecie projektowania i pracy z nim w kontekście zupełnie nowej technologii była naprawdę ekscytująca. Szczególnie doceniam możliwość pracy zarówno z wagą, jak i kursywą jako częścią tego samego pliku: naprawdę dobrze pokazuje wartość formatu zmiennej czcionki.

Postanowiłem nawet nie projektować strony, dopóki nie napisałem samego artykułu. Chciałem napisać dobre wprowadzenie skierowane do projektantów i właścicieli marek, aby przedstawić im zalety czcionek zmiennych pod względem rezonansowym z ich obawami: językiem projektowania i ekspresją marki. Kiedy poczułem, że mam dobry szkic, dodałem nieco więcej szczegółów do samego kroju pisma i jego miejsca w naszym słowniku leksykalnym. To dało mi kilka pomysłów, jak zaprezentować zarówno krój pisma, jak i historię.

Myśląc o podstawowym składzie, wybrałem skalę: chciałem bawić się ekstremalnymi ciężarami i rozmiarami w sposób, którego nie widuje się tak często w Internecie, ponieważ większość projektów jest bardziej ograniczona pod względem używanych wag. W tym przypadku zastosowałem cały zakres wag od 100 do 900, zarówno w języku rzymskim, jak i kursywą. Gdy zacząłem uzyskiwać układ, który mi się podobał, przyszło mi do głowy, że zamiast tworzenia grafiki ilustrującej możliwości, ciekawsze byłoby tworzenie ilustracji w typie: ciągnij cytaty i trochę danych czcionek w stylu „infografiki”.

Ostatni dotyk góry i ampers został zainspirowany stroną ze wzorem typu na stronie FontFont: istnieje próbnik glifów, który pokazuje wszystkie ciężary ampersand ułożone jedna na drugiej. Pierwotnie miałem je wszystkie ułożone w ten sam sposób, z animacją w pętli - ale to było trochę dużo w przypadku niektórych przeglądarek wciąż implementujących zmienne czcionki i animację klatek kluczowych. Kiedy uderzyłem w nakładający się układ z opcją odtwarzania / pauzy, spodobał mi się ich wygląd (szczególnie na urządzeniach mobilnych). Odwróciłem go więc i zacząłem statycznie, a następnie odtworzyłem animację i wróciłem do układu warstwowego.

Podsumowując, jestem bardzo zadowolony zarówno z treści, jak i projektu, a także podoba mi się to, jak porusza się i ewoluuje na różnych rozmiarach ekranu. Mam nadzieję, że posłuży również jako inspiracja i instrukcja dla innych.

[Monotype niedawno zaangażowało mnie do napisania i zaprojektowania strony demonstracyjnej z nową wersją zmiennej czcionki klasycznego projektu Erika Spiekermanna FF Meta. To jest tekst tej strony i niektórych elementów wizualnych. Pełna strona na żywo jest hostowana na CodePen i osadzona powyżej. Jest otwarty dla wszystkich, więc możesz zrobić kopię i bawić się nią samodzielnie. Możesz również zapoznać się z ich wprowadzeniem do technologii.]

Oryginalna treść opublikowana na moim blogu