Отзывчивый размер шрифта

Уверен, что никому не нужно объяснять почему сайты должны быть гибкими и адаптивными. Все используют проценты и медиа-запросы в своей верстке. Сейчас это уже стандарт.

Но типографика до недавнего времени не была столь гибкой. Все что мы могли — изменять размеры шрифта от брейкпоинта к брейкпоинту. В таком случае мы получали скорее адаптивную типографику нежели отзывчивую. Для каждого медиа-запроса нужно задавать свои значения. Можно конечно использовать компонентный подход с относительными размерами шрифта, что может существенно ускорить процесс редактирования, но принципиально это ничего не меняет. При перемещении компонента в другое место нужно будет опять пробегать по всем медиа запросам и подставлять новые значения.

Но потом появились они — vw, vh, vmin, vmax — единицы измерения, которые базируются на viewport. У нас появился шанс на отзывчивую типографику.

Коротко о viewport-зависимых единицах

100vw равно ширине (100vh — высоте) экрана в пикселях (или будет приведено к другим величинам если использовать в calc()). 100vmax — равно большему из пары высота/ширина, 100vmin — меньшему. Сразу же начали появляться рецепты использования этих чудо величин в типографике.

Но в таком виде их сложно контролировать. Иногда попадались рецепты с использованием каких-то магических процентных величин. Но меня не устраивал вариант разбираться откуда они, а потом считать или подбирать вручную их для получения нужных мне размеров в моих условиях.

Задача

Хотелось иметь универсальный рецепт, который позволял бы задавать минимальное и максимальное значения для размера шрифта, да еще и привязать эти цифры к конкретным размерам viewport. Например, при ширине экрана в 480px иметь ровно 16px, а при 1280px — 24px.

Путь к решению

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

На оси X — ширина окна браузера, на оси Y — наш размер шрифта. Получаем уравнение с двумя неизвестными:

y — наш неизвестный размер шрифта, x — текущий размер экрана. x₁ — минимальное значение шрифта, x₂ — максимальное значение шрифта. y₁ и y₂ минимальное и максимальные значение ширины экрана соответственно.

А теперь самое интересное: имея CSS функцию calc() и текущее значение вьюпорта благодаря vw можно получить динамический размер шрифта:

font-size: calc( (100vw - Vmin)/(Vmax - Vmin) * (Fmax - Fmin) + Fmin);

Эту формулу уже можно использовать в чистом CSS. Только нужно помнить, что при операциях умножения/деления хотя бы один из аргументов должен быть без единиц измерения, а при сложение/вычитании — оба с единицами. Подставив наши значения получим рабочий вариант (обратите внимание на использование единиц измерения):

font-size: calc( (100vw - 480px)/(1280 - 480) * (24 - 16) + 16px);

Единицы измерений можно использовать любые, главное, чтобы они совпадали. Тоже самое, только в rem:

font-size: calc( (100vw - 30rem)/(80 - 30) * (1.5 - 1) + 1rem);

Используем Sass/SCSS

Имея под рукой такой инструмент как Sass можно большую часть вычислений спрятать от браузера.
Для этого больше подойдет следующее уравнение прямой:

Коеффициенты k и b можно получить из уравнения прямой по двум точкам:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max) < $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b * 1px; @return calc( #* 100vw + # ); > .fluid-font-size

В случае, если мы хотим иметь возможность использовать не только px но и другие единицы измерений, можно передавать их одним из параметров:

@function calcFluidFontSize($f-min, $f-max, $v-min, $v-max, $units: px) < $k: ($f-max - $f-min)/($v-max - $v-min); $b: $f-min - $k * $v-min; $b: $b + $units; @return calc( #* 100vw + # ); > .fluid-font-size

Для защиты от неверно введенных данных, можно обрезать единицы измерений при получении данных. Для этого можно использовать функцию strip-unit или взять ее из библиотеки bourbon:

@function strip-unit($number) < @if type-of($number) == 'number' and not unitless($number) < @return $number / ($number * 0 + 1); >@return $number; > @function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) < $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #* 100vw + # ); >

Расширяем возможности нашей функции

Функцию для вычисления размера шрифта мы имеем. Теперь на ее основе можно создать миксин, который можно расширять как угодно.

Например, мы хотим фолбек для старых браузеров:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) < @if ($fallback) < font-size: $fallback; >font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); > .fluid-font-size

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

Можно ограничить размеры шрифта нашим минимальным и/или максимальным значением:

@mixin fluidFontSize($f-min, $f-max, $w-min, $w-max, $fallback: false) < font-size: $f-min; @media (min-width: $w-min) < @if ($fallback) < font-size: $fallback; >font-size: calcFluidFontSize($f-min, $f-max, $w-min, $w-max, px); > @media (min-width: $w-max) < font-size: $f-max; >> .fluid-font-size

Теперь при ширине экрана меньше 480px шрифт всегда будет 16px, после 480 он станет резиновым, а после 1280px всегда будет 24px.

Результат

Мы получили базовую функцию, которая выполняет весь основной функционал:

@function calcFluidFontSize($f-min, $f-max, $w-min, $w-max, $units: px) < $f-min: strip-unit($f-min); $f-max: strip-unit($f-max); $w-min: strip-unit($w-min); $w-max: strip-unit($w-max); $k: ($f-max - $f-min)/($w-max - $w-min); $b: $f-min - $k * $w-min; $b: $b + $units; @return calc( #* 100vw + # ); >

Для ее расширения использовались миксины, с помощью которых можно сделать фоллбеки, ограничения, конвертацию единиц измерения и многое другое. Поиграться со всем этим можно на codepen. Если Вы не хотите использовать Sass здесь вы найдете способ вычислений на чистом CSS.

Источник

Responsive Font Size (Optimal Text at Every Breakpoint)

Responsive web design is not only about dynamic layouts, font size can be responsive too.

On small screens, there’s not much room so it makes sense to use the smallest font you can without compromising readability. The consensus is mobile font size should be 16px (source, source).

On tablet and desktop, you have more screen real estate so you can afford to make the text size a bit bigger. A good font size for large devices is 18px — 20px.

So what’s the best way to set these sizes?

How To Make Font Size Responsive

To make font size responsive in steps, set the base font size at each breakpoint. To create fluid text that smoothly changes size, use the calc() function to calculate a ratio between pixels and viewport widths, this will make the base font size grow at the correct rate relative to the screen width.

Stepped Responsive Font Size

To achieve a stepped font size, we simply set the exact base font size that we want for each breakpoint. Here’s what that looks like in CSS:

html < font-size: 16px; >@media (min-width:768px) < font-size: 18px; >@media (min-width:1024px) < font-size: 19px; >@media (min-width:1280px)

There are two problems with this method:

• The font size is only optimal at particular breakpoints, in between it might feel too big or too small.
• It’s verbose. We have to explicitly set the font size for each breakpoint which requires a lot of CSS rules.

Fortunately, there’s a simpler way.

Fluid Responsive Font Size

Rather than setting the font size at each breakpoint, we can create a formula to calculate our font size relative to the screen width. We do that with the calc() function.

calc() is supported in all modern browsers so it’s safe and reliable to use (source).

Here’s how our font size formula looks in CSS:

This formula calculates our font size as 15px plus 0.00390625% of the screen width. These values have been specifically chosen because they result in the perfect font sizes at every breakpoint:

Fluid font sizes per breakpoint

Screen width	Font size
320px (eg: iPhone 4 & 5)	16px
768px (eg: iPad portrait)	18px
1024px (eg: iPad landscape)	19px
1280px	20px
1536px	21px
1920px	23px
2560px	25px

This method is both simple and powerful.

Want an example? This website (that you’re reading right now) uses exactly this method of achieving responsive font size. Adjust your browser window to see it in action!

Setting Relative Font Sizes with Responsive Text

When using responsive font sizes, use rem units to specify any text that needs to be relative in size to your base font size.

Using rems in this way will maintain the proportions between all font sizes so they always look good.

Want responsive padding too? See my article: Responsive Padding, Margin & Gutters With CSS Calc

Are IDs or classes better? My guide has the answer: ID vs Class: Which CSS Selector Should You Use? (6 Examples).

“I’ve been developing websites professionally for over two decades and running this site since 1997! During this time I’ve found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It’s easy to set up and there’s no minimum traffic requirements.

SiteGround — Best Website Hosting

Professional WordPress hosting with 24/7 customer support that is the best in the industry, hands down!

Surfer SEO — Best Content Optimization Tool

Use the power of AI to optimise your website content and increase article rankings on Google.

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Web design Architecture Life drawing Art gallery Synesthesia Comics

Источник

Как сделать — Отзывчивый текст

Узнать, как создать адаптивную типографику с помощью CSS.

Отзывчивый текст

Привет мир

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Адаптивный размер шрифта

Размер текста может быть установлен с помощью единици vw , что означает, что «ширина видового экрана».

Таким образом, размер текста будет соответствовать размеру окна браузера:

Пример

Привет мир

Измените размер окна браузера, чтобы увидеть, как масштабируется размер шрифта.

Видовой экран — это размер окна браузера. 1vw = 1% от ширины видового экрана. Если видовой экран имеет ширину 50cm, то 1vw составляет 0,5cm.

Изменение размера шрифта с помощью медиа запросов

Вы также можете использовать медиа запросы для изменения размера шрифта элемента на определенных размерах экрана:

Изменяемый шрифт.

Пример

/* Если размер экрана 601px широкий или больше, установите размер шрифта

/* Если размер экрана составляет 600 пикселей в ширину или меньше, установите размер шрифта равным 30px */
@media screen and (max-width: 600px) div.example font-size: 30px;
>
>

Совет: Зайдите на наш учебник CSS Шрифт, чтобы узнать больше о шрифтах.

Чтобы узнать больше о медиа запросах, читайте наш учебник CSS Медиа запросы.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

Как сделать адаптивный шрифт css?

На сайте, есть меню ! На компьютере смотрится хорошо, но на более меньших размером гаджетов, шрифт ну слишком маленький, как лучше прописать в css , чтобы в зависимости от размера экрана, менялся размер шрифта в меню ?

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

media screen and (max-width: 768px) body < font-size: 2rem; >
Здесь меняете стили для нужных элементов , они применяться при размере экрана меньше 768px
>

Игорь Мясников, Извиняюсь конечно, но почему он их не видит ?

Игорь Мясников, В том то и дело, я если правильно понимаю то изменил его !
Если я конечно правильно понимаю! Я в коде ничего не менял, просто через браузер в инструментах для разработчиков поставил разрешение экрана как у iphone 8, но он все равно такой же и остался !

fastovvlad,
media only screen and (max-device-width:480px) /* Стили для мобильных браузеров ; (iPhone) */
>
или

Он в нем и задан !

Задавать размеры текста, различных отступов, которые должны уменьшаться при уменьшении разрешения, с помощью единиц em и rem, в media-queries сделать несколько брекпоинтов, где уменьшать font-size у html в зависимости от разрешения. Нескольким элементам лучше задавать фиксированные размеры, в px. Например, параграфам. Иначе, как у вас, происходит чрезмерное уменьшение шрифтов. В своих сайтах обычно перед началом разработки уже выставляю p < font-size: 16px; >— тогда текст одинаково хорошо читается на любых устройствах. Некоторый не столь важный текст, показывающий, например, дополнительную информацию и тому подобное, можно делать меньше, например 12-14 px.

Источник