Какой размер шрифта должен быть

Как правильно выбрать размер шрифта для заголовка

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

Какой размер использовать?

Статистика показывает, что наиболее популярные размеры шрифта для заголовков — в диапазоне от 18 до 29 px.

Общие значения

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

Чаще всего для основного текста используются кегли от 14 до 18 px.
Чтобы получить оптимальный размер заголовка, нужно размер основного текста умножить на 2-2,5.
Для того, чтобы узнать оптимальный интерлиньяж, нужно размер шрифта умножить на 1,48.

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

Помните, что нет универсального метода для определения оптимального размера заголовка. Дизайн сайта, а, следовательно, и размер текста зависит от решаемой задачи.

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

А как вы подбираете размер для заголовков? Делитесь своим мнением в комментариях.

Какого размера должен быть шрифт на слайде?

«Это невозможно читать! Слишком мелкий шрифт!» — так часто говорят руководители, когда видят презентации своих сотрудников. И это распространенное явление: по результатам исследования 2019 года, эта ошибка — вторая среди самых частых ошибок в оформлении слайдов.

Так какого же размера должен быть шрифт на слайде?

Однозначного ответа нет

Мы бы хотели ответить: «30 пт для заголовков и 16 пт для основного текста. Делайте так, и будет вам счастье!». Но не можем. Потому что простого ответа на этот вопрос не существует, и докажем мы это на 2 примерах.

Посмотрите на этот слайд из выступления Стива Джобса. Крупный текст и всего 2 тезиса на слайде — хороший вариант для формата презентации продукта. Зал на несколько сотен или тысяч человек, среди зрителей — самые разные люди от настоящих «гиков» до представителей СМИ.

Стив Джобс на презентации первого iPhone в 2008 году использует минималистичные слайды с небольшим количеством текста и крупным шрифтом

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

Слайд из отчетной презентации компании «АЗОТТЕХ» с большим количеством данных и мелким шрифтом

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

От чего зависит размер шрифта?

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

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

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

Условие №1. Расстояние от зрителя до презентации

Чем ближе зритель к презентации, тем более мелкие детали он разглядит.

Условие №2. Устройство для демонстрации презентации

Для четких дисплеев и распечаток подходит мелкий шрифт. А для экранов смартфонов и проекторов — более крупный.

Условие №3. Экспертность зрителя в теме презентации

Для более экспертных зрителей обычно создаются отчетные презентации и презентации для конференций.

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

Условие №4. Мотивация зрителя изучать детали

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

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

Условие №5. Стиль повествования

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

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

Условие №6. Время просмотра слайда зрителем

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

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

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

Вывод: сначала думайте о контексте, потом — о размере шрифта

Рассуждаете над тем, какой размер шрифта должен быть в презентации? Следуйте этому алгоритму:

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

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

MOVmedia — ваши партнеры в презентациях

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

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

Хотите обсудить с нами проект? Мы с радостью ответим на все ваши вопросы и расскажем, как можем начать эффективное партнерство — [email protected]

Статью подготовила Майя Андреева, партнер по работе с контентом в бизнес-презентациях.

Общие требования к макетам

Типы файлов, предназначенных для печати: TIF, EPS, PDF, PSD, AI.

Файлы сохранены в версиях программ не старше: COREL X 8 , AI CS 5, PS CS 5.

Типы файлов, не являющихся печатными: родные форматы Word, Excel, AutoCAD и т.п.

В растровых форматах JPG, TIF, PSD разрешение не меньше 300 dpi.

Требования к файлам

Файл не должен содержать OLE и пр. объекты.
Обязательно нужно предоставить утвержденную и подписанную распечатку макета. После утверждения макета заказчиком претензии к ошибкам в макете не принимаются.

Все текстовые объекты должны быть в кривых.
Минимальный кегль шрифта должен быть не менее 3-4 pt Arial (в сравнении).
Шрифты менее 5 pt не должны быть «сложными» (т.е. без засечек).

Цветовые модели:

— наличие цветовых моделей CMYK и RGB в одном файле недопустимо

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

Макет должен содержать только те краски, которыми в дальнейшем он будет напечатан.
Изменения цветовой модели возможны за дополнительную плату.
Цвета из банки должны иметь название «Pantone XXX C», где ХХХ – номер нужного цвета по каталогу Solid Coated Pantone .

Сложные градиенты, mesh-заливки, текстурные заливки, эффекты прозрачности, а также такие эффекты, как DropShadow, Lens и другие, должны быть растрированны.

Растровые изображения:

-цветовая модель – СМУК

— в масштабе 1:1

— всё изображение на одном слое

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

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

Если растровое изображение идёт «в край» с контуром этикетки, то оно должно выступать за обрезной формат на 2 мм с каждой стороны.

Векторные изображения:

— масштаб 1:1 не обязателен , но обязательно соблюдение пропорций, соответствующих итоговому размеру

— абрисы в режиме «масштабирование с объектом» или переведены в объекты — штрих-код в виде «кривых»

— объекты-символы в «кривых»

— шрифты в виде «кривых» (при наличии малораспространённых или коммерческих шрифтов обеспечить наличие самих шрифтов для возможной правки текста)

— минимальный размер шрифта черного цвета(прямой и в инверсии) 3 п. по Arial (более мелкий текст будет малочитаемым смотри образец)

-отдельно стоящие линии при прямой и инверсной печати черным 0,1 мм

— все лишние составляющие макетов должны быть удалены

— файлы, созданные в Illustrator, не должны иметь «связанных», «прилинкованных» объектов и изображений. Все изображения должны быть встроены или отправлены вместе с макетом.

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

Контур реза:

— сверхтонкий абрис красного (жёлтого) цвета 0,078 мм, имеющий минимальное количество «узлов» и соответствующий необходимому размеру и пропорциям, должен находиться на отдельном слое

Градиенты и плашки:

Градиенты лучше использовать от 20% до 100 %.

Положение объектов:

Все объекты, которые будут напечатаны не «в край», должны располагаться не ближе 2 мм к краям реза (с каждой стороны!).
Если Вы хотите напечатать рамку или полосу, идущую ровно по краю реза, то её толщина (внутри этикетки) должна быть не менее 3 мм.

Штрих-код должен быть в векторном формате и с заливкой 100% краской.
Тип штрих-кода, его минимально считываемый размер (масштабирование) и соотношение допустимых оттенков определяет сам заказчик.
На блестящих и зеркальных отражающих поверхностях штрих-код не будет считываться!
Если нужен штрих-код на прозрачной плёнке, то требуется печать белилами плашки под ним!

Дополнительные требования для Флексопечати

Формат печати

Максимальный размер запечатываемой области 300х315 мм.

От 80 до 150 lpi

Цветопередача

Минимально воспроизводимый процент растровой точки – 3-4%.
Следует избегать изображений со светлыми градиентами (менее 3-4%), градиентов уходящих в ноль процентов, тонких вывороток и линий в несколько цветов.

В наличии есть вся палитра базовых цветов по шкале Pantone.
По желанию заказчика либо смешиваются промежуточные оттенки, либо желаемый оттенок раскладывается на палитру СМУК.
Оборудование позволяет печатать до 5 красок (можно 4+лак).
Ваш макет должен цветоделиться на то количество красок, сколькими Вы предполагаете его печатать.

Технические допуски

Допустимые отклонения совмещения цветов ± 0,1 мм.

Относительная погрешность обрезного формата относительно картинки составляет не более 1 мм.

Формы вырубки:

По Вашему чертежу мы можем изготовить этикетки практически с любым контуром.

Дополнительные требования для Горячего тиснения

Формат тиснения

51х92 мм – для этикеток с печатью; 51х140 мм – для пустых этикеток.

Минимальная толщина элементов

Линии при печати вывороткой не менее 0,3 мм, при прямой печати – 0,15 мм.
Текст при прямой печати не менее 5 пт. Текст вывороткой лучше не печатать.
Минимальное расстояние между разными элементами одного цвета 0,3 мм.

Цвета

Можно печатать не более 2х цветов! При этом цвета не должны пересекаться. Между цветами должно быть расстояние не менее 0,3 мм.

Дополнительные требования для Цифровой лазерной листовой и рулонной печати

1.Размер листа SR A3 320х450 мм

2.Минимальный размер шрифта черного цвета (прямой и в инверсии) 2 п по Arial

3.Отдельно стоящая линия 0,05 мм

Цветовая палитра

Только СМУК (по печатающим краскам).

Контур реза:

В растровом макете (либо плашке) нужно сделать вылет наружу за линию реза на 2 мм.
Текст/объекты от линии реза должны отстоять внутрь не менее 2 мм.

Дополнительные требования к макетам для широкоформатной печати

Максимальный размер файла : не должен превышать размер 2 Гбт и 10 метров в длину.

Максимальная ширина печати экосольвентными и уф красками 1600 мм .

Контурная (плоттерная) резка самоклеющихся материалов и трафаретов возможна на ширине до 1350 мм .

Возможные варианты цветовых моделей печати на УФ принтере :

6.W + CMYK + W выполняется по схеме

7.W + CMYK с выборкой в CMYK под белое.

Макет наклейки содержит изображение и контур реза.

Толщина контура реза — сверхтонкий абрис красного (жёлтого) цвета 0,078 мм. Вылет изображения за контур реза равен 2 мм . Элемент изображения не являющийся фоном (текст, штрихкод) располагается на расстоянии 2 мм от контура реза . Изображения содержащие W, CMYK и контур реза располагаются на разных слоях.

Работы с макетами наклеек, в том случае когда это необходимо для Вас.

Добавление контура реза в макет	80 ₽
Верстка макета (только текст, внесение не более 2 правок, повтор +300 руб.)	350 ₽
Отрисовка элемента в зависимости от сложности	700-3000 ₽
Подбор похожего шрифта при отсутствии исходного	700 ₽
Верстка макета (текст + графика, готовые элементы, внесение не более 2 правок, повтор +300 руб.)	900 ₽
Подбор фотографий (5 фото на одну тему)	1 000 ₽
Рисование иллюстрации	4 500 ₽
Креатив макета	договор

Обратите внимание:

28 апреля 2019 года в Евразийском экономическом союзе начали действовать изменения, внесенные в технический регламент «Пищевая продукция в части ее маркировки».

Данные изменения были приняты 14 сентября текущего года решением № 75 Совета ЕЭК. Официальное их опубликование состоялось – 30 октября 2019 г..

Что предусматривают опубликованные правки технического регламента?

1. Придуманное название пищевого продукта (если таковое имеется) включается в наименование продукта. Располагаться придуманное название должно вблизи от наименования.

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

3. Понятность определяется таким критерием, как однозначность переданного смысла информации. Данная информация может быть изложена в форме текста или текста с изображением.

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

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

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

Напомним, союзный регламент по маркировке пищевой продукции (ТР ТС 022/2011) действует в ЕАЭС с 1 июля 2013 года. Опубликованные изменения, согласно действующему законодательству, прошли процедуры публичного обсуждения и внутрегосударственного согласования а также были одобрены Коллегией Комиссии.

Размер шрифта для адаптивных сайтов

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

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

Размер шрифта в веб-дизайне

Размер шрифтов в Интернете можно изменять разными способами:

Pixel (px) — Пиксель.
Point (pt) — Пункты.
em — размер шрифта зависит от размера шрифта родительского контейнера.
Root em (rem) — размер шрифта наследуется от корня стиля.
Percentage (%) — процент.
(vw или vh) — ширина или высота области просмотра.
(см) — сантиметр.
(мм) — миллиметр.
Inch (in) — дюйм.

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

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

Другой вариант — использовать em и rem. em наследует свой размер от своего родителя, а rem наследует от корневого стиля (поэтому он назван root em).

Размер шрифта по умолчанию во всех браузерах составляет примерно 16 пикселей. Обычной практикой является установка корневого font-size равным 62,5%, что переводит значение по умолчанию 16 пикселей примерно в 10 пикселей. Мы делаем это, чтобы упростить мысленное преобразование размера шрифта при использовании em или rem (например, 1 rem = примерно 10 px, а 1,8 rem = примерно 18 px). Это удобный подход по двум причинам:

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

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

В CSS это делается с помощью медиа-запросов.

Например, мы можем установить размер шрифта по умолчанию для элемента h1 равным 3,5 rem. Это может отлично смотреться на настольном компьютере, но на мобильном устройстве будет слишком большим. Следовательно, у нас может быть медиа-запрос вроде:

h1 < font-size: 3.5rem; >@media only screen and (max-width: 400px) < h1 < font-size: 2rem; >>

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

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

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

Оптимальные размеры шрифтов для рабочего стола

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

Body text (Основной текст) — размер шрифта должен составлять от 16 до 18 пикселей для удобочитаемости (или от 1,6 до 1,8 бэр, используя наши правила изменения размеров, упомянутые выше). Если можно позволить увеличить изображение, то даже 21 пиксель может быть приятным для чтения.

Headings (Заголовки) — заголовки должны быть примерно в 1,96 раза больше основного текста, чтобы создать достаточный контраст. Это будет означать, что если использование 18 пикселей для размера основного шрифта, тогда будет применено около 35 пикселей для заголовков.

Subheadings (Подзаголовки) — они должны быть немного меньше, чем размер заголовка, с некоторыми корректировками, такими как меньший вес, чтобы создать контраст между ними. Например, если использовались 35 пикселей для заголовка, то для подзаголовка использовать около 30 пикселей.

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

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

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

Body text (Основной текст) — размер шрифта для основного текста должен быть не менее 16 пикселей. В некоторых случаях можно уменьшить размер шрифта (например, если шрифт имеет необычно большие символы или используются прописные буквы), при этом минимальным размером будет 14 пикселей. Для контекста в Material Design от Google используется минимальный предлагаемый размер дополнительного шрифта в 14 пикселей, а в рекомендациях Apple — 15 пикселей.

Headings (Заголовки). Заголовки должны быть примерно в 1,3 раза больше, чем основной текст, чтобы создать достаточный контраст. Это будет означать, что если используется 16 пикселей для размера основного шрифта, то для заголовков должен использоваться ~ 21 пиксель. Это уменьшено по сравнению с 3,5 бэр, которые использовались на настольных компьютерах.

Subheadings (Подзаголовки) — здесь тоже часто бывают уменьшены по сравнению с размером заголовка, но есть небольшая проблема, в которой подзаголовок может выглядеть слишком похожим на размер шрифта основного текста. По этой причине некоторые дизайнеры предпочитают визуально отличать подзаголовки за счет использования веса, форматирования, например курсива и межбуквенного интервала. Если использовался 21 пиксель для заголовка, можно выбрать 18 или 16 пикселей для подзаголовка, но с меньшим весом, чем заголовок или основной текст.