Типографика для сайтов bettertext.css

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

Посмотреть демонстрацию

Установить и подключить

Подключается после normalize.css и веб-шрифтов.

Подключить через CDN
https://unpkg.com/bettertext.css@2.0.x/bettertext.css (1.4KB gzip)
https://unpkg.com/bettertext.css@2.0.x/bettertext.min.css (1.2KB gzip)
https://unpkg.com/bettertext.css@2.0.x/bettertext.min.css.map

Установить через NPM
npm install bettertext.css --save-dev

Установить через Bower
bower install bettertext.css --save

Npm и Bower пакеты не имеют зависимостей.

Как bettertext.css делает текст лучше

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

Настроить под свой дизайн

Bettertext.css написан на LESS и настраивается при помощи 11 переменных. Остальные 40 вычисляются по формулам, но их тоже можно переопределить.

Если вы не используете LESS, настройте типографику онлайн и пользуйтесь скомпилированной версией:

• настройте переменные по вашему вкусу;
• протестируйте на вашем HTML или Markdown коде;
• нажмите "View Compiled" и заберите скомпилированный CSS к себе в проект.

Шаблоны для дизайнеров

В шаблонах типографики для Скетча и Фотошопа текстовые стили соответствуют стилям по-умолчанию из bettertext.css. Используйте эти шаблоны для быстрой настройки типографики в графическом редакторе.

1. Настройте типографику в браузере;
2. Скачайте шаблон для вашего графического редактора;
3. Обновите текстовые стили шаблона в соответствии со сгенерированной в браузере типографикой.

Подключить и настроить LESS-версию

Подключите bettertext.less к стилям вашего проекта.

@import (less) "node_modules/bettertext.css/bettertext.less";

или

@import (less) "bower_components/bettertext.css/bettertext.less";

Парамерты по-умолчанию

У компонента есть глобальный миксин с настройками:

.bettertext-settings() {

    //settings
    @fz: 16px;                         // default font-size in px
    @rythm: 24px;                      // vertical rythm = line-height in pixels
    @fz-small: 12px;                   // smaller font-size (px)
    @linel: 50rem;                     // max-width for text (any css value)
    @font-body: sans-serif;            // body
    @font-headers: sans-serif;         // headers
    @font-code: monospace, monospace;  // code (duplication is intentional)
    @scale1: 1.125;                    // header size multiplier for small screens
    @scale2: 1.250;                    // header size multiplier for large screens

    // margin for body, articles and sections (any css value)
    @structure-margin: ~"calc(24px + 3vw)" 5vw;

    // breakpoint to switch from 'mobile' to 'desktop'
    @bettertext-breakpoint: ~"(min-width: 768px)";
}

Собственные настройки

Вы можете настроить типографику через переменные. Например, поменять размер шрифта основного текста, шрифты:

@import (less) "node_modules/bettertext.css/bettertext.less";

.bettertext-settings() {

    //settings
    @fz: 14px;                          // default font-size
    @font-body: 'Arial', sans-serif;    // body
    @font-headers: 'Georgia', serif;    // headers

    @bettertext-breakpoint: ~"(min-width: 50em)"; // large screens starts from that value

}

Если базовых настроек не достаточно, вы можете переписать любую формулу из миксина bettertext-calculations внутри миксина bettertext-settings (см. исходный код). Например, поменять верхний отступ у заголовков (можно использовать готовые значения и формулы):

@import (less) "node_modules/bettertext.css/bettertext.less";

.bettertext-settings() {

    //settings
    @fz: 14px;                          // default font-size
    @font-body: 'Arial', sans-serif;    // body
    @font-headers: 'Georgia', serif;    // headers

    @bettertext-breakpoint: ~"(min-width: 50em)"; // large screens starts from that value

    //redefining header margin-top
    @h1-mt: 3em;
    @h2-mt: 2.5em;
    @h3-mt: 2em;
    @h4-mt: 1.5em;
    @h5-mt: unit((2 * @lh * @fz / @h5-fz), em);
    @h6-mt: unit((2 * @lh * @fz / @h6-fz), em);
}

Ответы на вопросы

— Что такое «типографика»?

— Это набор стилей для текста. Задача типографики — сделать текст красивее и удобнее для восприятия. Лучше, чем с браузерными стилями по-умолчанию.

— Зачем мне это нужно?

— Bettertext.css cэкономит время верстальщика, избавит от рутины: на каждом проекте нужно написать стили для заголовков, абзацев, списков, цитат, таблиц. Обычно у верстальщиков со временем появляется своя заготовка для типографики, которая переходит из проекта в проект с незначительными изменениями.

Bettertext.css — настраиваемая заготовка, которая позволяет при помощи 11 переменных задать базовую типографику сайта.

— Будет ли версия bettertext нa SASS и Stylus?

— Пока нет таких планов, потому что я не использую SASS или Stylus. Но если вы хотите помочь мне портировать на SASS или Stylus, пишите на почту radzkov@gmal.com.

— Почему размер шрифта и высота строки задаются в пикселях?

— Для удобства настройки. В графических редакторах размеры задаются в пикселях. Вы берёте значения в пикселях из исходника дизайна, а bettertext самостоятельно пересчитывает размеры шрифтов из px в em, а высоту строки в безразмерную величину. По-умолчанию 1em = 16px.

— Что делать, если я хочу изменить размер шрифта root элемента и 1rem ≠ 16px?

Если вы пользуетесь техникой «62.5%» и у вас 1rem = 10px, то в настройках bettertext надо переопределить скрытую переменную @onerem: 10px. Пример на codepen.

Автор Павел Радьков, GitHub проекта, MIT License

Поделиться Твитнуть Плюсануть Поделиться Телеграмнуть