Как масштабировать размер шрифт в адаптивном сайте в веб дизайне

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

Пример Вопроса:

У вас разрешение 1920px. (рабочая область 1110px.) а Н1 – 47px., сколько он (Н-1) будет px если разрешение будет >768px.?

Ответ: Все просто – 31px., а решили эту задачу с помощью сайта gridlover.net и медиа запросов. Используя «em» а не «px», (хотя и px хороши, но em имеют тысячные доли)

html, .root {
    font-size: 12px;
    line-height: 15px;
}
body, .article {
    font-family: sans-serif;
    font-size: 1em;
    line-height: 1.25em;
    max-width: 560px;
    margin: auto;
}
h1, .h1 {
    font-size: 4.25em;
    line-height: 1.17647059em;
    margin-top: 0.29411765em;
    margin-bottom: 0.5882353em;
}
h2, .h2 {
    font-size: 2.58333333em;
    line-height: 1.4516129em;
    margin-top: 0.48387097em;
    margin-bottom: 0.48387097em;
}
h3, .h3 {
    font-size: 1.58333333em;
    line-height: 1.57894737em;
    margin-top: 0.78947368em;
    margin-bottom: 0em;

Медиа запрос используется по примеру:

@media screen and (max-width: 960px ) {
    html {
        font-size: 13px;
    }
}

@media screen and (max-width: 767px ) {
    html {
        font-size: 12px;
    }
}

@media screen and (max-width: 640px ) {
    html {
        font-size: 11px;
    }
}

@media screen and (max-width: 480px ) {
    html {
        font-size: 10px;
    }
}

@media screen and (max-width: 320px ) {
    html {
        font-size: 9px;
    }
}

Меня font-size для тега html мы задаем пропорции всем заголовком от H1 до Н5 и не только.

Разберемся в параметрах сайта gridlover.net, что такое Scale factor (масштаб) и почему он 1,618? И почему Line height (высота линий) 1,3 (советую ≈ 1.25, почему? можно почитать в статье «Как рассчитать межстрочное расстояние»)

1,618 – Золотое сечение, первые его цифры, думаю если не знаете, то погуглете, масштабирование будет вестись с помощью пропорций, которые придумали ок. 300 лет до н. э.
Кстати так и bootstrap придумали, но об этом в другой раз.

1,3 – потому что это самые оптимальные значения, так закладывается усредненное значение межстрочного интервала (советую ≈ 1.25, почему? можно почитать в статье «Как рассчитать межстрочное расстояние»).

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