Как должен меняться размер шрифтов при адаптивной верстке?

Question

[Uladzimir A]

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

Answer 1

[Павел Радьков]

Правило, которым пользуюсь я:

В настольной версии размер основного шрифта (абзацы) не менее 16px. Заголовки от h4 до h1 растут по с коэфициентом 1.250 (Major Third): h4 - 20px, h3 - 24px, h2 - 32px, h1 - 40px. (округленно)

Для маленьких экранов (<768px) абзацы остаются 16px или уменьшаются до 14px (если много текста). Заголовки h4...h1 пересчитываются от нового размера абзаца с коэффициентом 1.125 (Major Second). В этом случае размеры заголовков растут более плавно: h4 - 18px, h3 - 20px, h2 - 23px, h1 - 26px.

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

Comments

[Uladzimir A]

Спасибо, интересно. А вы к этому сами пришли или где-то прочитали!

[Павел Радьков]

Оба варианта. Читал статьи по типографике и экспериментировал

Answer 2

[Nikbes]

Используйте вместо px - em.
Подробнее об em здесь: htmlbook.ru/content/edinitsy-izmereniya
Прочтите также данную книгу: abookapart.com/products/responsive-web-design

Comments

[Uladzimir A]

Все это я читал и все понятно. Вопрос в другом. Допустим при уменьшении размера страницы дело доходит до очередного медиа запроса и в нем я хочу изменить размер шрифта. Так вот есть ли какие-нибудь рекомендации по этому делу? Т.е. какой размер шрифта с каким размером экрана и т.д. Если я уменьшил страницу с 1920 до 1480px, то как должен измениться размер шрифта? Хотя мне кажется это больше вопрос из области типографии (длина строки не более 70 символов и т.д.).

[Nikbes]

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

[Uladzimir A]

Иван Беседа: Спасибо!