[Перевод] CSS-селектор :has() и междустрочные интервалы в длинных текстах

Если вы работали с сайтами, содержащими много длинных текстов, особенно с сайтами на CMS, где пользователи работают в WYSIWYG-редакторе, то вы наверняка писали CSS для управления междустрочными интервалами между различными элементами типографики — заголовками, параграфами, списками и т. д. Читать дальше →

Подробнее

Десять лет — полет нормальный

Всем привет! Именно так начался пост десятилетней давности о появившемся сайте со шрифтами. Да, вот так незаметно пролетели 10 лет, и по меркам интернета это, пожалуй, возраст человека, который уже закончил учиться и вышел в свободное плавание. Так и наш проект, пройдя все переделки, стабилизировался в своем функционале и движется по заданному курсу. Но за все это время одно осталось неизменным — бесплатные шрифты и свободный доступ к ним. Итак, с чем пришли мы к сегодняшнему дню.

Подробнее

[Перевод] Как сделать веб-шрифты красочными

Сегодня рассказываем о палитрах CSS в работе с многоцветными шрифтами COLRv1, которые поддерживаются в последних Chrome и Edge, и, конечно, показываем их возможности к старту курса по Frontend-разработке. Читать далее

Подробнее

[Перевод] Font size бесполезен, давайте это исправим

Что происходит, когда вы указываете в редакторе "font_size": 32? Я бы вам всё равно рассказал, но хорошо, что спросили. Попробуем догадаться. Я пользуюсь Sublime Text 4 под macOS: Если мы измерим сами буквы, то нигде не найдём числа 32: 32 — это не ширина и не высота буквы, и не высота заглавной буквы, и не рост строчных знаков, и не высота верхних или нижних выносных элементов. Что за дела? Читать дальше →

Подробнее

[Перевод] Система font fallback: что происходит, когда шрифт не может найти нужный символ

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

Подробнее

[Перевод] Веб-типографика: создаем таблицы для чтения, а не для красоты

Наталия Шергина, фрилансер-редактор и студентка Нетологии, специально для блога перевела лонгрид Richard Rutter о типографике веб-таблиц. Хорошие дизайнеры не жалеют времени на типографику. Они тщательно подбирают шрифты, перебирают множество типографических шкал и скрупулезно применяют пробелы (white space) ради удобства пользователя. Затем появляется соблазн покреативить — и вот все мысли уже не о пользователе. Однако таблицы нужны в первую очередь, чтобы их читали и использовали, а не…

Подробнее

[Перевод] Адаптивная типографика с помощью математики

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

Подробнее

Таблицы в адаптивном дизайне — 2

В продолжение поста о дизайне таблиц, предлагаю примеры практических решений, которые помогут пользователю лучше взаимодействовать с данными в табличном виде на любых устройствах. Почти пять лет назад я написал пост "Таблицы с данными в адаптивном дизайне", с тех пор много воды утекло, появились новые способы отображения таблиц в адаптивном дизайне. Responsive Tables Начну с моего фаворита — Responsive Tables. Это изящное решение на jQuery и Bootstrap 3, позволяющее скрывать…

Подробнее

Простой способ оформления подчеркивания у однострочных ссылок

В недавнем дайджесте со свежими материалами из мира фронтенда увидел подборку способов подчеркивания в CSS. Странно, что в такой хорошей подборке не указан простой способ с использованием псевдокласса :after. Показать HTML, CSS

Подробнее