Смартфоны с крупным шрифтом на экране: Лучшие смартфоны для пожилых людей: рейтинг 2022 года
Как размер мобильного шрифта влияет на SEO?
- WooRank
- SEO-руководства
- Как размер мобильного шрифта влияет на SEO?
Мобильные устройства бывают самых разных размеров, поэтому важно, чтобы текст на вашем сайте имел размер шрифта, читаемый на экранах разного размера. Текст должен быть достаточно большим, чтобы его можно было прочитать без масштабирования, но в то же время он не должен быть слишком большим, чтобы пользователям приходилось бесконечно прокручивать его, чтобы прочитать весь контент.
Наличие размера шрифта, удобного для чтения пользователями при необходимости масштабирования или переключения в альбомную ориентацию, дает людям, посещающим ваш сайт на мобильных устройствах, гораздо более удобный опыт, что и является мобильным удобством.
Какой идеальный размер шрифта для мобильных устройств?
Идеальный мобильный сайт имеет текст, который удобно читать, когда пользователь смотрит на свой телефон с удобного расстояния.
Идеальный размер шрифта base для мобильных экранов составляет 16 пикселей. Все, что меньше, и пользователям придется сжимать и масштабировать, чтобы прочитать. В CSS вашего сайта рекомендуется установить атрибут font-size в «ems», чтобы облегчить масштабирование.
Использование ems полезно, поскольку оно изменяет текст относительно размера, установленного в документе.
Как убедиться, что ваш текст читаем на всех экранах
1. Исследуйте мобильную тему или шаблон
Если вы используете WordPress, Shopify или другую платформу CMS, вы можете просто приобрести мобильную тему или шаблон, который сделает ваш сайт автоматически отзывчивым. Размер текста автоматически изменится в соответствии с используемым устройством.
Прежде чем остановиться на теме или шаблоне, обязательно прочтите отзывы веб-дизайнеров, которые использовали его
раньше, и посмотрите сайты, использующие конкретную тему или шаблон, чтобы понять, нравится ли он вам.
Большинство тем предоставляют демо-версию перед покупкой, чтобы вы могли протестировать тему на своем рабочем столе и нажать «Проверить элемент», чтобы просмотреть макет шаблона сайта на основе нескольких размеров экрана:
Независимо от того, используете ли вы тему или пользовательский веб-дизайн, вам необходимо указать область просмотра для мобильных устройств.
2. Внедрить адаптивный дизайн для мобильных устройств
Вы можете использовать CSS для управления размером шрифта вашего сайта на разных устройствах. Процедура очень проста:
Размер шрифта может использовать разные единицы измерения, чтобы указать, насколько большим должен быть ваш текст:
- пикселей (пкс)
- балла (пт)
- ЭМс (эм)
Общая рекомендация — использовать браузер по умолчанию: 1.2em, 12pt, 16px или p{font-size:120%;}.
Вот список преобразований для каждой меры:
| пикселей | ЭМ | Процент | Очки |
| 6 пикселей | 0,375эм | 37,5% | 5 пт |
| 7 пикселей | 0,438эм | 43,8% | 5 пт |
| 8 пикселей | 0. 500em | 50,0% | 6 пунктов |
| 9px | 0,563эм | 56,3% | 7 пунктов |
| 10 пикселей | 0,625эм | 62,5% | 8 точек |
| 11px | 0,688эм | 68,8% | 8 точек |
| 12 пикселей | 0,750 em | 75,0% | 9 пунктов |
| 13px | 0,813эм | 81,3% | 10 точек |
| 14 пикселей | 0,875эм | 87,5% | 11пт |
| 15px | 0,938эм | 93,8% | 11пт |
| 16 пикселей | 1.000эм | 100,0% | 12 точек |
| 17px | 1.063em | 106,3% | 13 пунктов |
| 18px | 1. 125em | 112,5% | 14 точек |
| 19px | 1.188em | 118,8% | 14 точек |
| 20 пикселей | 1.250em | 125,0% | 15 точек |
| 21px | 1.313em | 131,3% | 16 точек |
| 22 пикселя | 1.375em | 137,5% | 17 точек |
| 23px | 1.438em | 143,8% | 17 точек |
| 24px | 1.500эм | 150,0% | 18 точек |
Выберите разумный размер шрифта для каждого типа: Заголовок, Заголовки, Абзацы. 16 пикселей — это настройка CSS по умолчанию. Большинство тем, которые вы установили для своего сайта, будут иметь дополнительные настройки темы, чтобы вам было легко изменить размер в зависимости от вашего сайта и потребностей посетителей.
Вот пример параметров темы Muffin Builder:
Не используйте слишком большой размер [размер 20 или больше]. Оставьте это для заголовков и названий. Большой размер шрифта означает, что пользователям придется дольше прокручивать страницу, что неудобно для пользователя.
Эмпирическое правило:
Классическая теория удобочитаемости предполагает, что идеальный столбец должен содержать от 70 до 80 символов в строке (от 8 до 10 слов на английском языке). Таким образом, каждый раз, когда ширина текстового блока превышает 10 слов, рассмотрите возможность добавления точки останова.
Отрегулируйте этот размер шрифта в зависимости от характеристик используемого шрифта.
При выборе размера шрифта учитывайте базовый размер. Это связано с тем, что контент будет просматриваться на устройствах разного размера, и вы хотите быть уверены, что соотношение размеров шрифта всегда будет одинаковым, независимо от устройства, на котором просматривается контент.
3. Размер высоты вашего шрифта
Обязательно оставляйте достаточно места между строками и абзацами, чтобы страница не выглядела слишком тесной. В то время как вы можете обойтись небольшой высотой строки и плотным текстом на настольном сайте, для пользователя будет практически невозможно прочитать такой текст на устройстве с маленьким экраном без масштабирования, и это создает довольно неприятные ощущения.
Для ссылок вам придется оставлять еще больше места между строками текста для готовности экрана касания.
Три приведенных выше примера абзаца, предоставленные css-tricks, имеют высоту строки, установленную на 150%, 200% и 250% или 30px, 40px и 50px.
Google рекомендует использовать по крайней мере высоту строки браузера по умолчанию 1,2, что означает, что пробелы между строками текста как минимум в 1,2 раза превышают размер самого текста.
4. Медиа-запросы для разных размеров экрана
Размер текста вашего сайта контролируется медиа-запросами, объявленными для экранов разного размера.
html{размер шрифта:100%;}
@media (минимальная ширина: 60em) {html {размер шрифта: 100%}}
Существует несколько различных элементов, по которым вы можете запрашивать: min-width , max-width , min-height и max-height .
Вот некоторые правила медиа-запросов, основанные на рекомендации Google:
Когда браузер находится между 0px и 640px в ширину, применяется
max-640px.css.Когда ширина браузера находится между 500px и 600px , применяются стили в пределах
@media.Когда браузер 640px или шире , применяется
min-640px.css.Когда ширина браузера больше высоты ,
применяется landscape..
css Когда высота браузера больше ширины , применяется
Portrait.css.
css Во избежание чрезмерного усложнения не используйте слишком много шрифтов и размеров шрифтов на одной странице, так как это может затруднить контроль читаемости текста на разных устройствах. Макет вашей страницы также будет беспорядочным, а текст может быть даже нечитаемым на устройствах с маленькими экранами.
5. Создайте разные версии вашего веб-сайта для разных устройств
Создание отдельного мобильного веб-сайта — это вариант, если по какой-то причине вы не можете создать адаптивный дизайн. Использование отдельного мобильного сайта не идеально (его создание и поддержка требует больше усилий), но для некоторых веб-сайтов это сработало.
Самый распространенный способ сделать это — использовать то, что часто называют «м-точками». «m-dot» — это совершенно новый сайт, разработанный для мобильных устройств, а затем размещенный на поддомене, обычно «m.
example.com». Отсюда и термин «м-точка».
Затем вы перенаправите мобильных пользователей на мобильную версию вашего сайта.
Дополнительные ресурсы о совместимости с мобильными устройствами
Размер шрифта может показаться мелочью, но это жизненно важный элемент поисковой оптимизации для мобильных устройств. Вышеуказанные стратегии помогут сделать ваш шрифт легко читаемым на мобильном устройстве. Ознакомьтесь с другими нашими руководствами, чтобы сделать ваш сайт более удобным для мобильных устройств:
- Сделайте свой сайт совместимым с мобильными устройствами
- Оптимизировать скорость мобильной страницы
Последние руководства
Справочное руководство по типографике в мобильном веб-дизайне — Smashing Magazine
- Чтение за 20 минут
- Типографика, Мобильный, Шрифты, Адаптивный дизайн
- Поделиться в Twitter, LinkedIn
Об авторе
Сюзанна Скакка — бывший специалист по внедрению WordPress, тренер и менеджер агентства, а сейчас работает внештатным копирайтером.
Она специализируется на создании маркетинговых, веб-…
Больше о
Suzanne ↬
В связи с тем, что мобильные устройства занимают лидирующие позиции в поиске, важно, чтобы веб-сайты были разработаны таким образом, чтобы в приоритете было максимальное удобство для их пользователей. В то время как Google привлек внимание к таким элементам, как всплывающие окна, которые могут нарушить работу мобильных устройств, как насчет такой, казалось бы, простой вещи, как выбор типографики?
Ответ на вопрос о типографике может показаться достаточно простым: то, что работает на настольных компьютерах, должно работать и на мобильных устройствах, если оно хорошо масштабируется. Верно?
Хотя это определенно облегчило бы работу веб-дизайнеров, это не обязательно так.
Проблема сделать это утверждение решающим заключается в том, что в последние годы было проведено не так много исследований на тему мобильной типографики. Итак, что я намерен сделать сегодня, так это дать краткий обзор того, что мы знаем о типографике в веб-дизайне, а затем посмотреть, что эксперты по UX и тесты смогли раскрыть об использовании типографики для мобильных устройств.
Послушайте, я знаю, что типографика — не самая гламурная тема. И, будучи веб-дизайнером, вы, возможно, не тратите слишком много времени на размышления, особенно если клиенты приносят вам свои собственные руководства по стилю до начала проекта.
Тем не менее, с появлением мобильных устройств типографика требует дополнительного внимания.
Больше после прыжка! Продолжить чтение ниже ↓
Терминология типографики
Начнем с основ: терминология, которую вам необходимо знать, прежде чем углубляться в лучшие практики мобильной типографики.
Типография: Этот термин относится к технике , используемой для стилизации, форматирования и упорядочения «печатного» (в отличие от рукописного) текста.
Гарнитура: Это система классификации, используемая для обозначения семейства символов. Таким образом, это может быть что-то вроде Arial, Times New Roman, Calibri, Comic Sans и т. д.
Типичное предложение шрифтов в приложениях для обработки текстов. (Источник: Google Docs) (Большой предварительный просмотр)Шрифт: Это углубляется в шрифт веб-сайта. Шрифт подробно описывает семейство гарнитур, размер шрифта и любые примененные специальные стилизации. Например, шрифт Arial размером 11 пунктов жирным шрифтом.
Пример трех элементов, определяющих шрифт. (Источник: Документы Google) (Большой предварительный просмотр)Размер: Существует два способа указать размер (или высоту) шрифта: размер обработки текста в пунктах или размер веб-дизайна в пикселях. Говоря о мобильном веб-дизайне, мы используем пиксели.
Вот построчное сравнение различных размеров шрифта:
Пример того, как одна и та же строка текста выглядит при разных размерах.
(Источник: Документы Google) (Большой предварительный просмотр)Как вы можете видеть в WordPress, размеры шрифта важны, когда дело доходит до установления иерархии в тексте заголовка:
Размер заголовка по умолчанию доступен с темой WordPress. (Источник: WordPress) (Большой предварительный просмотр)Вес: Это другая часть определения гарнитуры как шрифта. Вес относится к любым специальным стилям, применяемым к лицу, чтобы сделать его тяжелее или легче. В веб-дизайне вес играет важную роль в шрифтах заголовков, которые дополняют обычно невесомый основной текст.
Вот пример параметров, которые вы можете выбрать в настройщике темы WordPress:
Пример веса шрифта, доступного в теме WordPress. (Источник: WordPress) (Большой предварительный просмотр) Кернинг: Это относится к пространству между двумя буквами. Его можно отрегулировать, чтобы создать более эстетичный результат, а также улучшить читаемость. Вам понадобится программное обеспечение для дизайна, такое как Photoshop, чтобы сделать эти типы корректировок.
Трекинг: Трекинг или межбуквенный интервал часто путают с кернингом, так как он также связан с добавлением пробела между буквами. Однако в то время как кернинг регулирует расстояние между двумя буквами для улучшения внешнего вида, отслеживание используется для регулировки интервала по всей строке. Это используется больше для устранения проблем с плотностью при чтении.
Чтобы дать вам представление о том, чем это отличается, вот пример от Mozilla о том, как использовать отслеживание для изменения межбуквенного интервала:
Вот как выглядит обычное отслеживание. (Источник: Mozilla) (Большой предварительный просмотр) Вот как выглядит (более точное) отслеживание -1px. (Источник: Mozilla) (Большой предварительный просмотр) Вот как выглядит (более слабое) отслеживание в 1 пиксель. (Источник: Mozilla) (Большой предварительный просмотр) Интерлиньяж: Интерлиньяж или межстрочный интервал — это расстояние между базовыми линиями текста (нижней строкой, на которую опирается шрифт).
Как и отслеживание, это можно настроить, чтобы исправить проблемы с плотностью.
Если вы какое-то время пользовались программами для обработки текстов, вы уже знакомы с интерлиньяжем. Текст с одинарным интервалом. Текст с двойным интервалом. Даже текст через 1,5 интервала. Это ведущий.
Что касается того, почему мы заботимся о типографике и каждой из ее определяющих характеристик в современном веб-дизайне, то на это есть веская причина. Хотя было бы здорово, если бы хорошо написанная запись в блоге или очень убедительный жаргон продаж на целевой странице были достаточными, чтобы посетители были довольны, это не всегда так. Выбор, который вы делаете с точки зрения типографики, может иметь серьезные последствия в отношении того, будут ли люди вообще читать текст вашего сайта.
Вот некоторые из способов, которыми типографика влияет на ваших конечных пользователей:
Усиление брендинга
Типографика — это еще один способ создания определенного стиля для вашего веб-дизайна.
Если все изображения содержат четкие линии и серьезные лица, вам следует использовать одинаково застегнутый шрифт.
Задайте настроение
Помогает создать настроение или эмоции. Например, более легкомысленный и легкий шрифт сигнализировал бы пользователям, что бренд веселый, молодой и не воспринимает себя всерьез.
Дай голос
Он передает ощущение индивидуальности и голоса. Хотя фактическое сообщение в тексте сможет передать это хорошо, использование шрифта, усиливающего тон, будет хорошим выбором.
Поощрение чтения
Как видите, существует несколько способов настройки отображения текста на экране. Если вы можете придать ему правильное ощущение скорости и легкости, вы можете побудить больше пользователей прочитать его целиком.
Разрешить сканирование
Сканирование или взгляд (о котором я вскоре расскажу) становится все более и более распространенным явлением, поскольку люди взаимодействуют с Интернетом на своих смарт-устройствах.
Из-за этого нам нужны способы форматирования текста для улучшения сканируемости, и это обычно включает в себя множество заголовков, кавычек и встроенных списков (маркированных, нумерованных и т. д.).
Улучшение доступности
Многое еще предстоит сделать, чтобы обеспечить доступность. Ваш выбор шрифта играет большую роль в этом, тем более, что мобильный опыт должен меньше полагаться на большие, смелые рисунки и образцы цвета, а больше на то, насколько быстро и хорошо вы можете привлечь посетителей к своему сообщению.
Поскольку типографика играет такую разнообразную роль в пользовательском опыте, к этому вопросу нужно относиться серьезно при разработке стратегии нового дизайна. Итак, давайте посмотрим, что говорят эксперты и тесты о работе с мобильными устройствами.
Слишком маленькие, слишком легкие, слишком причудливые, слишком близко расположенные друг к другу… Вы можете столкнуться со множеством проблем, если не найдете идеального баланса при выборе типографики в дизайне.
Однако на мобильных устройствах это немного другая история.
Я не хочу сказать, что перестраховаться и использовать систему по умолчанию от Google или Apple — это правильный путь. В конце концов, вы так усердно работаете над созданием уникальных, креативных и привлекательных дизайнов для своих пользователей. Зачем вам сдаваться в этот момент и просто шлепать Roboto по всему мобильному веб-сайту?
Мы знаем, каковы ключевые элементы в определении и формировании шрифта, и мы также знаем, насколько эффективны шрифты в контексте веб-сайта. Итак, давайте углубимся и посмотрим, что именно вам нужно сделать, чтобы ваша типографика хорошо работала с мобильными устройствами.
1. Размер
Как правило, для мобильных веб-сайтов размер шрифта должен составлять 16 пикселей. Все, что меньше этого размера, может поставить под угрозу читаемость для слабовидящих читателей. Все, что слишком велико, также может затруднить чтение. Вы хотите найти идеальную формулу Златовласки, и снова и снова она возвращается к 16 пикселям.
В общем, это правило безопасно, когда дело доходит до основного текста вашего мобильного сайта. Однако что именно вам разрешено делать с текстом заголовка? Ведь вам нужно уметь отличать ваши основные заголовки от остального текста. Не только для того, чтобы привлечь внимание к большим сообщениям, но и для повышения сканируемости мобильной веб-страницы.
Группа Nielsen Norman сообщила об исследовании Массачусетского технологического института, в котором рассматривался именно этот вопрос. Что вы можете сделать с текстом, который пользователи могут только взглянуть на ? Другими словами, какой размер вы можете использовать для коротких строк текста заголовка?
Вот что они обнаружили:
Короткие, легко читаемые строки текста способствуют более быстрому чтению и лучшему пониманию, когда:
- Они больше по размеру (в частности, 4 мм, а не 3 мм).
- Все они написаны заглавными буквами.
- Ширина шрифта обычная (не сжатая).
Итого:
Строчные буквы требуют на 26% больше времени для точного чтения, чем прописные, а сжатый текст требует на 11,2% больше времени, чем обычный.
Также наблюдались значительные эффекты взаимодействия между регистром и размером, что позволяет предположить, что негативное влияние строчных букв усугубляется маленьким размером шрифта.В таком случае мне было бы интересно посмотреть, как работает веб-сайт NerdWallet. Хотя мне нравится, как это выглядит, они нарушили ряд следующих рекомендаций по размеру и стилю:
NerdWallet использует заглавные буквы и меньшие размеры шрифта на мобильных устройствах. (Источник: NerdWallet) (Большой предварительный просмотр)Посмотрев на это несколько раз, я действительно думаю, что выбор шрифта меньшего размера для заголовка, состоящего только из заглавных букв, является странным выбором. Мой взгляд сразу же привлекает более крупный и жирный текст под основным заголовком. Итак, я думаю, что в исследованиях Массачусетского технологического института есть что-то.
Flywheel Sports, с другой стороны, прекрасно иллюстрирует этот момент. Умный выбор шрифтов
Flywheel Sports для мобильных устройств.
(Источник: Flywheel Sports) (Большой превью)Нет никаких сомнений, на что должно быть направлено внимание посетителей: на привлекающий внимание заголовок. Он написан заглавными буквами, крупнее всего остального текста на странице, и, хотя шрифт невероятно простой, его сочетание с пользовательским рукописным шрифтом здесь выглядит чертовски круто. Думаю, единственное, что я бы здесь поправил, — это контраст между белым и желтым шрифтом и синим фоном.
Помните: это относится только к размеру (и стилю) текста заголовка. Если вы хотите, чтобы большие объемы текста оставались читаемыми, придерживайтесь вышеупомянутых рекомендаций по изменению размера.
2. Цвет и контраст
Цвет в целом является важным элементом веб-дизайна. Вы можете многое передать посетителям, выбрав правильную цветовую палитру для дизайна, изображений и, да, вашего текста. Но важен не только основной цвет шрифта, но и контраст между ним и фоном, на котором он расположен (о чем свидетельствует моя заметка выше о Flywheel Sports).
Для некоторых пользователей белый шрифт поверх загруженной фотографии или более светлый фон могут не вызывать особых проблем. Но «слишком много» не совсем приемлемо в веб-дизайне. У пользователей не должно возникнуть проблем при чтении текста на веб-сайте, особенно в уже скомпрометированном виде на мобильном устройстве.
Вот почему цвет и контраст являются главными факторами, которые вы должны учитывать при стилизации типографики для мобильных устройств.
Руководство по обеспечению доступности веб-контента (WCAG) содержит четкие рекомендации относительно того, как решить проблему цветового контраста в разделе 1.4.3. WCAG предлагает установить как минимум контраст между текстом и фоном от 4,5 до 1 для оптимальной читабельности. Есть несколько исключений из правил:
- Текст, размер которого составляет 18 пунктов или полужирный шрифт 14 пунктов, требует только контрастности от 3 до 1.
- Текст, который не отображается в активной части веб-страницы, не должен подчиняться этому правилу.
- Контрастность текста внутри логотипа может быть установлена на усмотрение дизайнера.
Если вы не знаете, как установить соотношение между цветом вашего шрифта и фоном, на котором он расположен, используйте инструмент проверки цветового контраста, такой как WebAIM.
Пример использования инструмента проверки цветового контраста WebAIM. (Источник: WebAIM) (Большой превью)Одна вещь, о которой я прошу вас помнить, это использование непрозрачности или других настроек цвета, которые могут поставить под угрозу выбранный вами цвет. Хотя шестнадцатеричный код цвета будет хорошо проверяться в инструменте, он может не быть точным представлением того, как цвет на самом деле отображается на мобильном устройстве (или на любом экране, на самом деле).
Чтобы решить эту проблему и обеспечить достаточно высокую контрастность шрифтов, используйте встроенный в браузер инструмент цветной пипетки, такой как те, что используются в Firefox или Chrome. Просто наведите пипетку на цвет фона (или шрифта) на вашей веб-странице, и она подскажет, какой сейчас фактический цветовой код.
Вот пример этого в действии: Dollar Shave Club.
Этот веб-сайт имеет ротацию изображений в верхнем баннере главной страницы. Шрифт всегда остается белым, но фон вращается.
Баннер домашней страницы Dollar Shave Club с серым фоном. (Источник: Dollar Shave Club) (Большой превью) Баннер домашней страницы Dollar Shave Club с бежевым/серо-коричневым фоном. (Источник: Dollar Shave Club) (Большой превью) Баннер домашней страницы Dollar Shave Club с фиолетовым фоном. (Источник: Dollar Shave Club) (Большой превью)Исходя из того, что мы знаем сейчас, фиолетовый, вероятно, единственный, который пройдет с честью. Однако, чтобы показать вам, как выполнять это упражнение, вот что говорит инструмент «Пипетка» о цветовых кодах HEX для каждого из фонов:
- Серый: #9a9a9a
- Бежевый/серо-коричневый: #ffd0a8
- Фиолетовый: #4c2c59.
Вот контраст между этими цветами и белым шрифтом:
- Серый: от 2,81 до 1
- Бежевый/серо-коричневый: от 1,42 до 1,
- Фиолетовый: от 11,59 до 1.
Ясно, что серый и бежевый фоны будут плохо восприниматься мобильными посетителями.
Кроме того, если бы мне пришлось гадать, я бы сказал: «Попробуйте безрисковый стартовый набор прямо сейчас». это всего лишь 10-точечный шрифт (что составляет всего около 13 пикселей). Таким образом, размер шрифта также работает против фактора читабельности, не говоря уже о плохом выборе цветов, используемых на более светлом фоне.
Урок здесь состоит в том, что вы действительно должны уделить время тому, чтобы подумать о том, как цвет и контраст типографики будут работать на благо ваших читателей. Без этих дополнительных шагов вы можете непреднамеренно препятствовать переходу посетителей на ваш сайт.
3. Отслеживание
Просто и понятно: отслеживание в мобильном веб-дизайне необходимо использовать для контроля плотности. Стандартная рекомендация состоит в том, что в строке должно быть не более 30–40 символов. Все, что больше или меньше, может отрицательно повлиять на читабельность.
Хотя кажется, что Dove раздвигает границы этого ограничения в 40 символов, я думаю, что это сделано хорошо.
Dove использует равномерное отслеживание и (в основном) не выходит за пределы 40 символов. (Источник: Dove) (Большой превью)
Шрифт такой простой и чистый, а отслеживание равномерное. Вы можете видеть, что, удерживая количество слов в строке в рекомендуемых пределах, это придает этому сегменту страницы видимость, что его будет легко читать. И это именно то, что вы хотите, чтобы ваши варианты типографики делали: приглашали посетителей остановиться на короткое время, прочитать не угрожающее количество текста, а затем продолжить свой путь (который, надеюсь, приведет к конверсии).
4. Ведущий
По данным NNG, контент, который появляется в верхней части экрана на 30-дюймовом настольном мониторе, соответствует пяти пролистываниям на 4-дюймовом мобильном устройстве. Конечно, эти данные немного устарели, так как большинство смартфонов сейчас имеют размер от пяти до шести дюймов:
Средний размер экрана смартфона с 2015 по 2021 год.
(Источник: TechCrunch) (Большой предварительный просмотр) хорошие движения по экрану смартфона, чтобы добраться до кончика сгиба на рабочем столе. Это большая работа, которую должны проделать ваши мобильные посетители, чтобы добраться до нужного материала. Это также означает, что их терпение уже будет на исходе к тому времени, когда они туда доберутся. Как указала NNG, мобильная сессия в среднем обычно длится всего около 72 секунд. Сравните это со 150 секундами на рабочем столе, и вы поймете, почему это так важно.Это означает для вас две вещи:
- Вам абсолютно необходимо избавиться от лишнего на мобильном телефоне. Если это означает создание совершенно отдельного и более короткого набора контента для мобильных устройств, сделайте это.
- Будьте очень осторожны с интерлиньяжем.
Вы уже позаботились об оптимизации размера и ширины шрифта, и это хорошо. Тем не менее, слишком много интерлиньяжа, и вы можете непреднамеренно просить пользователей прокручивать даже больше, чем им нужно.
И с каждым свитком появляется возможность усталости, скуки, разочарования или отвлечения внимания.
Таким образом, вам нужно найти хороший баланс между использованием межстрочного интервала для повышения удобочитаемости, а также тем, сколько работы им нужно сделать, чтобы добраться до конца страницы.
Веб-сайт Hill Holliday не только вдохновляет на то, как немного «сходить с ума» с мобильной типографикой, но и проделал фантастическую работу по использованию интерлиньяжа, чтобы сделать большие тексты более удобными для чтения:
Hill Holliday использует идеальное соотношение интерлиньяжа между строками и абзацами. (Источник: Хилл Холлидей) (Большой превью)Различные ресурсы дадут вам разные рекомендации по созданию интервалов для мобильных устройств. Я видел предложения где-то между 120% и 150% размера шрифта в пунктах. Поскольку вам также необходимо учитывать доступность при разработке дизайна для мобильных устройств, я предлагаю вам следовать рекомендациям WCAG:
- Расстояние между строками должно быть 1,5 (или 150%, в зависимости от того, какое соотношение вам подходит).
- Расстояние между абзацами тогда должно быть 2,5 (или 250%).
В конце концов, речь идет о принятии разумных решений с учетом пространства, которое вам предоставляется для работы. Если у вас есть только минута, чтобы зацепить их, не тратьте ее впустую на слишком большое вертикальное пространство. И не выключайте их слишком мало.
5. Приемлемые шрифты
Прежде чем я расскажу, что делает шрифт приемлемым, я хочу сначала посмотреть, какие шрифты по умолчанию используются в Android и Apple. Я думаю, что мы можем многому научиться, просто взглянув на эти варианты:
Android
Google использует два шрифта для своих платформ (как настольных, так и мобильных): Roboto и Noto. Roboto является основным по умолчанию. Если пользователь посещает веб-сайт на языке, который не поддерживает Roboto, то Noto является вторичной резервной копией.
Это Roboto:
Снимок набора символов Roboto. (Источник: Roboto) (Большой предварительный просмотр)Также важно отметить, что Roboto предлагает несколько семейств шрифтов на выбор:
Другие варианты шрифтов Roboto на выбор.
(Источник: Roboto) (Большой предварительный просмотр)Как вы можете видеть, существуют версии Roboto со сжатым кернингом, более тяжелым шрифтом с засечками, а также с более рыхлым, похожим на засечки вариантом. В целом, однако, это действительно чистый и просто стилизованный шрифт. Вы вряд ли вызовете какие-либо настоящие эмоции при использовании этого на веб-сайте, и это может не передать большую часть личности, но это безопасный и разумный выбор.
Apple
У Apple есть собственный набор правил оформления для iOS, а также собственный системный шрифт: San Francisco.
По большей части то, что вы видите, это то, что вы получаете в Сан-Франциско. Это обычный шрифт без засечек. Если вы посмотрите на рекомендации Apple по настройкам по умолчанию для шрифта, вы также обнаружите, что они даже не рекомендуют использовать смелую стилизацию или диковинные правила размера, интерлиньяжа или отслеживания:
Настройки по умолчанию и рекомендации для шрифта San Francisco.
(Источник: Сан-Франциско) (Большой предварительный просмотр)Как и во всем остальном, что делает Apple, формула типографики очень проста. И знаешь, что? Это действительно работает. Вот он в действии на веб-сайте Apple:
Apple использует собственные передовые методы типографики. (Источник: Apple) (Большой предварительный просмотр)Подобно системному шрифту Google, Apple выбрала простой и классический шрифт. Хотя это может и не помочь вашему сайту выделиться среди конкурентов, оно никогда не ухудшит удобочитаемость или читабельность вашего текста. Это также будет хорошим выбором, если вы хотите, чтобы ваши визуальные эффекты производили большее впечатление.
Мои рекомендации
Итак, это подводит меня к моим собственным рекомендациям о том, что вы должны использовать с точки зрения шрифта для мобильных веб-сайтов. Вот вердикт:
- Не бойтесь начинать с системного шрифта по умолчанию. Они будут вашим самым безопасным выбором, пока вы не поймете, как далеко вы можете раздвинуть границы мобильной типографики.
Используйте только шрифт без засечек или без засечек. Если на вашем настольном веб-сайте используется декоративный или рукописный шрифт, замените его на что-то более традиционное для мобильных устройств.
Тем не менее, вам не нужно полностью игнорировать декоративные шрифты. В примерах из Hill Holliday или Flywheel Sports (как показано выше) вы можете увидеть, как небольшие штрихи нестандартного, нетрадиционного шрифта могут добавить изюминку.
Никогда не используйте более двух шрифтов на мобильных устройствах. Посетителям просто не хватает места, чтобы визуально обрабатывать такое количество опций.
Убедитесь, что ваши два шрифта дополняют друг друга. В частности, ищите лица, которые используют одинаковую ширину символов. Дизайн каждого лица может быть уникальным и хорошо контрастировать с другим, но все же должно быть некоторое единообразие в том, что вы представляете глазам мобильных посетителей.
Избегайте шрифтов, не имеющих четкого набора символов.
Гарнитура Myriad Pro в действии. (Источник: Typekit) (Большой предварительный просмотр) Например, сравните, как буквы «i» в верхнем регистре, «l» в нижнем регистре и цифра «1» расположены рядом друг с другом. Вот пример шрифта Myriad Pro с веб-сайта Typekit:Хотя цифра «1» не слишком проблематична, прописная «i» (первая буква в этой последовательности) и строчная «l» (вторая) слишком похожи. Это может привести к нежелательным замедлениям чтения на мобильных устройствах.
Также обязательно проверьте, как ваш шрифт обрабатывает сочетание букв «r» и «n» рядом друг с другом. Можете ли вы различить каждую букву или они сливаются в одну неразличимую единицу? У мобильных посетителей нет времени, чтобы остановиться и понять, что это за символы, поэтому убедитесь, что вы используете шрифт, который дает каждому символу свое место.
Используйте шрифты, совместимые с максимально возможным количеством устройств. Лучше всего подойдут: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS и Verdana.
Список системных шрифтов по умолчанию для различных мобильных устройств. (Источник: tinytype) (Большой предварительный просмотр) Еще одно представление таблицы, включающее некоторые шрифты, поддерживаемые Android. (Источник: tinytype) (Большой превью)Я думаю, что веб-сайт Typeform является хорошим примером того, что использует «безопасный» выбор шрифта, но не мешает им удивлять посетителей своим сообщением или дизайном. Яркий шрифт
Typeform не имеет ничего общего с реальным шрифтом. (Источник: Typeform) (Большой предварительный просмотр)Он короткий, по делу, идеального размера, хорошо расположен и в целом является хорошим выбором, если они пытаются продемонстрировать стабильность и профессионализм (а я думаю, что они так и делают).
- Если вы чувствуете себя комфортно с мобильной типографикой и хотите немного расшириться, взгляните на этот список лучших веб-безопасных шрифтов от WebsiteSetup. Здесь вы обнаружите, что большинство вариантов — это ваши основные шрифты с засечками и без засечек.
Например, сравните, как буквы «i» в верхнем регистре, «l» в нижнем регистре и цифра «1» расположены рядом друг с другом. Вот пример шрифта Myriad Pro с веб-сайта Typekit:
