Самые лучшие размеры шрифта для блога

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

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

Я подозреваю, что можно выбирать любые размеры, лишь бы смотрелось хорошо. Но все равно надо их как-то подбирать, поэтому, чтобы не изобретать велосипед, я использовал type-scale.com. Результат был отменный: я выбрал большую шкалу и получил читаемый текст с большими яркими заголовками, как в супер-пупер дизайн портфолио. Пока не открыл сайт на мобильном.

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

• Большая шкала для больших экранов. В ней размер заголовков довольно большой относительно основного текста, что великолепно смотрится.
• Малая шкала для мобильных экранов. Размер заголовков в ней приближен к основному тексту, поэтому на маленьких экранах все помещается.
• Средняя шкала для средних экранов, например для планшетов. Заголовки поменьше, восторга тоже, но в целом нормально.

* * *

Ладно, теперь о крутых штуках. Как всегда, всё это написано для того, чтобы сделать красивую картинку. Примечания:

• Я использовал мокапы от Алексея Белорукова. Очень классно сделаны, мой основной источник вдохновения.
• Для имитации рукописного текста применил отличный шрифт Ludicrous от Мисси Мейер.
• Придумывать тексты на картинке так же интересно, как и двигать предметы сцены!
• Артикли в заголовках в английском иногда можно не использовать.
• Градиентный фон может стать лучше, если к нему применить фильтр "шум" в Фотошопе.
• Маски в Фотошопе отлично подходят для нанесения отраженного света. Может, я недожал, но подставка для ручек на картинке отражает цвет фона на краях.

Кстати, на блокноте на картинке можно заметить пример большой и малой шкал. Можно нажать эту кнопку, чтобы всё спрятать и рассмотреть фон: