Bootstrap предназначен для редактирования. У них есть МЕНЬШЕ переменный список переопределений, включая базовый размер шрифта, который затем может увеличиваться/уменьшаться в зависимости от вашего выбора шрифта и предпочтений. Затем эти размеры корректируются с помощью математической логики для других ресурсов (например, кнопок, заголовков, меню и т. д.). Кроме того, вы можете изменить все, что касается кнопки, с помощью переопределений LESS/CSS.

Лучше, но не хорошо

Прошло некоторое время с тех пор, как был задан этот вопрос. За это время веб-шрифты и рендеринг экранных шрифтов продолжали активно развиваться. Даже тема Bootstrap по умолчанию все еще держится:

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

По умолчанию это не выход

Несмотря на повсеместное распространение в Интернете (в наши дни меньше), Arial имеет некоторые серьезные недостатки дизайна. По сути, проблема заключается в структурной философии Arial, скопированной с Helvetica: гротескный стиль жестких замкнутых форм букв. Это создает проблемы как для рендеринга пикселей, так и для читаемости на любом носителе.

Вы можете увидеть эту конструктивную особенность в отверстиях a, e, g и s. Arial немного раскрывает эти функции по сравнению с исходным материалом в Helvetica. К сожалению, этого достаточно, чтобы сделать общий шрифт более неудобным без заметного улучшения рендеринга экрана.

Используйте лучший шрифт

Помните, что Bootstrap не предназначался для использования «из коробки». Команда Twitter разработала структуру вокруг центральной философии DIY:

«Вот все компоненты для быстрого создания прототипа, теперь приступайте к их настройке»

Обычно font-familyэто первое, что я меняю. И у нас есть так много прекрасных лиц, доступных нам сейчас. Даже Apple, которая так стойко поддерживала свою жалкую Helvetica, перешла на сделанный на заказ шрифт San Francisco (по иронии судьбы напоминающий Google Roboto).

Вот пример кнопок Bootstrap без каких-либо изменений, кроме font-family. Если вы точно настроите размер для семьи, все станет еще лучше.

Каждый шрифт здесь доступен бесплатно из шрифтов Google . Вам даже не нужно размещать файлы шрифтов.

Быстрый и грязный тестер

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

• Предварительный просмотр в моем общедоступном Dropbox.
• Код на GitHub (не стесняйтесь форкать!).

Я не разработчик, и в этом решении нет ничего элегантного, но это достаточно быстрый способ опробовать различные семейства типов в действии. Это могло бы выиграть от правильных стилей Sass (переменные были бы ооочень хороши) и очистки js, но у меня никогда не было возможности вернуться к этому.