Шрифт 16: основной текст в 16px / Хабр

Содержание

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

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

Перевод предоставлен

блогом о веб-дизайне

Naikom

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

Я знаю, о чем вы сейчас думаете: «Он только что сказал 16 пикселей? Для основного текста? Ужасно много! 12 пикселей идеально подходит для большинства веб-сайтов».

Я бы хотел убедить вас в обратном.

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

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

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

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

Если вы создаете сайт для кого-то — даже для себя — скорее всего, вашей целью является заработать деньги.

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

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

И единственный способ, чтобы сказать им это — текст. А текст подразумевает прочтение.

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

Есть некоторые факты, которые имеют определяющее значение для таких вопросов, как

читатели, чтение и понимание,

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

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

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

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

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

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

в два раза больше

, чем глаза 20-летнего. Если их возраст приближается к 60, глаза должны работать в четыре раза больше.

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

прочитать текст размером меньше чем 16 пикселей

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

Короче говоря, среднестатистического пользователя чтение напрягает.

Чем сложнее прочитать ваш текст, тем меньше смысла будет понято. 10 пикселей будут бесполезны. 12 пикселей — все равно слишком мало для большинства читателей. Даже 14 пикселей могут отпугнуть посетителей, которые бы в противном случае остались.

Таким образом, можно сделать вывод, что если вы хотите добиться

максимального

числа читателей, то вам необходимо установить его

минимальный

размер 16 пикселей.

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

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

— так говорил один веб-дизайнер в споре по этому вопросу. На самом деле это не так.

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

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

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

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

В Интернете вы ничего не платите за использование места — при условии, что читателям понравится ваш текст.
Итак, вопрос в том, готовы ли вы тратить деньги ваших клиентов ради того, что нравится только вам?

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

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

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

Оригинал

этой статьи написан шрифтом размером 19px. Этот размер был выбран, поскольку даже 16-18 пикселей показались слишком мелкими: если устроиться поудобнее в кресле, на расстоянии 70 см от экрана, можно обнаружить, что приходится щуриться, чтобы рассмотреть текст. Если бы я использовал шрифт Georgia или Verdana, 16 пикселей, может быть, и подошли бы: эти шрифты были разработаны с большой высотой букв, и поэтому на экране выглядят больше.

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

Как подобрать наиболее оптимальный коммерческий шрифт

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

Принципы использования шрифта

Необходимо учесть некоторые моменты:

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

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

Цель сайта

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

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

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

Целевая аудитория

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

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

Сочетание разных шрифтов

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

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

Коммерческие шрифты

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

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

Среди наиболее привлекательных шрифтов студии сегодня выделяют TT Norms Pro, TT Commons Pro и TT Hoves, которые помогут внести свежесть и новизну в контент вашего проекта.

Может ли шрифт сделать ваш лендинг уродливым?

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

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

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

Что такое масштаб типографики?

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

Эта шкала поможет вам визуально оценить разработанную вами иерархию, размеры основного текста, заголовков, подзаголовков и других элементов по отношению друг к другу. К слову, в веб-дизайне визуальное масштабирование шрифтов соответствует тегам в CSS (h2, h3, h4, p и т.д.).

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

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

1. Задайте базовый размер шрифта, равный 16 CSS-пикселям.
2. Используйте параметры базового размера, чтобы установить показатели других элементов.
3. Помните, что текст нуждается и в достаточном междустрочном интервале; общая рекомендация заключается в использовании высоты строки в 1,2 em.
4. Ограничьте количество используемых шрифтов и типографических масштабов.

Читайте также: Типографика — наука, искусство, философия или мастерство?
Создайте гармонию и ритм
Иерархия шрифтов не только помогает пользователям продвигаться вниз по странице, но и привносит в поток текста гармонию и ритм. Это важно на любом устройстве.
Так с чего же начать?
Ресурсу UX Matters принадлежат одни из лучших исследований минимальных размеров текста на устройствах. Ниже — таблица с рекомендуемыми для разных устройств размерами текста. Стивен Хубер рекомендует начать с размера, который на 40% превышает рекомендуемый минимум.
После установки размера основного текста можно определить размер других, вспомогательных элементов. Окиньте взглядом всю страницу, и вы сможете приблизительно определить размеры того или иного элемента.
Такого же большого элемента, как заголовок, на странице обычно не бывает. Следует помнить, что двухстрочный заголовок будет восприниматься чуть большим, чем однострочный, даже если в обоих вариантах размер текста будет одинаковым.
Проще всего определить верный масштаб заголовков и других крупных текстовых элементов — опереться на размер основного текста. Разумеется, каждый дизайнер будет подходить к этому вопросу по-своему, но если вы не знаете, с чего начать, можете последовать следующим рекомендациям: для заголовка подходит размер, на 250% превышающий размер основного текста; для заголовка второго уровня (h3) — на 150%, для h4 — 75%, а для цитат — 50% (это не правило, а лишь рекомендация).
Обращаем ваше внимание, что при определении размеров важно использовать именно проценты, ведь размер шрифта других элементов вы будете определять, опираясь на размер основного текста. При этом размер экрана уже не имеет никакого значения. Размер каждого элемента находится в зависимости от размера шрифта основного текста.
Читайте также: Основы адаптивной веб-типографики
Рекомендации по символам и интервалам
Что касается интервалов, то главным критерием здесь является читаемость текста:
настольные и большие устройства: от 60 до 75 символов в строке;
телефоны и небольшие устройства: от 35 до 40 символов в строке.
Обратите внимание, что на маленьких экранах читаемость текста обеспечивается размещением на строке меньшего количества символов чуть большего размера.
То же относится и к межстрочным интервалам. Если размер экрана небольшой, необходимо больше пространства между строками текста, чтобы пользователям было легче читать и просматривать контент. Как правило, на небольших экранах межстрочный интервал должен быть на 25% больше, чем на десктопных.
Из-за небольших размеров экрана очень важно обеспечить удобочитаемость текста, его ритм — все это и будет гарантией того, что люди продолжат изучение материала.
Советы для быстрого старта
Существует множество способов, как определить правильный типографический масштаб и быть уверенным, что текст не сделает ваш дизайн уродливым. Какой именно путь вы предпочтете, во многом зависит (в дополнение к вашим талантам дизайнера) и от уровня навыков программирования.
Лучший вариант — использовать адаптивный дизайн с медиа-запросами. Этот подход обеспечит наибольший уровень контроля над спецификациями текста.
Другой способ заключается в разработке различных версий. Хотя это довольно устаревшая концепция, еще существуют компании, использующие мобильные URL-адреса и десктопные URL для своих веб-сайтов. В большинстве случаев так делать не рекомендуется, но для некоторых сайтов, где есть большие отличия в дизайне или пользовательском опыте, это допускается.
Самый простой вариант — начать с темы вашего сайта. Просто убедитесь, что вы выбрали полностью адаптивный вариант. Когда вы используете высококачественную тему, большая часть работы оказывается сделанной вместо вас. Все, о чем вам придется подумать, это размер основного текста. Просто убедитесь в том, что размеры мобильного шрифта соответствуют вашим стандартам.
Читайте также: Почему LPgenerator не использует адаптивный дизайн для шаблонов лендингов
3 инструмента для создания типографической иерархии
Существует ряд инструментов, которые способны помочь вам увидеть всю иерархию текста сразу. Вот некоторые из лучших и наиболее удобных вариантов:
Type Scale: введите текст и поэкспериментируйте с такими его свойствами, как размер, масштаб и шрифт через панель, расположенной в левой части экрана; код текста можно получить прямо из сервиса.
Modular Scale: этот сервис способен помочь верно определить размер шрифта; затем вы сможете скачать результаты в виде плагина Sass или JS или посмотреть их на экране.
Golden Ratio Typography Calculator: инструмент оптимизирует размер символов, высоту строки, межсимвольный интервал, исходя из значений золотого сечения.
Заключение
Правильно подобранный масштаб текста обязательно внесет свою лепту в стройность и нарядность дизайна вашего сайта. Он добавляет гармонии, которую не все пользователи могут осознать, но которая оказывает значимое влияние на читаемость текста и юзабилити ресурса.
Если страница выглядит как-то не так, то, скорее всего, размер текста на ней не оптимизирован. Неправильный выбор размера шрифта может быть трудно определить, но если дизайн кажется несбалансированным, то вам нужно немедленно начинать поиски. Прежде чем остановиться на чем-то, поэкспериментируйте с несколькими различными вариантами масштаба.
Высоких вам конверсий!
По материалам: webdesignerdepot.com
14-02-2018
Шрифт | CSS
Многим знакома фраза «Поиграйся со шрифтами» — великая мантра, когда внешний вид текста не устраивает. Для того, чтобы указать шрифт, используется правило font-family, позволяющее выбрать один или несколько шрифтов, которые будут использоваться в документе.
<style> .new-font { font-family: Arial, Futura; } </style> <p>Абзац</p>
Шрифты подключаются из тех, которые установлены в вашей системе. По этой причине стоит выбирать «распространённые шрифты», так как у другого пользователя их может не быть. Помимо этого возможно подключать шрифты со сторонних сервисов, таких как Google Fonts, или загружать их непосредственно на ваш сервер, на котором расположен сайт.
Наиболее распространёнными шрифтами являются:
* Times New Roman
* Arial
* Tahoma
* Verdana
* Courier New
С большей долей вероятности эти шрифты будут установлены и в системе у другого пользователя. Если шрифтов, указанных в свойстве font-family, на компьютере нет, то будет использован шрифт по умолчанию, заданный в настройках браузера.
При подключении стилей хорошей практикой является добавление универсального семейства шрифта в правило font-family. Таких семейств на данный момент 5:
serif — шрифты с засечками (антиквы). Ярким представителем таких шрифтов является Times New Roman.
sans-serif — шрифты без засечек (гротеск). Наиболее знакомыми такими шрифтами являются Arial и Verdana.
cursive — курсивные шрифты.
fantasy — декоративные шрифты. Это семейство используется реже всего. Дело в том, что декоративные шрифты слишком разные, чтобы они были взаимозаменяемые.
monospace — моноширинные шрифты. К ним относятся шрифты, в которых все символы имеют одинаковую ширину. Очень часто их используют программисты в текстовых редакторах.
Добавив универсальное семейство шрифта в правило font-family, мы страхуем себя от того, что у пользователя не окажется такого шрифта, который мы указали. Тогда браузер автоматически выберет ему замену из того универсального семейства шрифтов, которое мы указали.
Пример из начала урока при добавлении универсального семейства будет выглядеть следующим образом:
<style> . new-font { font-family: Arial, Futura, sans-serif; } </style> <p>Абзац</p>
Теперь, если у пользователя в системе нет шрифтов Arial или Futura, будет выбран системный шрифт без засечек.
Задание
Добавьте в редактор параграф с классом verdana-text и установите для него шрифт Verdana. Стили запишите в теге style. Не забудьте указать универсальное семейство шрифтов. В данном случае это шрифты без засечек.
Конверт для денег «Исполнения желаний» тиснение, шрифт, 16,5 х 8 см арт.4404770 в гипермаркете SimaMarket.ru
Конверт для денег «Исполнения желаний» тиснение, шрифт, 16,5 х 8 см
Нет в наличии. Время обновления информации: 25.11.2021 06:58
Торговая марка Дарите Счастье
Артикул 4404770
Страна Россия
Состав Картон
Вес 7 г
Сертификат ЕАС
Русская упаковка Нет
Наберите текст.
Используйте 16 размер шрифта. Заголовок Вставьте строку выше
СРОЧНО! помогите!1. Напишите программу, которая формирует массив из N целых чисел и выводит на экран сам массив и сумму его элементов. Массив заполняе … тся вводом чисел с клавиатуры.Протестируйте программу на массивах:а) 1, 3, 4, -2б) 0, 1, -2, 10, 11, 12, -10, -3в) 1, 1, 1, 1, -1, -1, -1, -1
Сколькими способами можно переставить буквы слова: «тарантас», чтобы две буквы «а» не шли подряд;
помогите с информатикой 1 задание. Записать приведенные в пример (задачи?) как формулы.
1. Где используются адреса ячеек? 2. Какие адреса ячеек встречаются в формула? 3. В чем отличие относительной ссылки от абсоло 4. Могут ли в адресе яч … ейки формулы использова лютная адресации? 5. Какие форматы данных чаще всего используют в электронных таблицах.
Знайти та оформити у Tinkercad мінімум два варіанти програми Blink (приклад програми на картинці «sshot-14.png») з використанням функції часу millis() … .
Організувати безперервне введення чисел з клавіатури в монітор порту, поки користувач не введе 0. Після введення нуля, показати в моніторі порту кільк … ість чисел, які були введені, їх загальну суму і середнє арифметичне. Підказка: необхідно оголосити змінну-лічильник, яка буде рахувати кількість введених чисел, і змінну, яка буде накопичувати загальну суму чисел.
Режим фильтрации таблицы Excel по любому количеству условий с выводом результата за пределы исходной таблицы с заданными полями — это: 1) автофильтр; … 2) расширенный фильтр; 3) сортировка; 4) выборка.
Решить задачу с построением таблицы истинности: На допросе о пропаже смартфона был задан вопрос: «Кто брал смартфон?”. В результате был получен следую … щий ответ: “Неверно, что если смартфон брал Антонов, то и Сидоров брал смартфон, и если смартфон взял Борисов, то Антонов не брал”. Кто взял смартфон?
Система команд исполнителя вычислитель состоит из двух команд,которым присвоены номера: 1 )вычти 2 2)умножь на 3 Первая из них уменьшает число на 2,вт … орая увеличивает число в 3 раза. При записи алгоритмов для краткости указывают лишь номера команд. Запишите алгоритм,содержащий не более пяти команд, с помощью которого из числа 12 будет получено число 98
ПОМОГИТЕ ПОЖАЛУЙСТААААААААААААААА
16-битных шрифтов | FontSpace
Загрузить
Темный режим
Помощь Войти
Присоединиться бесплатно
Шрифты
Стили
Коллекции
Генератор шрифтов
(͡ ° ͜ʖ ͡ °)
Дизайнеры
Разное
18
Связанные стили
Serif
Retro
80s
Pixel
French
Nintendo
8 Bit
Bitmap
Видеоигры
Приключения
Игра
Gameboy
Snes
Акценты
Classic
European
0 Немецкий
Pixelated
Испанский
Лицензия открытого шрифта
Компьютер
Dos
Евро
Final
Игры
9 0010
Ужас
Latin
Низкое разрешение
Mmorpg
Открытый исходный код
Португальский
Экран
Techno
Видео
9000 Видео 9000 Игры
Коммерческое использование
Сортировать по
Популярное
В тренде
Новейший
Имя
Для личного пользования Бесплатно
15197 загрузок
Для личного пользования Бесплатно
14937 загрузок
Для личного пользования Бесплатно
4671 загрузок
Для личного пользования Бесплатно
24502 загрузки
Для личного пользования Бесплатно
11899 загрузок
100% бесплатно
6616 загрузок
100% бесплатно
4553 загрузки
Для личного пользования Бесплатно
3249 загрузок
Для личного пользования Бесплатно
11795 загрузок
Для личного пользования Бесплатно
8455 загрузок
Для личного пользования Бесплатно
2005 скачиваний
Для личного пользования Бесплатно
7460 загрузок
100% бесплатно
2567 загрузок
100% бесплатно
2769 загрузок
Для личного пользования Бесплатно
6916 загрузок
От 1 до 15 из 18 Результаты
1
2
Далее
Еще больше стилей
86000 + бесплатные шрифты 16000 + коммерческие шрифты 3100 + Дизайнеры
Популярные шрифты
Коммерческие Шрифты
Классные шрифты
Курсивные шрифты
Блог
Справка
Контакты
Бренд
Конфиденциальность
Условия
DMCA
Карта сайта
© 2006-2021 FontSpace
Рекомендации по размеру шрифта для адаптивных веб-сайтов (обновление 2021 г.
)
Вы читаете «Размеры шрифтов в дизайне пользовательского интерфейса: полное руководство».Быстро переходите к другим главам: Введение · iOS · Android · Интернет · Принципы
В этом посте мы расскажем, какой размер шрифта использовать для адаптивного веб-сайта. Сначала мы рассмотрим правила для мобильных устройств, а затем — для настольных компьютеров. Готовый?
Руководство по типографике для мобильных веб-сайтов
Выбор размера шрифта для мобильного сайта не является точной наукой. Вместо этого я дам несколько рекомендаций (с обоснованием ), которые помогут вам в вашем собственном процессе проектирования.
1.Шрифты основного текста должны быть около 16 пикселей
Понимание того, что разные шрифты могут быть более или менее разборчивыми, даже при точно такого же размера , 16 пикселей — хорошее место для начала при выборе размера мобильного шрифта по умолчанию. Под «по умолчанию» или «основным» я подразумеваю размер, установленный для большинства абзацев, меток, меню и списков. (Предположим, вы уже выбрали отличный шрифт, который в значительной степени является одним из двух чит-кодов для хорошего дизайна)
В конечном счете, вы хотите, чтобы основной текст на вашем телефоне (когда он находился на естественном расстоянии) был читаемым, как текст в хорошо напечатанной книге (когда вы держите его на естественном — обычно немного дальше — расстоянии).
Один способ добраться:
Начать с 16 пикселей
Рассмотрите возможность уменьшения размера, если у вас (A) страница с интенсивным взаимодействием или (B) шрифт с особенно крупными, легко читаемыми символами (например, Proxima Nova на изображении выше)
С другой стороны, вы можете быть гораздо более либеральными, исследуя размеры больше , чем 16 пикселей, но, в частности, если (A) у вас есть страница с большим количеством текста или (B) шрифт, который особенно труден для чтения заданный размер (как Futura выше)
Хотя есть некоторая субъективность в выборе лучшего размера основного шрифта для использования на странице, следующее правило более жесткое и быстрое.
2. Размер вводимого текста должен быть
минимум 16 пикселей
Это важно. Если вы разрабатываете веб-сайт или приложение, которое можно просматривать на мобильных устройствах, существует только строгое правило: используйте шрифт ввода текста размером не менее 16 пикселей .
Если ваш текстовый ввод имеет меньший размер шрифта, чем этот, браузеры iOS будут увеличивать левую часть текстового ввода , часто скрывая правую сторону и заставляя пользователя вручную уменьшать масштаб после использования текстового поля.
Видео или этого не произошло, да ?:
Анимация любезно предоставлена лихой Ste Grainer. Вы можете прочитать его статью о феномене автоматического масштабирования здесь.
Это веская причина сделать размер основного шрифта 16px или больше. Может показаться неудобным иметь текст управления формой большего размера, чем текст абзаца ☝️
3. Дополнительный текст должен быть примерно на 2 размера меньше парагафского текста
Для второстепенного текста — например, меньших меток, подписей и т. Д. — используйте размер на пару ступеней меньше — например, 13 пикселей или 14 пикселей .Я НЕ рекомендую уменьшать размер шрифта на один , поскольку в этом случае его слишком легко спутать с обычным текстом. Вдобавок, когда текст менее важен, вы хотите стилизовать его так, чтобы четко передавал меньшее значение — часто используя, скажем, более светлый оттенок серого (что-то примерно на 70% ярче — хорошее место для начала. ).
4. Всегда просматривайте свои проекты на реальном устройстве.
Золотой стандарт выбора размера шрифта для мобильных устройств — просмотреть свои проекты на реальном устройстве .Я не могу рекомендовать эту практику в достаточной степени, поскольку , ощущение дизайна мобильного приложения на экране вашего ноутбука, на на отличается от того, когда вы держите его в руке. Как начинающий дизайнер, я был шокирован почти каждый раз, когда открывал на мобильном устройстве страницу, созданную мной на компьютере. Размеры шрифта, интервалы… все было не так. Так что используйте Figma Mirror или Sketch Mirror или любое другое приложение, которое вам подходит, но просматривайте свои проекты на устройстве .
5. Ознакомьтесь со стандартами Material Design и iOS.
Никогда не помешает узнать, что делают крупнейшие дизайн-системы в городе.Например:
Размер шрифта по умолчанию в Material Design составляет 16 пикселей Roboto, а размер дополнительного шрифта — 14 пикселей (подробнее о стилях Material Design)
Размер шрифта по умолчанию для iOS составляет 17 пикселей SF Pro, а размер дополнительного шрифта — 15 пикселей (подробнее о стилях iOS)
Вам нужно их скопировать? Нет, но никогда не помешает иметь базовый уровень для сравнения.
Руководство по типографике для настольных компьютеров
Выбирая базовый размер для настольного веб-сайта или веб-приложения, вы можете разбить большинство дизайнов на один из двух типов:
Полнотекстовые страницы . Статьи, блоги, новости и т. Д. Это страницы, на которых основная цель пользователя на странице — читать. С точки зрения взаимодействия очень мало — возможно, просто щелкнув несколько ссылок.
Интерактивные страницы . Приложения, которые требуют большего количества наведений, щелчков, поиска элемента в списке или таблице, редактирования, набора текста и т. Д. На странице может быть много текста, но это не то, что вы читаете, как книгу.
Нужен пример или два? Эта страница — это страница с большим количеством текста. Ваша лента на Facebook — это страница с большим количеством взаимодействий. У каждого свои проблемы, поэтому я буду рассматривать их отдельно. Имейте в виду, что оба варианта, вероятно, будут вам полезны. Страница «О программе» сумасшедшего веб-приложения по-прежнему содержит текста, насыщенного текстом, . Страница «Контакты» в обычном блоге по-прежнему , много взаимодействий .
Полнотекстовые страницы
Короче говоря, для страниц с большим количеством текста вам нужно шрифтов большего размера . Если люди читают подолгу, будет хорошим : не заставляйте их глаза напрягать.Теперь все шрифты разные, даже одного размера, но мы говорим:
16px — абсолютный минимум для страниц с большим количеством текста
18px — размер шрифта лучше для начала. Вы не печатаете документ Word с одинарным интервалом; вы пишете для людей, сидящих в паре футов от мониторов десятилетней давности.
20px + — сначала может показаться слишком большим, но всегда стоит попробовать в приложении для дизайна. Самый красивый и насыщенный текстом сайт в Интернете, Medium.com, по умолчанию имеет размер текста статьи 21 пиксель.
Подобно тому, что я упоминал в разделе мобильного Интернета, здесь есть отличное практическое правило: текст вашего веб-сайта (просматриваемый на стандартном расстоянии монитора) должен быть таким же читаемым, как и хорошо сделанная книга (просматриваемая на обычном расстоянии, на котором держат книгу). . На самом деле это действительно раздражающее и глупое упражнение, потому что вам нужно закрыть один глаз и прищуриться, глядя на книгу, которую вы держите, как идиот. Но найдите красивое уединенное место и проверьте его работоспособность: , мой размер шрифта читается даже с расстояния в пару футов ? Даже с поправкой на мои молодые и сильные глаза ? Хорошо, вы поняли.
Взаимодействие — тяжелые страницы
Теперь для страниц с интенсивным взаимодействием вполне допустимы меньшие размеры текста. Фактически, в зависимости от объема данных, которые пользователь принимает за один раз, даже текст размером 18 пикселей будет слишком большим. Посмотрите на свой (веб) почтовый ящик, посмотрите твиттер, посмотрите любые приложения, которые вы используете, для которых требуется сканирование вместо чтения , посмотрите приложения, которые показывают вам данные — вам будет трудно найти устойчивый абзацы текста размером 18 пикселей. Вместо этого нормой является 14–16 пикселей. Но не будет только одним размером шрифта . Скорее всего, будет меньших размеров для менее важных вещей и больших размеров для более важных вещей (заголовки, субтитры, субтитры и т. Д.), И все это будет объединено в гигантский солянка.
А теперь важная часть: для любой страницы с интенсивным взаимодействием размер шрифта МЕНЬШЕ определяется некоторыми нисходящими декретами («шкалы шрифтов», я смотрю на вас 😠), чем конкретными потребностями каждого фрагмента текста и взаимодействие между ними.
Например:
Имена событий имеют размер 12 пикселей, это стиль шрифта, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, учитывая, что им нужно уместить 7 столбцов на экране шириной всего 1440 пикселей, а многие события довольно короткие, это идеальный выбор размера шрифта. Любое меньшее и страдает разборчивость. Чем больше, тем больше названия событий будут обрезаться слишком часто. Дизайн — это компромисс, малыш. Если вы не можете назвать компромисс, на который идете, вероятно, вы делаете его не в том месте.
Ярлыки часов дня («12pm», «13pm» и т. Д.) Имеют размер шрифта: 10 пикселей. Это еще один стиль, полностью отсутствующий в рекомендациях по материальному дизайну. Тем не менее, горизонтальное пространство имеет большое значение. Каждое событие в любом случае помечается временем начала. Почему , а не , делают левые ярлыки меньше?
Даты — 48 пикселей. Опять же, не нашел в руководствах по материальному дизайну. Теперь, в этом случае, я не знаю, почему они не использовали 45 пикселей, что — это официальный размер «Дисплея 2», но я скажу следующее: если бы это был я, я бы, вероятно, сделал полужирный шрифт размером 48 пикселей, а здесь жирный шрифт будет проблемой.Это привлекло бы тоже много внимания. Так что я бы все равно изменил стиль.
Имейте это в виду, когда разрабатываете веб-сайт для настольных компьютеров с интенсивным взаимодействием. Стили текста необходимо изменять в каждом конкретном случае. Последовательность прекрасна, но никто не злится, когда размер шрифта на один пиксель меньше — они злятся, когда не могут легко найти то, что ищут .
Как можно меньше размеров шрифта
Одна из самых больших типографских ошибок начинающих дизайнеров пользовательского интерфейса — использовать way слишком большого размера шрифта.Даже страницы с наиболее интенсивным взаимодействием обычно выглядят нормально с , примерно 4 размера шрифта, всего .
Давайте разберемся:
Размер шрифта заголовка . Это самый большой размер шрифта на вашей странице. Используйте его для заголовка или заголовков разделов. Если у вас есть заголовок и заголовок раздела , вы почти наверняка должны использовать здесь два разных размера шрифта.
Размер шрифта по умолчанию . Это наиболее распространенный размер шрифта на вашей странице, и его следует использовать для всего основного текста, а также для большинства элементов управления, таких как текстовые поля, раскрывающиеся списки, кнопки и меню. Ключевая ошибка в заголовке, которую делают здесь начинающие дизайнеры, — использовать много размеров шрифта для элементов, которые все должны быть на один размер шрифта.
Размер дополнительного шрифта . Это размер шрифта — обычно примерно на 2 пункта меньше размера шрифта по умолчанию — который вы используете для менее важных деталей сайта. Вспомогательная информация и статистика, иногда подписи и т. Д.
Размер шрифта Tertiary / caption / label / wildcard . Очень часто вам понадобится еще один размер шрифта.Иногда это происходит из-за того, что ваша информация настолько иерархична, что вам нужен третичный стиль , даже более сдержанный, чем второстепенный. В других случаях вы можете использовать прописные буквы для меток или кнопок — и из-за увеличенного визуального веса прописных букв вы захотите использовать немного меньший размер для самого текста (помните: баланс вверх-всплывающее против всплывающего вниз). Итак, этот четвертый размер шрифта является чем-то вроде подстановочного знака. Не каждому дизайну это нужно, но многим это нужно. Мое единственное предупреждение: насколько это возможно, по умолчанию используется согласованность .
Имеет смысл? Давайте двигаться дальше.
Перейти к главе 4: Принципы и ресурсы
Одна заключительная нота 😎
Если вы здесь впервые, возможно, вас заинтересуют:
Learn UI Design, мой полнометражный онлайн-видеокурс по дизайну пользовательского интерфейса
The Design Newsletter, информационный бюллетень для более чем 50 000 человек с оригинальными статьями по дизайну, цель которых дать вам тактические советы по улучшению ваших навыков UX / UI.
Некоторым людям есть что сказать о информационном бюллетене.
Благодарность за информационный бюллетень о дизайне
Спасибо за ваш информационный бюллетень. Возможно, это лучший информационный бюллетень, который я получал с 1999 года, когда я начал работать фрилансером.
Триша Литтлфилд
Основатель TheSimpleWeb
Каждый раз, когда я получаю от вас письмо, я говорю: «Черт, это длинное письмо! Я ни за что не буду читать все это », а затем я начал читать и сказал:« Черт, это чертовски блестяще », и прочитал все это.
Жан-Филипп
UX-стратег, внештатный сотрудник
Более 50 000 подписчиков.
Нет спама. Отпишитесь в любое время.
Используйте читаемый шрифт размером не менее 16 пикселей. — Медицинская грамотность онлайн
3.3 Используйте читаемый шрифт размером не менее 16 пикселей.
Выбранный вами шрифт важен, потому что он влияет на ваш сайт читаемость. Ниже мы перечисляем наиболее важные элементы, которые способствуют сделать шрифт читабельным.
Размер
Выберите шрифт размером не менее 16 пикселей или 12 пунктов. Если многие из ваших пользователи пожилого возраста, рассмотрите возможность использования шрифта еще большего размера — 19 пикселей или 14 точек. ^6,24 Мелкий шрифт больше трудно читать, особенно для пользователей с ограниченными навыками грамотности и пожилые люди.
Цитировать
«Мне нравится, когда я могу читать слова без моего очки для чтения.»
Настройте свой сайт так, чтобы пользователи могли регулировать размер текста на страница. ²⁴ Веб-дизайнеры могут сделать это возможным, используя то, что называется относительный размер шрифта. Однако по-прежнему важно проверить свою веб-сайт с разными размерами шрифта, чтобы его было легко читать и перемещаться.Всегда проверяйте, как ваш контент выглядит на мобильном устройстве, так как ну — новые экраны с высоким разрешением, отображающие больше пикселей на дюйм, могут сделать текст меньше.
Рисунок 3.3.
NIH SeniorHealth включает панель инструментов на каждой странице, которая позволяет пользователи могут изменять размер текста и регулировать цветовой контраст (цветной текст на черный фон).
Простота
Необычные шрифты с ненужными штрихами могут быть трудночитаемыми. Выберите основной шрифт, который будет знаком вашим пользователям.³⁰
Легче читать текст, напечатанный простыми, знакомыми шрифтами, такими как Вердана.
Пример
Lucida Handwriting
«Регулярная физическая активность полезна для вашего здоровья. Получите советы, которые помогут вам станьте более активными ».
Verdana
«Регулярная физическая активность полезна для вашего здоровья. Получите советы, которые помогут вам станьте более активными ».
Кроме того, хотя вы можете использовать другой шрифт для заголовков и основного содержимого, не используйте более трех шрифтов на странице.Используйте меньшее количество простых шрифтов, чтобы ваша страница выглядела более связной. ⁵⁵
С засечками или без засечек?
Было много споров о том, какой шрифт легче читать. онлайн — и в целом исследования неубедительны. ^30,56 Однако некоторые данные свидетельствуют о том, что шрифты с засечками могут затруднять чтение на Интернет сложнее для пользователей с чтением расстройства. ^56,57
Итог: Выбор шрифтов без засечек — лучшая практика при написании для Интернета.^24,57,58 Используйте знакомый шрифт без засечек, например Verdana, Lato, Open Sans, Proxima Nova или Source Sans.
Высота строки
Высота строки (также называемая интерлиньяжем) — это расстояние по вертикали между строками. текста. Общая высота строки в текстовом редакторе:
«Одинарный интервал» (высота строки 100%, равна размеру шрифта)
1,5 строки (высота строки 150%, что в 1,5 раза больше размера шрифта)
«Двойной интервал» (высота строки 200%, двойной размер шрифта)
Некоторые текстовые редакторы и многие программы для веб-дизайна позволят вам даже больше опций.
Для максимальной читабельности используйте высоту строки на 130–150% больше. чем размер шрифта. ⁵⁶ Это помогает сохранить пользователей с ограниченной грамотностью навыки от потери своего места в тексте, когда они начинают читать новую линии — и им будет легче использовать пальцы, чтобы удерживать их место.
Пример
Лучше указать интерлиньяж около 140% (средний вариант ниже). ⁵⁹
100% Ведущий
«Небольшие изменения в привычках питания могут иметь большое значение. для твоего здоровья.Вот несколько советов и инструментов, которые вы можете использовать, чтобы получить начал.»
140% Ведущий
«Небольшие изменения в привычках питания могут иметь большое значение. для твоего здоровья. Вот несколько советов и инструментов, которые вы можете использовать, чтобы получить начал.»
200% Ведущий
«Небольшие изменения в привычках питания могут иметь большое значение. для твоего здоровья. Вот несколько советов и инструментов, которые вы можете использовать, чтобы получить начал.»
Высота строки также важна для мобильных пользователей.Когда абзацы или маркированные списки включают несколько ссылок, дополнительную высоту между строками помогает убедиться, что у пользователей достаточно места, чтобы коснуться элемента они хотят. ⁶⁰
Как выбрать подходящий для лучшего 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 пунктам, используемым в печатных материалах.
Вы также можете использовать размер абзаца в качестве основы для остальных размеров шрифта.Существует так называемая шкала золотого сечения, которую можно использовать для расчета любых размеров заголовков. Но использование инструмента, подобного указанному выше, также является приемлемым способом определения и тестирования размеров.
9 веб-сайтов с отличными размерами типографики
Если вам интересно, как другие веб-сайты решают проблему изменения размера шрифта на своем веб-сайте, я собрал девять примеров веб-сайтов, показывающих, какие идеальные типографские шрифты, стиль и размер следует использовать для улучшения UX.
1. Smashing Magazine

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

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

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

TechCrunch использует очень жирный и крупный шрифт для заголовков своих блогов в любом разделе сайта, где они публикуют статьи.Это не только затрудняет пропуск статей, но и отлично подходит для людей с нарушениями зрения.
5. Проводной
Использование веса и размера шрифта в заголовке Wired, как и в других примерах, позволяет пользователю получить представление о том, что он собирается прочитать.
Что еще интересно, Wired выделяет автора черным текстом. Если авторы играют большую роль в ваших статьях, подобные методы выделяют их очень специфическим образом.
6. Кварц

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

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

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

Fast Company сохраняет свою целевую страницу для подписки на журнал короткой и по существу. Более темные тона h2 и маркеров помогают пользователям сначала понять, на что идут эти 19,99 доллара в месяц.
Серый, но более крупный тест немного сливается с фоном, но действует как более подробное ценностное предложение по тем темам, которых они могут ожидать.
Ключевые выносы
Оптимизация размеров шрифта вашего веб-сайта — небольшая возможность для тех, кто хочет улучшить UX своего веб-сайта и увеличить конверсию.
Имея некоторую информацию выше, а также наличие инструментов для работы со шрифтами, легко найти и протестировать новые размеры шрифтов, а также понять, как их настроить на мобильных устройствах.
Самое главное — начать с малого. Нет необходимости вносить радикальные изменения на вашем сайте, только это может иметь негативное влияние.
Попробуйте найти время, чтобы просмотреть некоторые из ваших страниц с наибольшим количеством просмотров, как настольных, так и мобильных, и внедрить набор новых размеров шрифтов.Если эти обновления дадут положительные результаты, вы можете начать расширяться в других областях своего веб-сайта.
В конце концов, вы сможете стандартизировать эти шрифты на всех страницах, что поможет обеспечить единообразие для ваших пользователей при навигации по вашему контенту.
Продолжайте повторять в зависимости от изменений времени сеанса, глубины прокрутки и коэффициента конверсии. Это могут быть ведущие индикаторы того, улучшают ли ваши изменения работу с сайтом.
Код шрифта HTML
Пример <стиль> .example1 { шрифт: 16px / 22px Garamond, Georgia, serif; оранжевый цвет; } .жирный { font-weight: жирный; } .italic { стиль шрифта: курсив; }
Размер этого шрифта — 16 пикселей, высота строки — 22 пикселя, цвет оранжевый, семейство шрифтов — Garamond.
Если на компьютере пользователя нет Garamond, он будет использовать Georgia. В противном случае на компьютере пользователя будет использоваться шрифт с засечками по умолчанию (часто это Times или Times Roman — просто оставьте шрифт с засечками).
Вы также можете указать полужирный текст и курсив , если хотите!

Приведенный выше код шрифта устанавливает общие свойства, такие как размер шрифта, высота строки, семейство шрифтов и цвет шрифта. Вот еще несколько цветов на выбор.
Свойства шрифта
При кодировании HTML для форматирования используется CSS. Вот свойства шрифта / текста CSS:
Ниже вы можете увидеть некоторые из этих свойств в действии.
Семейство шрифтов
Если вы хотите указать только семейство шрифтов, вы можете использовать свойство font-family :
Пример <область действия стиля> .example2 { семейство шрифтов: Helvetica, Arial, sans-serif; }
Пример свойства CSS font-family .
Размер шрифта
Если вы хотите указать только размер шрифта, вы можете использовать свойство font-size .Вы также можете использовать свойство line-height для настройки высоты каждой строки:
Пример <область действия стиля> .example3 { размер шрифта: 20pt; высота строки: 25 пунктов; }
Пример свойства CSS font-size вместе со свойством line-height для указания высоты каждой строки.
Цвет
Если вы хотите указать только цвет шрифта, вы можете использовать свойство color (больше цветов):
Код шрифта HTML создается с помощью CSS.
Полужирный
Вы можете сделать шрифт жирным, используя свойство font-weight :
Код шрифта HTML создается с помощью CSS.
Если вы хотите выделить полужирным шрифтом только текста, вы можете использовать тег HTML :
Вы можете выделить части текста жирным шрифтом, используя HTML-тег span.
Курсив
Вы можете сделать текст курсивом, используя свойство стиля шрифта :
Код шрифта HTML создается с помощью CSS.
Если вы хотите сделать курсивом или текста, вы можете использовать тег HTML :
Вы можете сделать часть текста курсивом, используя HTML-тег span.
Как определить размер шрифта плаката
Какого размера будет текст на плакате?
При создании плаката, особенно в первый раз, могут возникнуть вопросы:
Мой размер шрифта слишком мал для чтения?
Он слишком большой? Какого размера сделать заголовок?
Какого размера сделать основной текст?
Простой ответ: это зависит от того, сколько контента вы хотите представить.Жесткого правила нет, но в то же время вы хотите, чтобы ваша аудитория могла прочитать то, что вы написали. Вы также не хотите, чтобы ваш текст был таким большим, как если бы он был написан учеником начальной школы.
Лучший способ узнать это - начать создавать свой плакат, используя размеры шрифта по умолчанию, которые мы предоставляем в наших шаблонах. По мере добавления содержимого в шаблон вы сможете определить, нужно ли увеличить или уменьшить шрифт по умолчанию, чтобы он соответствовал вашему макету.
Не тратьте время на улучшение макета, работая над плакатом. Сделайте это в конце, после того, как добавите всю свою информацию. Это сэкономит вам много времени и сэкономит нервы. Это также позволит вам настроить размеры шрифта, прежде чем вы все доведете до совершенства.
PowerPoint имеет ограничение на размер страницы 56 дюймов (142,24 см). Чтобы создать плакат размером более 56 дюймов, документ плаката должен быть в два раза меньше размера окончательного плаката.Например, плакат 48x72 будет напечатан из документа PowerPoint 24x36. Это означает, что весь текст в исходном документе также вдвое меньше окончательного. Итак, если вам нужен шрифт размером 24 пункта, на плакате он должен быть 12 пунктов.
Если ваш документ меньше 56 дюймов, файл будет напечатан на 100% от оригинала, что означает, что ваши шрифты будут напечатаны того же размера, что и исходный документ.
Эти двое 8.Диаграммы 5x11 помогут вам предварительно оценить размер шрифта на вашем плакате.
Если размер плаката умещается в 48x56 дюймов, загрузите и распечатайте таблицу A на своем настольном принтере. В противном случае скачайте и распечатайте диаграмму B.
. Поместите выбранную вами карту на стену и посмотрите на нее с расстояния примерно от 3 до 4 футов. Числа на диаграмме представляют размеры шрифтов как для шрифтов Arial, так и для шрифтов Times. Размеры других шрифтов могут незначительно отличаться. ТАБЛИЦА A: Используйте в качестве справки для шаблонов плакатов для печати ДО 48x56 дюймов или 122x142 см ТАБЛИЦА B: Используйте в качестве справки для шаблонов плакатов, которые нужно напечатать БОЛЬШЕ, ЧЕМ 48x56 дюймов или 122x142 см Поддержка ученых с 1997 г. Excel VBA Font (цвет, размер, тип и полужирный) Home ➜ VBA Tutorial ➜ Excel VBA Font (Color, Size, Type, and Bold) Written by Puneet for Excel 2007, Excel 2010, Excel 2013, Excel 2016, Excel 2019, Excel для Mac Бесплатная загрузка: не забудьте получить PDF-файл со 100 готовыми к использованию кодами VBA (ССЫЛКА). Основные примечания Чтобы внести изменения в шрифт, необходимо использовать объект «Шрифт VBA». Всего имеется 18 свойств с объектом шрифта, к которым вы можете получить доступ и внести изменения. Объект шрифта VBA В VBA есть объект шрифта, который можно использовать для изменения свойств шрифта из ячейки, например цвета шрифта, размера шрифта, типа шрифта, а также можно применить полужирный и курсив к шрифт. Синтаксис выражение.font Для его использования сначала необходимо определить адрес ячейки, который можно указать следующими способами. Selection.Font Диапазон ("A1"). Шрифт Ячейки (1, 1). Шрифт Диапазон ("A1: A5"). Шрифт Полезные ссылки: Запуск макроса - Средство записи макросов - Редактор Visual Basic - Персональная книга макросов Цвет шрифта VBA Чтобы изменить цвет шрифта, у вас есть два различными способами: 1. Использование цветовых констант В Excel есть несколько цветовых констант, которые можно использовать для применения цвета к шрифту.Например, если вы хотите применить красный цвет к шрифту в ячейке A1, код будет выглядеть следующим образом: Range ("A1"). Font.Color = vbRed В приведенном выше коде после объект шрифта, цвет - это свойство, и вы использовали константу vbRed, которая сообщает VBA применить красный цвет к ячейке A1. Всего можно использовать восемь констант: vb Черный: Черный vb Красный: Красный vb Зеленый: Зеленый vb Желтый: Желтый vb Синий: Синий vb Пурпурный: Пурпурный vbCyan: Пурпурный vbCyan: vb Белый: Белый 2.Использование RGB Вы также можете использовать цветовой код RGB для применения цвета к шрифту. RGB - это комбинация красного, зеленого и синего цветов, в которой вы можете создать собственный цвет с помощью кода. Допустим, если вы хотите применить комбинацию зеленого и синего цветов к ячейке A1, код будет следующим: Диапазон ("A1"). Font.Color = RGB (0, 255, 255) Размер шрифта VBA Объект Font также предоставляет доступ к свойству размера шрифта. Допустим, вы хотите применить к шрифту в ячейке A1 размер шрифта 16, код будет: Range ("A1").Font.Size = 16 Если вы хотите применить размер шрифта ко всей ячейке на листе, вы можете использовать следующий код: Cells.Font.Size = 16 И если вы хотите применить размер шрифта только к Ячейки, в которых есть данные, код будет: ActiveSheet.UsedRange.Font.Size = 16 Или для выбранной ячейки. Selection.Font.Size = 16 Имя шрифта VBA Таким же образом можно изменить имя шрифта, используя свойство name объекта шрифта.Допустим, вы хотите применить шрифт Consolas к ячейке A1. Код будет выглядеть следующим образом: Диапазон ("A1"). Font.Name = "Consolas" При использовании этого свойства вам необходимо ввести правильное имя шрифта, который вы хотите применить, и если каким-то образом имя неверно, это не покажет вам ошибку. Полужирный, курсивный и подчеркнутый шрифт VBA Существуют также свойства, которые можно использовать, чтобы сделать шрифт полужирным, курсивом и подчеркиванием. Ниже приведены коды, которые нужно для этого написать. Диапазон ("A1"). Жирный шрифт = True Диапазон ("A1"). Font.Italic = True Диапазон ("A1"). Font.Underline = True С этими свойствами вам необходимо определить ИСТИНА или ЛОЖЬ. Поэтому, если шрифт уже выделен жирным или курсивом и вы хотите его удалить, вам нужно использовать FALSE, чтобы удалить их. Другие полезные свойства шрифта Здесь добавьте еще несколько свойств, которые могут быть вам полезны (зачеркивание, подстрочный индекс и надстрочный индекс).