Smashing Podcast Episode 5 With Jason Pamental: Czym są zmienne czcionki?

Co dwa tygodnie publikujemy podcast, w którym rozmawiam z kimś z branży internetowej na inny temat. W tym odcinku nauczmy się wszystkiego o czcionkach zmiennych! Mówię do źródła wiedzy w tej sprawie, Jasona Pamentala.

Pokaż notatki

Cotygodniowa aktualizacja

• „Systemy ilustracji marki: rysowanie silnej tożsamości wizualnej”, Yihui Liu
• „Walcząc, aby poradzić sobie z nagłymi wzrostami ruchu”, Suzanne Scacca
• „Tworzenie układu CSS: transmisja na żywo z Rachel Andrew”, Rachel Andrew
• „Projektowanie i rozwój stron internetowych Adwent Roundup na rok 2019”, Rachel Andrew
• „Czy Twoja witryna z portfolio powinna być PWA?”, Suzanne Scacca

Zmienne czcionki

• Znajdź Jasona w sieci pod adresem rwt.io
• Biuletyn informacyjny typografii internetowej
• „Zmienne czcionki: co autorzy stron internetowych muszą wiedzieć”, Jason Pamental
• Książka Ellen Lupton „Myślenie typem”
• Książka Erika Spiekermanna „Przestań kraść owce i dowiedz się, jak działa typ”

Transkrypcja

Drew McLellan: Jest strategiem projektowania, liderem UX, technologiem, ekspertem od typografii internetowej i zaproszonym ekspertem w grupie roboczej W3C Web Fonts Working Group. Pisze, mówi i współpracuje z zespołami i właścicielami marek, aby lepiej ustawić typ na platformach cyfrowych. Rozmawiał z takimi organizacjami jak Adobe, Audible, Conde Nast, GoDaddy, IBM oraz prowadził prezentacje, warsztaty i konferencje na całym świecie. Jego biuletyn, Web Typography News, jest popularny wśród tych, którzy chcą mieć najnowsze aktualizacje i wskazówki dotyczące typografii w sieci. Jest bez wątpienia ekspertem od typografii internetowej. Ale czy wiesz, że reprezentował Szwecję na Lawn Croquet na Igrzyskach Olimpijskich 1984? Moi miażdżący przyjaciele, proszę powitajcie Jasona Pamentala. Witaj Jasonie. Jak się masz?

Jason Pamental: Rozwalam . Zwłaszcza po tym wstępie.

Drew: Chciałem dzisiaj z tobą porozmawiać o typografii internetowej, bo to naprawdę twoja sprawa. Jesteś prawdziwym ekspertem od typografii internetowej. O tym ogólnie, ale w szczególności porozmawiajmy trochę o czcionkach zmiennych. Będę pierwszym, który przyzna, że ​​nie jestem ekspertem od typografii. To znaczy, proszę, uważajcie mnie za tak niedoinformowanego, jak każdy, kto słucha. Nie możesz mnie protekcjonalnie traktować żadnymi informacjami o typografii. Wydaje mi się, że już od około dekady mamy w sieci użyteczne czcionki internetowe. Czy to prawda?

Jason: Tak. Właściwie, czy to nie ty zacząłeś coś na Twitterze kilka dni temu? To było jak 9 listopada 2009 roku. To jakieś 10 lat w dwa dni od premiery Typekita. Wiem, że Font Deck miał rację w tym samym czasie. Niedługo potem usługa Google Fonts i Monotype. Miałem zaproszenie do wersji beta, które otrzymałem od mojego przyjaciela, Johna Cianci, który w rzeczywistości nadal jest kolegą mojej żony w agencji, w której pracuje dla Typekit w 2009 roku. To było całkowite odkrycie mojego zainteresowania internetem . To znaczy, była to dla mnie rewolucja. To znaczy, zawsze uwielbiałem typografię, kiedy uczyłem się jej w szkole, ale przez 15 lat nie mogliśmy nic z nią zrobić w sieci. To było niesamowite.

Drew: Muszą być projektanci pracujący w sieci, którzy mają teraz czcionki internetowe od 10 lat plus potencjalnie. Obecnie w sieci pracują projektanci, którzy nigdy nie projektowali witryny bez możliwości wyboru spośród ogromnej gamy krojów pisma.

Jason: Tak, to prawda. Nikt bez tego doświadczenia nie musiał pchać pikseli pod górę w obu kierunkach, tak jak my dorastaliśmy. Nie jesteśmy jakimiś zepsutymi starcami wymachującymi pięściami w niebo. Ale tak, to jest trochę niesamowite, biorąc pod uwagę wszystkie rzeczy, które zmieniły się w sieci, pomysł, którego niektórzy ludzie nigdy nie doświadczyli w żaden inny sposób, jest niezwykły.

Drew: Kiedy otrzymaliśmy czcionki internetowe, była to ogromna zmiana w sposobie, w jaki zaczęliśmy używać typografii w sieci, ponieważ naprawdę mogliśmy zacząć używać typografii w sieci. Oczywiście były rzeczy, które mogliśmy zrobić z bezpiecznymi czcionkami internetowymi, ale byliśmy dość ograniczeni do bardzo ograniczonej palety. Ale potencjalnie jest teraz kolejna duża zmiana, prawie tak samo istotna, jak może w przypadku czcionek zmiennych. Mam na myśli, co to są czcionki zmienne? Co oni dla nas robią? Gdzie zaczynamy?

Jason: Zawsze staram się zacząć od dawania ludziom punktu odniesienia. Kiedy więc myślimy o używaniu czcionek w sieci, musimy pamiętać, że obecnie przy „tradycyjnych” czcionkach każda czcionka ma indywidualną szerokość, wagę, pochylenie, wariant tego kroju. Dla każdego, którego chcemy użyć w sieci, musimy załadować plik. W przypadku typowej witryny, w której używasz jej do kopiowania treści, ładujesz zwykle cztery czcionki: zwykłą, pogrubioną, kursywą i pogrubioną kursywą. Wszystkie te rzeczy muszą zostać załadowane. Każdy z nich to trochę danych, które należy pobrać, przetworzyć i wyrenderować.

Jason: Więc zazwyczaj to, co robiliśmy przez lata, to ograniczanie się do używania bardzo małej liczby czcionek, co w rzeczywistości nie jest szczególnie dobrą praktyką typograficzną. W projektowaniu graficznym znacznie częściej stosuje się znacznie szerszy zakres. W danym projekcie można użyć ośmiu lub dziesięciu różnych gramatur i wariantów kroju pisma. W sieci byliśmy bardzo ograniczeni ze względu na wydajność. Duża różnica w czcionce zmiennej polega na tym, że wszystkie te permutacje są zawarte w jednym pliku. Ten format jest naprawdę wydajny, ponieważ przechowuje regularny kształt tego znaku, a następnie tak zwane delty, w których przesuwałyby się punkty wzdłuż tych krzywych, aby renderować go jako pogrubiony lub cienki, szeroki lub wąski.

Jason: Więc przechowując tylko różnice, nie musisz przechowywać całego zarysu. To znacznie wydajniejszy format. Chociaż nie jest tak mały jak pojedynczy plik czcionki, nadal jest znacznie mniejszy niż wszystkie poszczególne pliki osobno. Jeśli spojrzysz na coś takiego jak Plex Sans od IBM, wszystkie te oddzielne pliki mogą mieć prawie megabajt, gdzie dwa pliki czcionek zmiennych, które zawierają wszystkie szerokości i wagi w pionie w jednym pliku, kursywa w drugim to jak 230 KB. To dla naprawdę, naprawdę kompletnych zestawów znaków. Większość ludzi może użyć podzbioru tego i jeszcze go zmniejszyć. Generalnie widziałem te rozmiary plików około 50 do 100K dla typowej potrzeby witryny w języku zachodnim. Nie różni się to aż tak bardzo od ładowania… Po załadowaniu trzech lub czterech pojedynczych plików czcionek prawdopodobnie ładujesz więcej danych. To interesująca wygrana pod względem wydajności, ale także otwiera przed nami całą gamę krojów pisma do wykorzystania w Internecie za pośrednictwem CSS.

Drew: Więc to prawie jak dostarczenie przepisu, a nie posiłku. Zamiast wersji kursywy, tutaj jest wersja pogrubiona. To tak: „Oto zwykła wersja i aby to zrobić kursywą, zrobiłbyś to, aby pogrubić, zrobiłbyś to”. To zmniejsza rozmiar pliku, który spada przez przewód.

Jason: Tak. Cóż, w pewnym sensie daje ci to wszystkie składniki, a potem możesz przygotować dowolny przepis. Ponieważ naprawdę możesz iść wszędzie od… Wracając do przykładu Plex, od 100 do 700 wagi, gdzie 700 jest typowym pogrubieniem, 400 byłoby normalną wagą. Ale wtedy masz dużo lżejszy. Możesz więc zrobić naprawdę duże i naprawdę cienkie nagłówki wierszy, cytaty blokowe lub różne elementy lub wyróżnienia, a następnie być w stanie modulować to, co chcesz, aby było pogrubione w różnych rozmiarach. Istnieje wiele różnych rzeczy, które możesz zrobić, aby uzyskać lepszą typografię, lepsze wrażenia użytkownika, a jednocześnie uzyskać lepszą wydajność. To jest strażnik.

Drew: Czyli jest prawie nieskończona liczba kroków pomiędzy tym, co dzisiaj uważamy za zwykłe i odważne? Czy rzeczywiście masz możliwość poruszania się w dowolnym miejscu wzdłuż tej osi, aby dostosować się między nimi?

Jason: Tak. To, co myślę, jest dla mnie naprawdę ekscytujące, jako kogoś, kto studiował projektowanie graficzne i przez wiele lat dość uważnie przyglądał się projektowaniu druku, pomysł na to, czym naprawdę jest pogrubienie, powinien się zmieniać w zależności od rozmiaru renderowanego tekstu. Tak więc domyślnie 400 i 700 dla normalnych i pogrubionych to rodzaj domyślnego ustawienia sieci. Ale tak naprawdę jedynym powodem, dla którego krzyczysz śmiało, jest chęć podkreślenia, czegoś, co się wyróżnia. Ale im cięższa czcionka wychodzi z małego rozmiaru, tym trudniej ją czytać. Niejako wypełnia małe otwarte przestrzenie. Zamiast używać 700 do kopiowania treści, gdy jest ustawiony na mniej więcej 16 pikseli lub cokolwiek tam używamy, użyjesz może 550, 575, gdzie masz wystarczający nacisk, ale formy liter są nadal bardziej otwarte. Następnie, gdy staje się większy, możesz użyć większej wagi.

Jason: Ale znowu, w tym momencie to rodzaj twojego wyboru. Modulując to w celu uzyskania odpowiedniego poziomu nacisku, ale nadal zachowując naprawdę dobrą czytelność, mamy o wiele większą elastyczność. Naprawdę mam nadzieję, że w miarę jak stają się one coraz bardziej popularne i szerzej stosowane, będziemy mogli zacząć uczyć ludzi, jak używać tego zakresu nieco bardziej niuansów, a jednocześnie stać się bardziej wyrazistymi i jednocześnie bardziej czytelnymi .

Drew: Zauważyłem, że wdrażając projekty jako frontend i wdrażając projekty, które otrzymałem, to że różne kombinacje kontrastu kolorów i jasnego tekstu na ciemnym tle w porównaniu z ciemnym tekstem na jasnym tle, wagi mogą wyglądać zupełnie inaczej. Więc przypuszczalnie pomogłoby to wyrównać i nieco dopracować wrażenia wizualne i czytanie w oparciu o takie zmiany?

Jason: Absolutnie. To jedna z rzeczy, które zwykle będę prezentować na warsztatach i wykładach, to dodanie wsparcia dla zapytania o media w trybie światła. Możesz odwrócić ten kontrast, ale wtedy chcesz to zrobić w pewien dopracowany sposób. W zależności od kroju pisma może wyglądać na naprawdę ciężką lub nieco krętą z czcionką szeryfową. Czasami chcesz być nieco cięższy lub nieco lżejszy, ale wtedy musisz również rozmieścić napisy, gdy masz je na ciemnym tle, w przeciwnym razie litery będą się ze sobą łączyć. Jest kilka rzeczy, które możesz dostosować w typografii. Zapytanie o media jest proste. To znaczy, to jak dwie linijki kodu, aby dodać to do Twojej witryny. Więc to jest to, co z tym robisz. To niekoniecznie tylko odwracanie kolorów. Czasami trzeba dostosować kontrast, ale także dostosować sam krój, aby uzyskać lepszą czytelność.

Drew: Tak więc przypuszczalnie nie tylko wagę można zmieniać w zmiennej czcionce. Czy są inne sposoby na zmianę wyświetlanej czcionki?

Jason: Tak. To zależy całkowicie od projektanta kroju pisma. Myślę, że naprawdę dobrze jest podkreślić, że nie jest to bezpłatne dla wszystkich w przeglądarce. Przeglądarka może renderować tylko to, co zostało włączone w czcionce. Ostatecznie to projektant krojów mówi, że waga waha się od tego do tego. Możesz mieć oś szerokości. Byłoby trochę węższe lub trochę szersze, ale jest też możliwość posiadania tak zwanych osi zarejestrowanych. Jest szerokość, waga, nachylenie, kursywa i rozmiar optyczny. To są wszystkie podstawowe rzeczy, które są mapowane do właściwości CSS. Slant pozwala na kąt pomiędzy jednym a drugim, tak wyprostowanym i rzeczywiście widziałem takie z odwróconym nachyleniem, a także z nachyleniem do przodu. To jest całkowicie otwarte. Kursywa jest ogólnie włączona lub wyłączona, ale niekoniecznie. Właściwie możesz mieć… Cóż, są projektanci czcionek, którzy eksperymentowali ze stopniową zmianą formy liter, gdy przechodzisz od normalnej do kursywy, i po drodze zastępują litery. To dość interesująca rzecz.

Jason: Ale jest też możliwość posiadania niestandardowych osi. Projektant typów może zdefiniować dowolne osie niestandardowe, które chcą zmieniać. Widzieliście takie, które dodają grawitacyjnego rozlania kropli i wszelkiego rodzaju zabawnych skręcania kształtów lub rozszerzania szeryfów, zmieniających wysokość wznoszących się i opadających. Na małych literach, zmieniając, czy są szeryfami, czy nie. Jest wiele rzeczy, które możesz zrobić. To naprawdę zależy od wyobraźni projektanta czcionek. Myślę, że tylko zarysowujemy powierzchnię, co może realnie się wydarzyć z tymi wszystkimi rzeczami. To wszystko jest dostępne przez CSS.

Drew: Tak. Wszystkie te właściwości można modyfikować za pomocą normalnego CSS, który dostarczasz z resztą swojego projektu. Jakie rzeczy możemy zrobić w CSS, aby wywołać te zmiany? Czy to tak, jak zrobilibyśmy z responsywnym układem, w którym mamy zapytania o media, które to wywołują?

Jason: Można to zrobić na wiele sposobów. Jest mała zmiana, którą musisz wprowadzić. Zakładam, że dostarczymy kilka linków do pewnych rzeczy, które pomogą ludziom trochę się nimi pobawić. Mam na myśli, napisałem kilka. Mam nadzieję, że to pomoże ludziom. Następnie po stronie użytkowania oś wagi czcionki jest po prostu mapowana do grubości czcionki. Zamiast mówić zwykłym pogrubieniem, po prostu podaj liczbę. Możesz to zmienić za pomocą zapytań o media. Możesz to zmienić za pomocą JavaScript. Możesz zrobić to, co chcesz z tym. Używam techniki zwanej CSS Locks, której nauczyłem się od Tima Browna, aby w zasadzie używać matematyki. Niestandardowe właściwości CSS i obliczenia, aby skalować go od małego punktu przerwania do dużego punktu przerwania, w pewnym sensie płynnie skaluje rozmiar czcionki i wysokość linii.

Jason: Możesz też użyć trochę JavaScriptu, aby zrobić to samo z ich wagą, jeśli chcesz. Oś wagi odwzorowuje wagę czcionki, właściwość CSS. Oś szerokości w czcionce zostanie odwzorowana na rozciągnięcie czcionki, co jest po prostu wyrażone w procentach. Powinienem zauważyć, że wielu projektantów czcionek niekoniecznie zastanawia się, jak to jest wyrażane, więc możesz zobaczyć zakresy wag, które robią dziwne rzeczy, takie jak od 400 do 650. Nadal musisz wyrazić to w procentach, ale to działa. W porządku. Musisz tylko wiedzieć, co to jest normalne, a wszystkie czcionki są udokumentowane. W przypadku czegokolwiek innego niż te dwa, obecnie jest trochę nierówne wsparcie w implementacji dla skosu i kursywy. Wiele z tych rzeczy, do których musisz się wycofać, używa ustawień wariacji czcionek, a następnie możesz podać kilka rzeczy naraz. To trochę jak ustawienia funkcji czcionek. Jest to rodzaj składni niższego poziomu, w której możesz podać oddzieloną przecinkami listę tej czteroliterowej osi i wartości, następna, następna.

Jason: Jedyną rzeczą, o której ludzie muszą pamiętać, jest to, że kiedy używasz ustawień odmian czcionek, tracisz całe semantyczne zrozumienie tego i tracisz rezerwę. Grubość i rozciągnięcie czcionki są powszechnie obsługiwane we wszystkich przeglądarkach. Zdecydowanie powinieneś używać tych atrybutów. Do czegokolwiek innego możesz użyć ustawień odmian czcionki. Ale zaletą korzystania z wagi czcionki w normalny sposób jest to, że jeśli czcionka zmienna się nie ładuje, przeglądarka nadal może coś z tym zrobić. Natomiast jeśli nie rozumie czcionek zmiennych lub nie ładuje się, jeśli wszystko jest w ustawieniach odmian czcionek, tracisz wszystkie informacje o stylizacji. To tylko mała uwaga dotycząca tego, co jest obsługiwane i gdzie. Ale powinienem również powiedzieć, że jest obsługiwany we wszystkich przeglądarkach wysyłkowych, z którymi możesz się spotkać w większości przypadków. I-11 nie działa, ale możesz dostarczyć statyczne czcionki internetowe, a następnie użyć obsługi reklam w CSS, aby przejść na czcionki zmienne. Wtedy unikniesz zduplikowanych pobrań zasobów i działa to naprawdę dobrze. Mam to już w produkcji na kilku stronach.

Drew: Myślę, że podobnie jak wiele bardziej nowoczesnych technologii internetowych, które widzisz, jeśli istnieje zmienna czcionka, która od jakiegoś czasu cicho bulgocze i jest tylko wtedy, gdy w końcu się kończy i otrzymujemy wsparcie w przeglądarkach a ludzie tacy jak ty robią o tym hałas i informują wszystkich, że tam jest. Może to niemal poczuć się dla standardowego projektanta lub programisty, który po prostu codziennie wykonuje swoją pracę i nie śledzi wszystkich najnowszych pobrań. Może się wydawać, że pojawił się znikąd. Ale wydaje mi się, że to bulgocze już od dłuższego czasu… Mam na myśli, że wspomniałeś o dwóch nieco różnych implementacjach, z którymi teraz mamy do czynienia. Czy jest jakiś starszy i nowszy standard wdrażania?

Jason: Cóż, właściwie nie jest ani starszy ani nowszy. Obaj są bardzo celowi. Wrócę do tego za sekundę, ponieważ naprawdę warto zrozumieć, na czym polega różnica. Ale masz rację. Format został wprowadzony nieco ponad trzy lata temu, we wrześniu 2016 roku. Pierwsze działające wdrożenie w nocnej wersji Safari mieliśmy trzy tygodnie później. To było bardzo szybkie, gdy mieliśmy działającą przeglądarkę. Safari jako pierwsza dostarczyła pełne wsparcie dla niego. Myślę, że to było wtedy, gdy pojawiła się High Sierra. Nie wiem, to było jak Safari 12 czy coś takiego.

Jason: Ale niedługo potem otrzymaliśmy wsparcie w przeglądarkach Firefox, Edge i Chrome. Właściwie obsługujemy przeglądarki od prawie dwóch lat. Ale nie było mnóstwa czcionek. Nastąpiła taka stała ewolucja. Wsparcie dla korzystania z nich w sieci faktycznie istnieje dłużej niż gdziekolwiek indziej. Mam na myśli, że technicznie ten format działa również na komputerach stacjonarnych. Więc jeśli masz format TTF, możesz zainstalować go w swoim komputerze stacjonarnym na Windows lub Mac i możesz go używać w dowolnej aplikacji. Nie zawsze możesz zmienić osie w sposób, w jaki możesz chcieć bawić się nimi w nieskończoność, ale istnieje pojęcie nazwanych instancji osadzonych w tym pliku czcionki, które mapują je z powrotem do tego, do czego jesteśmy przyzwyczajeni.

Jason: Na przykład w Keynote nie ma wyraźnej obsługi czcionek zmiennych, ale format działa, jeśli są rzeczy takie jak w Tech Sense, znowu skondensowane, lekkie. Będziesz mieć te normalne, regularne, regularne pogrubione, wąskie itp., Wszystkie będą dostępne w rozwijanym menu, tak jak instalacja całej rodziny. Następnie, jeśli jesteś w programie Illustrator lub Photoshop lub teraz InDesign, który właśnie został wysłany w zeszłym tygodniu, lub Sketch, który został wysłany kilka tygodni temu, wszystkie obsługują teraz czcionki zmienne, dzięki czemu możesz uzyskać dostęp do wszystkich różnych osi i bawić się nimi ze swoim zawartość serca. Ale w przeglądarce mieliśmy o wiele więcej do pracy. Idąc za przykładem twojej żony, od jakiegoś czasu uderzam w ten bęben, próbując sprawić, by ludzie byli bardziej tego świadomi. Następnie dzięki pracy, jaką wykonał zespół Firefoksa przy tworzeniu narzędzi programistycznych. Dzięki Jen Simmons, który popycha to dalej, mamy niesamowite narzędzia do pracy w przeglądarce, które pomagają nam zrozumieć, do czego zdolne są czcionki.

Drew: Wspomniałeś o projektantach czcionek i możliwościach czcionek. Czy jest dostępnych wiele czcionek?

Jason: Cóż, wiele osób to teraz robi. Prawdopodobnie najlepszym i najbardziej wszechstronnym miejscem, w którym można ich szukać, jest witryna Nicka Shermana, v-fonts.com, v-fonts.com. To tylko strona z katalogiem. Szybko staje się naprawdę, naprawdę duży. Cały czas pojawia się coraz więcej czcionek zmiennych. Nie ma zbyt wielu czcionek open source, ale jeśli szukasz na GitHubie czcionek zmiennych, w rzeczywistości znajdziesz tam całą masę projektów. Ale Google uruchomił wersję beta swojego nowego interfejsu API z około tuzinem czcionek zmiennych. Z nich płynie więcej. Właśnie wydali Recursive na recursive.design, który jest fantastycznym nowym krojem pisma Stephena Nixona. Zmienna Plex, jedna jest dostępna, to open source. Potem jest mnóstwo komercyjnych.

Jason: Fajną rzeczą w tym jest to, że Monotype wypuścił kilka całkiem dużych. Ale to wiele mniejszych odlewni i indywidualnych projektantów po prostu przoduje w eksperymentowaniu z tym formatem. Myślę, że to naprawdę świetne dla projektowania i świetne dla sieci, że widzimy wszystkie te nowe projekty od nowych projektantów lub mniejszych projektantów, którzy w pewnym sensie przełamują ten nowy grunt. Ponieważ lubię widzieć, jak im się to udaje, ponieważ naprawdę podjęli inicjatywę, aby w pewnym sensie umieścić tam kilka świetnych rzeczy.

Drew: Czy widzimy jakąkolwiek aktualizację istniejących czcionek, aby stały się czcionkami zmiennymi, aby rodziny zostały zastąpione jedną czcionką zmienną? Czy to się w ogóle dzieje?

Jason: Jest. Te wydane przez Monotype to aktualizacje niektórych naprawdę klasycznych krojów pisma. FF Meta pomogłem im uruchomić, projektując demo na ten rok. Mają to. Univers, Frutiger, Avenir, myślę, że to są te, które wydali do tej pory, ta czwórka. To są naprawdę podstawowe, klasyczne kroje marki. Pracują nad więcej. Wiem, że mają co najmniej pół tuzina, które są na różnych etapach produkcji. Wiem, że Dalton Maag, który wykonuje mnóstwo niestandardowych krojów pisma dla dużych korporacji, ma kilka naprawdę fajnych czcionek zmiennych. Pracowałem z TypeTogether. Mają też kilka naprawdę świetnych krojów pisma. Znam to…

Jason: Na niektórych konferencjach, na których mówiłem o tych rzeczach, pokazałem, że Adidas ma również swoje własne, które od prawie dwóch lat wykorzystują do wszystkich prac nad marką w druku. Co jest naprawdę, naprawdę niezwykłym materiałem. Ale także Mark Simonson pracuje nad zmienną wersją Proximy Nova. To poważna sprawa. To jedna z najlepiej sprzedających się czcionek internetowych wszech czasów. To się dzieje. Dzieje się to w kawałkach i kawałkach na całej skali. Ale nawet coś tak prostego, jak zasubskrybowanie Davida Jonathana Rossa, Font of the Month Club, zapewni ci zmienną czcionkę prawie co miesiąc. To znaczy, był naprawdę niesamowity w rzeczach, które wypuszczał. To jakieś 72 dolary na rok czy coś w tym stylu. Wypuszcza wszelkiego rodzaju naprawdę piękne rzeczy.

Drew: To dość ciekawe, bo oczywiście przy możliwościach czcionek zmiennych można by tworzyć nowe projekty, które je wykorzystują. Ale potencjalnie mogą istnieć witryny, które są w fazie produkcyjnej, w których dostępne są już wersje czcionek zmiennych, do których ktoś mógłby wrócić, ponownie je odwiedzić i zastąpić wiele plików czcionek nową implementacją opartą na nowej wersji czcionki zmiennej.

Jason: Tak, absolutnie. To niektóre z pytań, które otrzymuję dość regularnie. Niedawno przeglądałem dość dużą witrynę internetową poświęconą transmisji sportowej, którą zespół programistów zadał mi w związku z tym samym pytaniem. Sprawdziłem i rzeczywiście, dla dwóch krojów, których używają, dostępne są czcionki zmienne. Krótkie badanie wykazało, że możemy zastąpić cztery wystąpienia jednego kroju pisma i trzy inne dwoma plikami czcionek zmiennych i przejąć 70% rozmiaru pliku w pięciu żądaniach. To znaczy, byłoby to pytanie wygrana z punktu widzenia wydajności. W przypadku naprawdę dużej witryny, gdy spojrzysz na usunięcie prawie 300 000 pobranych danych od milionów użytkowników, w rzeczywistości oznacza to realne oszczędności w dolarach i koszty przepustowości. Nawet z tego czysto praktycznego punktu widzenia bez przepisywania żadnego z ich CSS, po prostu zamieniając te czcionki, będzie to dla nich znacząca wygrana pod względem wydajności, czasu renderowania strony, a następnie rzeczywistych kosztów przepustowości dla nich.

Drew: W praktyce, czy to tak proste, jak się wydaje, po prostu zamiana jednego na drugie?

Jason: Może być. Myślę, że doskonałym tego przykładem jest coś, co Google poniekąd niechcący wymknęło się w ATypI we wrześniu, że zaczęli to robić z Oswaldem 150 milionów razy dziennie. Stworzyli wersję ze zmienną czcionką i po prostu zaczęli przeglądać ją na stronach internetowych, które używały wystarczającej liczby instancji, w których przyniosłoby to znaczące korzyści. Nikomu nie powiedzieli. Nie powiedzieli właścicielom strony. Nikt nie musiał nic robić. Ponieważ miał właściwe odwzorowanie osi wagi, więc ustawienia domyślne po prostu działały. 150 milionów razy dziennie to dużo serwowania czcionek. To daje im lepszy wgląd w to, jak wyglądałby dla nich ten krajobraz, gdyby mogli zacząć zmieniać pięć najpopularniejszych czcionek internetowych, które obsługują? Zakładam, że Open Sans jest prawdopodobnie jednym z nich. Wiem, że prawdopodobnie tam jest Lato, Roboto.

Jason: Więc jeśli spojrzysz na nie i przyjrzysz się, jak mogą wyglądać zoptymalizowane wersje tych, możesz zobaczyć, że istnieje kilka bardzo jasnych powodów, dla których firma Google byłaby tym zainteresowana. Następnie, jeśli spojrzysz na drugą stronę, tylko przestrzeń projektowa i o ile bardziej wierna głosowi marki może być firma, jeśli pracuje z całą gamą krojów własnej marki, zamiast zmieniać się na inne lub być bardziej ograniczone w swojej palecie. Tak więc jest naprawdę ciekawych rzeczy do nauczenia się i zbadania na obu końcach tego spektrum.

Drew: Brzmi to jak ekscytujący, nowy, wspaniały świat typografii i możliwości pisania w sieci w bardziej wrażliwy i potencjalnie bardziej kreatywny sposób, niż byliśmy w stanie to zrobić wcześniej.

Jason: Cóż, z pewnością mam taką nadzieję. Myślę, że jedną z największych barier w adopcji czcionek w sieci na wszystkich etapach jest wydajność. Więc co się dzieje? Jak długo trwa ładowanie? Co to oznacza dla czasu renderowania na stronie? Mamy problemy z tego rodzaju błyskiem niewidocznego tekstu lub tekstu bez stylu. Zmaganie się z tymi wszystkimi rzeczami, naprawdę, wraca do tego, jak długo zajmuje to wszystko, aby się tam dostać? Jak na to reaguje przeglądarka? Jest wiele rzeczy, które możemy zrobić, aby złagodzić niektóre z tych problemów. Ale tak naprawdę sprowadza się to do tego, że jeśli mamy lepszą czcionkę i lepszy sposób jej obsługi, wszystkie te problemy stają się znacznie mniej istotne. Mając to na miejscu, stajemy się o wiele bardziej wyraziści. Możemy naprawdę spróbować położyć kres temu projektowi i spróbować być trochę bardziej kreatywni.

Drew: Ponieważ napisałeś ostatnio, w pewnym sensie wyrażając wrażenie, że być może sieć wpadła w pułapkę polegającą na projektowaniu szablonu artykułu dla każdej witryny, być może z pewnymi odmianami dla kilku różnych rodzajów treści. Ale wszyscy dryfują w kierunku tego stylu medium.com, w którym pojedyncza kolumna tekstu jest bardzo czytelna dla moich oczu. Ładnie skomponowany. Czy to taka zła rzecz?

Jason: Nie sądzę, żeby to było złe. Po prostu myślę, że to się znudzi. To znaczy, kiedy ukazało się Medium, to było całkiem nowe. To znaczy, myślę, że jedna kolumna… Jak mówisz, była to całkiem ładnie przygotowana kopia. Ma ładny teren. Nie było tłoczno. To nie było ciasne, boczne paski i te wszystkie inne rzeczy. Zawsze będą pytania o model biznesowy i o to, co będzie to wspierać. To dlatego naprawdę piękny przeprojektowanie, jak sądzę, Seattle Times, które kilka lat temu zrobił Mike Monteiro z Mule Design. Absolutnie wspaniały, dopóki się nie pojawił. Potem umieścili te masywne banery po obu stronach kolumny, a to po prostu zabrało całą tę białą przestrzeń. To był prawdziwy wstyd.

Jason: Rozumiem, że firmy muszą zarabiać. Są tego konsekwencje. Więc byłoby wspaniale, gdyby była to jedna z opcji. Aby mieć ten ładny, czysty układ. Ale nie powinien to być jedyny. W CSS mamy wszystkie te możliwości, które pozwalają nam robić naprawdę ciekawe rzeczy z marginesami i układem. To znaczy, nie chodzi tylko o to, że mamy teraz siatkę. Ale fakt, że możemy wykonywać obliczenia w przeglądarce w CSS, pozwala nam robić o wiele ciekawsze rzeczy. Wkładasz w to umiejętność bycia znacznie bardziej wyrazistym pismem, wtedy moglibyśmy zacząć przyglądać się temu, co robią w czasopismach. Vanity Fair nie ma jednego szablonu artykułu. Mają sześć, siedem lub osiem. Jeśli naprawdę przyjrzysz się, jak układają te rzeczy, jest ogromna zmienność, ale gra się w systemie.

Jason: Kiedy więc tworzymy system projektowania dla naszej strony internetowej, zamiast zatrzymywać się na jednym układzie, mamy stosunkowo łatwy sposób na wbudowanie kilku przełączników do naszych systemów zarządzania treścią. Większość z nich obsługuje dość dużą elastyczność. Nie ma powodu, dla którego nie moglibyśmy dać ludziom wyboru. Chcę użyć układu jeden, dwa, trzy, cztery, pięć, sześć. To wprowadzi różne marże, różne przesunięcia. Może wprowadzenie możliwości tworzenia niektórych kolumn. Jest wiele różnych rzeczy, które moglibyśmy zrobić, aby stworzyć o wiele ciekawszą sieć. Myślę, że ten typ może odegrać w tym naprawdę dużą rolę.

Drew: Czy typ jest naszym zbawicielem, jeśli chodzi o dodanie nieco więcej osobowości do sieci?

Jason: Cóż, myślę, że może być. Myślę, że przeszliśmy długą ewolucję w sieci w kierunku lepszej użyteczności. Ale myślę, że jedną z ofiar, kiedy wszyscy się martwimy, jest to utylitarne, czy jest to użyteczne podejście? To ma tendencję do wybijania osobowości. Potem, kiedy każda strona internetowa jest… Ponownie, pojawiły się czcionki internetowe, które stworzyły nowy poziom wyrazistości, którego wcześniej nie mieliśmy. Wtedy nagle mogliśmy… Wyświetlacze stały się lepsze. Więc szeryfy wróciły do ​​​​miksu. Moglibyśmy użyć ich ponownie w sieci. Te rzeczy dodały trochę życia. Następnie w pewnym sensie zoptymalizowaliśmy powrót do wszystkich, używając jednego lub dwóch san-szeryfów. To Open Sans, Roboto, Oswald czy cokolwiek. Wracamy do tego samego, w którym jest mnóstwo naprawdę dobrych, naprawdę czytelnych krojów pisma. Tak naprawdę nie nauczyliśmy tego obecnego pokolenia projektantów UX, którzy często są tymi, którzy prowadzą wiele z tego wszystkiego o typografii. Wszystko o tym, jak bardzo może być wyraziste, jak bardzo może zmienić nastrój i ton.

Jason: Mamy więc ogromną liczbę ludzi, którzy dyktują kierunek projektowania rzeczy w sieci, którzy mają pomysły na czcionkę, które być może nie są tak dobrze poinformowane, jak ktoś, kto studiował projektowanie graficzne i pojęcie czytelności. Musimy połączyć te rzeczy. To nie jedno ani drugie. To jest i. Musi być.

Drew: Zwłaszcza kiedy mówimy o osobowości, tonie i nastroju. Z biznesowego punktu widzenia lub z tego, o czym mówimy, to aspekty marki. Czy sprawiając, że wszystko wygląda tak samo, tracimy możliwość komunikowania marki klientom?

Jason: Absolutnie. Nie zagłębiać się w politykę, ale myślę, że całość… Jeden z głównych problemów, których z pewnością doświadczyliśmy w Stanach Zjednoczonych i jestem pewien, że nie różni się on tak bardzo od tego, co wydarzyło się w Wielkiej Brytanii w ciągu ostatnich kilku lat. Kiedy wszystkie wiadomości są przekazywane za pośrednictwem jednej platformy i wszystko wygląda tak samo, nie ma rozróżnienia głosu. Tak więc około 75% dorosłych w USA twierdzi, że znaczną część swoich wiadomości czerpie z Facebooka. To znaczy, odłóżmy na bok, jak generalnie jest to przerażające. Ale biorąc pod uwagę, że wszystko jest przedstawiane jednolicie, nie ma różnicy między artykułem z The Guardian, New York Times, The Wall Street Journal, The Washington Post i prawicowymi wiadomościami Joe. Wszystko przedstawia się dokładnie tak samo.

Jason: Kiedy widzimy to logo, ten styl pisma, Guardian jest tak charakterystyczny. „Wall Street Journal” jest tak charakterystyczny. Rozpoznajemy natychmiast, gdy to widzimy, nawet tylko nagłówek. Wiemy, skąd to się wzięło. Potem jest to automatyczne skojarzenie z tą marką i tą autentycznością. Kiedy usuniesz to wszystko, pozostaniesz z: „Ok, ocenię to w nagłówku. Potem jest, kto napisał lepszy nagłówek? To nie jest dużo do zrobienia. Myślę więc, że straciliśmy ogromną kwotę. Jeśli spojrzysz na to, co próbuje zrobić Apple News Plus, niektóre firmy starają się to przywrócić. Blundell wykonał naprawdę ciekawą robotę w Europie. Wystartowali w Stanach Zjednoczonych, ale nie jestem pewien, czy kiedykolwiek odniosą taki sukces. That was a platform that would allow you to subscribe and see content from all these different top level newspapers and publications. It would always be in their own design. So that was really kind of an interesting approach there. It was always preserving the brand voice, that authenticity and that authority that would go along with that news. It really helped provide some cues for you as a reader to kind of evaluate what you're reading.

Jason: I think that's important. I think it's not something to be taken lightly.

Drew: Thinking back to RSS readers in days gone past, the same sort of problems we were seeing then where everyone's content was being just distributed via RSS and appearing in a reader in identical format, identical layout. I think you do lose something of the personality and the voice.

Jason: Yeah. To prawda. I don't think that's an entirely solvable problem. I think if you can imagine an RSS reader with a different typeface for every headline, it would be crazy. There's a reason why that that doesn't work that well, but there has to be some middle ground. Type does play a role in that. Then certainly, once you get back to the website, there is that sort of instant recognizability that will help that experience stand apart from seeing it anywhere else.

Drew: So say I'm a designer. I'm working in a small agency. I'm turning out designs for all sorts of different clients. I look at my work. I think, “This is all good. This is readable, but it's got no personality in it.” Where do I start to actually put back some interest, some excitement, and not just lean on this sort of uniform UX driven layout that I've sort of conditioned myself to use?

Jason: Well, I think the thing to do is if you've never studied typography, you haven't necessarily kind of trained your eyes to see what the differences are in one typeface to another. Even when you have studied graphic design, you have to remind yourself of these things all the time. So I think oftentimes that I'll recommend, and actually, I wrote about this a few weeks ago because I kept getting asked like, “Where do you start?” I made a list of books that I think are really helpful. So something like Ellen Lupton's book, Thinking with Type is a fantastic introduction to looking at type and seeing it. Erik Spiekermann's book, Stop Stealing Sheep is a great one although I think at the moment, it's out of print. I think that he might be working on another edition but that's so… If you find that one, that's a good one as well.

Jason: Those will help introduce you to the terminology and understanding what the differences are between the different styles of text. Then once you have that basic introduction, it gives you a better frame of reference when you look at other websites. Getting a sense of like, why does this one feel warmer than that one? What are the combinations of type? What are the characteristics? As a web developer often does or web designer often does, you inspect an element, see what the typeface is that's being used there, and that can start to help build a palette of ones that you become familiar with. Very often, designers do hone in on a few that they get to know well and they tend to use them on a lot of different projects. That's not necessarily a bad thing. It's certainly better now if you're working with a variable font and you can be that much more varied.

Jason: So you can decide that on this website, this is what I want to call normal. This is the width that I want to use and the other aspects of it. So even using the same typeface across websites because you have access to the full range of characteristics, it could still look quite different.

Drew: So I think there's a lot of reading to be done. I'm sure we'll add some links to the show notes of all the excellent articles you've written up and some references to these books and what have you. Because I think there's so much to learn. I think we've always got to be learning with these things. The learning never ends.

Jason: It's true. It is true. That is something that I've enjoyed immensely when I started writing this newsletter. Every week when I'm writing it, I'm reading more of the specs. I'm reading more of what other people have discovered and written. There's tremendously knowledgeable folks out there. Rich Rutter, for instance, from Clearleft, wrote a fantastic book called Web Typography. He was one of the founders of Font Deck, which was one of the very first services to launch. He's always been kind of the most scholarly of authors about this stuff. I mean, he's really tremendously thoughtful in the way he puts those things together. But there's a bunch of people doing really interesting stuff. That has kind of forced me to kind of keep up with what other people are doing all the time, which is really fantastic.

Drew: Is there anything in particular that you've been learning lately?

Jason: The stuff that I've been learning the most is actually the corners of the specs. I think it's something that… I mean, again, probably the biggest influence for me on that is probably Rachel [Andrew]. That she's always talking about like, “Well, if you actually read what's written here, there's actually really good stuff to know.” So in reading exactly what the specs are, there's a tremendous amount of great typographic control that is available to us. Then layering into that different things like mix blend modes and CSS and learning more about different size units and how they interact together and learning how to use and where you can use CSS custom properties. I keep reading little bits more and more and then kind of compare that to what the browsers are doing. It really has been a tremendous experience for me in what I've been learning every week. Even having been doing this stuff for 25 years, there's still like a new gem every time I dig into one of these things.

Drew: That's fantastic. Dziękuję Ci. So if you dear listener would like to hear more from Jason or perhaps hire him to work with you on your web typographic challenges, you can follow him on Twitter where he's @jpamental, or find his website at rwt.io where you can also find the web typography newsletter to sign up to. So thanks for talking to us today, Jason. Do you have any parting words?

Jason: Yeah, experiment. I mean, there's lots of open source stuff to play with. I think once people get this in their hands and get familiar with it, that I think they'll start to see more and more how much fun they can have with this stuff and how much more expressive they can be. I think I was talking to the design director at The Wall Street Journal actually on Friday. I was then talking to their design team. We were talking about it's great that you have a design system that standardizes things, but it's then like any good design where you break that rule. That's where the exciting things really happen. So we've gotten this necessary evolution of like getting really good at the system. Now we've got to break it some. That's when we can get excited again. Break the rules. That's my best advice, I think.