Всем доброго времени суток и с наступившим.
Prelude
Долго не решался написать. Не было подходящей темы, да и читая опубликованные статьи понимал, что сам не смог бы написать развернутый текст (Халк не уметь много писать).
Но прошло время и пришло понимание, что нужно поделиться всем тем, что копошится в голове. А именно: адаптивный шрифт текста, который изменялся бы пропорционально, отображался красиво не только на разных устройствах, но и при разных размерах экрана.
Review
На данный момент мне известно несколько способов адаптации текста:
- REM. Наконец-то относительный размер шрифта рассчитывается от корня страницы (Root EM), а именно — от тега HTML, а не от родителя. Все бы ничего, но если мы меняем размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта;
- media. Тут тоже все красиво и просто. До этого размера у нас такой шрифт, а до этого — такой. Будь добр именно так и отображать;
- Специальные JS скрипты, такие как fillText и bigText, автоматически изменяющие размер шрифта для того, чтобы растянуть строку на всю ширину. Слоганы, девизы, названия разделов выглядят круто в большинстве своем благодаря именно вам;
- VW. Довольно таки свежий формат шрифтов, который пропорционально изменяется при изменении размера браузера;
Все бы ничего, но каждый из перечисленных способов имеет свои узкие места — ловушки, попав в которые ты повисаешь как на…
Slipknot
… удавке. Ярким примером можно выделить «адаптивное» меню bootstrap, которое превращается в мобильное при достижении определенной ширины браузера. Но бывают такие моменты, когда меню или наезжает на логотип, или переходит во вторую строку, что не очень красиво. Приходится дописывать css, указывая минимальный размер ширины меню.
Итак, о минусах также по порядку.
- REM. Все бы ничего, но если мы меняем размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта. А мне-то надо изменить шрифт только у одного блока — превратить 3 строки текста в 2;
- media. И тут у нам на помощь приходит media, в которой мы указываем новый стили для блоков при данном устройстве и разрешении, но читаемость css падает стремительно и бесповоротно. Мне приходилось пошагово изменять размер браузера и следить, не съехали ли блоки, а если съехали, то писать для них условие;
- Специальные JS скрипты, такие как fillText и bigText, автоматически изменяющие размер шрифта, но не рекомендуют их использовать при фразах более одной строки, не говоря уже о больших текстах;
- VW. Реагирует на любое изменение экрана и даже когда при изменении экрана браузера у блока ширина меняется с 50% на 100%, значение шрифта не изменяется — он держится на ширину браузера, а не родителя. Но глотком воздуха служит vmin и vmax.
Сulmination
Спасибо всем, кто осилил и дочитал все, что я выше изложил. Весь выше изложенный текст был написан для того того, чтобы задать самый простой вопрос: как сделать так, чтобы текст был комфортно читаемым при любом разрешении. Именно комфортно, ни большой, ни маленький; минимум прокрутки, максимум видимого текста. Ну, вы поняли.
Есть же стандарты текста, выверенные маркетологами и умными людьми (разделил их специально). Есть же W3C — стандарт разметки страницы, почему нет стандартов стилей страницы: «Вот минимальный шрифт должен быть такой, а уж с цветом определись сам».
DIY
Как я борюсь с адаптивностью текста.
1. На моем сайте-одностраничнике идет разделение тематических блоков заголовком в одну строку, например, «О компании», «Наши работы» и т.д. Для них я использую BigText. Заголовок располагается только на одной строке и изменяется адаптивно (как VW), но вот если ширина родительского блока изменяется с 50% на 100%, размер шрифта заголовка меняется вслед за ним.
2. Размер шрифта текста внутри одного блока беспроцентно высчитываю относительно заголовка. На load и resize вешаю функцию пересчета дочерних шрифтов относительно главного.
Добился аккуратной адаптивности размера шрифта при любом разрешении, но все крутится на js, что сильно загружает браузер и пагубно влияет на скорость загрузки. Но это все кастомно и уникально для каждого блока, не говоря уже разных страницах сайта.
Epilogue
Может зря поднимаю такие вопросы, может ну его, выехал блок, да и черт с ним, главное — текст читается. Но (syndrome of God ON) может и W3C стал результатом таких же первых мыслей и неробких шагов в направлении стандартизации разметки, чем сейчас займемся и мы? (syndrome of God OFF).
Или уже есть такие правила?
