Css адаптивный размер шрифта: Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями / Хабр

html — Как масштабировать шрифты в адаптивной верстке?

Сейчас у меня установлено для html font-size: 16px, h2 - 22px. Как правильно прописывать их под разные размеры экрана?

Брать и вручную подгонять, нормально читается или нет? Может есть какие-то правила, например, что для размера "768 - 992px" будет нормально читаться и выглядеть шрифт 13px. Если я установлю ед. из. шрифтов в rem, то для моб. устройств от какого размера шрифта будут просчитываться значение в rem?

• html
• css

Берем гибкую основу:

body {
    font-size:100%; /*  по-умолчанию 16px */
}
p {
    font-size: 1.25rem; /* 1,25rem относительно основы в 16px к body в результате даст размер шрифта в 16*1.25 = 20px */
}

Чтобы изменить шрифт для более маленьких экранов с помощью медиазапросов, достаточно просто изменить размер шрифта body, а так как текст страницы масштабируется пропорционально ему:

@media screen and (max-width: 800px) {
    body {
        font-size:90%;
    }
}
@media screen and (max-width: 1000px) {
    body {
        font-size:80%;
    }
}

REM — относительный размер шрифта рассчитывается от корня страницы (Root EM), а именно — от тега HTML, а не от родителя. Меняя размер шрифта у HTML — все дочерние блоки так же меняют свой размер шрифта.

Есть еще вариант с размерами относительно вьюпорта — vw, vh.

Вариант применения svg текста.

В сети достаточно информации по данному вопросу, стоит только поискать!

Здравствуйте. На мой взгляд самым верным решением будет указание размеров шрифтов для каждого разрешения экрана.

@media only screen and (min-width: 600px) {
font-size:12px;
}
@media only screen and (min-width: 768px) {
font-size:13px;
}

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Адаптивные размеры шрифтов при помощи rem

С самого зарождения интернета люди начали дискутировать на тему того, как лучше всего определять шрифты. Кроме традиционных кандидатов вроде px, em и %, есть еще единица измерения rem, которая представляет собой довольно новую альтернативу, совмещающую в себе лучшие свойства своих предшественников.

Прошлые стандарты: размер шрифта при помощи em или %

Примерно до 2008 года считалось, что необходимо использовать гибкие размеры шрифтов. И для достижения этой гибкости, использовались единицы изменения em или %, которые являются относительными значениями к стандарту браузера, которым зачастую являлся размер равный 16 пикселям.

Такой подход устраивал многих пользователей, так как большинство браузеров на то время не имели возможность масштабировать страницы, а IE6 и вовсе не умел масштабировать шрифты, указанные в px. По крайней мере, если при этом не трогали системные настройки.

Проблема заключалась в том, что при указании размеров в em или %, они должны были быть относительными чему-либо. Процентный показатель относителен по своей сути, и зачастую он был относителен размерам своего родительского элемента. Единица изменения em не сильно отличалась:

* в параметре модели блока margin-bottom em относится к размеру шрифта самого элемента. Изменения в размере шрифта вели к изменениям в поле (margin), что могло привести к абсолютно нежелательному эффекту.

* с другой стороны, определение размера шрифта при помощи em всегда было относительно размеру шрифта его родительского элемента. Применение размера 0.875em вело к всё большему уменьшению с каждым вложенным элементом. Чем больше вложенных элементов у вас было, тем меньше становился шрифт.

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

Временная эмансипация PX

В феврале 2009 года немецкий разработчик Jens Grochtdreis опубликовал статью под названием «Die leidige Sache mit der Schriftskalierung», которую можно было назвать «Раздражающие факты о масштабировании шрифтов», если бы ее публиковали на русском языке. Grochtdreis рекомендовал читателям использовать Px. На тот момент современные браузеры уже умели масштабировать страницы, а необходимости брать в учет IE6 уже не было.

Годом позже, немецкий разработчик Gerrit van Aaken поддержал Grochtdreis в своей статье «Warum ich Pixel fur CSS-Schriftgrade verwende» или «Почему мы используем PX для указания размеров шрифта в CSS». Не менее интересным, чем сама статья, было начавшееся обсуждение в комментариях. И в этом обсуждении, в комментарии под номером 22, человек упомянул о единице изменения REM, о которой тогда практически никто не знал.

Спустя некоторое время, в 2011 году термин rem начал набирать обороты, медленно, но уверенно. И это не удивительно, так как rem совмещает в себе плюс и px и em. Он не менее гибок, чем его предшественники, но имеет и исправления недостатков с точки зрения наследования, так как rem всегда относится к корневому элементу – к ‘html’, а не к ‘body’.

Чтобы получить значение rem, мы делим предпочитаемый размер в пикселях на базовое значение равное 16. Вот так будет выглядеть корректное указание размера шрифта в CSS:

html { font-size: 100%; } /* Браузерное умолчание, т.е. 16px  */   
h2 { font-size: 1.75rem; } /* 28/16 = 1.75 */  
h3 { font-size: 1.375rem; } /* 22/16 = 1.375 */   
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

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

Откат для старых браузеров: PX

Если вам кажется, что все звучит слишком хорошо чтобы быть правдой, то вы правы. Всегда есть какие-то минусы, и в данном случае это старые браузеры. Сервис http://caniuse.com/rem покажет вам, чего следует ожидать. И если честно, можно ожидать довольно многого:

Недостатки данного метода связаны, как обычно, с названиями браузеров, и на этот раз дело касается IE версиями моложе 9, а также Opera Mini.

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

html { font-size: 100%; }   
h2 { 
font-size: 28px; 
font-size: 1.75rem; 
}   
h3 { 
font-size: 22px; 
font-size: 1.375rem; 
}    
p { 
font-size: 14px; 
font-size: 0.875rem; 
}

Современные браузеры будут считывать и переписывать px-значение теми, что указаны в rem, а старые браузеры будут придерживаться инструкции в px, и игнорировать вторую строку. Примерно таким мы и видели этот процесс…

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

В реальном оригинальном Sass (не scss) вы можете использовать приведенные ниже миксины для автоматической установки размера шрифта абзаца и всех заголовков.

Мне нравится, потому что он намного компактнее. И быстрее печатать. В остальном он обеспечивает ту же функциональность.

В любом случае, если вы все еще хотите придерживаться нового синтаксиса — scss, то не стесняйтесь конвертировать мой контент Sass в scss здесь: [ПРЕОБРАЗОВАТЬ SASS В SCSS ЗДЕСЬ]

Ниже я даю вам четыре миксина Sass. Вам придется настроить их параметры в соответствии с вашими потребностями.

 =font-h2p-style-generator-manual() // Вам не нужно использовать этот. Это только стили, чтобы сделать его красивым.
=media-query-base-font-size-change-generator-manual() // Этот миксин устанавливает базовый размер тела, который будет использоваться тегами h2-h6 для пересчета их размера в медиа-запросе.
=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Здесь вы устанавливаете размер h2 и переходы между тегами h
=config-and-run-font-generator() // Этот вызывает только другие
 

После того, как вы закончите играть с настройками, просто вызовите один миксин, а именно: +config-and-run-font-generator() . См. код ниже и комментарии для получения дополнительной информации.

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

КОПИРУЙТЕ И ВСТАВЬТЕ ЭТИ МИКСИНЫ В ВАШ ФАЙЛ:

 =font-h2p-style-generator-manual()
  тело
    семейство шрифтов: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, без засечек // шрифты Google
    размер шрифта: 100%
    высота строки: 1.3em
  % заголовков
    высота строки: 1em
    вес шрифта: 700
  п
    высота строки: 1.3em
    вес шрифта: 300
  @для $i от 1 до 6
    ч # {$ я}
      @продлить %заголовки
=media-query-base-font-size-change-generator-manual()
  тело
    размер шрифта: 1.2em
  Экран @media и (минимальная ширина: 680 пикселей)
    тело
      размер шрифта: 1.  4em
  Экран @media и (минимальная ширина: 1224px)
    тело
      размер шрифта: 1.6em
  Экран @media и (минимальная ширина: 1400 пикселей)
    тело
      размер шрифта: 1.8em
=h2p-font-size-generator-auto($h2-fs: 3em, $h2-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h2-fs: $h2-fs // Установить первый элемент заголовка на этот размер
  $h2-step-down: $h2-step-down // Уменьшение каждый раз на 0,3
  $p-same-as-hx: $p-same-as-hx // Установить размер шрифта p такой же, как у h(6)
  $h2-fs: $h2-fs + $h2-step-down // Коррекция зацикливания
  @для $i от 1 до 6
    ч # {$ я}
      размер шрифта: $h2-fs - ($h2-шаг вниз * $i)
    @if $i == $p-такой же-как-hx
      п
        размер шрифта: $h2-fs - ($h2-шаг вниз * $i)
// ЗАПУСКАТЬ ТОЛЬКО ЭТОТ МИКСИН. ЭТО ЗАПУСТИТ ОСТАЛЬНОЕ
=config-and-run-font-generator()
  +font-h2p-style-generator-manual() // Просто заполнитель для нашего стиля шрифта
  +media-query-base-font-size-change-generator-manual() // Просто заполнитель для размера шрифта нашего медиа-запроса
  +h2p-font-size-generator-auto($h2-fs: 2em, $h2-step-down: 0. 2, $p-same-as-hx: 5) // Здесь задаем все параметры
 

НАСТРОЙТЕ ВСЕ МИКСИНЫ ДЛЯ ВАШИХ ПОТРЕБНОСТЕЙ — ИГРАЙТЕ С НИМ! 🙂 И ЗАТЕМ НАЗВАТЬ ЭТО НА ВЕРХУ ВАШЕГО РЕАЛЬНОГО КОДА SASS С ПОМОЩЬЮ:

 +config-and-run-font-generator()
 

Это будет генерировать этот вывод. Вы можете настроить параметры для создания различных наборов результатов. Однако, поскольку все мы используем разные медиа-запросы, некоторые примеси вам придется редактировать вручную (стиль и медиафайлы).

СОЗДАН CSS:

 тело {
  семейство шрифтов: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, без засечек;
  размер шрифта: 100%;
  высота строки: 1,3 em;
  перенос слов: прерывание слова; }
h2, h3, h4, h5, h5, h6 {
  высота строки: 1em;
  вес шрифта: 700; }
п {
  высота строки: 1,3 em;
  вес шрифта: 300; }
тело {
  размер шрифта: 1.2em; }
Экран @media и (минимальная ширина: 680 пикселей) {
  тело {
    размер шрифта: 1.4em; } }
Экран @media и (минимальная ширина: 1224px) {
  тело {
    размер шрифта: 1. 6em; } }
Экран @media и (минимальная ширина: 1400 пикселей) {
  тело {
    размер шрифта: 1.8em; } }
ч2 {
  размер шрифта: 2em; }
h3 {
  размер шрифта: 1.8em; }
h4 {
  размер шрифта: 1.6em; }
h5 {
  размер шрифта: 1.4em; }
h5 {
  размер шрифта: 1.2em; }
п {
  размер шрифта: 1.2em; }
h6 {
  размер шрифта: 1em;
}
 

Советы профессионалам по CSS: адаптивные размеры шрифтов и когда использовать, какие единицы измерения

С помощью vw и vh вы можете настроить размеры шрифта в соответствии с шириной экрана. Вот как управлять ими как чемпион.

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

1. То, что лежит в основе всех остальных

Вам не нужны медиазапросы, чтобы делать разные размеры шрифтов.

Вам вообще не нужно много объявлений размера шрифта .

В основном вам просто нужно это:

 html { font-size: calc(1em + 1vw) }
 

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

Поймите магию

Мы говорим браузеру вычислить результат добавления 1em к 1vw . Давайте сначала разберемся, что это значит.

Часть em : Вы можете думать о значении em как о размере нижнего края текста. Если окно просмотра имеет ширину 0px , то vw равно 0 , но размер шрифта все равно будет как минимум значением em .

Часть vw : Значение vw говорит о том, насколько отзывчивым должен быть размер шрифта к ширине области просмотра ( 1vw составляет 1/100 ширины области просмотра). Добавление высокой vw сделает его довольно отзывчивым — огромный текст на огромных экранах, крошечный текст на крошечных экранах.

Итак, если вам нужен довольно мелкий текст на маленьких экранах, вы можете выбрать 0.85em в качестве нижнего значения. И если вы хотите, чтобы он стал действительно большим с большими экранами, вы можете добавить 2vw вместо просто 1 .

Наследовать это дерьмо

Если вы установите это на html , вам практически не придется переопределять его где-либо еще. Стили браузера по умолчанию для всех заголовков, 9От 0003 h2 до h6 все довольно хорошо. Вот некоторые значения по умолчанию:

 h2 {размер шрифта: 2em}
h3 {размер шрифта: 1.5em}
 

Честно говоря, это все, что я знаю. Это все, что мне действительно нужно знать.

2em означает, что он будет в два раза больше, чем базовый размер шрифта, который является нашим адаптивным размером шрифта, который мы установили на html , что идеально. 1.5em означает, что он будет в 1,5 раза больше базового размера шрифта. Тоже идеально. Нет причин переопределять их.

Там, где это глупо, такие вещи, как кнопка и ввод . По какой-то причине они не наследуют размер шрифта своего родителя по умолчанию. Вместо этого они по умолчанию имеют значение 12px или какое-то другое необъяснимое и не отвечающее значение.

Итак, переопределить.

 кнопка {размер шрифта: наследовать}
ввод {размер шрифта: наследовать}
 

Пока вы там, вы также можете заставить их наследовать font-family , поскольку они также не делают этого по умолчанию.

2. Используйте

em для всего! Типа? Вообще-то, нет.

em s великолепны. Они размером примерно с букву «м» в текущем шрифте! Когда вы устанавливаете для элемента font-size , он соответствующим образом изменяет все размеры em , которые он использует.

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

 .wrap {размер шрифта: 1.5em}
.wrap .title { /* здесь нет переопределений, мы крутимся с 1.5em */ }
.wrap .details {размер шрифта: 0,66em}
.wrap .author {размер шрифта: 0,55em}
 

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

 .wrap { /* nuthin */ }
.wrap .title {размер шрифта: 1.5em}
.wrap .details { /* 0,66 из 1,5 равно 1, поэтому здесь изменение размера не требуется */ }
.wrap .author {размер шрифта: 0.8em}
 

Но теперь обратите внимание, что вы, вероятно, могли бы использовать

для этого .title , и вы, вероятно, могли бы использовать для  . author , и тогда вам не нужны никакие специальные размеры вообще. Ура!

Общее правило таково: используйте em для переопределения других размеров шрифта относительным образом, но только при необходимости.

px значения по-прежнему подходят для других вещей экран). Может быть, есть и другие места, где px тоже имеет смысл. Тот, о котором я подумал: border-radius .

Я либо хочу

• Нет радиуса границы. Заостренные углы.

• Вещи в форме таблеток. Наилучший подход здесь, по-видимому, состоит в том, чтобы установить для радиуса границы маловероятно огромное число. border-radius: 1000vh , например. (Ссылка)

• Слегка смягчены углы. Для них я не хочу, чтобы смягчение зависело от ширины экрана. Я хочу одинаковое смягчение, независимо от размера экрана. Так border-radius: 4px отлично.

Используйте

rem для пробелов. Вероятно.

Я только начал в этом убеждаться. Пример, иллюстрирующий аргумент:

 footer { font-size: 0.8em; набивка: 1em; }
 

Проблема здесь в том, что мое объявление font-size сделает мой отступ в 0,8 раза больше размера главной страницы em . И если я хочу, чтобы мой нижний колонтитул имел такой же ограничивающий пробел, как и остальная часть страницы, это будет выглядеть неправильно. Вместо этого я могу использовать это:

 нижний колонтитул { размер шрифта: 0.8em; набивка: 1рем; }
 

Теперь это работает только потому, что мы установили основной размер шрифта для всей страницы на элемент html ! Если бы мы установили это:

 body {размер шрифта: calc(1em + 1vw) }
 

вместо этого:

 html {размер шрифта: calc(1em + 1vw)}
 

все остальное в этом посте будет работать, но рем единицы будут рассчитаны неправильно!

Всегда ли имеет смысл указывать поле и заполнение в рем ? Это может быть!

Я попробую это в каждом конкретном случае.