Адаптивный шрифт. Пример реализации отзывчивого (резинового) шрифта на CSS + SCSS миксин

Адаптивный или отзывчивый шрифт - это мечта любого верстальщика.
Я пересмотрел множество вариантов реализации адаптивной верстки текста, посидел вечерок и вывел для себя надежный работающий вариант. Им и хочу с тобой поделиться! Бонус SCSS миксин!
🔴 UPD упрощенная формула (медиа запрос не нужен):
font-size: calc(24px + 16 * ((100vw - 320px) / (1280 - 320)));
SCSS Миксин:
$maxWidth: 1280;
@mixin adaptiv-font($pcSize, $mobSize) {
$addSize: $pcSize - $mobSize;
$maxWidth: $maxWidth - 320;
font-size: calc(#{$mobSize + px} + #{$addSize} * ((100vw - 320px) / #{$maxWidth}));
}
Препроцессор SCSS/SASS: • Препроцессор SASS/SCSS...
🔴 Получить доступ к плюшкам + поддержать канал: / freelancerlifestyle
🔴 Telegram канал: t.me/freelance... (teleg.run/free...)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: / freelancerlifestyle
🔴 Instagram: / freelancer.lifestyle
👋 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
🤟 Живи, а работай в свободное время! ©

[@FreelancerLifeStyle]

🔴UPD упрощенная формула (медиа запрос не нужен) в описании к выпуску! 🤟 Полезно? Напиши что думаешь! 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle

[@zr0nis487]

Привет Для начала - Спасибо большое за элегантное решение насущной проблемы) Но сегодня нашел небольшой баг при увеличении страницы ctrl+scroll (или разрешении больше макетного, в режиме разработки) шрифт превышает макетные размеры. Из-за этого на больших экранах (или сильном увеличении) шрифт может ломать вёрстку Вылечил просто брейкпоинтом на размер макета с макетным font-size: @mixin adaptiv-font($pcSize, $mobSize){ $addSize: $pcSize - $mobSize; $addMobSize: $pcSize + $mobSize * .7; @media (max-width: 767px){font-size: calc(#{$mobSize + px} + #{$addMobSize} * ((100vw - 320px) / #{$maxWidht}));} @media (min-width: 768px){font-size: calc(#{$mobSize + px} + #{$addSize} * (100vw / #{$maxWidht}));} @media (min-width: #{$maxWidht + px}){font-size: #{$pcSize + px};} } посмотрел на разных сайтах, на больших экранах, как правило, оставляют среднеразмерный font-size, да и по useability это вроде как логично, так-что решение на поверхности пишу я это только потому, что кто-то мог не обратить на это внимание (собственно и я это совершенно случайно заметил), и считаю обязанностью предупредить согильдийцев)

[@FreelancerLifeStyle]

@@zr0nis487 спасибо, буду разбираться! Можно пробовать переписать на rem должно помочь

[@alexmart6968]

​@@FreelancerLifeStyle​ имеется ввиду старую версию?

[@Dim_Dimych21]

Женя, а вы сами такой подход часто используете?

[@enterkvas]

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

[@MrWEBNEO]

Интереснее было смотреть не на сам способ, а на то, как радуется Женя ) Эмоции - это то чего не хватает в IT-блогинге )

[@FreelancerLifeStyle]

Спасибо! Я надеюсь способ тоже ничего)

[@наталіяклемишова]

Кстати, да ☝️

[@ups7write]

@@FreelancerLifeStyle Ничего... =D Да это Круто!

[@cerporan2323]

Не знаю других влогеров, которые рассказывали бы с таким воодушевлением. Видео огонь)

[@FreelancerLifeStyle]

Спасибо!

[@Zibinskiy]

Евгений, ты не фрилансер, ты - ПРОФЕССОР! ))))

[@FreelancerLifeStyle]

Спасибо))

[@taraskravchuk9139]

Скільки щирості та дитячої радості! You made my day! Дякую!!!

[@V1adimir__Krutikov]

Круто, что автор подает материал с такой эмоциональностью. Это очень положительно влияет на процесс просмотра. Кто смотрит Барабекуса, со мной согласятся)))) А про качество материала в предыдущих комментариях все сказано. Хочу пожелать автору поскорее 100к и 1000к подписчиков. Тут уж придется поработать, и не только в свободное время)))

[@FreelancerLifeStyle]

Спасибо! Я постараюсь)

[@Alex-ey9mh]

Я не понимаю,почему у тебя до сих пор нету как минимум 1миллиона подписчиков,такие топовые видосы.Удачи тебе в продвижении канала!

[@ДенчикШмель-ъ6ц]

Та на подобных каналах всегда маловато подписчиков.мало кто хочет обучаться...Они лучше посмотрят что будет с арбузом если сбросить его с 5 этажа)

[@L-A-O-S]

@@ДенчикШмель-ъ6ц ну что с арбузом, тоже интересно.

[@FreelancerLifeStyle]

Спасибо!

[@DmitriyVereschagin]

И чем, по-твоему, будут заниматься эти 1 млн. новоиспеченных верстальщиков? Сходи на канал с миллионом подписчиков, поймешь почему здесь такого числа никогда не будет.

[@stas9066]

@@DmitriyVereschagin почему ??? По моему мнению канал очень хороший. Например не понимаю, чего не хватает в этом канале. Для того, чтобы был миллион.

[@ДианаПынзарь-ч6й]

Ну никак не нарадуюсь, что нашла этот канал! СПАСИБО тебе за такой качественный материал!

[@FreelancerLifeStyle]

Пожалуйста!

[@kupiros]

it сфера это то место, где постоянно нужно учиться и находить что-то новое, смотреть на чужие примеры и изобретать свои) Вы один из немногих авторов, которые подают инфу максимально легко и без воды. Тут и новичкам полезно, и бывалые разрабы найдут для себя много нового) отличная подача и в целом качество видосов! Ну и эмоции настоящие, любой разработчик радуется как ребенок, когда всё начинает работать как надо😅☝️ главное не перехвалить 😹спасибо, Жека, за твой позитив😉

[@FreelancerLifeStyle]

Все верно, я рад как ребенок)) Спасибо!

[@наталіяклемишова]

Согласна!

[@raloynner9385]

оооо очень полезная штука, вечно проблемы были со шрифтами, спасибо !

[@FreelancerLifeStyle]

Пожалуйста!

[@serg1000serg]

Ты самый ЖИВОЙ БЛОГЕР из всех тех, кто занимается этой темой!!! Всегда интересно и приятно смотреть. Это не обычная роботизированная подача фактов с призывом пройти обучение. Видно что ты живешь этим и получаешь истинное удовольствие от того что делаешь!!! СПАСИБО ЗА ТВОИ ТРУДЫ!

[@FreelancerLifeStyle]

Спасибо большое! Я рад что нравится!

[@afterlifereality]

Сразу вижу предпринимателя-профессионала. Радуется своим продуктом как ребенок!

[@FreelancerLifeStyle]

Хех, это да)

[@alexvlasov2474]

В конце ролика восхитительное выражение лица. У меня было такое когда первый раз подключил :hover; . Спасибо за знания и настроение!

[@DezmosS]

Недавно на тебя наткнулся и спасибо судьбе за это, эта формула просто что-то с чем то) Спасибо огромное) Ожидаю в дальнейшем ещё больше полезной информации для web разработчика)

[@FreelancerLifeStyle]

Будет!

[@МаксимГасилов-х8у]

$gratitude: 100%; Мало того что материал бомбезный, так благодаря ему еще и выкупил интерполяцию в sass. (Написал простенький миксин, чтобы быстрее шрифты подключать и все мозги прокипятил в попытках использовать переменные в url. А оно вот как просто оказывается!) Спасибо огромное! Лучший блогер по фронту.

[@FreelancerLifeStyle]

Спасибо!

[@АлександрМерный-м1ч]

Видно что автор человек идейный, фанат своего дела. Приятно видеть, что развивается не только аудитория но и автор.

[@FreelancerLifeStyle]

Спасибо!

[@barabash1984]

Вот это я понимаю контент!!! Нигде еще не встречал подобной темы. Жека ,ты большой молодец!!!!!

[@FreelancerLifeStyle]

Спасибо!

[@dobryden7196]

А я прекрасно понимаю, почему автор так радуется. Сколько ни пробую, адекватного и тем более бесшовного адаптива, да ещё и нормально настраиваемого - хрен добьёшься. Я бы тоже обрадовался, это как колесо открыть, честное слово. Спасибо за отличный метод. Не так сложно кстати, просто для каждого вида текста свою базовую макетную ширину указываешь, а остальное копируешь. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@deniskotov]

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

[@Andrei_Porsev]

Жека, спасибо за труды и эмоции. В наше время мало кто готов делится своими наработками. Но ты не из тех и за это тебе отдельный респект и уважуха! 😉👍

[@FreelancerLifeStyle]

Спасибо!

[@Valera197615]

Большое спасибо за Вашу работу! Большое спасибо за Ваше видео! Велике спасибі за Ваше відео! Дякую за Ваше відео! Thanks so much for your video! Ďakujem vám veľmi pekne za prácu! Ďakujeme vám za vaše video! Nagyon köszönöm munkáját! Nagyon köszönöm a videót! Dziękuję bardzo za twoją pracę! Dziękuję bardzo za Twój film! Děkuji vám za vaši práci! Děkujeme za vaše video!

[@FreelancerLifeStyle]

Хех) Спасибо!

[@horrorchance6002]

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

[@FreelancerLifeStyle]

Спасибо!

[@PavloShkura]

Дякую, Вам за працю, цей метод просто вогонь!!!

[@FreelancerLifeStyle]

Будь ласка

[@Denis-uz6bu]

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

[@rtkot3639]

Блин, твои формулы реально крутая тема, адаптивы делать одно удовольствие :D

[@ОлегЯровиков-м3з]

Чувак то что я увидел в данном видео это даже не бомба, это просто мать-бомба, Я в восхищении!!!!!!!!!!!!!!!

[@FreelancerLifeStyle]

спасибо!

[@tonit2237]

Евгений, вы просто ГЕНИЙ) Огромная благодарочка за такую работу!) Реально зачетная тема) Давай еще больше подобных лайфхаков) Большой ЛУКАС! И быстрее уже 100к

[@FreelancerLifeStyle]

Спасибо!

[@КириллТимофеев-п1л]

Жека, это нереально крутая штука! Не перестаю повторять: ты капитальный красавчик! Пойду юзать твою фичу в новом проекте. Спасибо!

[@FreelancerLifeStyle]

Пожалуйста!

[@haskvel]

Да это ж гребаная магия. Просто браво!!!

[@FreelancerLifeStyle]

Спасибо!

[@arbeitwork]

Пересмотрел уже половину видео на этом канал! Женя, огромное спасибо за Вам за Ваш труд! Здесь супер качественный и ценный контент, которы меня уже несколько раз очень выручил!

[@FreelancerLifeStyle]

Я рад!

[@54546546ish]

крутой гайд, сразу показывает насколько упрощает жизнь препроцессор, большое спасибо автору, возьму себе на заметку этот трюк :)

[@FreelancerLifeStyle]

Пожалуйста!

[@СветловаНаталья]

Очень круто, долго искала как сделать так чтобы шрифт подходил под все экраны.Очень весело рассказываешь!)))

[@FreelancerLifeStyle]

Спасибо!

[@АндрейЗаботин-о1ь]

Офигенно!!! Порадовали эмоции, прям улыбнуло тоже!))

[@FreelancerLifeStyle]

Спасибо!))

[@svhanz]

Как всегда- информативно, познавательно и позитив просто зашкаливает! Евгений! Ты великий человек!

[@FreelancerLifeStyle]

Спасибо!

[@elwvin]

прям настроение даже поднимается, когда смотришь с каким счастьем Женя все рассказывает!))) Классное видео!!!)

[@natalika_bo]

Египетскаясила! Я метровые медиа запросы расписываю, пробую, выясняю, а тут вот оно как. Таким методом моя сss сократится на треть =) Спасибо и за науку и за атмосферу видео.

[@FreelancerLifeStyle]

Пожалуйста!

[@iteushm]

Женя, спасибо тебе за этот крутой урок! Обучаюсь верстке по твоим видео, это лучшее во всем интернете что я видел!

[@artyshock569]

Немного переделал формулу, запихнул её в clamp(), теперь даже при безбожном зуме могу не боятся за верхнюю и нижнию границу размера шрифта. Дякую.

[@ИльяБондаренко-м6л]

Спасибо, только не давно искал инфу на адаптив шрифта, нарыл только то, что не понятно. Очень круто, спасибо тебе большое. Прям огонёк какой-то 🔥

[@FreelancerLifeStyle]

Я рад!

[@СесенСергеин]

Круто!) Такой воодушевленный!) Каеф! Ты молодец, сделал великолепную работу!) И с нами поделился) Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@ViKiNG_89]

Женя, ты волшебник 🧙‍♂️, ОГРОМНОЕ СПАСИБО !!!

[@FreelancerLifeStyle]

Пожалуйста!

[@Brooklyn-lab]

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

[@GagikHarutyunyan_dev]

Женя, спасибо огромное. Для меня, как разработчика, который не особо любит верстать контент просто бесценен!!

[@FreelancerLifeStyle]

Я рад!

[@zientenin5526]

Начало твоих видео всегда заставляет улыбаться. "Приве-е-ет! Это фрилансер по жизни!" с улыбкой на лице сильно отличается от монотонного "Привет. С вами N" и т.д. и т.п. других ютуберов.

[@FreelancerLifeStyle]

Я рад!

[@zientenin5526]

@@FreelancerLifeStyle Спасибо тебе за отличный контент!

[@MrBelkz]

Вместе с полезными знаниями, приятная доза позитива!!! Так держать!!!! =)))))

[@ogorkos]

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

[@СергейТерещенко-р8н]

Спасибо Женя. Ты все очень понятно объясняешь, в отличии от некоторых блогеров.

[@FreelancerLifeStyle]

Спасибо! Стараюсь!

[@nochdeveloper7240]

Вижу огонь в твоих глазах и это круто. У тебя талант (хотя думаю за этим скрыт реальный опыт и серьёзная подготовка к видео) к подачи материала. Я пересмотрел около 20 разных топ it блогеров и могу с уверенностью сказать, у тебя получается лучше всех. Минимум воды, максимум рабочих актуальных схем верстки и реальный позитив. Буду с удовольствием следить за продвижением твоего канала и ждать новых видео. Большая просьба, не скатывайся со временем мусоля одну тему по 30 минут как другие, и тебе гарантирован успех. Удачи.

[@nikolay_it_master]

Весьма толково. И педантично. Лайк.

[@FreelancerLifeStyle]

Спасибо!

[@Viktorres1]

Дякую, Євгене! Це круті формули. Все працює ідеально.

[@kseniakudriavtseva7164]

Ты просто невероятно жизнерадостный) Спасибо за крутой урок и отдельно за мотивацию!

[@FreelancerLifeStyle]

Пожалуйста!

[@Abdulla100000]

Полюбил я тебя) Классные ролики! Куча работы проделано и все в темпе без просадок) так держать бро! Ты мне помог уже во многих местах, обязательно отправлю тебе кэш!

[@АндрейЗизин]

Женя. Огромное спасибо тебе за проделанную тобою работу.

[@X1N06]

Просто чудо какое -то ))) я не понимаю как это работает под капотом , но триллиард процентов сохраню где нибудь файлик стилевой с формулами )) огромное спасибо )) оттестил на своем макете , просто пушка . Огромное спасибо. Подобные фишки просто бесценны✌️✌️✌️

[@panya_indastreet]

Как всегда, все просто супер! Однозначно лайк

[@FreelancerLifeStyle]

Спасибо!

[@lazydragon-2000]

Спасибо большое! Этот адаптив можно использовать не только для размера шрифта, но и для других свойств, которые нужно адаптировать.

[@vladimirplyukhin5234]

Жирнючий лайк! Спас просто на дэдлайне!

[@bentonfraizer69]

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

[@АртемКа-в3к8й]

Спасибо Жек, это бомба!) Очень заметно как ты сияешь от такого открытия))

[@FreelancerLifeStyle]

Да, но оказывается подобное уже было) В описании упрощенная формула

[@АртемКа-в3к8й]

@@FreelancerLifeStyle мне твоя по душе)

[@ЕленаКостюченко-т2д]

У Вас такие классные видео, они меня захватывают! Приятно видеть настолько увлеченного ЧЕЛОВЕКА! Спасибо!!!

[@БодяБодюл]

Рад что это появилось в СНГ комюнити . Приблизительную формулу можно встретишь на забугорных форумах, правда там ее использовали для адаптации шрифта под верстку писем так как media работает худо. Спасибо за урок и подробное объяснение . Однозначно сразу в закладки быстрого доступа)

[@FreelancerLifeStyle]

Спасибо!

[@adwers6427]

Фантастика, всегда об этом мечтал! Спасибо!!!

[@FreelancerLifeStyle]

Пожалуйста!

[@ИванПахомов-т6о]

Конечно чудо! Большое спасибо, что делитесь такими крутыми вещами!

[@ВолодимирДзьола]

Дуже чудове відео для пояснення адаптивності шрифта, і це супер бомбезна формула, хочу для автора що тепер є простіший спосіб - це приблизно так, font-size: clamp(1em, 1vw, 2em); Дякуючи цьому відео, поясненню і таким емоціям я знайшов цей запис.

[@userbilas]

Долго искал, пробовал и всё не мог получить такой результат. Спасибо, спас от бессонных ночей и в конце концов успокоил)

[@usashaui6382]

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

[@FreelancerLifeStyle]

Все верно!

[@georgebabula2319]

Женя, спасибо тебе огромное за метод! Это действительно мега-крутяк всего за пару кликов! Я не понимаю логику людей поставивших дизлайк: у них или не получилось, или они не поняли теории. 2 куска кода в описании работают "на ура" даже в sass и в связке с gulp. Результат действительно шикарный.

[@LordOzzy1986]

Потрясающе! Шикарный урок, подача информация, материал, супер! ✌

[@igarok881]

Думал будут em и rem, а тут как закрутил)) Спс за годноту!

[@FreelancerLifeStyle]

Пожалуйста!

[@user-pszakharov.v.a]

Спасибо тебе огромное. За твои труды. Очень позитивно. И главное понятно.

[@FreelancerLifeStyle]

Пожалуйста!

[@csharp_developer]

Как и всегда всё круто))) А эмоции просто божественны))))

[@FreelancerLifeStyle]

Спасибо! ☺

[@merdankuliyev2998]

Один из самых позитивных уроков что я видел. Спасибо автору😁👍

[@СамаилМалеев]

Я вообще чайник в этой сфере, но даже я смог адаптировать свой текст на сайте под мобильные устройства благодаря вам, Спасибо !

[@kolyabokov88]

Блин, уже давно ничего по вёрстке не смотрел, больше js углубляюсь но вот это видео 😘😘😘 Спасибо, Жень!

[@FreelancerLifeStyle]

Пожалуйста!

[@bruno_lider7177]

Женя, это невероятно!! Дай Бог тебе здоровья и твоей семье. Я причем попробовал ту же формулу подставить width для div, И ОНА РАБОТАЕТ!! Я таким образом подстроил изменения величины логотипа например😉👍 Спасибо огромное🙏

[@Maximus.S]

гениально, доходчиво объяснил и почти просто)! Жека, красава!

[@surpri6e130]

Просто фантастика! Очень нужная вещь! Как обычно крутяка!!!

[@Perederiieva]

Такое искреннее счастье!) Это прям я, когда у меня самой получилось сделать что-то сложное на JS / jQuery

[@FreelancerLifeStyle]

Круто!

[@yuratezher7696]

все видео сидел и смеялся с реакции, прям зарядил энергией) Спасибо что ты делаешь такие видосики!!!

[@alikragimov4795]

Собственно, материал полезный, подготовлен качественно, имеет новизну. Преподнесен доступно и в положительном ключе. Собственно, лайк)

[@АндрейДанилюк-л6ц]

Евгений, я тут разбирался с адаптивными шрифтами и хочу поделится формулой которая, как мне кажется, немного проще и не требует медиазапроса. Формула следующая: calc(55px + (55 - 18) * (100vw - 1440px) / (1440 - 320)) , где 55px - это размер шрифта при ширине экрана 1440px, 18px - размер шрифта при 320px . Когда размер въюпорта равен 1440px второе слагаемое равно нулю и размер шрифта равен 55px. Когда значение вьюпорта меньше 1440px разность в скобках отрицательная и при достижении 320px результатом деления выражений в скобках будет -1, шрифт при этом будет равен 18px. При увеличении въюпорта разность в скобках будет положительной и шрифт будет увеличиваться. Напиши, пожалуйста, ответ можно ли ее использовать, и не допустил ли я ошибки, может я что-то не учел.

[@FreelancerLifeStyle]

Смотри описание урока

[@АлексейУханёв-ш7ъ]

Спасибо большое, сейчас смотрю уроки, так сказать учусь, я немного упустил времени, но надеюсь догоню,спасибо большое за такие уроки! Скоро диплом, пора учится

[@FreelancerLifeStyle]

Пожалуйста!

[@Kira_sk]

Дружище ты вовремя))) я как раз думал как решить этот вопрос)

[@FreelancerLifeStyle]

Я рад!

[@WILLING__0_0]

Вау,как раз недавно читал статью в телеге с подобной информацией и формулами и, конечно же, как говорится: нифига не понял но очень интересно. И Евгений как всегда прочитал мысли и сделал урок по адаптивному шрифту. Спасибо :)

[@1MrGerman]

Подивився багато твоїх відео за останні 2 місяця, залишу хоч один коментар) я в захваті від твоєї роботи! буду пробувати цей метод з шрифтами)

[@jiza2377]

Афигеть, очень круто.Спасибо , взял на вооружение!)

[@FreelancerLifeStyle]

Я рад!

[@anatolys9203]

Класс! Шикарное видео и объяснение! Спасибо тебе за твой труд! Ты лучший!)

[@FreelancerLifeStyle]

Пожалуйста!

[@GANGST1ER]

Круто, теперь буду пробовать везде использовать формулу. Спасибо за сокращённую версию в описании. В этом мире всё должно быть таким адаптивным. Чтобы посмотреть размер можно навести инструментом выбора элемента)

[@ЮлияКобзева-е7о]

Евгений, спасибо большое за видео! Это как раз то, что я искала для своего проекта. Вы мне очень помогли! =*

[@artyviolet788]

Ваааау!! Вообще огонь! А я вот для себе по аналогии сделал ещё и для свойства line-height. И теперь ещё сильнее радуюсь! =) Эта формула пушка! Спасибо большое.))))))

[@front-end14]

Просто магия, ты лучший 👍

[@FreelancerLifeStyle]

Спасибо!

[@mme9679]

Только благодаря тебе разбираю все самые сложные моменты , мерси!)

[@jugo-stream]

Способ Топ а с миксином ТОПИЩЕ!)

[@workproject4018]

Красавчик. Действительно, даже не знаю, что тут более важно, эмоции от работающего решения или сам приём со шрифтами ) Воодушевление от результата, помогли замотивироваться (устал немного), а рабочий приём, действительно, очень крутой и полезный. Лайк х2

[@КоляХарьковский-ы4в]

Блин чувак это круто! Я раньше решал такое с помощью заклинаний и лапки голубя.... но на смену пришла математика фрилансера по жизни) спасибо!

[@Timyr48]

Дякую, Євген, за магію!

[@clleoweb4083]

Просто разрыв. Круто. Очередной лайк и большой Респект! Почему этот метод нигде не описан.

[@RainbowJet1]

Офигенно) Вывел годную формулу, вообще супер! А то я мучался с подбором размеров шрифтов для всех экранов и в vw, и в vmax, и с calc пытался. И за миксин спс, буду пробовать, лайк однозначно)

[@ЗЯМКО]

Не понимаю, как оно работает,но оно работает^_^ Спасибо, тебя реально приятно слушать, и даже голос не бесит и спать не хочется!

[@gros_chat_noir]

Боже да это просто офигенно! Если по этой же самой формуле задавать размер блока с текстом, то поможно подобраить такой размер при котром будут сохранятся переносы слов также как на макете! И не нужно использовать костыли вроде, и неразрывного пробела! Класс! Жека спасибо!!!