Русский
Русский
English
Статистика
Реклама

Fonts

Что такое font-face на самом деле

28.01.2021 14:21:54 | Автор: admin
@font-face@font-face

После увиденного мной в коде коллег неадекватного применения font-face:

font-weight: normal;font-family: BrutalType-Bold, sans-serif;

я понял, что что-то не так в датском королевстве. Скорее всего в одной статье всего не объять, но давайте просто начнём.

Допустим, собрались вы в 2021 году подключить шрифт. Начитавшись про то, как же всё плохо (на самом деле, нет) с сервисом Google Fonts, решили подключать локально. Приобрели (естественно) пакет шрифтов, распаковали и увидели следующее:

@font-mess@font-mess

Зрелище не для слабонервных, понятное дело. Сразу же возникает вопрос, как с этим быть (конвертацию и лицензирование оставим на потом). А ответ на него @font-face.

При работе со шрифтами в CSS выделяют несколько понятий: семейство (font-family), насыщенность (начертание, font-weight), стиль (font-style), плотность (растяжение, font-stretch), вариант (font-variant) и кегль (размер, font-size).

Важно понимать: @font-face это не подключение файла шрифта буквально, а описание конкретного набора всех вышеупомянутых свойств для загруженного файла, до которого можно достучаться через обращение к ним же в правилах CSS нужных элементов.

Итак, давайте начнём с указания стиля, здесь вариантов три: normal, italic и oblique. Между italic и oblique разницу не все понимают и далеко не всегда их вообще разделяют. Если коротко, italic это не только наклон, но и изменение внешнего вида шрифта, вплоть до лигатур (объединения символов), а oblique те же символы, но под наклоном. И то и то в русском языке чаще всего называют курсивом.

Выходит, в реальной жизни нам остаются два: normal и italic. Если вы видите в названии шрифта слово Italic или аббревиатуру It это "курсив", italic (MyriadPro-BoldSemiCnIt.otf, MyriadPro-It.otf). Oblique же задаётся аббревиатурой Ob (Obl), но вряд ли вы это где-то увидите.

Дальше идёт начертание. В CSS принято использовать числовые значения от 100 до 900 по степени увеличения насыщенности или же текстовые: normal (400), bold (700). Существуют ещё bolder и lighter, но они работают от наследуемого свойства и использовать их в @font-face не стоит!

В названиях шрифтов это обычно выражается так: Light (100, MyriadPro-Light.otf), Book (300), Regular (400, MyriadPro-Regular.otf), Medium (500), Semibold (600), Bold (700, MyriadPro-Bold.otf), Black (Solid, 900, MyriadPro-BlackCond.otf). Зачастую Black является отдельным семейством, но тут кому как. Естественно, истинные названия и соответствия остаются на усмотрение разработчика шрифта.

Следующее font-stretch, плотность шрифта. Его широкость-узкость, если хотите. И здесь-то настоящее раздолье: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded (от наиболее узкого к наиболее широкому).

Как вы уже могли догадаться, действует то же правило аббревиатур: Cond, Cn condensed (узкий, MyriadPro-Cond.otf, MyriadPro-LightCond.otf),SemiCond, SemiCn semi-condensed (полусжатый, MyriadPro-SemiCn.otf), SemiExt semi-extended (полуширокий,MyriadPro-SemiExtIt.otf) и так далее.

Остаётся font-variant, но у него всего два варианта: normal и small-caps (когда строчные буквы выглядят как уменьшенные прописные). Здесь с аббревиатурой не угадаешь, предлагайте ваши варианты в комментариях.

Давайте разберём пример подключения. Определим базовый шрифт для двух видов контейнеров (woff2 и opentype/otf):

@font-face { font-family: MyriadPro; src: url(MyriadPro-Regular.woff2) format(woff2),      url(MyriadPro-Regular.otf) format(opentype); font-weight: 400; font-style: normal; font-stretch: normal; font-variant: normal;}

И какие-нибудь наиболее вычурные варианты:

@font-face { font-family: MyriadPro; src: url(MyriadPro-BlackSemiExtIt.woff2) format(woff2),      url(MyriadPro-BlackSemiExtIt.otf) format(opentype); font-weight: 900; font-style: italic; font-stretch: semi-extended; font-variant: normal;}@font-face { font-family: MyriadPro; src: url(MyriadPro-BlackSemiCn.woff2) format(woff2),      url(MyriadPro-BlackSemiCn.otf) format(opentype); font-weight: 900; font-style: normal; font-stretch: semi-condensed; font-variant: normal;}

Как видим, ничего сложного. Семейство всегда одно! Это можно применять как угодно, хоть объединить несколько разных шрифтов в группу "MyBestSiteDuckingFontEver".

И применяем:

.ex-heart { font-family: MyriadPro, sans-serif; font-weight: 900; font-stretch: semi-extended; font-style: italic;}.ex-soul { font-family: MyriadPro, sans-serif; font-weight: 900; font-stretch: semi-condensed; font-style: normal;}

К первому классу применится файл MyriadPro-BlackSemiExtIt.woff2 (или otf, в зависимости от поддержки), а ко второму MyriadPro-BlackSemiCn.woff2. Если не будет ни того, ни другого, то сбросится до MyriadPro-Regular.woff2. Здесь нужно быть внимательным: браузеры любят издеваться над шрифтами и пытаться сделать их жирнее или наклоннее, чем они есть. Особенно славится этим Chrome.

Если и Regular-файл не будет найден, то используется системный sans-serif шрифт, о порядке выбора локальных шрифтов стоит написать отдельный материал.

Надеюсь, мне удалось объяснить азы работы с коллекциями шрифтов и вы не будете больше писать код так, как мои коллеги. Осталось объяснить это им.

Подробнее..
Категории: Html , Css , Fonts , Font-face

Из песочницы Прочитай меня, или почему текст не читается до конца

18.06.2020 14:14:33 | Автор: admin

Привет, Хабр! Представляю вашему вниманию перевод статьи "READ ME!".


image


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


image
Нью-йоркское метро, 2019. Фото: Сьюзен Джейн Голдинг, CC 2.0


Исследования показывают, что на Medium, популярной платформе для длинных постов в блогах, средняя скорость чтения составляет около 40% это означает, что только двое из пяти читателей, начинающих читать статью, на самом деле останавливаются, чтобы закончить ее (хотя некоторые утверждают, что есть еще значительные различия). Изученные данные проекта Readymag Stories вращаются вокруг одинаковых чисел к концу каждой истории мы теряем более половины тех, кто начал интересоваться.


Что еще хуже, люди почти никогда не употребляют digital контент слово в слово: вместо этого они быстро сканируют текст.


Люди сканируют, потому что пытаются получить столько информации, сколько им нужно, отмечает Кейт Моран, старший специалист по пользовательскому опыту в Nielsen Norman Group.

Чтобы решить эту проблему, стало почти клише обвинять читателя. Согласно этой точке зрения, публика, пристрастившаяся ко всему новому и блестящему, почти хочет скучать по тексту, чтобы она могла переключиться на следующую статью, видеоигру, пост в instagram и т.д.


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


Тем не менее, чтобы увеличить шансы на то, что их работа будет замечена, великие создатели усердно работают над созданием хорошего контента и настройкой его текста, как и всегда.


В этом эссе мы предлагаем несколько советов о том, как с этим справиться.




Часть 1


Определить и победить


Давайте начнем с определения читабельности. Согласно классической работе Эдгара Дейла и Джинн Чалл, читаемость это общая сумма () всех элементов в данном фрагменте печатного материала, которые влияют на успех, достигнутый группой читателей. Успех это степень, в которой они это понимают, читают с оптимальной скоростью и находят это интересным.

Другими словами, готовность это метрика, которая оценивает легкость и удобство чтения конкретного текста.


Вопрос о том, как создать такую метрику, был задан задолго до появления сети еще в XIX веке. Французский психолог Луи Эмиль Джаваль представил одно из первых известных исследований этого вопроса в 1879 году в своей статье Эссе о физиологии чтения.


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


Два других выдающихся подхода появились позже, в середине XX-го века.


Один был основан на скорости восприятия, в то время как другой подчеркивал измерение общей усталости глаз. Они были впервые предложены двумя исследователями, Майлзом Тинкером и Мэтью Лакишем, чьи разные подходы к измерению читабельности даже привели к определенной враждебности друг к другу (вы можете узнать больше из статьи Уильяма Берксона).


image
При выборе размера шрифта учитывайте потребности аудитории: мелкий шрифт труднее читать пожилым людям, детям и людям с нарушениями зрения.


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


В конце концов, идея Тинкера об измерении скорости превратилась в понятие разборчивости, простоты различения одной буквы от другой, измеряемой скоростью восприятия. Измерения Лакиша на основе усталости стало тем, что в настоящее время известно в строгом смысле как удобочитаемость, простота чтения текста в целом включая разметку, цвета и т.д. измеряется с помощью индикаторов усталости, таких как время моргания.


Также может быть полезно различать удобочитаемость текста (как результат написания) и удобочитаемость текстовых настроек. Первое в первую очередь оценивает мастерство писателя, а второе связано с дизайном.




Часть 2


Как создать на экране особую читаемость?


Контраст


Пионеры исследования читабельности, очевидно, имели дело только с печатным текстом. Однако к концу 1960-х годов компьютеры со светодиодными экранами стали относительно распространенными. Из-за присущих им свойств они оказались более требовательными к глазу.


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


Если вы установите слишком высокую яркость, в сетчатку будут попадать прямые пучки света, что вызовет усталость, объясняет Ник Шерман, консультант по типографике и основатель типографской компании HEX Projects.

image
Высокая контрастность между текстом и фоном обеспечивает хорошую читаемость.


Эту проблему можно частично решить, выбрав правильные контрастные цветовые схемы, удерживая уровни яркости на расстоянии.


Некоторые отличные инструменты для измерения контрастности текста: Средство проверки контрастности цвета Webaim, Анализатор контрастности Luminosity, Средство проверки контрастности цвета и Визуализатор контрастности цвета.


Разрешение


Вторым фактором помех является разрешение количество точек в данной области, которые могут использоваться для передачи визуальной информации. Разрешение измеряется в точках на дюйм (dpi) или в пикселях на дюйм (ppi), причем эти термины используются взаимозаменяемо. Дисплеи MacBook Retina (высоко оцененные за высокое разрешение) по-прежнему превышают 200 ppi, а офсетная печать 2400 dpi или даже выше.


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


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


image


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


image


Однако изменения в способе отображения шрифтов уменьшили различия между этими подходами.


Часть 3


Эволюция слоев и настройки текста в вебе


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


В раннем Интернете не было людей, хорошо разбирающихся в наборе текста. Макеты веб-сайтов были плавными (не имели фиксированной ширины), поэтому текстовые строки имели любую возможную ширину. Это было не здорово: все виды типографских правил, предназначенных для разборчивости текста, были нечеткими, говорит дизайнер продукта Readymag Стас Аки. Ситуация требовала новых подходов к созданию веб-макетов.

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


Эта проблема в основном решалась с массовым внедрением адаптивного дизайна в 2007 году, а также с выпуском первого iPhone.


image


Я думаю, что это выдвинуло идею адаптивного веб-дизайна на первый план. Мобильные сайты часто делались отдельно от настольной версии, и это происходило до появления iPhone. Я думаю, что первый iPhone это символ того, что мобильный интернет стал популярным явлением. Что касается читабельности, в частности, iPhone определенно устанавливает множество стандартов разрешения, как идею иметь Retina дисплей с очень высоким разрешением, вспоминает Ник Шерман.

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




Часть 4


Шрифты, которым адресованы особые вопросы


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


В начале 90-х британский шрифтовой дизайнер Мэтью Картер создал ранние шрифты Web 1.0 Georgia (1993) и Verdana (1996). По заказу Microsoft специально для текста на веб-страницах оба шрифта были разработаны в растровых изображениях, чтобы соответствовать пикселям стандартного разрешения экрана в то время, а затем преобразованы в контурные шрифты. Для разборчивости и читабельности на экранах Картер разработал эти шрифты с большей высотой x, открытой апертурой и большим пространством.


image


Спустя десятилетие появился субпиксельный рендеринг, также известный как сглаживание шрифтов, он добавляет красные, зеленые или синие пиксели к буквенным полосам для более четкого чтения даже на экранах с низким разрешением. Происхождение субпиксельного рендеринга остается спорным: Apple, затем IBM и Microsoft запатентовали различные реализации со своими собственными техническими отличиями, но Microsoft первой применила технологию в своих продуктах. Вскоре после этого Microsoft также выпустила коллекцию шрифтов Clear Type, набор шрифтов, предназначенных для демонстрации преимуществ субпиксельного рендеринга. В коллекцию вошли Calibri, Corbel, Cambria, Candara, Consolas, и Constantia.


Другое важное развитие произошло в 2009 году. Small Batch., Inc выпустила Typekit коллекцию веб-шрифтов из разных литейных цехов, использующую функцию @ font-face в CSS, одновременно защищая их от нарушений. @ font-face был доступен с 1998 года, но Typekit был первой коллекцией, которая решила проблему авторского права на шрифты, позволив расцвести новому рынку для пользовательских веб-шрифтов. Сейчас это сложно представить, но до Typekit вся веб-типографика была либо сделана с помощью одного из дюжины или около того веб-безопасных шрифтов, либо визуализирована в графике.


В 2014 году Apple выпустила семейство шрифтов San Francisco, вдохновленное культовым модернистским шрифтом Helvetica. San Francisco включает в себя несколько шрифтов, каждый из которых предназначен для отдельной среды: SF предназначен для macOS, iOS и tvOS, а SF Compact для Apple Watch. Основное различие между ними заключается в том, что буквы в округлой форме, такие как o, e и s, имеют закругленные стороны в San Francisco, тогда как в SF Compact они плоские. Эти плоские стороны позволяют расположить буквы с большим расстоянием между каждым символом, делая текст более разборчивым при небольших размерах (что особенно важно для часов).


image


Работая вместе, Adobe, Apple, Google и Microsoft совместно представили переменные шрифты в 2016 году. Сила этой новой технологии изменения шрифта заключается в ее способности объединять несколько шрифтов в один без увеличения размера файла. Переменные шрифты решают проблему загрузки отдельных файлов шрифтов для достижения различного веса, ширины, высоты, стилей и других атрибутов.


image


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




9 советов по созданию читабельного веб текста


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


1. Всегда начинайте с качественного текста.


Есть несколько правил, которые могут помочь вам улучшить качество текста. Начните создавать свой дизайн только тогда, когда вы знаете, что у вас есть наилучший текст.


2. Думайте о макете.


Ищите вдохновение в печатных изданиях: читатель уже знаком с книгами и журналами, что облегчает понимание подобных макетов. Просматривайте бумажные журналы для вдохновения. Запомните наиболее привлекательные детали макета и воссоздайте их в своей работе.


3. Применяйте сетки.


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


4. Помните об контрастности.


Помните об инструменте коэффициента контрастности, разработанном Инициативой веб-доступности, и проверьте свои дизайны на уровень контрастности.


5. Выбирайте подходящие шрифты.


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


6. Добавьте тексту навигацию по нему.


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


7. Поиграйте с внешним видом вашего текста.


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


8. Дайте возможность распечатать текст.


Если ваша статья длиннее пяти абзацев, добавьте опцию для ее распечатки приличным шрифтом для печатного текста, скажем, с некоторым вариантом Garamond.


9. Проанализируйте все.


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




Перевод статьи: Виктор Шишко


Источник

Подробнее..
Категории: Usability , Дизайн , Ux , Design , Text , Fonts

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru