Главная » Архив меток: Шрифты

Архив меток: Шрифты

Google Fonts и font-display: особенности взаимодействия

От автора: дескриптор font-display блоков @font-face действительно хорош. Само по себе это имеет большое значение для улучшения воспринимаемой производительности загрузки веб-шрифтов. Загрузка веб-шрифтов — сложная задача, и наличие инструмента, который работает так хорошо, как он, имеет большое значение для Интернета. Это настолько большое дело, что Pagespeed Insights / Lighthouse от Google предупредят вас, если вы не используете его. Горькая ирония ...

Читать далее »

55+ страшных и ужасных хоррор шрифтов для хэллоуина

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

Читать далее »

Чек-лист по загрузке шрифтов

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

Читать далее »

45+ шрифтов «печатная машинка» для Word / Фотошопа + машинописные русские шрифты

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

Читать далее »

Подробный разбор общих семейств шрифтов в CSS

От автора: сегодня мы поговорим про общее семейство шрифтов CSS. Если у вас есть некий опыт написания CSS, вы наверняка делали что-то похожее и, вероятно, несколько раз в одном файле стилей.   body { font-family: Arial, Helvetica, sans-serif; } Единственное объявление в приведенном выше правиле — это то, что обычно называют стеком шрифтов. Эта строка определяет шрифт, который браузер должен ...

Читать далее »

UX и веб-шрифты или сумасшедший мир загрузки пользовательских шрифтов в вебе

От автора: пользовательский шрифт не является чем-то новым в Интернете, но его использование все же может стать одним из факторов замедления сайта и увеличения стоимости для конечного пользователя. Если вы не очень внимательный, все очень быстро повалится из рук, как в запросе, который я сделал в HTTP Archive. Учитывая это, мы в MDN Web Docs экспериментируем с уменьшением влияния пользовательских ...

Читать далее »

3 техники оптимизации для улучшения производительности пользовательских шрифтов

От автора: оптимизация шрифтов получила новые возможности! Теперь использовать пользовательские шрифты стало легче и быстрее. Давайте разберем, что можно сделать при использовании пользовательских шрифтов, чтобы максимально повысить производительность. Предстоящая версия Microsoft Edge реализует unicode-range (последний современный браузер, который сделает это). Предварительная загрузка и font-display появятся в Safari и Firefox Переменные шрифты доступны во всех браузерах Уменьшите размер файла Помимо цифр, ...

Читать далее »

Понятие форматов шрифтов, и как выжать из них максимум для веб

От автора: Thierry Blancpain – бренд-дизайнер, работает в Informal Inquiry в Нью-Йорке, является сооснователем Grilli Type, семейсива шрифта Swiss. Статья применима ко всем веб-шрифтам, однако в качестве примеров концепций используются шрифты Grilli Type, в частности те, которые демонстрируют функции OpenType. Использовать свои шрифты вместо системных становится все проще, но тема все еще развивается. Мы разберем разные форматы шрифтов для веб, ...

Читать далее »

Как использовать вариативные шрифты в реальном мире

Перевод статьи How to use variable fonts in the real world с сайта clearleft.com для CSS-live.ru, с разрешения автора — Ричарда Раттера Использовать вариативные шрифты в реальном мире не так-то легко, как оказалось. Эта статья поясняет, как мы справились с этим на новом сайте Ampersand и что мы узнали за это время. Вариативный шрифт — один файл шрифта, который умеет ...

Читать далее »

Улучшение типографики через вариации шрифтов

От автора: типографика в вебе всегда отставала от своего печатного собрата. И это можно понять, ведь у печатного шрифта были столетия, чтобы развиться до такой сложности, которую трудно уместить в рамках браузера. Тем не менее, благодаря растущей доступности возможностей OpenType в веб-шрифтах и способности контролировать эти функции через CSS, положение быстро меняется. Сегодня мы поговорим о том, как использует типографика ...

Читать далее »