Как сделать чтобы шрифт уменьшался от размеров экрана css
Наличие фиксированного размера по сравнению с устройствами не всегда является хорошей идеей. Ключевым моментом является получение читаемого размера шрифта и удобной длины строки в большинстве видовых экранов. Элементы просмотра CSS и медиа запросы предоставляют средства для реализации гибкого размера шрифта.
Размер шрифта и длина строки
Существует множество разных представлений, на которых находится лучший размер шрифта пикселя, или является минимальным читаемым размером. Конечно, верно то, что большие шрифты более доступны и удобны для чтения. Тенденция последних лет заключалась в увеличении размеров шрифтов. Большинство сайтов сегодня используют размер шрифта от 14 до 18 пикселей для основного текста. Эксперты по изобилии рекомендуют размер шрифта не менее 16 пикселей.
Размер шрифта намного больше, чем кажется. Обратите внимание, что количество слов на строку также является ключевым. Мы все испытали стресс при чтении узких столбцов текста двумя словами на строку. Длинные линии, как правило, трудно сосредоточиться, потому что мы используем начало и конец строк в качестве ссылок неосознанно. Однако исследование 2005 года показало, что мы стремимся читать быстрее текст с длинными строками длиной до 95 символов.
Единицы просмотра CSS
Единицы просмотра CSS: vw, vh, vmin и vmax были созданы специально для того, чтобы длина в CSS, включая размер шрифта, была относительно размера видового экрана. Они позволяют получить действительно отзывчивый размер шрифта с его размером в процентах от ширины или высоты видового экрана.
1. vw обозначает ширину окна просмотра. 1vw равно 1% ширины окна просмотра.
2. vh обозначает высоту видового экрана. 1vh равно 1% от высоты.
3. vmin относится к кратчайшему (ширина или высота), а vmax — самому длинному.
Пиксели, ems, rems и медиа-запросы
Второй способ реализовать отзывчивый размер шрифта — использовать медиа-запросы вместе с текстом фиксированного размера, используя значения ems, rems и px:
1. px определяет высоту букв в пикселях CSS
2. em относительно размера шрифта родителя, например. 2em = 28px, если размер шрифта родительского элемента равен 14px.
3. rem (root em) относительно размера шрифта элемента html. 1 rem измеряет то же самое во всем документе. ems трудно поддерживать в правилах, вложенных слишком глубоко, но у rems нет проблем.
Что делать дальше?
Размеры шрифтов и задаете их не в пикселях, а в em. Расчет такой: 1em = 16px и 1em = 100%
Расчет такой: 1em = 16px и 1em = 100%.
Например: берем заголловок, где нужн задать размер шрифта 30 пикселей. Здесь поможет колькулятор, что делим 30 на 16. Получается 1,875.
Остается поставить в CSS:
Если нужно задать размер текста 9 пикселей:
Задавая размеры шрифтов, а точнее в таком стиле, то можете не бояться, если шрифт начнет свое изменение в настройках браузера.
Как на самом деле сделать размер шрифта отзывчивым, и здесь появляются медиа-запросы. Если вы используете ems, просто измените размер шрифта html по мере необходимости и тщательно настройте детали.
Отзывчивый размер шрифта
Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.
Но типографика до недавнего времени не была столь гибкой. Все что мы могли — изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.
Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.
Коротко о viewport-зависимых единицах
100vw равно ширине (100vh — высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc()). 100vmax — равно большему из пары высота/ширина, 100vmin — меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.
Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.
Задача
Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px, а при 1280px — 24px.
Путь к решению
Вспомнив курс школьной математики пришел к выводу что моя задача не что иное, как уравнение прямой проходящей через 2 точки. Первая точка — меньшая ширины экрана и размер шрифта на ней, вторая — бОльшая ширина и соответствующий ей размер шрифта.
На оси X — ширина окна браузера, на оси Y — наш размер шрифта. Получаем уравнение с двумя неизвестными:
y — наш неизвестный размер шрифта, x — текущий размер экрана. x1 — минимальное значение шрифта, x2 — максимальное значение шрифта. y1 и y2 минимальное и максимальные значение ширины экрана соответственно.
А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:
Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):
Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem:
Используем Sass/SCSS
Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:
Коеффициенты k и b можно получить из уравнения прямой по двум точкам:
В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:
Для защиты от неверно введенных данных, можно обрезать единицы измерений при получении данных. Для этого можно использовать функцию strip-unit или взять ее из библиотеки bourbon:
Расширяем возможности нашей функции
Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.
Например, мы хотим фолбек для старых браузеров:
Теперь можно в качестве фолбека передавать оптимальный размер шрифта на случай, когда vw не поддерживается.
Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:
Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.
Результат
Мы получили базовую функцию, которая выполняет весь основной функционал:
Для ее расширения использовались миксины, с помощью которых можно сделать фоллбеки, ограничения, конвертацию единиц измерения и многое другое. Поиграться со всем этим можно на codepen. Если Вы не хотите использовать Sass здесь вы найдете способ вычислений на чистом CSS.
Font size relative to the user's screen resolution?
I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using «em» as a unit but it is relative to the browser’s font size, so when I change resolutions the font size stays the same.
Tried also pts and percentages. Nothing works as I need it.
Give me a hint of how to proceed, please.
11 Answers 11
New Way
There are several ways to achieve this.
*CSS supports dimensions that are relative to viewport.
3.2vw = 3.2% of width of viewport
3.2vh = 3.2% of height of viewport
3.2vmin = Smaller of 3.2vw or 3.2vh
3.2vmax = Bigger of 3.2vw or 3.2vh
Old Way
Use media query but requires font sizes for several breakpoints
Use dimensions in % or rem. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em.
“Root Ems”(rem): The “rem” is a scalable unit. 1rem is equal to the font-size of the body/html, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Root Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..
Элементы адаптивной типографики
Разработка адаптивной типографики может сбить с толку. Какие единицы вы должны использовать для размера шрифта: px, em, rem, vw? Как вы можете убедиться, что ваши шрифты доступны? И что такое гибкая типографика?
В этой статье мы ознакомимся с основами определения размера шрифтов в CSS и рассмотрим несколько различных подходов, которые вы можете использовать в своих собственных проектах веб-сайтов.
Каковы лучшие практики написания стилей шрифтов в CSS?
Давайте рассмотрим несколько основных рекомендаций, которые сделают ваши шрифты хорошо выглядящими на всех устройствах и обеспечат их доступность для пользователей, которым нужно либо увеличить масштаб, либо изменить базовый размер шрифта в браузере.
Используйте относительные, а не абсолютные единицы для шрифтов
Абсолютные единицы статичны, и их результирующие размеры не зависят от чего-либо еще. В CSS единицей измерения по умолчанию, к которой мы можем обратиться, является единица пикселя (px).
Размер шрифта 18px будет 18 пикселей, независимо от того, на каком устройстве или экране вы его просматриваете. А пиксели знакомы и довольно просты для понимания. Мы знаем, что шрифт 10px крошечный, а шрифт 100px — гигантский заголовок.
Может показаться заманчивым использовать пиксели для font-size , но это не рекомендуется по причинам доступности.
Это связано с тем, что даже несмотря на то, что увеличение изображения приведет к увеличению размера в пикселях, изменение базового размера шрифта в настройках браузера не окажет никакого эффекта. Таким образом, пиксели не являются полностью доступным решением для шрифтов.
Относительные единицы — это единицы измерения, которые зависят от других факторов, таких как ширина области просмотра, высота области просмотра или родительский элемент. Существует несколько относительных единиц: проценты (%), em, rem, ширина области просмотра (vw) и высота области просмотра (vh).
Процент (%)
Процентные единицы — это просто процент от родительского элемента. Если у вас есть <div> , для которого задан width: 50% , он будет половиной ширины своего родителя. Для шрифтов установка font-size: 100% сделает ваш текст 100% базового размера шрифта, установленного в браузере. Большинство браузеров по умолчанию используют базовый размер шрифта 16px , поэтому 100% этого размера будет 16px , а 50% — 8px .
Обычно считается, что для обеспечения доступности рекомендуется установить базовый font-size на 100% в элементе <html> и использовать относительные единицы для обработки всех других правил font-size в вашем CSS. Это позволяет пользователям изменять базовый размер шрифта в своем браузере и контролировать размер шрифта веб-страниц.
Единица em — пережиток тех времен, когда типографика включала в себя настоящие металлические блоки и печатные станки. Согласно Википедии, «одна em традиционно определялась как ширина заглавной буквы M в текущем шрифте и eё кегль». Таким образом, настоящее имя «em», похоже, происходит от фонетического произношения буквы M. Поскольку единица 1 em зависит от текущего размера шрифта, это означает, что размер текста 1em не всегда будет таким же размером в пикселях на экране.
Как это переводится в CSS, так это то, что любой текст, размер которого определяется с использованием единиц em, будет зависеть от font-size его родительского элемента. Например, если вы установили для своего <html> значение font-size: 100% (что дает 16px ), дочерний элемент с font-size: 2em будет иметь размер 2 * 16 или 32px .
Одним из недостатков использования em-единиц является то, что вы можете столкнуться с неожиданным результатом, если у вас возникнут вложенные размеры шрифта.
Подумайте, установлен ли у вас базовый шрифт на 16px , для дочернего элемента — на 1.5em (в итоге на 24px ), а затем на элемент абзаца в качестве дочернего для этого элемента, установленного на 0.75em .
Вы могли подумать, что размер абзаца будет 0.75 * 16px или 12px . Но эти 0.75em будут относиться к родительскому абзацу, установленному на 24px , поэтому размер шрифта в результате фактически будет 0.75 * 24px или 18px .
Rem (root em)
Вы можете избежать этой проблемы вложенности, используя модуль rem (root em).
Как следует из названия, он будет вести себя как единица em в том смысле, что он относителен. Но вместо того, чтобы относиться к родительскому элементу, размер шрифта с использованием единиц rem всегда будет относиться к корневому элементу веб-сайта, что обычно означает элемент <html> .
Если вы установите размер корневого шрифта на 100% или 16 пикселей, вы можете быть уверены, что любые другие шрифты, использующие единицы rem, будут относиться к этим 16px .
Вы можете увидеть единицы em и rem в действии в созданной мной демоверсии Codepen.
Единицы области просмотра (viewport units)
Единицы области просмотра относительно новы, и они могут добавить дополнительный уровень отзывчивости к CSS.
Они включают ширину области просмотра (vw) и высоту области просмотра (vh). Эти единицы измеряют фактическую ширину и высоту вашего устройства.
Допустим, у вас есть iPhone 8 с шириной устройства 375 пикселей и высотой 667 пикселей. Для этого iPhone 100vw составляет 100% ширины области просмотра, что составляет 375px , а 50vw — это 50% ширины области просмотра, или 187.5px .
Захватывающая часть использования единиц просмотра в отношении размера шрифта заключается в том, что они по своей сути адаптивны, поскольку область просмотра изменяется на разных устройствах.
Если вы установите для текста значение font-size: 4vw , это будет равно 4% от ширины вашего окна просмотра. На этом iPhone font-size будет 15px . Если у вас планшет шириной 768px , вы получите font-size 30.72px , а на экране рабочего стола шириной 1440px текст будет отображаться с размером 58px .
Возможно, вы уже определили проблему с использованием единиц просмотра для шрифтов. Текст абзаца, приятный и читаемый при разрешении 15px на мобильных телефонах, быстро станет слишком большим — почти 60px для ширины рабочего стола.
И есть еще один недостаток использования единиц просмотра для шрифтов. Тот факт, что они относятся к размеру устройства, а не к базовому font-size , означает, что на них не повлияет изменение базового font-size в браузере.
Попытка увеличить текст путем увеличения в окне браузера может пойти не так, как ожидалось, поскольку само окно просмотра изменяется при увеличении или уменьшении масштаба. Вы можете сами увидеть, как ведет себя размер текста с помощью единиц просмотра в демонстрации Codepen здесь.
Однако, как мы увидим позже, мы все еще можем каким-то образом использовать изначально отзывчивую единицу окна просмотра для изменения размера шрифта.
Различные подходы к адаптивной типографике
Теперь, когда у нас есть базовая линия того, как изменение размера шрифта работает в CSS, давайте рассмотрим несколько различных подходов, которые у нас есть для создания адаптивного текста для Интернета. Мы рассмотрим традиционный адаптивный подход, а также два разных гибких подхода. Любой из этих трех вариантов — прекрасное решение для адаптивной типографики, в зависимости от ваших предпочтений и требований к дизайну.
Подход №1: Адаптивная типографика
Адаптивный дизайн — это практика написания стилей CSS таким образом, чтобы сайт правильно отображался на всех устройствах ширины. Независимо от того, используете ли вы мобильный телефон, планшет или сверхширокий монитор, веб-сайт должен хорошо выглядеть и быть читаемым, даже если он не будет выглядеть одинаково на всех устройствах.
Использование медиа-запросов для нацеливания на разную ширину точек останова и написание разных наборов CSS для разных точек останова лежат в основе адаптивного дизайна. Например, вы можете создать макет с двумя столбцами на рабочем столе и добавить его к макету с одним столбцом для планшета и мобильного устройства.
Для типографики мы можем использовать медиа-запросы, чтобы уменьшить размер шрифта на мобильных устройствах и увеличить на десктопах:
В этом примере текст h1 будет иметь размер 2.25rem ( 36px ) для устройств шириной менее 700 пикселей, 3.5rem ( 56px ) для устройств шириной от 700 до 1000 пикселей и 4.75rem ( 76px ) для устройств шириной больше или равной 1000 пикселей.
При таком подходе мы используем базовый font-size 100% и единицы относительного размера шрифта с rems, чтобы веб-сайт был доступен. Пользователь может увеличить размер отображаемого содержимого, изменив настройку размера шрифта своего браузера или увеличив масштаб. Это стандартный адаптивный подход, и он также позволяет довольно легко понять, как шрифты будут вести себя, глядя на стили CSS.
Возможные проблемы
Одна проблема, которая возникает при использовании медиа-запросов для ваших стилей CSS, заключается в том, что они не полностью соответствуют требованиям будущего.
Хотя большинство современных телефонов имеют ширину не более 414px , а планшеты — не более 800px , мы можем с уверенностью предположить, что ширина этих устройств будет увеличиваться по мере развития технологий. Так что наши брейкпоинты, вероятно, нужно будет обновить в какой-то момент. (Это не столько практический вопрос, сколько один из принципов.)
Было бы хорошо, если бы мы могли писать стили, которые более элегантно масштабируются по мере увеличения ширины устройства — и если бы они могли плавно масштабироваться независимо от ширины устройства, не будучи столь зависимыми от медиа-запросов. Если бы стили масштабировались плавно, текст был бы немного больше на больших телефонах по сравнению с меньшими телефонами и больше на экранах настольных компьютеров по сравнению с небольшими экранами ноутбуков.
Давайте посмотрим, как следующий подход решит эту проблему.
Подход # 2: гибкая типографика
Гибкая типографика — это способ изменения размера шрифтов таким образом, чтобы они увеличивались по мере увеличения ширины области просмотра. И они не обязательно требуют медиа-запросов!
Двумя основными компонентами гибкой типографики являются:
- CSS-функция calc() , которая позволяет выполнять математические операции, используя комбинацию различных CSS-модулей.
- Единицы области просмотра, в частности, ширина экрана ( vw )
Как мы упоминали ранее, единицы области просмотра сами по себе быстро выйдут из-под контроля в зависимости от того, насколько они будут масштабироваться вверх и вниз. Но что, если мы объединим единицы vw с единицами rem, используя calc() ? Используя эту функцию, мы можем создать такое правило:
Это вычисленное значение будет не менее 1.3rem или около 21px , если область просмотра гипотетически была равна нулю (чего не было бы в реальном мире). Тогда значение 3.6vw добавит скорость роста, которую мы можем контролировать, чтобы она была более постепенной, чем просто единицы окна просмотра сами по себе.
При ширине области просмотра 414px , 3.6vw будет 3,6% или около 15px . Таким образом, рассчётный font-size будет 21px + 15px , или около 36px . При ширине устройства 1440px , 3.6vw будет около 52px , поэтому font-size будет 21px + 52px или около 73px .
Эта комбинация модулей calc() и области просмотра — действительно мощный способ прописывать шрифты, размер которых зависит от размера. И мы знаем, что это решение будет доступно, если установить html < font-size: 100% >и использовать единицы rem как часть расчета.
Вы можете посмотреть рабочую демонстрацию гибкой типографики здесь.
И если вам интересно продолжить чтение по этой теме, Крис Койер рассказал о некоторых возможных вариантах использования формул смешанных единиц в CSS Tricks, а Майк Ритмюллер применил это для вычисления font-size .
Возможные проблемы
Как мы упоминали ранее, есть некоторые проблемы доступности с единицами области просмотра, поскольку на них не влияет изменение базового размера шрифта браузера. И хотя сами единицы rem подвержены влиянию, это будет компенсировано единицами области просмотра при вычислении.
Это означает, что чем больше вы установите часть vw функции calc() , тем больше будет это смещение. Но в целом у вас все будет хорошо, если вы установите часть rem функции на 1rem или больше.
Получение более точного контроля с помощью медиа-запросов
Кроме того, существует некоторая степень приближения при использовании этой функции расчета для размера шрифта. По своей природе он будет продолжать увеличивать font-size по мере увеличения размера экрана и уменьшать его по мере уменьшения ширины устройства.
В большинстве случаев это нормально, но не всегда желательно. Если вам нужно добавить конкретные ограничения на размер шрифта, к сожалению, всё-таки придется добавить медиа-запросы. Таким образом вы можете установить минимальные и максимальные значения размера шрифта для наименьшем и наибольшем брейкпоинтах и плавно масштабировать между этими значениями ширины.
Вот пример ограничения шрифта не менее 36 пикселей и не более 76 пикселей:
Если вы выберете этот подход, вам, возможно, придется поиграть со значениями rem и vw, чтобы попытаться приблизиться к 36px при 414px и 76px при 1440px . Лично мне нравится подход без медиа-запросов, поскольку он позволяет гибко реагировать на размер шрифта с помощью одного правила CSS.
Если вам действительно нужно иметь точный контроль над размером шрифта в определенных брейкпоинтах, этот последний подход даст вам это. Давайте проверим!
Подход № 3: гибкая типографика с «замками»
Этот метод аналогичен предыдущему подходу, в котором для вычисления font-size используется calc() . Он добавляет некоторую математику, чтобы гарантировать, что font-size будет именно таким, как мы хотим, как для минимального, так и для максимального брейкпоинта.
Обратной стороной, как мы вскоре увидим, является то, что эта точность требует более сложной математической формулы, чем простое сложение. Мы рассмотрим, как это работает, и я оставлю вам решать, подходит ли это для ваших проектов.
Наш предыдущий подход использовал calc(1.3rem + 3.6vw) , который будет увеличиваться при увеличении ширины области просмотра и уменьшаться при ее уменьшении. Теперь мы хотим сделать font-size равным 36px при ширине области просмотра 414px и ровно 76px при ширине области просмотра 1440px .
Формула с использованием диапазона ширины области просмотра и размеров шрифта
Для этого мы воспользуемся математической формулой, впервые написанной в 2012 году (насколько я могу судить) Тимом Брауном в сообщении в блоге, чтобы вычислить line-height . Майк Ритмюллер и другие затем применили его к font-size . Позже Тим опубликовал дополнительное объяснение, используя аналогию с замками каналов в 2016 году. Вот формула в функции font-size: calc( , которую мы используем:
Давайте рассмотрим три части формулы. Крайний левый раздел начинается с минимального размера шрифта. Это гарантирует, что результирующий размер шрифта будет не меньше этого значения, если не больше. Затем, игнорируя пока средний раздел, мы можем перейти к последнему разделу справа, чтобы увидеть разницу между максимальным размером шрифта и минимальным размером шрифта. Если мы добавим эту разницу к минимальному размеру шрифта, мы получим максимальный желаемый размер шрифта.
Теперь давайте посмотрим на более сложную среднюю часть, в которой используется ширина области просмотра. Она умножается на разницу в размере шрифта. Если этот множитель равен 0, итоговая формула будет равна минимальному размеру шрифта. А если множитель равен 1, итоговая формула будет равна максимальному размеру шрифта.
Это возможно будет легче увидеть, если мы подставим фактические значения для каждой части формулы. Давайте подставим значения и предположим, что текущая ширина области просмотра будет равна минимальной ширине области просмотра, 414px . (Сначала мы будем использовать пиксели, чтобы упростить синтаксический анализ, а затем, в самом конце, преобразуем в ремы)
Мы получаем 36 пикселей + (0 * 40 пикселей) = 36 пикселей. Это именно то, что мы хотим — при ширине области просмотра 414 пикселей мы хотим, чтобы шрифт был 36 пикселей. Теперь предположим, что текущая ширина области просмотра будет равна максимальной ширине области просмотра, 1440 пикселей:
После того, как мы посчитаем, у нас получится 36 пикселей + (1 * 40 пикселей) = 76 пикселей. Опять же, это то, что мы хотим — при ширине области просмотра 1440 пикселей шрифт будет 76 пикселей. Теперь, преобразовав наши пиксели в ремы, окончательное правило размера шрифта будет выглядеть так:
Обратите внимание, что нам нужно удалить единицы отовсюду, кроме начального минимального размера шрифта и числителя множителя области просмотра, чтобы функция calc () работала правильно.
Добавление медиа-запросов для ограничения минимального и максимального размера шрифта
Поскольку формула будет вычислять font-size между нашими контрольными точками от 414px до 1440px , нам нужно использовать медиа-запросы, чтобы заставить наши минимальные и максимальные значения font-size ниже 414px и больше 1440px . Это похоже на то, что мы делали в предыдущем подходе, и будет выглядеть так:
Вы также можете превратить это в Sass mixin для удобства:
Вы можете посмотреть живую демонстрацию этой формулы гибкой типографики здесь.
Этот последний подход с гибкой типографикой дает нам высочайший уровень контроля над масштабированием font-size . Однако вполне возможно, что это будет сложнее, чем требуется. Чтобы полностью разобраться в математике, требуется немалое количество времени, что может усугубить разочарование разработчика, впервые увидевшего это правило CSS.
Вывод
Если бы мне пришлось выбрать один подход для моих собственных нужд веб-разработки, я бы, вероятно, выбрал более простой гибкий подход без медиа-запросов. На мой взгляд, трудно превзойти возможность установить font-size с помощью всего одной строчки CSS:
Несмотря на то, что нет явных минимальных или максимальных ограничений на font-size , если вы больше опираетесь на rems, а не на часть vw в инструкции calc() , вы не получите слишком маленький размер шрифта или слишком большой.