Используйте библиотеки Javascript для типографики в Интернете

Используйте библиотеки Javascript для типографики в Интернете

Интервью с дизайнером / разработчиком Майклом Маккивером

Майкл, многообещающий дизайнер и разработчик из Белфаста, рассказывает о своем последнем проекте «Попытка работать». Попутно он делится некоторыми из своих любимых советов и JS-библиотеками для набора текста в Интернете.

Заведите новых друзей, которые любят печатать так же сильно, как и вы.

Ежемесячные встречи по всему миру, на которых вы обсуждаете проекты, посвященные формам букв.
Лос-Анджелес
Нью-Йорк
Лондон
Сан-Франциско
Чикаго
Сиэтл
Филадельфия

Ульрик Хогребе: Привет, Майкл - мы здесь, в TypeThursday, наткнулись на ваш проект Попытка работать, и нам очень понравились мысли, которые вы вкладываете в выбор гарнитуры и настройку шрифта в Интернете. Мы разберемся с этим через секунду, но, может быть, вы хотели бы начать с разговора немного о себе?

Майкл Маккивер: Во-первых, спасибо, что пригласили меня. Ваше приглашение повергло меня в некоторый шок, так как я могу с уверенностью сказать, что это первое собеседование, которое у меня когда-либо проводилось не по приему на работу. Надеюсь, это пойдет лучше, чем они!

Я 25-летний дизайнер и разработчик интерфейса из Белфаста, Северная Ирландия. Я начал заниматься фрилансом еще во время учебы в университете, когда изучал интерактивный дизайн, а после окончания учебы стал заниматься этим постоянно. На самом деле я никогда не собирался внезапно начать работать на себя, но один небольшой внештатный проект приводит к другому, что приводит к другому, и внезапно прошло два года, а я все еще работаю. Я думаю, продолжаю делать это, пока не смогу, потому что в конечном итоге свобода, которую это дает, перевешивает недостатки.

Я бы, вероятно, считал себя больше дизайнером, чем разработчиком, хотя с каждым годом этот разрыв, кажется, становится все меньше.

Ульрик: Расскажите немного о своем подходе. Вы занимаетесь дизайном и разработкой - что вас привлекло в первую очередь? С чего ты начал?

Майкл: Я не был из тех, кто знал, что хочу стать дизайнером с юных лет. На самом деле, я хотел быть архитектором, в основном потому, что мне нравилось рисовать (я вообще плохо рисовал). Только когда я изучил A-Levels, я понял, что хочу стать дизайнером. Тогда я спроектировал и построил свой первый веб-сайт для модуля класса (да, я использовал Comic Sans). Я спросил учителя, будем ли мы использовать CSS. Я проводил свое исследование и только что узнал, для чего используется CSS, и хотел похвастаться. Она не знала, что такое CSS. Я помню, как мне очень понравился этот модуль, и я подумал: «Я хочу заниматься этим все время». О том, чтобы заплатить за это, в тот момент даже не думали второстепенно. Я просто хотел продолжать это делать. Когда я закончил A-level, я пошел в университет изучать интерактивный дизайн, а остальное уже история.

Хотя дизайн немного другой. Да, инструменты и то, как мы проектируем, меняются, но в конечном итоге это всегда было и всегда будет связано с решением проблем.

Я бы, вероятно, считал себя больше дизайнером, чем разработчиком, хотя с каждым годом этот разрыв, кажется, становится все меньше. Большая часть моей работы в настоящее время связана с фронтенд-разработкой, поэтому вам нужно адаптироваться к тому, что вам дают. Пейзаж развития в наши дни просто сумасшедший. Нам нужно так многому научиться и такая сложность во всем, что мы делаем. Думаю, именно поэтому я всегда не решался называть себя разработчиком - потому что, когда вы каждый день общаетесь с такими умными и талантливыми разработчиками, вы не можете не чувствовать себя немного самозванцем. Хотя дизайн немного другой. Да, инструменты и то, как мы проектируем, меняются, но в конечном итоге это всегда было и всегда будет связано с решением проблем.

Пытаюсь работать

Ульрик: Прекрасно! Может быть, это хороший переход к тому, чтобы немного поговорить о своей работе. Мы нашли вас через Пытаюсь работать. Вы хотите рассказать нам, как появился этот проект?

Майкл: Конечно. «Попытка работать» была побочным проектом, порожденным разочарованием от попыток работать удаленно в центре Белфаста. Часто я садился в кафе, чтобы поработать, и обнаруживал, что скорость Wi-Fi не уступает временам коммутируемого доступа. Я действительно считаю, что это был Starbucks, в котором я сидел, и мне в голову пришла его идея. Я проверил скорость с помощью fast.com, и он показал, что скорость загрузки была довольно мизерной - ~ 0,3 Мбит / с.

Веб-шрифты могут стать большим убийцей, когда дело касается веб-производительности. Благодаря огромному количеству библиотек и сервисов, к которым у нас есть доступ сегодня для отличной типографики в Интернете, мы немного похожи на детей в кондитерской.

Меня это расстраивало, потому что в целом мы все думали, что Starbucks - хорошее место для работы / встречи с клиентами и пить дерьмовый кофе, верно? Быстрый и стабильный Wi-Fi настолько важен для современной работы, что я подумал, что люди могут захотеть узнать об этом перед посещением.

После этого я в значительной степени спроектировал и построил его за два дня. Я отложил запуск его на пару недель, пока гулял по центру города, пробуя скорости Wi-Fi в различных кафе, барах, кафе и везде, где кто-то может захотеть поработать. Это был хороший повод попробовать какие-нибудь новые места, если не что иное.

Как только я запустил его, он получил феноменальный прием. Людям это очень понравилось, что меня полностью удивило. Вы никогда не знаете, как что-то будет воспринято, пока не выложите это на всеобщее обозрение. На прошлой неделе я запустил программу Пытаюсь работать в Дублине, и реакция была столь же положительной. Следующим на радаре будет Лондон.

Каждый добавляемый вес и начертание шрифта - это дополнительные накладные расходы, поэтому будьте строгими и устанавливайте ограничения. Это заставляет вас лучше использовать набор, иерархию и масштаб, если ничего больше.

Ульрик: Интересно, что вы упомянули плохую скорость Интернета. Из ваших писем я понял, что вы в значительной степени сосредоточены на производительности в Интернете в целом - вплоть до решений, которые вы принимаете в отношении шрифта. Не могли бы вы рассказать нам немного подробнее о своем подходе?

Производительность Интернета и типографики

Майкл: Да, думаю, работа в кафе с ужасным Wi-Fi заставила меня больше ценить скорость в Интернете. Производительность - одна из тех вещей, которые могут остаться незамеченными среднестатистическим клиентом, но являются неотъемлемой частью пользовательского опыта в целом. Веб-шрифты могут стать большим убийцей, когда дело касается веб-производительности. Благодаря огромному количеству библиотек и сервисов, к которым у нас есть доступ сегодня для отличной типографики в Интернете, мы немного похожи на детей в кондитерской.

Думаю, самый важный совет, который я могу дать, - это проявлять сдержанность. Каждый добавляемый вес и начертание шрифта - это дополнительные накладные расходы, поэтому будьте строгими и устанавливайте ограничения. Это заставляет вас лучше использовать набор, иерархию и масштаб, если ничего больше.

Я мог бы говорить о производительности весь день, но я бы дал еще один совет: не заставляйте пользователя ждать загрузки веб-шрифта - это называется FOIT (вспышка невидимого текста). FOIT скрывает текст на странице до тех пор, пока веб-шрифт не загрузится, и это плохо для пользователя. Вместо этого вам нужен FOUT (вспышка нестилизованного текста) - это означает, что текст отображается системным шрифтом перед заменой веб-шрифтом после его загрузки. Это делает немного более резким, но, что более важно, более быструю загрузку страницы. Вы можете добиться этого, «заменив» веб-шрифты, когда они будут готовы к работе в браузере. Таким образом вы не замедляете рендеринг страницы.

Это очень легко сделать с помощью небольшой JS-библиотеки под названием fontfaceobserver. (Предупреждение: если вы используете TypeKit - хорошие новости! Он использует этот подход по умолчанию.)

Было бы разумно сочетать эту практику с какой-нибудь техникой кэширования, чтобы шрифт не подкачивалась при каждой загрузке страницы, а только при первой загрузке. Опять же, этого легко добиться, и это можно сделать с помощью браузера, называемого SessionStorage. Вы можете прочитать о том, как использовать эти две техники вместе здесь, и если вы хотите узнать больше о стратегиях загрузки шрифтов в целом, это руководство здесь от Zach Leat было для меня бесценным.

Ульрик: Я думаю, это действительно находит отклик в вашей работе. Мы здесь, в TypeThursday, обсуждали, как это воплощено даже в вашем собственном портфолио: вы используете системные шрифты для текста абзаца, но затем вы выбрали Lyon Display, который хорошо сочетается с различными системными шрифтами, такими как San Fransisco (Mac) и Roboto (Android). Таким образом, независимо от платформы вы хорошо выглядите. Мы подумали, что это действительно хорошее дизайнерское решение.

Мне также очень нравится, как вы много думаете о различных веб-технологиях, которые используете. Что вас волнует в эти дни и в каком направлении вы видите будущее?

Кроме того, независимо от того, какой фреймворк javascript является изюминкой месяца, очень интересно посмотреть, как далеко продвинулся javascript за такое короткое время и как далеко он зайдет. Я предсказываю, что этот «век javascript» еще далек от завершения.

Эпоха JavaScript

Майкл: Что ж, хотя мы все еще говорим о производительности, я очень взволнован тем, что некоторые из техник производительности, о которых я говорил, были встроены в браузер. Например, довольно скоро нам не понадобятся библиотеки JS для обмена веб-шрифтами, мы сможем использовать свойство CSS `font-display: swap;`, которое будет имитировать то, о чем я говорил выше - JavaScript не нужен . Он уже поддерживается браузерами на основе мигания, поэтому вы можете начать использовать его прямо сейчас.

Кроме того, независимо от того, какой фреймворк javascript является изюминкой месяца, очень интересно посмотреть, как далеко продвинулся javascript за такое короткое время и как далеко он зайдет. Я предсказываю, что этот «век javascript» еще далек от завершения. Фреймворки будут приходить и уходить, но сам язык будет продолжать развиваться. На самом деле я понятия не имею, в каком направлении движется эта отрасль в будущем, и думаю, именно поэтому она мне так нравится.

Ульрик: Круто - а что насчет себя? Над чем вы сейчас работаете? Над чем вы хотите работать в будущем?

Следующие шаги

Майкл: Я хочу продолжать расширять "Попытки работать" просто потому, что я думаю, что люди действительно сочтут это полезным, а это очень отрадное чувство. В данный момент я поддерживаю его вручную, и я хотел бы со временем отойти от этого и создать что-то, что полностью доступно для редактирования пользователем.

Помимо этого, я собираюсь продолжить работу над собственными побочными проектами. У меня есть идеи, но идеи - ничто без исполнения. В конце концов, я хотел бы однажды создать свой собственный самодостаточный продукт, чтобы я мог продолжать работать на себя, но никто не попадет к нему случайно. Это требует много усилий, времени и неудач.

Ульрик: Спасибо, Майкл, приятно поговорить с вами, и мы с нетерпением ждем ваших работ в будущем.

Хотите увидеть больше работ Майкла? Посетите сайт его портфолио здесь.

Любите эти интервью? Подпишитесь на рассылку TypeThursday, чтобы первыми узнавать о нашем следующем интервью.

Была ли вам интересна эта статья? Нажмите кнопку "Рекомендовать" ниже