В канале веб-стандратов увидел хорошую статью Ричарда Раттера про автоматические переносы строк в CSS "All you need to know about hyphenation in CSS" (перевод на хабре).
Автоматические переносы строк особенно критичны в тех языках, где словосочетания объединяются в длинные слова, как в немецком языке - Verbesserungsvorschlag. Чтобы включить переносы, достаточно добавить язык в тег html -
#css #typography
http://clagnut.com/blog/2395
Автоматические переносы строк особенно критичны в тех языках, где словосочетания объединяются в длинные слова, как в немецком языке - Verbesserungsvorschlag. Чтобы включить переносы, достаточно добавить язык в тег html -
<html lang="ru"> и CSS-правило hyphens: auto; (в Safari и IE/Edge с префиксом -webkit и -ms). Работают переносы во всех современных браузерах. Ещё в некоторых браузерах доступны разные настройки переносов строк, которые можно увидеть в Word и inDesign. Самое полезное правило (по моему скромному мнению) - ограничение максимального количества идущих подряд переносов hyphenate-limit-lines, но оно пока доступно только в Safari и IE/Edge (с префиксами).#css #typography
http://clagnut.com/blog/2395
Clagnut
All you need to know about hyphenation in CSS
Automatic hyphenation on the web has been possible since 2011 and is now broadly supported. There is however far more control available to designers than just turning on hyphens. Updated January 2023.
Зак Лезерман рассказал, как он ускорял загрузку web-шрифтов на CSS Tricks в статье "Developing a Robust Font Loading Strategy for CSS-Tricks".
Для того чтобы избежать FOIT (Flash of Invisible Text) и FOUT (Flash of Unstyled Text), Зак разбил исходные файлы шрифтов (regular и bold) на две части. Первая часть содержала информацию о кёрнинге (для предотвращения reflow документа) и минимальный набор глифов, которые необходимы для отображения латиницы и самых популярных символов, которые могут встречаться в заголовках статей на CSS Tricks. Вторая часть содержала всё остальное: лигатуры, хинтинг, кириллицу и т.п. Первый два файла загружаются с помощью
Так как файлы первого этапа весят всего по 13kb, они успевают загружаться до рендеринга документа. Более полная версия шрифта подгружается позже, но это не портит пользовательский опыт.
Рекомендую почитать статью, если вы используете кастомные шрифты на сайте и хотите ускорить их загрузку и отрисовку.
#typography #web
https://www.zachleat.com/web/css-tricks-web-fonts/
Для того чтобы избежать FOIT (Flash of Invisible Text) и FOUT (Flash of Unstyled Text), Зак разбил исходные файлы шрифтов (regular и bold) на две части. Первая часть содержала информацию о кёрнинге (для предотвращения reflow документа) и минимальный набор глифов, которые необходимы для отображения латиницы и самых популярных символов, которые могут встречаться в заголовках статей на CSS Tricks. Вторая часть содержала всё остальное: лигатуры, хинтинг, кириллицу и т.п. Первый два файла загружаются с помощью
preload, вторая часть — с помощью CSS Font Loading API.Так как файлы первого этапа весят всего по 13kb, они успевают загружаться до рендеринга документа. Более полная версия шрифта подгружается позже, но это не портит пользовательский опыт.
Рекомендую почитать статью, если вы используете кастомные шрифты на сайте и хотите ускорить их загрузку и отрисовку.
#typography #web
https://www.zachleat.com/web/css-tricks-web-fonts/
Zach Leatherman
Developing a Robust Font Loading Strategy for CSS-Tricks—zachleat.com
A post by Zach Leatherman (zachleat)
В сервисе Google Fonts появилась поддержка вариативных шрифтов. На данный момент она доступна как бета-версия (возможно изменение api в будущем) по адресу
Если на сайте используется семейство шрифтов с разной насыщенностью и разной шириной глифа (например, condensed), то каждая вариация будет представлена отдельным файлом шрифта. Из-за этого общий объём загружаемых шрифтов на сайтах с богатой типографикой может легко превысить несколько сотен килобайт. Вариативные шрифты решают эту проблему, представляя каждый глиф как контур и предоставляя возможность управления этим контуром. Каждая вариация отрисовывается браузером динамически. Благодаря этому один файл шрифта может использоваться для разных видов типографики.
На данный момент поддержка вариативных шрифтов есть во всех актуальных браузерах. Если интересно узнать больше про особенности их работы, то рекомендую почитать статью "Introduction to variable fonts on the web".
#typography #web
https://codepen.io/nlwilliams/full/JjPJewp
https://fonts.googleapis.com/css2.Если на сайте используется семейство шрифтов с разной насыщенностью и разной шириной глифа (например, condensed), то каждая вариация будет представлена отдельным файлом шрифта. Из-за этого общий объём загружаемых шрифтов на сайтах с богатой типографикой может легко превысить несколько сотен килобайт. Вариативные шрифты решают эту проблему, представляя каждый глиф как контур и предоставляя возможность управления этим контуром. Каждая вариация отрисовывается браузером динамически. Благодаря этому один файл шрифта может использоваться для разных видов типографики.
На данный момент поддержка вариативных шрифтов есть во всех актуальных браузерах. Если интересно узнать больше про особенности их работы, то рекомендую почитать статью "Introduction to variable fonts on the web".
#typography #web
https://codepen.io/nlwilliams/full/JjPJewp
web.dev
Introduction to variable fonts on the web | Articles | web.dev
How variable fonts work, how typographers implement variable fonts, and how to work with variable fonts in CSS.
Менди Майкл написала статью про влияние вариативных шрифтов на производительность страницы — "The performance benefits of Variable Fonts".
Менди сравнила вариативные и обычные шрифты по трём показателям: количество запросов, размер загружаемых шрифтов и время до первого рендеринга. По количеству запросов у вариативных шрифтов нет недостатков — в одном файле шрифта находятся все вариации. Размер вариативных шрифтов в зависимости от ситуации может быть больше или меньше размера стандартных шрифтов, но использование формата woff2 и ограниченного набора глифов может очень сильно уменьшить размер файла. По времени до первого рендеринга стандартные шрифты могут быть лучше, так как начертания находятся в отдельных файлах, но это тоже всё зависит от ситуации. Например, если для вариативных шрифтов используется
Рекомендую почитать статью, если используете на своём сайте уникальные шрифты.
#typography #web #performance
https://uxdesign.cc/the-performance-benefits-of-variable-fonts-79af8c4ff56c
Менди сравнила вариативные и обычные шрифты по трём показателям: количество запросов, размер загружаемых шрифтов и время до первого рендеринга. По количеству запросов у вариативных шрифтов нет недостатков — в одном файле шрифта находятся все вариации. Размер вариативных шрифтов в зависимости от ситуации может быть больше или меньше размера стандартных шрифтов, но использование формата woff2 и ограниченного набора глифов может очень сильно уменьшить размер файла. По времени до первого рендеринга стандартные шрифты могут быть лучше, так как начертания находятся в отдельных файлах, но это тоже всё зависит от ситуации. Например, если для вариативных шрифтов используется
font-display: swap, то задержка рендеринга не будет большой проблемой — текст будет виден.Рекомендую почитать статью, если используете на своём сайте уникальные шрифты.
#typography #web #performance
https://uxdesign.cc/the-performance-benefits-of-variable-fonts-79af8c4ff56c
Medium
The performance benefits of Variable Fonts
When we think about web fonts and their impact on the performance on our websites we often focus on three main areas:
Иан Бин дал несколько рекомендаций по использованию шрифтов — "System fonts don’t have to be ugly".
Во всех операционных системах есть предустановленный набор очень качественных шрифтов. Они могут составить хорошую конкуренцию модным web-шрифтам. Иан предлагает по умолчанию использовать системные шрифты (Georgia, Charter, Palantino, Hoefler, San Francisco, Helvetica, Segoe UI, Arial и т.п.) для оформления текстов на сайте, а web-шрифты оставить только для редких случаев, когда системный шрифт не подходит. Благодаря такому подходу отпадает проблема оптимизации web-шрифтов, и в целом сайт будет загружаться быстрее.
Основная мысль статьи — сайт не обязательно должен выглядеть одинаково во всех браузерах на всех девайсах.
#typography #performance
https://iainbean.com/posts/2021/system-fonts-dont-have-to-be-ugly/
Во всех операционных системах есть предустановленный набор очень качественных шрифтов. Они могут составить хорошую конкуренцию модным web-шрифтам. Иан предлагает по умолчанию использовать системные шрифты (Georgia, Charter, Palantino, Hoefler, San Francisco, Helvetica, Segoe UI, Arial и т.п.) для оформления текстов на сайте, а web-шрифты оставить только для редких случаев, когда системный шрифт не подходит. Благодаря такому подходу отпадает проблема оптимизации web-шрифтов, и в целом сайт будет загружаться быстрее.
Основная мысль статьи — сайт не обязательно должен выглядеть одинаково во всех браузерах на всех девайсах.
#typography #performance
https://iainbean.com/posts/2021/system-fonts-dont-have-to-be-ugly/
Iain Bean
System fonts don’t have to be ugly /// Iain Bean
Make your site faster and more environmentally-friendly by taking a system-fonts-first approach
Никита Прокопов написал статью про проблему размера шрифтов, заданных с помощью пунктов, — "Font size is useless; let’s fix it".
Во многих редакторах размер шрифта по умолчанию задаётся в пунктах. Пункт — это метрика из традиционной типографики, составляющая 1/72 дюйма. Проблема в том, что на разных мониторах, один и тот же шрифт, заданный с помощью этой величины, выглядит по-разному. Поэтому для настройки текста в редакторах Никита предлагает использовать метрику, определяющую высоту заглавной буквы.
В вебе пункт подходит только для форматирования текста для печати, в остальных случаях его не рекомендуют использовать.
Хорошая статья. Рекомендую почитать всем, кому интересна тема типографики.
#typography
https://tonsky.me/blog/font-size/
https://habr.com/ru/company/vdsina/blog/550046/ (на русском языке)
Во многих редакторах размер шрифта по умолчанию задаётся в пунктах. Пункт — это метрика из традиционной типографики, составляющая 1/72 дюйма. Проблема в том, что на разных мониторах, один и тот же шрифт, заданный с помощью этой величины, выглядит по-разному. Поэтому для настройки текста в редакторах Никита предлагает использовать метрику, определяющую высоту заглавной буквы.
В вебе пункт подходит только для форматирования текста для печати, в остальных случаях его не рекомендуют использовать.
Хорошая статья. Рекомендую почитать всем, кому интересна тема типографики.
#typography
https://tonsky.me/blog/font-size/
https://habr.com/ru/company/vdsina/blog/550046/ (на русском языке)
tonsky.me
Font size is useless; let’s fix it
What happens when you set fontSize: 32 in your favorite editor