8 золотых правил типографики

Karol Andruszków

Обновлено: 07 сентября 2022 г.

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

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

8 принципов типографики, которым необходимо следовать

1. Выберите правильный шрифт

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

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

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

2. Выберите размер шрифта

Размер шрифта на странице имеет значение! Если вы выберете шрифт, который не будет слишком маленьким или слишком большим, вы значительно облегчите чтение своим пользователям. Специальная единица, которую типографы используют для описания шрифтов, — это «pt» или «point».

Предпочтительный диапазон стандартных размеров шрифта для веб-сайтов составляет от 14 до 25 пунктов. Для заголовков можно использовать более крупные шрифты — 20pt и выше, а для обычного текста лучший диапазон — 14-18pt.

Независимо от выбранного размера шрифта убедитесь, что размер шрифта:

а) делает текст разборчивым — размер шрифта 12pt и меньше может существенно ухудшить читабельность;

б) соответствует шрифту — например, для своего стандартного шрифта Roboto Google рекомендует не менее 16 pt. С другой стороны, San Francisco — шрифт, используемый, в том числе в устройствах Apple, должен иметь размер не менее 18 пунктов;

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

Как выбрать размер шапки?

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

а) Размер заголовка h2 должен составлять 300 % от размера шрифта, используемого в основном тексте. Например, если на вашем веб-сайте для основного текста используется шрифт размером 18 pt, оптимальный размер для заголовков – 54 pt.

б) Заголовок h3 должен быть размером 200% от размера шрифта основного текста. В этом случае при базовом размере шрифта 18 пунктов идеальный заголовок h3 будет иметь размер 36 пунктов.

⚡ BOWWE Tip:

​​​​Для последовательных заголовков вы можете постепенно уменьшать процент; например, для заголовка h5 вы можете умножить основной размер шрифта на 130-150%.

Шрифты в мобильной версии

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

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

б) Заголовки не должны занимать более двух строк.

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

⚡ BOWWE Tip:

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

3. Используйте принцип: меньше значит больше

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

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

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

⚡ BOWWE Tip:

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

4. Разработайте структуру контента

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

Высота строки или интерлиньяж

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

Абзацы и длина строки

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

Выравнивание

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

⚡ BOWWE Tip:

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

5. Подберите цвета

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

Выберите максимум 3 цвета

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

Позаботьтесь о контрасте

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

Сопоставьте только совпадающие цвета

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

⚡ BOWWE Tip:

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

6. Выделяйтесь

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

⚡ BOWWE Tip:

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

7. Создайте свой масштаб шрифта

Масштабирование шрифта — это процесс увеличения или уменьшения размера текста на веб-сайте.

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

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

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

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

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

⚡ BOWWE Tip:

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

8. Проводите анализ и найдите вдохновение

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

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

Готовы создать свой сайт?

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

Начинай сейчас!

Лучшие правила типографики — вывод

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

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

Читайте также:

Karol Andruszków

CEO BOWWE

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

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

категории:

ВСЕ
Agentstva
Sozdayte svoy sayt
Vedeniye bloga
Sovety dlya biznesa
Biznes-prilozheniya
Blestyashcheye portfolio i rezyume
Frilansery i sozdateli
SEO
Sotsial’nyye media
Onlayn marketing
Veb-dizayn

ПОСЛЕДНИЕ ПОСТЫ:

Как увеличить посещаемость блога — 21 совет блогерам

2023 March 27

23+ революционных маркетинговых инструмента на основе ИИ

2023 March 13

Как создать потрясающий свадебный сайт

2023 February 27

SEO подсказки ChatGPT для максимального эффекта

2023 February 20

60 статистических фактов о блоге, которые нужно знать

2023 February 13

Как задавать размеры шрифта в вёрстке — Журнал «Код»

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

Коротко о том, что уже было: пиксели и высота экрана

Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:

font-size: 16px;

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

font-size: 10vh;

Проценты и шрифты

Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем  font-size: 50%;, то браузер сделает так:

1. Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
2. Если есть — возьмёт 50 процентов от них.
3. Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>
	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 40px;
		}
		
	</style>
</head>
<body>
	<p>Привет, это журнал «Код»!</p>
	
</body>
</html>

Браузер взял размер шрифта 40 пикселей из общих настроек для всей страницы.

Теперь добавим отдельный стиль для абзаца и в нём укажем, что размер текста должен быть 50%:

p {
font-size: 50%;
}


А вот что будет, если мы удалим размер в пикселях из стиля body{} и дадим браузеру самому разобраться с размером:

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

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

Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>
	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<!-- текст с основным размером шрифта -->
	<p>Привет, это журнал «Код»!</p>
	<!-- эта строка будет иметь шрифт в 2 раза больше -->
	<p>А это — статья про размеры шрифтов</p>
	<!-- а эта — в 0,7 раза меньше, чем основной шрифт-->
	<p>И здесь всё постоянно меняется</p>
</body>
</html>

Так же, как и с процентами, em — это относительные значения. Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body{}. Но что, если мы вложим с помощью блоков абзацы друг в друга?

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>
	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 20px;
		}
	</style>
</head>
<body>
	<div>
		<!-- текст с основным размером шрифта -->
		<p>Привет, это журнал «Код»!</p>
		<!-- меняем размер текста относительно предыдущего блока -->
		<div>
			<!-- эта строка будет иметь шрифт в 2 раза больше предыдущего блока -->
			<p>Делаем шрифт побольше предыдущего</p>
			<!-- снова меняем размер текста, но уже относительно предыдущего блока -->
			<div >
				<!-- эта строка будет в 0,7 раза меньше, чем в предыдущем блоке-->
				<p>А этот — поменьше своего предыдущего</p>
			</div>
		</div>
	</div>
</body>
</html>

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

👉 Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.

Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html{}. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html{}.

Межстрочный интервал

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

Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает. Вам ни о чём думать не нужно:

p {font-size: 1em; line-height: normal}

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

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

p {line-height: 22px;}p {line-height: 1.3em;}p {line-height: 130%;}

Как адаптировать размер текста под размер экрана

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

Делаем сами: адаптивный сайт

Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.

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

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Размеры шрифтов</title>
	<style type="text/css">
		/*задаём общие параметры для всей страницы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		}
		h3 {
		  /*заголовок будет фиксированного размера*/
		  font-size: 40px;
		}
		p {
		  /*а размер текста будет зависеть от ширины экрана*/
		  font-size: 5vw;
		}
	</style>
</head>`
<body>
	<div>
		<!-- заголовок, размер которого зависит от размера экрана -->
		<h3>Привет, это журнал «Код»!</h3>
		
		<!-- основной текст, который не зависит от размера экрана -->
		<p>Этот текст зависит от ширины экрана.  Чем больше ширина — тем больше размер этого текста</p>
</body>
</html>

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

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

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

@media screen and (min-width: 601px) { h3 {font-size: 110px;}}@media screen and (max-width: 600px) { h3 {font-size: 40px;}}

Теперь всё в порядке.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Как. Большой. Должен. А. Шрифт. Быть | Типография. Правила.

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

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

Правила типографики

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

Итак, сегодня мы представляем вам статью о правилах типографики .

Начнем.

Правила оформления для мобильного просмотра

Вам, наверное, интересно, почему мы начинаем с мобильного просмотра. Причина довольно проста на самом деле.

Mobile First – мобильный просмотр

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

Какой размер шрифта выбрать?

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

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

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

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

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

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

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

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

Страницы, насыщенные текстом

Страницы, насыщенные текстом

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

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

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

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

Если вы посмотрите на Facebook или
Twitter, например, вы можете заметить, насколько мал весь текст (представьте, насколько хаотично
они выглядели бы, если бы их текст был размером 18 пикселей!). Хотя они позволяют вам настроить
размер шрифта на тот, который подходит вам лучше всего, их размеры по умолчанию действительно
маленький.

Текст хэштега имеет размер 14 пикселей, благодаря чему изображения находятся в фокусе

Если вы посмотрите на Facebook,
размеры текста варьируются от 12px до 14px, никогда не достигая 16px.

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

Awwwards — еще один интерактивный веб-сайт.

Почему 16 пикселей для основного текста?

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

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

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

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

Почему размер текста так важен?

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

Теги заголовков

Во-вторых, он создает иерархию, которая является одним из наиболее важных аспектов, когда речь идет об организации. Заголовок — это текст самого большого размера (h2), а все остальные заголовки меньшего размера. Есть h3, h4 и многие другие заголовки, которые вы можете использовать, чтобы показать, что один из них связан с другим. Если вы посмотрите на блоги, размещенные через WordPress, размер заголовка h3 составляет 38 пикселей, заголовок h4 — 25 пикселей, а основной текст — 18 пикселей. На страницах много текста, и это отлично работает.

Размер заголовка и размер основного текста

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

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

Когда вы открываете веб-сайт Baunfire, вы сразу же знаете, кто они и чем занимаются, все из самого названия.

Ранее мы упоминали WordPress и то, как они определяют размер шрифта. h3 — это подзаголовок, который используется чаще всего и выглядит наиболее естественно по сравнению с основным текстом по одной веской причине: он вдвое больше его размера. h3 имеет размер 31 пиксель, а основной текст имеет размер 16 пикселей.

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

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

Не забудьте межстрочный интервал

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

Межстрочный интервал значительно повышает общую читаемость, а межстрочный интервал 130–150 % является идеальным. Чаще всего используется 140%, но это зависит от сайта и вашего вкуса. Кроме того, убедитесь, что ваши строки не слишком длинные, потому что очень длинные строки могут сбить с толку глаз (обратите внимание, что строки в этом тексте очень короткие).

Пример межстрочного интервала

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

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

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

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

В заключение

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

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

Надеюсь, этот пост был вам полезен и спасибо за прочтение!

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

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

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

Святая троица типографики

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

1. размер шрифта,

90 137 высоты строки (или интерлиньяжа) и 90 138

2. длина линии (или мера)

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

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

Разные виды текста имеют разный размер

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

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

Основной текст

По умолчанию: 16px или 1em
На мобильных устройствах: используйте значения по умолчанию, иногда на 10% меньше что сделало основной текст слишком маленьким. В видео я показываю ужасный пример веб-сайта отеля, где основной текст имеет размер всего 11 пикселей на рабочем столе, что просто смешно. Даже для мобильного он был бы слишком мал.

Отображать текст (Заголовок 1)

По умолчанию: 40px или 2. 5em для

На мобильных устройствах: 32px или 2em 9012 слишком много места, так как он занимает слишком много места.
На рабочем столе: увеличьте до 64px или 4em

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

до

.

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

Функциональный текст (подписи, навигация)

По умолчанию: 12 пикселей от до 14 пикселей или 0,75em от до 0,875em подняться до 16px или 1em

Этот текст может быть меньше , чем основной текст. Это потому, что в противном случае вам было бы трудно вписать его в свой дизайн. Тем не менее, он должен быть читаемым. Один из советов здесь — использовать немного более сильный вес (например, средний) и также увеличить отслеживание (на 1% или 0,01 em).

Прокачай мой шрифт на Patreon

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

Относительные юниты рок

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

Глядя на следующий пример кода, мне как дизайнеру легче понять и обработать rem.

 р {
 размер шрифта: 1rem;
}
ч2 {
 размер шрифта: 3rem; /* 3 раза больше основного текста */
}
h3 {
 размер шрифта: 2rem; /* 2 раза больше основного текста */
}
h4 {
 размер шрифта: 1.5rem; /* 1 ½ раза больше основного текста */
}
figcaption {
 размер шрифта: 0.75rem; /* ¾ основного текста */
} 

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

Мы говорили о хорошем размере по умолчанию в качестве отправной точки и об относительных единицах. Давайте объединим все это в одну вещь, которую я нахожу наиболее важен для правильного размера текста в адаптивном веб-дизайне. Размер текста соответствует расстоянию читателя от устройства. Предположим, что чем больше окно просмотра, тем дальше оно от читателя. Ширина 370 пикселей может быть смартфоном, поднесенным ближе к телу. С другой стороны, окно просмотра шириной 1920 пикселей может быть внешним монитором или iMac, расположенным на рабочем столе дальше от читателя. Помимо моих грубых рекомендаций, отличным инструментом для этого является калькулятор размера шрифта от leserlich.info.

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

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

См. перо
размер шрифта Оливер (@glyphe)
на КодПене.

Зависит от шрифта

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

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

В этом коротком видео, а также в обзоре Captura Now , также подробно рассказывается о размере шрифта по отношению к высоте x.