Оптимальный размер шрифта для сайта: Какой размер шрифта лучше для сайтов ? — Хабр Q&A

7. Нарушение привычных принципов дизайна

И последний, самый тяжкий грех — отказ от стандартов дизайна.

Стив Круг (Steve Krug) пишет об этом в своей книге «Не заставляйте меня думать». Он особо подчеркивает, что посетители сайтов и лендингов привыкли к определенным функциям в определенных местах. Например к тому, что логотип и слоган находятся в левом верхнем углу сайта, а меню — в правом верхнем. Также посетители привыкли обращаться к странице «О нас», если хотят узнать подробнее о компании, и открывать страницу «Контакты», если нужно узнать адрес, телефон или представительства в социальных медиа. Это означает, что все перечисленные «привычные» функции стоит реализовать на своем ресурсе. Или дважды подумать перед тем, как нарушить основные принципы дизайна.

Иногда владельцы сайтов, в стремлении к новым и креативным решениям, делают необычное меню: например, вместо привычного правого верхнего угла страницы пункты меню «вырастают» на ветках дерева, служащего фоновой картинкой сайта (и множество других изобретательных вариантов реализации меню).

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

Заключение

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

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

Высоких вам конверсий!

По материалам: jamesclear.com,

06-12-2014

Адаптивный веб-дизайн: как выбрать размер шрифта

Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».

Быстрая навигация по главам: Введение · iOS · Android · Веб · Принципы

Итак, эта статья для вас, если вы работаете с веб-дизаном и хотите ориентироваться (примерно) в размерах шрифтов — какой где лучше использовать.

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

Рекомендации по веб-типографике — мобильный дизайн

Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, зарубите себе на носу раз и навсегда:

• Размер шрифта в инпутах не менее 16px. Если шрифт будет меньше, на iOS браузер приблизит строку ввода, сместив её влево и обрезав правую сторону так, что после пользования строкой пользователю придется отдалять уже вручную.

Вот так это выглядит:

За гифку отдельное спасибо шустрому Ste Grainer. Можете ознакомиться с его статьёй по авто-зуму здесь.

Вся остальная информация о размерах шрифта в мобильном вебе в основном сводится к следующему:

• Размер шрифта основного текста должен быть около 16px. Цель: чтобы текст на вашем телефоне (при стандартном расстоянии от глаз) читался так же легко, как и на странице хорошо отпечатанной книги (при стандартном — обычно чуть большем — расстоянии от глаз).
• Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Уменьшать размер только на одну единицу я не рекомендую — в таком случае его будет легко спутать с обычным текстом. Менее важный текст должен быть оформлен соответственно, чтобы намеренно подчеркнуть его меньшую значимость.
• Проверяйте, как выглядит ваш дизайн на самом устройстве. Максимально обратите своё внимание на этот совет: макет приложения на экране ноутбука и макет приложения на экране смартфона в ваших руках дают абсолютно разные ощущения. В начале своего дизайнерского пути я едва ли не каждый раз поражался тому, как макет, который я делал на компьютере, по-другому выглядел на мобильном устройстве. Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror, Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.
• По всем остальным вопросам касаемо размеров шрифтов в вебе, идите читать гайдлайны материального дизайна — это понятный, хорошо структурированный, метко написанный (и вполне содержательный) материал. Чем больше я расту как дизайнер, тем больше убеждаюсь в следующем: хоть у Apple и есть максимальный авторитет с точки зрения дизайна, сегодня Google благополучно вытирает об него ноги. Только не говорите дизайнерам-снобам, что я так сказал.

Руководство по веб-типографике на ПК

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

1. Текстовые страницы. Статьи, блоги, новостные сводки и т.д. — главная цель использования этих страниц — чтение. Взаимодействие с пользователем здесь практически сводится на нет, разве что придётся пару раз по ссылкам кликнуть — и то не факт.
2. Интерактивные страницы. Приложения, которые подразумевают листание, клики, поиск нужного пункта в списке или таблице, редактирование, ввод текста и т.д. На такой странице может быть много текста, но не такого, который можно просто читать, как книгу.

Привести пару примеров? Вот эта страница, на которой вы находитесь, — текстовая. А новостная лента на Facebook — интерактивная. Обе страницы преследуют слегка разные цели, поэтому разберем их по-отдельности. Информация об обеих может быть вам полезной. Страница «О нас» какого-нибудь безумного веб-приложения тоже нагружена текстом. А на странице «Контакты» в каком-нибудь ванильном бложике может быть много взаимодействия.

Текстовые страницы

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

• 16px — абсолютный минимум для текстовых страниц
• 18px — лучше начинать с этого размера. Вы же не печатаете текст в ворде с одинарным межстрочником. Вы оформляете текст для людей, которые сидят в метре от своих допотопных мониторов.
• 20px+ — поначалу может показаться прям очень огромным, но попробовать его стоит в любом случае. Сайт medium.com может похвастаться лучшим дизайном текстовых страниц, а размер шрифта по умолчанию там равен 21px.

Существует отличный эмпирический способ, похожий на тот, о котором я уже говорил в разделе про мобильный веб: текст на вашем веб-сайте (при стандартном расстоянии от монитора) должен читаться так же легко, как и в хорошей книжке (при стандартном расстоянии от страниц). Это, на самом деле, довольно бесячее и тупое занятие: вам надо закрыть один глаз и, сщурившись, смотреть на книгу, держа её при это вертикально, что выглядит довольно-таки тупо. Найдите какое-нибудь уединенное местечко и проверьте свой сайт на работоспособность: читается ли мой шрифт даже с расстояния в метр? Даже с учётом моего острого, не испорченного годами зрения? Ну, вы поняли.

Интерактивные страницы

Итак, для интерактивных страниц, подойдут и размеры поменьше. На самом деле, исходя из количества информации, которую единовременно получает пользователь, даже текст в 18px может быть слишком крупным для комфортного чтения. Зайдите на свою почту, в twitter, в любое приложение, где нужно скорее «сканировать» страницу, нежели чем читать; зайдите в приложение, которое предоставляет данные — вряд ли вы найдёте там длинные абзацы текста в 18px. Вместо этого нормой будет 14-16px. Однако одним размером шрифта дело не обойдётся. Скорее всего, для менее значимой информации будут использоваться более мелкие кегли, а для более значимой — кегли побольше (заголовки, подзаголовки и под-подзаголовки и так далее), и всё это будет смешано в одну большую типографическую солянку.

А теперь важная мысль: на любой интерактивной странице размер шрифта в МЕНЬШЕЙ степени зависит от свода правил (я о тебе говорю, скейлинг шрифтов), чем от определённых потребностей каждого участка текста и взаимодействия между ними.

Например:

• Шрифт для названий событий — 12px, medium, в начертании, которое полностью отсутствует в гайдлайнах материального дизайна. Но вот когда эти названия нужно уместить в 7 колонок на экране, ширина которого составляет всего лишь 1440px, а многие события состоят всего из одного-двух слов, данный размер шрифта идеален. Совсем чуть-чуть уменьшишь — и уже не прочитать. Совсем чуть-чуть увеличишь — и слишком много названий окажутся обрезаны. Дизайн — это череда компромиссов, ребята. Если вы не знаете, ради чего вы на этот компромисс идёте, возможно, вы идёте на него не там.
• Указатели времени слева («12pm», «1pm» и т.д.) имеют размер 10px. Это ещё один стиль текста, который полностью отсутствует в гайдлайнах. А горизонтальное пространство у нас на вес золота. Возле каждого события в любом случае указано время его начала. Почему бы тогда не сделать время слева поменьше?
• Размер дат — 48px. И вновь ничего подобного в материальном дизайне. В данном случае не знаю, почему не использовать 45px — ведь это официальный размер текста для второго монитора, но если бы разработку дизайна поручили мне, то я бы использовал жирный шрифт размером 48px, и вот здесь жирность создавала бы проблемы. Она привлекла бы слишком много внимания. Поэтому я в любом случае поработал бы ещё над стилем.

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

основной текст в 16px / Хабр

Для основного текста все, что меньше 16 — ужасная ошибка

Юзабилити-эксперт Оливер Рейхенштейн (Oliver Reichenstein) в статье «The 100% Easy-2-Read Standard» сказал:
«16 пикселей — не много. Это размер текста в браузере по умолчанию. Браузеры были предназначены показывать этот размер… На первый взгляд кажется многовато, но как только вы попробуете, вы сразу поймете, почему все разработчики браузеров выбрали этот размер текста по умолчанию.»

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

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

Читатели это доход

Может быть, продать товар напрямую, или предложить услугу, или просто для получения кликов. В любом случае, это бизнес-актив, и в конечном итоге он должен окупить ваши инвестиции. Он должен приносить доход.
Таким образом, каждый элемент должен быть рассчитан на достижение этой цели. В том числе и текст. Особенно текст — потому что текст убеждает посетителей сделать то, что вы хотите.
Подумайте об этом. Если вы не объясните, что люди должны делать, и почему они должны это делать, то они, конечно, и не станут этого делать. И единственный способ, чтобы сказать им это — текст. А текст подразумевает прочтение.

Важные факты о чтении

1. В 40 лет только половина света проходит к сетчатке, в отличие от 20 лет. Для 60-летних — всего лишь 20%.
   
2. Почти 9% всех американцев жалуются на слабое зрение(я не удивлюсь, если у нас в России этот показатель хуже), то есть их зрение не может быть полностью исправлены с линзами.
   
3. От расстояния, на котором мы можем читать символы, зависит разборчивость и скорость чтения. Чем больше расстояние, тем выше понимание. Самый важный фактор, который определяет, насколько это расстояние может увеличиться — размера шрифта. Вспомните биллборды, например.
   
4. Большинство людей находятся на расстоянии около 50 сантиметров от экрана компьютера. На самом деле, рекомендуемое расстояние — 60 сантиметров, потому что на этом расстоянии можно избежать чрезмерного напряжения глаз. Это гораздо больше, чем расстояние, на котором мы читали напечатанный текст — большинство людей не держат журнал на расстоянии вытянутой руки!
   
5. 16-пиксельный текст на экране примерно такого же размера, как текст, напечатанный в книге или журнале. Так как мы читаем печать довольно близко — часто всего лишь на расстоянии в несколько десятков сантиметров — там как правило, шрифт задан около 10pts. Если бы вы читали на расстоянии вытянутой руки, то это был бы такой же размер, как 16 пикселей на всех экранах:

   
   16px текст на 24′ мониторе и 12pt текст в книге

   
   16px текст на 15,4′ мониторе и 12pt текст в книге

6. В 2005 году был проведен опрос по поводу проблем веб-дизайна, и плохой шрифт получил почти в два раза больше голосов, чем остальные проблемы, две трети опрошенных жаловались на маленький размер шрифта. Если вы думаете, что ситуация с тех пор улучшилась, подумайте еще раз. Я сделал случайную выборку некоторых дизайнов SiteInspire и обнаружил, что средний размер шрифта для основного текста — жалкие 12 пикселей. Некоторые проекты даже использовали и того меньше — 10 пикселей. Ни один из шрифтов не превышал 14 пикселей. Аналогично, если вы сделаете случайные выборки из популярных сегодня Elegant Themes and ThemeForest, то обнаружите, что текст каждой выборки будет размером в 12 или 13 пикселей.

Факт: Большинство пользователей ненавидят «обычный» размер шрифта

«Но пользователи могут увеличить текст»

Веб-дизайн — это не только то, что нравится дизайнерам. Речь идет о том, чего хотят пользователи, и что поможет вам достичь целей наших клиентов.

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

16 пикселей — это не много

Теперь взгляните на футер и проверьте, не приходится ли вам наклоняться вперед к экрану, щуриться или морщиться, чтобы рассмотреть текст. Ведь его размер 11 пикселей. Если после всего этого я вас все еще не убедил, объясните мне причины в комментариях.

10 заповедей по оформлению веб-текстов

Хороший текст — это работа не только копирайтера. Восприятие информации во многом зависит от верстки страниц сайта. От оформления зависит и продвижение сайта, поведенческие факторы т.к. чем легче и приятнее читается материал, тем больше времени пользователь проведет на вашей странице. Люди не читают тексты? Читают, только когда они полезны и удобно сверстаны.

Рецепт хорошего веб-текста прост — это качественный уникальный контент и правильная верстка. Многие считают, что красивый дизайн — это необычные шрифты, много цвета и анимация, забывая при этом про элементарные правила типографики. Мы подготовили для вас 10 заповедей, которые спасут ваш сайт от нечитабельных текстов.

1. Размер шрифта — это очень важный момент, от которого напрямую зависит читабельность текста. Наиболее удобный для чтения кегль — 12-14 пунктов.

2. Больше воздуха! Полотна текста — зло, никто не хочет читать «многа букафф». Междустрочные интервалы и абзацные отступы вам в помощь. Тексту нужно «дышать», тогда его читать намного удобнее. Для этого можно использовать универсальное свойство CSS margin, оно определяет отступы со всех сторон абзаца или margin-top для отступа сверху и margin-bottom для отступа снизу. Нумерация и маркированные списки также разбивают текст и делают его более приятным для чтения.

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

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

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

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

7. Знаки препинания — это интонация текста. Правильные акценты и логические ударения очень важны для восприятия информации. Кроме основных правил пунктуации нужно запомнить еще одно: в конце заголовков не ставится точка, только восклицательный и вопросительный знак, а также многоточие. В маркированных и нумерованных списках в конце каждого пункта ставится точка с запятой, и только в конце последнего предложения — точка. Кроме того, все знаки препинания в тексте должны быть единообразны — кавычки, длинные тире, дефисы и т.д. Чтобы облегчить себе работу, воспользуйтесь Типографом от студии Артемия Лебедева.

8. Размеры строк имеют значение. Широкие полотна текста очень неудобно читать, а узкие колонки хорошо смотрятся разве что на мобильных устройствах. Поэтому лучше всего придерживаться золотой середины, оптимальная длина строки — 55-75 символов.

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

10. Неразрывный пробел (ctrl + shift + пробел в редакторе или   в HTML) — очень полезная штука, которую обязательно нужно использовать между инициалами и фамилией, датами, номерами телефонов и другой контактной информацией, чтобы избежать неправильных переносов с одной строки на другую. Удивительно, что многие копирайтеры и верстальщики не знают о такой простой вещи. Также в номерах телефонов дефисы лучше заменять пробелами — так легче воспринимать информацию. Не забывайте использовать семантические тэги <h2>, <h3>, <figure>, <cite>, <blockquote>, <aside> и т. д., с помощью которых вы можете сделать страницы сайтов более понятными для поисковых систем и браузеров.

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

Автор: Ирина Передрий, менеджер проектов ZIEX.BY

6 способов обосновать выбор шрифта в вашем дизайне — изучение дизайна пользовательского интерфейса

Сегодня я хочу поговорить о тонких способах оправдать свои решения о шрифтах . Это вещи, которые не обязательно очевидны для непрофессионалов. Если вы думаете, что типографика субъективная , прочтите эту статью. Если вы по-прежнему считаете субъективным после этого, прочтите его еще раз. (Я имею в виду не то, что вы можете создать надежные доказательства того, что определенные шрифты являются лучшими, а то, что за выбором шрифтов стоит НАМНОГО БОЛЬШЕ обоснований, чем кажется на первый взгляд).

Давайте нырнем.

1. Это лучшая версия текущего дизайна.

Я хочу установить здесь базовый уровень. Непростое решение шрифта: «Мой веб-сайт fun , поэтому я буду использовать шрифт fun для логотипа — например, Comic Sans!»

(Извините, простой пример, но здесь возникает вопрос: почему дизайнеры так ненавидят Comic Sans? Именно потому, что он так часто используется как тупой молоток THIS-IS-A-FUN-FONT-ARE-YOU -Еще-ВЕСЕЛЫЙ-ЕЩЕ, и никому не нравится, когда его бьют по голове.Так что это НЕ потому, что формы букв не соответствуют эстетическим требованиям. Это из-за инфляции использования. Сомневаюсь, что я бы даже заметил , если бы шрифт использовался в комиксах!)

Итак, вот почти мифический чайный магазин с логотипом Comic Sans:

Так как это чайный магазин , а не комикс , у нас есть проблема. Но нам не нужно все выбрасывать. Здесь есть кусочек бренда, который мы можем спасти. ПОЧЕМУ этот чайный магазин выбрал Comic Sans? Это потому, что они хотели нарисовать от руки, непринужденно и индивидуально? Теплый и уютный, но стильный и сдержанный? Как чай?!?!

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

Ответственный дизайнер может подумать примерно так.

«Хорошо, нарисовано от руки. Хммм… Это дает мне несколько идей о шрифтах. К счастью, я классифицировал скриншоты / ссылки / файлы шрифтов для каждого красивого рисованного шрифта, который я видел за последнее десятилетие, поэтому позвольте мне просто просмотреть эти 50 и посмотреть, подойдет ли какой-либо из них под бренд чайного магазина.”

И, пуф, получаем:

Cool. Это заняло почти 5 минут.

Я хочу отметить три момента в этом небольшом повороте:

• Плохие проектные решения могут быть приняты на основе наилучшего обоснования . Идея состоит в том, чтобы принять лучшее решение, часто используя точно такое же — или лучше _определенное_ обоснование.
• Помогает знать ТОННУ шрифтов . С этой целью загрузите расширение WhatFont Chrome и используйте его, чтобы начать определять каждый шрифт, который вам нравится, на любом веб-сайте, который вы посещаете.Когда вы загружаете новый шрифт, классифицируйте его в FontBook или другом эквиваленте Windows.

Кстати, этот шрифт выше — Espa из замечательной литейной компании Wild Type. Доступно по невысокой цене , совершенно бесплатно!

Имея в виду этот и другие примеры, давайте поговорим о других способах обоснования вашего выбора шрифта.

2. Соответствует прилагательным вашего бренда

Один изящный дизайнерский трюк, который я использовал выше, заключался в том, чтобы описать бренд, который я хотел, с прилагательными.Это ключ. ВСЕГДА стоит записывать прилагательные, описывающие ваш бренд, в начале проекта. Что вы хотите, чтобы пользователь чувствовал себя ? Что вы хотите, чтобы они думали о вашей компании или вашем проекте? Если вы думаете, что это бессмысленное упражнение, которое не стоит вашего времени… жесткое печенье.

Необязательно быть этим парнем…

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

Давайте проверим несколько шрифтов и посмотрим, какие прилагательные приходят на ум.

Почему Omnes кажется мягким? Потому что буквально все углы закруглены . Сравните с DIN, в котором все ровно. Даже закругленные углы буквы «D» выглядят достаточно изогнутыми, чтобы отличить букву «D» от прямоугольника .

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

Что мне нравится в этих примерах, так это то, что НИ ОДИН из них не является безумно перегруженным шрифтом. Нет Comic Sans / Papyrus и т. Д. в связке. Все они довольно уравновешенные и нормальные, но при этом говорят совершенно разные вещи.

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

Design Facts имеет немного больше книжной атмосферы. Ботанический и четкий. Для них Crimson Text отлично подходит.

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

3. Его история или вдохновение соответствуют вашему бренду

В последнем разделе я сказал, что вам не нужно знать тонну о шрифте, чтобы начинать маркировать его прилагательными бренда. Теперь все меняется. Мы входим в область, где помогает получить немного больше информации о том, как использовались шрифты.

История может предоставить множество отличных оправданий для использования шрифта.

Например, некоторые шрифты просто старые ПОДРАЗУМЕВАЮТСЯ за определенный период времени. Не универсально как таковое, но достаточно сильно, чтобы вести разговор под поверхностью.

Futura — неофициальный шрифт 60-х годов.

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

Уэс Андерсон использует Futura — наряду с винтажными костюмами и раскраской — чтобы передать временной период своих фильмов (который, IMO, является своего рода неконкретной ретро-эрой).

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

Проверьте Брэндона Гротеска. Супер популярно прямо сейчас. В нем определенно присутствует атмосфера Roaring Twenties .

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

Как бы то ни было, некоторые из этих ассоциаций настолько тонкие, что, когда вы только начинаете, ДЕЙСТВИТЕЛЬНО помогает прочитать все, что можно о шрифтах, которые вам нравятся. Действительно, если мы посмотрим на Fonts.com «Историю шрифтов» Брэндона Гротеска, они упоминают 20 и 30 во втором предложении .

Хорошо, еще один пример. Предыдущие два примера — Futura и Brandon Grotesque — ссылаются на фактических периодов времени .Но вы также можете сослаться на использования .

Например, я упоминаю этот пример в Learn UI Design, но несколько ранних шрифтов без засечек, которые появлялись в газетах, назывались «гротескными» — что, да, означает уродливые, поскольку они убрали все эти красивые шрифты с засечками. Atlas Grotesk — это современный подход в этой области (выпущен в 2012 году), но вы можете оправдать его использование в заголовках, зная, что это современный вариант классического выбора.

И это именно то, что делает FiveThirtyEight:

Так что покопайтесь в разделе «об этом шрифте» на разных сайтах. Здесь у Typewolf и Fonts.com есть отличный выбор; другие сайты имеют более ограниченный выбор. Это много работы? Да, так и есть. Но если вы собираетесь заниматься дизайном на долгие годы, наладить рабочие отношения со шрифтами — это достойное вложение времени.

4. Обладает правильными характеристиками

Вы можете не думать о шрифтах как о «особенностях», но кто знает — вы могли ошибаться и во многих других вещах!

шрифтов есть функции, и самая основная функция — ВЕС.Мы говорим «полужирным шрифтом», «курсивом» и т. Д.

• Для любого основного шрифта потребуется обычный, курсив, полужирный и полужирный курсив — если у него нет этих четырех значений, НЕ используйте его в качестве основного шрифта.
• Любой шрифт, используемый как ЕДИНСТВЕННЫЙ шрифт вашего бренда. должен иметь еще больший вес: легкий, тонкий, тяжелый, черный, очень жирный и т. Д. Имена различаются, но суть в следующем: вы хотите, чтобы эта гибкость была доступна, если все с веб-сайта на визитные карточки и корпоративный шваг украшен теми же буквами.
• Чем на меньше шрифта, тем меньше за вычетом важных весов. Шрифтов используются ооо только для заголовков или ооо только для подписей к статьям или что-то еще? Круто. Даже единичный вес может быть нормальным. Но вес — не единственная особенность. Вот еще несколько примеров, которые следует учитывать при выборе шрифта:

Табличные цифры

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

Вот тут и появляются табличные цифры.

Некоторые шрифты сразу же имеют табличные цифры. Все числа моноширинные, и если вы наберете «11110000», вы поймете, правда ли это. Другие шрифты, однако, имеют табличные цифры как функцию OpenType.По крайней мере, в Интернете их использование — это лишь малоизвестное свойство CSS.

Маленькие шапки

Это становится довольно необычным, но о нем стоит упомянуть. Вот в чем проблема. Если вы хотите, чтобы какой-то текст выглядел обособленным или отличным от текста вокруг него, у вас есть множество способов сделать это — курсив, полужирный шрифт, кавычки и т. Д. Вы также можете, например, написать что-то ВСЕМИ ЗАГЛАВНЫМИ БУКВАМИ . Проблема, однако, в том, что кажется намного более интенсивным, чем обычный текст.Итак, шрифтовые дизайнеры, прекрасные ребята, изобрели маленьких заглавных букв . Все акценты, никаких стрессов.

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

Кроме того, если вы хотите, чтобы использовал маленькие заглавные буквы, но в вашем шрифте их нет (в большинстве своем нет), вы можете подделать их. Одна часть верхнего регистра, одна часть межбуквенного интервала, одна часть составляет высоту на или чуть выше x-высоты текста.Единственная проблема? Ваши фальшивые заглавные буквы будут на тоньше на , чем окружающий текст. Неуклюжий? Что ж, возможно, нет, если у вас средний вес, вы можете использовать его , всего на толще, чем нормальный вес!

Персонажи с ударением

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

По состоянию на последнее обновление (май 2020 г.) iPad обычно имеет более низкую плотность пикселей, чем iPhone.Поскольку у iPad на пикселей на дюйм () меньше , все, что имеет размер в «пикселях» или «точках», на iPad будет на немного больше на . Поскольку мы держим iPad немного дальше от глаз, чем iPhone, это хорошо уравновешивается — вы можете сохранить почти одинакового размера шрифта на iPad и iPhone . Так что начните любую типографику для iPad, прочитав раздел iPhone выше.

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

Итак, хотя некоторые приложения все еще используют заголовки 17pt в стиле iPhone…

Остальные крупнее.

Итак, в целом, для iPad вы будете следовать многим стилям iPhone, но с немного большим пространством для творчества в ваших заголовках.

Руководство Сан-Франциско

Шрифт iOS по умолчанию — San Francisco. Вы можете скачать San Francisco бесплатно. Необязательно , чтобы использовать San Francisco при создании приложения для iOS, , но если вы хотите, чтобы оно имело внешний вид iOS по умолчанию, тогда SF — ваш новый лучший друг.

Apple хочет, чтобы вы были куклой и следовали нескольким дополнительным правилам при использовании Сан-Франциско.

Во-первых, использует SF Pro Display с размером шрифта 20 или выше . Используйте SF Pro Text только для основного текста и меньше.

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

1. Отрегулируйте вручную интервал между символами в зависимости от размера шрифта в соответствии с таблицей ниже
2. Используйте стили текста непосредственно из библиотеки эскиза дизайна пользовательского интерфейса Apple iOS (косая черта Photoshop, косая черта XD)
3. Используйте этот удобный плагин Sketch для автоматической настройки правильного интервала между символами SF в зависимости от размера шрифта.

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

San Francisco — шрифт по умолчанию для iPhone и iPad. Поэтому, если вы его используете, лучше всего знать об этих ограничениях. Однако вы, конечно, можете создавать приложения для iOS с любым шрифтом. Следите за тем, чтобы другие изображения выглядели больше или меньше или были менее разборчивыми даже при таком же размере.

Перейти к главе 2: Требования к размеру шрифта Android / Material Design

Одна последняя записка 😎

Если вы здесь впервые, возможно, вас заинтересует:

• Learn UI Design, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
• The Design Newsletter, информационный бюллетень для более чем 40 000 человек с оригинальными статьями по дизайну, цель которых — дать вам тактические советы по улучшению ваших навыков UX / UI.

Некоторым людям есть что сказать о информационном бюллетене.

Благодарность за информационный бюллетень по дизайну

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

Триша Литтлфилд
Основатель, TheSimpleWeb

Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт возьми, это чертовски блестяще », и прочитал все это.

Жан-Филипп
UX-стратег, внештатный сотрудник

Подписано более 40 000 человек.
Нет спама. Отпишитесь в любое время.

Справочное руководство по типографике в мобильном веб-дизайне — Smashing Magazine

Об авторе

Сюзанна Скакка — бывший разработчик WordPress, тренер и менеджер агентства, а теперь работает внештатным копирайтером. Она специализируется на маркетинге, веб … Больше о Сюзанна ↬

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

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

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

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

Понимание основ типографики в современном веб-дизайне

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

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

Типографская терминология

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

Типографика: Этот термин относится к методу , используемому для стилизации, форматирования и упорядочивания «печатного» (в отличие от рукописного) текста.

Гарнитура: Это система классификации, используемая для обозначения семейства символов. Итак, это будет что-то вроде Arial, Times New Roman, Calibri, Comic Sans и т. Д.

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

Размер: Существует два способа указать размер (или высоту) шрифта: размер текстового редактора в пунктах или размер веб-дизайна в пикселях. Говоря о мобильном веб-дизайне, мы используем пиксели.

Вот построчное сравнение различных размеров шрифта:

Как вы можете видеть в WordPress, размеры шрифта важны, когда дело доходит до установления иерархии в тексте заголовка:

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

Вот пример параметров, которые вы можете выбрать в настройщике темы WordPress:

Кернинг: Это относится к промежутку между двумя буквами.Его можно отрегулировать, чтобы получить более эстетичный результат, а также улучшить читаемость. Для таких корректировок вам понадобится программное обеспечение для дизайна, такое как Photoshop.

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

Чтобы вы почувствовали, чем это отличается, вот пример из Mozilla о том, как использовать отслеживание для изменения межбуквенного интервала:

Межстрочный интервал: Межстрочный интервал или межстрочный интервал — это расстояние между базовыми линиями текста (нижняя строка, на которой располагается шрифт).Как и отслеживание, это можно настроить, чтобы исправить проблемы с плотностью.

Если вы какое-то время пользуетесь текстовым редактором, то вы уже знакомы с ведущим. Текст с одинарным интервалом. Текст с двойным интервалом. Даже текст через 1,5 интервала. Это ведущее.

Роль типографики в современном веб-дизайне

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

Вот некоторые из способов, которыми типографика влияет на ваших конечных пользователей:

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

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

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

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

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

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

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

Типографика для мобильного веб-дизайна: что нужно знать

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

Я не хочу сказать, что рисковать и использовать систему по умолчанию от Google или Apple — лучший вариант. В конце концов, вы так много работаете над созданием уникальных, креативных и привлекательных дизайнов для ваших пользователей. Зачем вам сейчас бросать полотенце и просто расклеивать Roboto по всему мобильному сайту?

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

1. Размер

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

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

Nielsen Norman Group сообщила об исследовании Массачусетского технологического института, которое касалось именно этого вопроса. Что вы можете сделать с текстом, который есть у пользователей только для просмотра ? Другими словами, какой размер можно использовать для коротких строк текста заголовка?

Вот что они обнаружили:

Короткие, удобные для просмотра строки текста приводят к более быстрому чтению и большему пониманию, когда:

• Они больше по размеру (в частности, 4 мм, а не 3 мм).
• Они все заглавными буквами.
• Ширина букв обычная (а не уплотненная).

Итого:

Для точного чтения строчных букв требовалось на 26% больше времени, чем для прописных, а для сжатого текста требовалось на 11,2% больше времени, чем для обычного. Также наблюдались значительные эффекты взаимодействия между регистром и размером, предполагая, что отрицательные эффекты строчных букв усугубляются при использовании небольшого размера шрифта.

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

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

Flywheel Sports, с другой стороны, отлично иллюстрирует этот момент.

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

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

2. Цвет и контраст

Цвет, как правило, является важным элементом веб-дизайна. Вы можете многое рассказать посетителям, выбрав правильную цветовую палитру для дизайна, изображений и, да, вашего текста. Но важен не только основной цвет шрифта, но и контраст между ним и фоном, на котором он расположен (о чем свидетельствует моя заметка о Flywheel Sports выше).

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

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

В Руководстве по обеспечению доступности веб-контента (WCAG) есть четкие рекомендации относительно того, как решить проблему цветового контраста в разделе 1.4.3. Как минимум, WCAG предлагает установить контраст 4,5: 1 между текстом и фоном для оптимальной читаемости. Из этого правила есть несколько исключений:

• Для текста размером 18 пунктов или полужирным шрифтом 14 пунктов требуется контраст только от 3 до 1.
• Текст, который не отображается в активной части веб-страницы, не отображается. Не нужно соблюдать это правило.
• Контраст текста в логотипе может быть установлен по усмотрению дизайнера.

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

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

Чтобы решить эту проблему и убедиться, что у вас достаточно высокий контраст для ваших шрифтов, используйте инструмент цветовой пипетки, встроенный в ваш браузер, например, для Firefox или Chrome.Просто наведите пипетку на цвет фона (или шрифта) на вашей веб-странице, и пусть она скажет вам, какой сейчас фактический цветовой код.

Вот пример этого в действии: 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-дюймовом мобильном устройстве. Конечно, эти данные немного устарели, поскольку большинство смартфонов сейчас имеют размер от пяти до шести дюймов:

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

Это означает для вас две вещи:

1. Вам абсолютно необходимо вырезать лишнее на мобильном телефоне. Если это означает создание полностью отдельного и более короткого набора контента для мобильных устройств, сделайте это.
2. Будьте осторожны с наводкой.

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

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

Веб-сайт Hill Holliday не только вдохновляет на то, как немного «сойти с ума» от мобильной типографики, но и проделал фантастическую работу по использованию ведущей линии для облегчения чтения больших объемов текста:

Различные ресурсы дадут вам различные рекомендации по созданию интервала для мобильных устройств. Я встречал предложения по размеру от 120% до 150% от размера шрифта. Поскольку при разработке для мобильных устройств вам также необходимо учитывать специальные возможности, я предлагаю вам следовать рекомендациям WCAG:

• Расстояние между строками должно быть 1,5 (или 150%, в зависимости от того, какое соотношение вам подходит).
• В таком случае интервал между абзацами должен быть равен 2.5 (или 250%).

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

5. Допустимые шрифты

Прежде чем я расскажу о том, что делает шрифт приемлемым, я хочу сначала посмотреть, какие шрифты используются по умолчанию в Android и Apple. Я думаю, что мы можем многому научиться, просто посмотрев на эти варианты:

Android
Google использует два шрифта для своих платформ (как для настольных компьютеров, так и для мобильных устройств): Roboto и Noto.Робото является основным по умолчанию. Если пользователь посещает веб-сайт на языке, который не поддерживает Roboto, тогда Noto является вторичной резервной копией.

Это Робото:

Также важно отметить, что Roboto предлагает на выбор несколько семейств шрифтов:

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

Apple
Apple имеет свой собственный набор рекомендаций по типографике для iOS, а также собственный системный шрифт: San Francisco.

По большей части вы видите то, что получаете в Сан-Франциско.Это просто базовый шрифт без засечек. Если вы посмотрите на рекомендуемые Apple предложения по настройкам шрифта по умолчанию, вы также обнаружите, что они даже не рекомендуют использовать жирную стилизацию или диковинные размеры, ведущие или отслеживающие правила:

Как и почти все остальное, что делает Apple, формула типографики очень проста. И знаешь, что? Это действительно работает. Вот как это работает на веб-сайте Apple:

Как и в случае с системным шрифтом Google, Apple выбрала простой классический шрифт. Хотя это может не помочь вашему сайту выделиться среди конкурентов, оно никогда не повлияет на читаемость или разборчивость вашего текста. Это также будет хорошим выбором, если вы хотите, чтобы ваши визуальные эффекты производили большее впечатление.

Мои рекомендации

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

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

2. Используйте только шрифт без засечек или шрифт с засечками. Если на вашем настольном веб-сайте используется декоративный или рукописный шрифт, замените его чем-нибудь более традиционным для мобильных устройств.

   Тем не менее, совсем не обязательно игнорировать декоративные гарнитуры. В примерах из Hill Holliday или Flywheel Sports (как показано выше) вы можете увидеть, как небольшие штрихи нестандартного нетрадиционного шрифта могут добавить немного изюминки.

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

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

4. Избегайте гарнитуры, в которой нет четкого набора символов.Например, сравните, как заглавная «i», строчная «l» и цифра «1» отображаются рядом друг с другом. Вот пример шрифта Myriad Pro с веб-сайта Typekit: шрифт

   Myriad Pro в действии. (Источник: Typekit) (превью в большом разрешении)

   В то время как цифра «1» не вызывает особых проблем, прописная «i» (первая буква в этой последовательности) и строчная «l» (вторая) слишком похожи. Это может вызвать нежелательное замедление чтения на мобильном телефоне.

   Также не забудьте проверить, как ваш шрифт обрабатывает сочетание букв «r» и «n» рядом друг с другом.Сможете ли вы различить каждую букву или они сливаются вместе, как одна неразличимая единица? У мобильных посетителей нет времени останавливаться и выяснять, что это за символы, поэтому убедитесь, что вы используете шрифт, который дает каждому символу свое собственное пространство.

5. Используйте шрифты, совместимые с максимально возможным количеством устройств. Лучшими вариантами будут: Arial, Courier New, Georgia, Tahoma, Times New Roman, Trebuchet MS и Verdana.

   Список системных гарнитур по умолчанию для различных мобильных устройств.(Источник: tinytype) (превью в большом разрешении) Другой вид таблицы, который включает некоторые гарнитуры, поддерживаемые Android. (Источник: tinytype) (большой превью)

   Я думаю, что веб-сайт Typeform является хорошим примером того, где используется «безопасный» выбор шрифта, но это не мешает им удивлять посетителей своим сообщением или дизайном. Эффектный шрифт

   Typeform не имеет ничего общего с самим шрифтом. (Источник: Typeform) (превью в большом разрешении)

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

6. Если вы чувствуете себя комфортно с мобильной типографикой и хотите немного расшириться, взгляните на этот список лучших веб-безопасных шрифтов от WebsiteSetup. Здесь вы обнаружите, что большинство вариантов — это ваши основные шрифты с засечками и без засечек. В нем определенно нет ничего захватывающего или потрясающего, но он даст вам возможность поиграть, если вы хотите добавить немного больше изюминки к своему мобильному типу.

Заключение

Знаю, знаю. Мобильная типографика — это не весело.Но веб-дизайн не всегда сводится к созданию чего-то захватывающего и ультрасовременного. Иногда соблюдение практичных и безопасных решений — это то, что в конечном итоге гарантирует вам лучший пользовательский опыт. И это то, что мы наблюдаем, когда дело касается мобильной типографики.

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

Как выбрать правильный вариант для отличного UX

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

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

Когда я взглянул на меню, я был приятно удивлен увиденным.

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

Меню состояло из нескольких панелей, каждая с большой красной вкладкой вверху и белым текстом, в котором упоминался тип еды или фраза (например, «стороны» или «избранные»), подчеркивающая, чего ожидать от панели меню ниже.

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

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

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

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

Но если у вас нет зрения, близкого к 20/20, вы можете прищуриться и попросить кого-нибудь прочитать вам имена. Другие могут просто уйти, не сказав ни слова.

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

Почему размер шрифта имеет значение

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

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

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

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

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

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

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

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

Иногда важен не только размер

У некоторых из нас вполне могут быть шрифты основного текста в диапазоне от 20px до 24px и заголовки размером 30px — 70px , но это не всегда означает, что типографика вашего сайта безупречна.

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

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

Так почему мы обычно уменьшаем размер шрифта?

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

Как выглядят эти сценарии? Как мы часто попадаем в ловушку неразборчивых размеров шрифтов на веб-сайтах? И как это исправить?

Давайте посмотрим.

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

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

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

Однако, если вы знаете, что виновны в использовании этой техники, особенно на своих целевых страницах, вы можете рассчитывать на конверсии сами.

В одном тематическом исследовании Click Laboratory одной из основных задач клиента было увеличение размера шрифта в различных областях своего веб-сайта.

Они протестировали увеличение размера шрифта до 13 пунктов и добавили небольшой дополнительный интервал между каждой строкой (известный как высота строки).«Это простое изменение улучшило показатель отказов на 10%, показатель выхода с сайта на 19%, количество страниц за посещение на 24% и впечатляющее увеличение коэффициента конверсии формы на 133%».

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

Имея смартфон почти у каждого в кармане, не секрет, что мы живем в мире мобильного Интернета.

Теперь, когда Google планирует в этом месяце повысить рейтинг всех веб-сайтов с мобильных устройств по сравнению с их настольными компьютерами, потребность в мобильной оптимизации как никогда высока.

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

Но в некоторых случаях такие размеры не слишком приятны для глаз.

Выше приведен пример страниц продуктов Monotypes. На мобильных устройствах у них есть абзацы и небольшие заголовки размером от 10 до 12 пикселей, что на самом деле считается слишком маленьким по стандартам Google.

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

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

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

Давайте посмотрим на другой пример.

Slack используется оглавление. Когда вы раскрываете его меню на мобильном телефоне, вы видите другие разделы шрифта размером 14 пикселей. Это хорошо работает, поскольку их заголовки могут состоять из двух-трех строк.

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

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

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

Так зачем идти дальше?

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

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

Удобство использования веб-сайта говорит нам, насколько «эффективно, рационально и удовлетворительно его посетители или пользователи могут видеть или изучать» веб-сайт, тогда как доступность относится к тому, как пользователи воспринимают, понимают, перемещаются и взаимодействуют с веб-сайтом.

Например, изобразите две кнопки: размер шрифта одной составляет 12 пикселей, а другой — 16 пикселей.

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

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

Это важно, потому что типографская иерархия подсознательно направляет читателя, помогая ему определить, какие пункты следует прочитать в первую очередь, а какие — просто вспомогательные утверждения.

Но более важная концепция, с которой помогают большие размеры шрифта, — это соответствие ADA онлайн.

Основным принципом соответствия ADA является «обеспечение равного доступа к Интернету для всех, включая людей с ограниченными возможностями». Это означает обеспечение постоянного и равного опыта для людей, независимо от их слуховых и зрительных способностей. Может ли кто-то с нарушением зрения (частичным или полным) найти способ заполнить форму консультации, загрузить ресурс и т. Д.?

Если ваш веб-сайт полностью доступен, они должны это сделать.

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

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

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

Хотя в редких случаях более крупные шрифты могут казаться неуклюжими, на самом деле было обнаружено, что они помогают сократить время чтения. Согласно исследованиям Университета Пайам Нур и IBM / Google, по мере увеличения размера шрифта читатели также демонстрируют немного более высокую скорость чтения.

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

Чем выше амплитуда, тем ближе вы к «беглому просмотру», а не к чтению строка за строкой.

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

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

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

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

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

Многие также хорошо знакомы с исследованием 2006 года, проведенным Nielsen Norman Group , в котором объясняется, как пользователи читают по образцу «F», прежде чем решить, хотят ли они замедлить темп и продолжить чтение содержимого.

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

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

Ответ … это зависит .

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

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

Ниже приведено изображение из статьи в блоге (которая больше не существует) от Typecast, в которой показаны размеры шрифтов для h2-h5, абзацев и цитат.

Вы заметите, что H5 и H6 были опущены ниже, но это потому, что это, как правило, теги заголовков, которые не используются так часто и имеют меньший размер шрифта, чем основной текст, и используются реже, чем обычно (сноски, авторское право Информация.так далее).

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

Есть некоторые тенденции в отношении размеров шрифтов. Например, самый популярный шрифт абзаца — 16 пикселей, потому что он примерно соответствует стандартным 12 пунктам, используемым в печатных материалах.

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

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

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

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

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

Вес и иерархия таких слов, как «Анализ новостей» и «Ежедневный график», помогают сначала обратить внимание на эти теги, прежде чем читать статьи, темы или заголовки, относящиеся к каждому из них.

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

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

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

Использование веса и размера шрифта в заголовке Wired, как и в других примерах до сих пор, позволяет пользователю получить представление о том, что он собирается прочитать.

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

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

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

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

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

8.

На всей странице подписки The Skimm заголовки обозначают некоторые из основных элементов информационного бюллетеня, что является важным элементом для тех, кто скептически относится к добавлению еще одного информационного бюллетеня в свой почтовый ящик.

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

Fast Company сохраняет свою целевую страницу для подписки на журнал короткой и по существу. Более темные тона h2 и маркеров помогают пользователям сначала понять, на что идут эти 19,99 доллара в месяц.

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

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

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

Самое главное — начать с малого. Нет необходимости вносить радикальные изменения на вашем сайте, только это может иметь негативное влияние.

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

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

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

7 правил веб-типографики.Хотите безупречный веб-сайт? Начать… | Джессика Тяо

Хотите, чтобы веб-сайт выглядел безупречно? Начните с веб-типографики, секрета убийственного веб-сайта.

Вы когда-нибудь чувствовали себя подавленными при мысли о создании веб-сайта?

Благодаря 100 000 различных шрифтов и 16,8 миллионов цветов в Интернете возможности практически безграничны.

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

Если вас одолевает мысль о создании веб-сайта, вы не одиноки.

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

Приступим.

1. Выберите шрифт.

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

Какие ваши любимые веб-шрифты?

2. Измените размер шрифта

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

Так как же определить размер шрифта?

Начните с основного текста, измените размер шрифта на 15–25 пикселей.

Вот пример первой главы Гарри Поттер и философский камень. Установлен шрифт Proxima Nova.

Слева установлен размер шрифта по умолчанию 12 пикселей. Такой маленький размер шрифта утомит глаза. После увеличения размера шрифта до 15 пикселей читать Гарри Поттера стало намного лучше.

Разве размер шрифта 15 пикселей не кажется вам лучше?

3. Масштабируйте заголовки

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

Измените основной заголовок на 180–200% основного текста. Если у вас есть дополнительный заголовок, измените его до 130–150% основного текста.

4. Установите межстрочный интервал

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

Чтобы упростить чтение блока текста, установите междустрочный интервал равным 120–145% от размера точки.

Внутри эскиза перейдите к левой панели: Интервал> Линия

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

Tracking влияет на расстояние между символами в группе текста. Что использовать? В Sketch я оценил это, используя эти два правила:

• Используйте меньший интервал для больших размеров шрифта
• Используйте больший интервал для заголовков

В Photoshop Скотт Баттерик придерживается опции «Metrics».

Кернинг — это расстояние между двумя символами.

В Sketch вы можете использовать поле ввода «Символ». Вот быстрый GIF-файл о том, как изменить трекинг и кернинг:

6. Добавление пробелов между заголовками и основным текстом

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

При установке заголовков и основной копии пустое пространство должно быть 15, 20 или 30 пикселей.

7. Используйте длину строки 45–90 символов.

Другой лучший способ — ограничить ширину текстового блока.

Оптимальная длина строки для страницы с одним столбцом составляет 45–90 символов. Идеальная ширина текстового блока — 66 символов.

Если вы используете более 90 символов в строке, ваши читатели будут ошеломлены. Они откажутся от текста.

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

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

Заключение

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

С этими 7 советами вы на пути к красивой веб-типографике!

дизайн сайта — есть ли оптимальный размер шрифта?

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

Наука об искусстве

Существующие исследования определили, что оптимальная скорость чтения для нормально зрячих людей при максимальном контрасте шрифта — это высота по оси x между 0,2 ° и 2 ° угла обзора. X-высота — это фактический вертикальный размер строчной буквы x шрифта.Очевидно, что фактический размер шрифта будет зависеть от расстояния просмотра, но, к счастью, эталонный пиксель CSS — пикселей, — основан на угле обзора. Угол обзора 0,2 ° известен как критический размер печати, поскольку это точка, в которой достигается максимальная скорость чтения. (Выше 2 ° идет обратно вниз.)

Один пиксель равен 0,0213 градуса или 1,278 угловой минуты. Это основано на устройстве с плотностью пикселей 96 точек на дюйм на расстоянии 28 дюймов. Таким образом, производители устройств могут использовать эталонный пиксель для установки размера на основе предполагаемого / ожидаемого визуального расстояния.Это обсуждается в стандартах W3C CSS. Производители устройств используют эталонный пиксель для установки фактического размера растеризации в зависимости от предполагаемого расстояния просмотра. 16 пикселей не обязательно будут 16 пикселей устройства. Например, на iPhone с соотношением пикселей 2: 1 это будет 32 пикселя устройства.

Таким образом, критическим размером печати для Интернета является высота по оси x 9,4 пикселя. В зависимости от конкретного дизайна шрифта это относится к шрифту от 17 до 20 пикселей. Это привело к появлению стандартов доступности, которые указывают, что минимальный желаемый размер шрифта составляет 18 пикселей.

Но подождите, это еще не все

Также есть критический уровень контрастности . Вышеупомянутые размеры шрифта относятся к максимальной контрастности. Но как насчет более низких контрастов? Многие дизайнеры серьезно влияют на удобочитаемость своих сайтов, используя менее контрастные цвета. Частично это связано с неспособностью WCAG 2.0 указать правильные контрасты относительно пространственной частоты. 4,5: 1 больше, чем необходимо для большого толстого заголовка, но 4,5: 1 недостаточно для небольшого тонкого основного текста.

Для нормального зрения критический контраст может составлять всего 10% для больших жирных заголовков на пике функции контрастной чувствительности. Но на очень высоких пространственных частотах мелких тонких шрифтов контраст должен быть в 20+ раз выше. См. Следующую диаграмму, где весь текст имеет один и тот же цвет CSS (и это даже не обсуждает способ, которым сглаживание искажает контраст текста до неузнаваемости).

Таким образом, размер шрифта, контраст и ряд других конструктивных особенностей работают вместе, обеспечивая «наиболее читаемый» текст.Тем не менее, размер шрифта 12 пикселей, который рекомендуют многие плакаты в этой ветке, шокирующе мал, и откуда они взяли эту цифру, остается только догадываться. Вы можете использовать что-то вроде 12 пикселей для, возможно, уведомления об авторских правах или чего-то, что вы не хотите, чтобы кто-либо читал, но 12 пикселей никоим образом не подходят для текста содержимого.

Это символы

Официальная рекомендация — минимальный размер 18 пикселей, тем не менее, некоторые шрифты, такие как Verdana (шрифт, предназначенный для использования в Интернете), могут работать до 16 пикселей.Но Times New Roman никогда не следует устанавливать меньше 18 пикселей, так как он имеет очень маленькую высоту по оси x и, как правило, плохую читаемость (спасибо Microsoft, тьфу). Для другого шрифта, который Microsoft исказил, давайте постараемся никогда не использовать «Courier New», где Microsoft взяла то, что было обычно читаемым моноширинным шрифтом, а затем сделала его слишком тонким и легким. Мол, о чем они думали?

Для некоторых общих соображений по выбору шрифта для обеспечения доступности и удобочитаемости у меня есть этот предварительный PDF-файл в моей учетной записи исследовательского портала, который вы можете скачать бесплатно: https: // www.researchgate.net/publication/336679010_Evaluating_Fonts_Font_Family_Selection_for_Accessibility_Display_Readability

Более важным, чем то, что вы устанавливаете в качестве размера шрифта, является то, что вы позволяете пользователям МАСШТАБИРОВАТЬ текст до любого размера, который они хотят, без нарушения содержимого. Текущий стандарт определяет масштабирование без нарушения 200%, но этого недостаточно. 500% намного разумнее с точки зрения пользователя.

СЧИТАТЬ:

20/20 — среднее зрение. Размеры шрифта, о которых я упоминал выше (18 пикселей), основаны на среднем количестве пользователей 20/20.Для того же восприятия 20/40 требуется ВДВОЕ больше этого размера. Пользователям 20/200 потребуется ДЕСЯТЬ РАЗ такого размера (т.е. они могут захотеть увеличить масштаб на 1000%). Я упоминаю как минимум 500%, поскольку это учитывает последствия того факта, что на странице используются более крупные шрифты, а также физический размер устройства.

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

А пока просто учтите, что большая часть людей, читающих ваш сайт, не имеет такого же хорошего монитора, как ваш, и не имеет такого же хорошего зрения, как ваше.Если вы хотите и имеете представление о том, как ваш сайт может быть замечен некоторыми менее удачливыми людьми, возьмите дешевый, бесполезный, маленький монитор с низким разрешением (он может быть у вас в хранилище) и установите его на расстоянии от 3 до 4 футов (т.е. метр). Вы можете читать свой сайт? Теперь увеличьте масштаб текста — ваш сайт ломается из-за размеров маленького монитора?

Это проблема, с которой многие пользователи сталкиваются со многими сайтами. Тот факт, что у вас есть зрение 20/15 и красивый 32-дюймовый дисплей сетчатки, не означает, что ваши пользователи имеют почти такой уровень визуальной адаптации.

— Энди

Размер шрифта и SEO | SiteGuru

Содержание

Да, это влияет на ваше SEO. Фактически, простая настройка страницы настроек вашей темы или таблицы стилей может улучшить SEO вашего веб-сайта, RPM и удобство работы пользователей так, как вы не могли себе представить. Не только это, но и изменение размера шрифта — это просто и быстро. Если вы знакомы с текстовыми редакторами или миром печати, у вас не будет проблем с настройкой размера шрифта.

Размер шрифта в Интернете

Мир Интернета отличается от мира печати и текстовых процессоров во многих отношениях, и шрифты ничем не отличаются.По этой причине очень важно определять размер шрифта в терминах, специфичных для Интернета.

Единица измерения

Размер шрифта в Интернете и в других местах измеряется по-разному. Часто шрифт измеряется в pt (пунктах) и px (пикселях). Размеры шрифта также можно измерить следующими способами:

Хотя пиксели и точки являются общими единицами измерения, они не равны друг другу, и при переключении с любого из них требуется преобразование. Как правило, на большинстве устройств размер 12 pt равен 16 пикселям.

Проценты, em и rem являются относительными размерами шрифта (относительно базового шрифта: 12 pt или 16 пикселей) и являются предпочтительным методом в адаптивной веб-разработке, поэтому есть вероятность, что ваша тема или дизайн их используют. Теоретически, если установить 100%, 1rem или 1em, это то же самое, что выбрать 12 pt или 16 пикселей для большинства устройств.

С этими тремя размерами шрифта легче определять списки, заголовки и другие элементы, относящиеся к основному тексту. На мгновение вы можете установить заголовок на 1.5em или 150%, что делает их на 50% больше.

Бесплатная пробная версия SiteGuru

Проведите полный SEO-аудит вашего сайта

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

Какие размеры шрифтов лучше всего подходят для повышения RPM и SEO?

Увеличение размера шрифта для SEO и ваших читателей

Размер шрифта хорош не только для SEO, но и для ваших читателей, и не рекомендуется исключать один из вариантов.Так что имейте это в виду при выборе правильного размера шрифта для своего сайта. И учитывая, что сегодня Google использует индекс, ориентированный на мобильные устройства, для индексации веб-контента; необходимо убедиться, что ваш текст удобно читать на мобильных устройствах.

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

Инструмент Google Lighthouse поможет вам измерить шрифты вашего веб-сайта, чтобы определить его удобство для мобильных устройств, что хорошо при расчете вашей SEO-оценки.В настоящее время этот инструмент рекомендует 16 пикселей в качестве базового шрифта для сайта. Это означает, что основной текст вашего шрифта должен быть установлен минимум на 16 пикселей или 12 пунктов.

Фактически, именно здесь руководство по стилю Google Material Design также устанавливает базовый размер шрифта в типографике. Итак, для SEO вам потребуется шрифт размером не менее 16 пикселей или 12 пунктов, чтобы ваш сайт считался оптимизированным для мобильных устройств, что имеет решающее значение для индекса, ориентированного на мобильные устройства.

Вы можете пойти еще дальше?

Да, можно. Мы видели, что веб-сайты, использующие большие шрифты, работают очень хорошо.Лучшее, что есть в больших шрифтах, — это хорошо выглядеть и обеспечивать удобство использования.

Бонус! Все темы и шрифты будут выглядеть по-разному в разных размерах.

Если вы не уверены, какой размер шрифта лучше всего подходит для вас, не стесняйтесь экспериментировать, но помните, что Google доволен размером 16 пикселей.