Как рассчитать шрифт с поправкой на увеличение или уменьшения размера страницы?

Question

[Ingernirated]

Всем привет!
Подскажите, есть какая-то формула пропорциональности основного размера шрифта ко всем размерам?
Например, если заголовки у меня 36px при ширине экрана 1440, то какие нужно делать при 1920 и 1024, чтобы ширина блоков текста не становилась меньше или слишком большой?

Comments

[Rustam Bainazarov]

Так не делают, если мы говорим о responsive-дизайне.

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

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

Если я вас, конечно, верно понял.

[Pavel Designer]

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

[Rustam Bainazarov]

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

Что, собственно, не отменяет мои слова про размеры шрифтов. Никто не использует VW, только пиксели да em/rem. И размеры шрифтов не скачут туда-сюда при изменении размера экрана.

Могут только какие-нибудь тексты с большим размером сделать меньше на мобильных или мелкие элементы сделать больше. Могут немного поменять базовый размер шрифта (16 в основном, планшетном виде и 14 в версии для мобильных).

P. S. Вроде, полностью адаптивные — сайты «Связного» и Apple. Я в пути, поэтому не могу проверить.

[Ingernirated]

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

Answer 1

[Сергей delphinpro]

Ширина всех символов разная (если шрифт не моноширинный).
Ширина символа "0" (ноль) в css выражается единицей 1ch
Ширина вьюпорта (видимая часть окна) выражается единицей 1vw.
Зависимость ширины символа от его высоты (и от размера шрифта получается) можно посмотреть только открыв шрифт в специальном редакторе. Это отношение очевидно будет специфичным для любого отдельного семейства шрифта или его начертания.

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

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

Answer 2

[poniyur]

Алгебра за 5 класс:
36 - 1440
x - 100%
x = 36 * 100 / 1440 = 2.571;
Получается такой вот стиль:
h1 {
font-size: 2.571vw;
}
Задайте такой стиль и поизменяйте размер экрана. Вроде должно получиться.
Я раньше, когда был верстальщиком, делал резиновые шрифты, но я точно не помню как это делал, а работы уже утеряны, попробуйте так.

Answer 3

[Shamhaner]

https://css-live.ru/articles/rukovodstvo-po-razmer...