По умолчанию: 16px или 1em
На мобильном устройстве: используйте значения по умолчанию, иногда на 10% меньше
На компьютере: увеличьте до 24px ] или 1.5em

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

Отображаемый текст (заголовок 1)

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

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

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

на

.

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

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

По умолчанию: 12px до 14px или 0,75em до 0,875em
На мобильных устройствах: не опускайтесь ниже по умолчанию он уже очень мал
На рабочем столе: увеличьте до 16px или 1em

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

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

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

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

  p {
 размер шрифта: 1 бэр;
}

h1 {
 размер шрифта: 2,5 бэр; / * В 3 раза больше основного текста * /
}

h2 {
 размер шрифта: 2rem; / * В 2 раза больше основного текста * /
}

h3 {
 размер шрифта: 1,5 бэр; / * В 1 ½ раза больше основного текста * /
}

figcaption {
 размер шрифта: 0,75 бэр; / * ¾ основного текста * /
}  

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

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

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

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

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

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