Как адаптировать текст в css

Адаптивный текст

Для font-size можно использовать несколько вариантов:

1. Использовать единицу измерения vw .
vw = 1 % от ширины пользовательской части окна браузера.

2. Использовать calc и vw

Так или иначе нужно будет подбирать нужные размеры.

Так же, можно посмотреть небольшую библиотеку Rucksack, тут как раз используется vw и calc

Отслеживать
ответ дан 25 янв 2016 в 17:38
673 3 3 серебряных знака 10 10 бронзовых знаков
А можно ли сделать зависимость от ширины контейнера, а не всего окна просмотра?
25 янв 2016 в 17:43

@ИванСмирнов ниже я предложил сделать песочницу, но думаю что решением будет либо через js , либо через @media .

25 янв 2016 в 17:48

Воспользуйтесь единицей измерения vw

h1 < font-size: 5.7vw; >h2 < font-size: 4.0vw; >h3 < font-size: 2.8vw; >p

Отслеживать
ответ дан 25 янв 2016 в 17:25
3,021 11 11 серебряных знаков 23 23 бронзовых знака

А кроме этого есть ли еще альтернатива? изменять текст в зависимости от ширины div к сожелению не получается, макет не позволяет сделать аккуратно

25 янв 2016 в 17:28
Вам от чего нужно менять?
25 янв 2016 в 17:29

Просто тест должен быть расположен над изображением, и смещаться максимум пикселей на 10, а изображение пришлось задовать тегом img так как нужно наложить тень, было бы через background так там понятно, строю все на сетке bootstrap 3

Как менять размер текста при изменении размера окна?

Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.

Использование единиц vw

Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 1).

Пример 1. Использование vw

Результат данного примера показан на рис. 1.

Рис. 1. а — текст на широком окне; б — текст на узком окне

У единицы vw есть несколько недостатков — главное, что текст уменьшается пропорционально вместе с окном и в какой-то момент становится нечитаемым. Это будет особенно заметно на смартфонах, где ширина экрана меньше ширины мониторов. Чтобы установить минимальный размер текста можно воспользоваться функцией calc(), как показано в примере 2.

Пример 2. Использование calc()

Здесь мы смешиваем разные единицы — для заголовка rem и vw, для основного текста пиксели и vw. Использование calc() гарантирует, что текст не станет меньше указанного значения (для заголовка, к примеру, это 1rem).

Использование медиа-запросов

Поскольку единицы vw завязаны на ширину области просмотра, то при увеличении размера окна увеличивается и размер текста. Иногда требуется сделать наоборот — на маленьких экранах показывать большой текст, а на больших экранах, соответственно, маленький текст. Для этого применяются медиа-запросы, они меняют стиль элементов при определённой ширине окна браузера.

Сперва определяем стиль для больших экранов, затем с помощью конструкции @media screen and (max-width: 1024px) задаём стиль для экранов с шириной до 1024 пикселей. Внутри @media пишется размер текста под этот размер. При желании ниже добавляем ещё несколько @media с разными значениями max-width (пример 3).

Пример 3. Использование @media

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

См. также

• @media
• calc()
• clamp()
• font-size
• Единицы размера в CSS
• Медиа-запросы
• Отзывчивый веб-дизайн
• Размер текста
• Свойства шрифта в CSS

Стили текста — Основы верстки контента

Создание страницы это, в первую очередь, работа с текстом. Каким бы ни был красивым дизайн, но если информацию прочитать трудно или невозможно, то пользователь быстро уйдет со страницы. CSS дает широкие возможности для стилизации текста. В этом уроке рассмотрим основные стили, которые возможно применить к тексту. Описать их все в рамках одного урока невозможно и в этом нет необходимости. В процессе получения опыта вы будете узнавать о новых свойствах, но все они базируются на нескольких основных «китах»:

• Цвет текста;
• Расположение текста;
• Отступы от текста;
• Размер текста.

Цвет текста

Каждый текст на странице имеет свой цвет. Будь то заголовки или кричащий баннер, который рассказывает о скидке. Любой текст имеет цвет. В CSS используется свойство color , чтобы управлять им. С его помощью можно установить любой цвет для разных участков текста. В качестве значения свойство принимает цвет в разных моделях цветового пространства. Распространенной является модель RGB. Она указывает, сколько красного, зеленого и синего используется в цвете. На первых порах вы можете использовать онлайн-сервисы, которые укажут выбранный цвет в этой модели. Одним из таких сервисов является HTML Colors Codes .

Первое, что настраивают разработчики во время верстки макета — цвет основного текста страницы. Так как свойство color является наследуемым, то его можно устанавливать для тега или . С помощью каскадности этот цвет будет применяться ко всему тексту, если не указано иного значения. Выберем неглубокий черный цвет, который записывается в модели HEX как #333333 .

Интересно: в макетах редко встречается максимально черный цвет, который записывается как #000000 . Дело в том, что такой цвет не встречается в природе и человеческому глазу непривычен

body  color: #333; > 

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

Контраст в меньшей степени относится к заголовкам и небольшим выделениям внутри текста. Они выделяются на общем фоне по другим характеристикам: насыщенность, размер, границы, самостоятельный фон. Такой текст тоже должен обладать достаточным контрастом, при этом он может иметь значения ниже, чем основной текст.

Для проверки контраста текста можно использовать веб-инспектор Chrome DevTools. Выбрав любой цвет на панели Styles, можно увидеть коэффициент контраста текста, автоматически выведенный браузером. Он обозначен как Contrast ratio. Если контраст находится в рамках допустимого, то будет отмечен зеленой галочкой. В противном случае будет показан красный круг.

Наследование значений свойств

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

body  color: #333; > a  color: #333; > 

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

Один из способов решения проблемы — значение inherit , с английского — наследовать. Указав color: inherit мы скажем браузеру установить цвет таким же, как у родительского элемента.

body  color: #333; > a  color: inherit; > 

Значение inherit применяется для многих свойств, но, чаще всего, используется при работе с текстом и его оформлением. В качестве значения будет использован именно ближайший родитель. Это не обязательно будет — всё зависит от структуры вашей верстки и CSS.

Выравнивание текста

Выравнивание текста является важным способом выделения текста на странице. Нестандартное выравнивание позволяет пользователю быстрее заметить текст. В связке с размером текста и цветом, выравнивание заголовков является общепризнанной практикой на страницах.

Для выравнивания текста используется свойство text-align , которое принимает следующие значения:

• left — выравнивание текста по левому краю. Это значение устанавливается по умолчанию.
• center — выравнивание текста по центру.
• right — выравнивание текста по правому краю.
• justify — выравнивание текста по ширине. Данное значение выравнивает текст так, чтобы поместить слова строго от начала блока до его конца. При этом возможны изменения размеров пробелов между словами.

Важно: использование значения justify является плохой практикой. Данный прием используется в оформлении книг, где есть возможность отредактировать текст так, чтобы выравнивание по ширине не создавало больших пробелов между словами. В условиях веб-страницы такое почти невозможно.

Свойство text-align также является наследуемым. Если установить его для какого-либо блока, то весь текст внутри него будет выровнен в соответствии со значением свойства.

Насыщенность текста

Используя CSS можно гибко настраивать насыщенность шрифта. Насыщенность используется для выделения важного участка текста и придает ему «вес» относительно соседних элементов. Для управления насыщенностью в CSS используется правило font-weight . Оно принимает следующие значения:

• Значения от 100 до 900 с шагом 100
• lighter — сверхтонкое начертание. Делает текст менее насыщенным, чем текущее значение
• normal — значение по умолчанию. Соответствует числовому значению 400
• bold — жирное начертание текста. Соответствует числовому значению 700
• bolder — сверхжирное начертание. Делает текст насыщеннее, чем текущее значение

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

Размер текста

Управлять размером текста можно с помощью свойства font-size . Текст с большим размером шрифта первым бросается в глаза, поэтому заголовки, помимо выравнивания по центру, имеют больший размер шрифта.

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

.small-text  font-size: 12px; > .normal-text  font-size: 16px; > .big-text  font-size: 30px; > 

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

• 130 курсов, 2000+ часов теории
• 1000 практических заданий в браузере
• 360 000 студентов

Наши выпускники работают в компаниях:

10 технологий для адаптивной верстки текста о которых вы могли не знать

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

Адаптивный LESS

Если вы используете препроцессор CSS – LESS, этот пример автоматически генерирует код, который будет красиво уменьшать текст на основе разрешения экрана.

Использование параметра VW(viewport)

В этом примере блок vw используется для автоматического форматирования текста в соответствии с шириной окна просмотра. И это фактически поддерживается (по крайней мере частично), вплоть до IE 11.

Текст в одну строку который всегда хорошо смотрится

Бывают случаи, когда дизайнеру нужно чтобы текст оставался на одной строке — независимо от размера экрана. Вы найдете несколько вариантов такого типа функций, включая этот пример, который использует Vue.js.

Одинаковые вертикальные отступы

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

Управление повторяющимися параметрами

Свойства CSS (так называемые «переменные») являются функцией «must-have», которую разработчику стоит использовать для оптимизации кода. Они работают подобно переменной в PHP или JavaScript, поскольку их можно вызвать в любое время и избавить вас от тонны повторения. Вот пример, который использует переменные вместе с функцией CSS calc для автоматического изменения размера текста.

Адаптивный текстовый слайдер

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

Еще один способ оставить текст на одной строке под размер экрана

В то время как мы ранее смотрели на пример, который сохранял текст в одной строке по размеру экрана, этот отличается тем, что при необходимости перемещает элементы в новую строку. Тем не менее, он все равно будет обеспечивать нужный вид текста Responsive Text Auto-scale text

Адаптивный SASS

Мы уже посмотрели на LESS, так что мы должны отдать SASS и некоторую любовь. Это обеспечивает очень плавный переход в размере текста при изменении области просмотра.

Адаптация от количества символов

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

Итог:

Как вы видите, существует целый ряд различных подходов, которые вы можете предпринять для реализации адаптивного текста в вашем дизайне. Приятно, что так много методов автоматические — вам не нужно беспокоиться о том, чтобы делать собственные вычисления для небольших экранов. Это экономит время и главное работает просто.

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