Как лучше всего адаптировать типографику на сайте?

Question

[ramanovsky]

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


ps: доступ у заказчика к дизайнеру нету.

Comments

[Владислав Черненко]

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

[ramanovsky]

Владислав Черненко, нет, просто думал что можно как то праивльно значения расчитывать.

Answer 1

[Ankhena]

Есть вариант задавать шрифты с помощью единиц vw и функции clamp.
https://jsfiddle.net/hqvft54b/

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

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

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

Comments

[ramanovsky]

Читал об этом, что-то для меня сложновато это было. Хотелось бы более простое решение.

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

[Ankhena]

ramanovsky,

Хотелось бы более простое решение.

Даже не знаю куда проще.

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

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

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

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

[ramanovsky]

Ankhena, значит просто на глаз менять значение размера шрифта и все ?
Меня это волнует. Я наврное не правильно вопрос задал...

У меня сейчас есть макет шириной 1200px и там шрифты примерно такие:
p -> 24px
h1 => 48px
small 18px

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

[Ankhena]

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

[ramanovsky]

Ankhena, смотрю через свой телефон. Из за этого задался вопросом. В chrome и FF номарльно отображается через Ctrl + Shift + M а на телефоне слишеом большие буквы были.

[Ankhena]

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

[ramanovsky]

Ankhena, это Ctrl + Shift + R ?

[Ankhena]

ramanovsky, сложно сказать где у телефона ctrl и shift
Я хотя бы о банальном версионировании файлов
<link rel="stylesheet" href="css/style.css?v123">

[ramanovsky]

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