3 заметки с тегом

типографика

Редизайн блога на Эгее

Переделал оформление блога. Расскажу, что не устраивало в старой версии и как сделана новая. Разберем подбор шрифтов и систему пропорций: размеры элементов и расстояния между ними.

О движке

Мой блог работает на Эгее. Это бесплатный, быстрый и аскетичный движок. У него приятный редактор записей, поддиалект разметки markdown и свой типограф, не изменяющий текст.

Эгея — движок на любителя. Она слабо документирована, технической поддержки нет. Случаются проблемы с установкой обновлений. Чтобы поменять внешний вид или добавить своих блоков на страницу, придётся лезть в код. Выбирайте её, если готовы допиливать CSS и PHP.

Антон Жиянов о других движках.

У меня версия 2.4 не обновлялась до 2.5, отваливалась база данных и стили. Я завел чистый блог и вручную перенес в него старую базу данных. Чтобы прикрутить новое оформление, переписал стили и поправил пару PHP-модулей.

Техническую часть не описываю. Если вам интересны подробности, напишите мне.

Что было не так

У базовой темы Эгеи три проблемы: мелкий текст, широкая колонка и масштабирование на мобильных устройствах.

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

Полноразмерный скриншот шириной 1000 пикселей. Здесь картинка убрана, чтобы влезли заголовок и разделы.

Шрифт Эгеи — Pt Sans. Это универсальный шрифт московской студии Паратайп. Без засечек, с открытым рисунком и прекрасной кириллицей. Он подходит для заголовков, основного текста и подписей, но лишен запоминающегося характера.

Times New Roman напоминает газету и школьный реферат, Courier — печатную машинку и сайты конца 90-х. А Pt Sans — просто добротный шрифт, который легко читать. Мне же хотелось, чтобы блог напоминал хорошую книгу или научно-популярный журнал. Поэтому работу над образом я начал с поиска новых шрифтов.

Подбор шрифтов

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

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

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

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

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

Выбирали из очень ограниченного набора. По критериям подошли три шрифта с засечками и два без.

Основным выбрали шрифт с засечками, похожий на замечательную Georgia, но не такой популярный. Вариантов нашлось три: Merriweather, Noto и Lora.

Размер и интерлиньяж указаны через косую черту.

От Merriweather отказались из-за рисунка символа, толщины штрихов и минускульных цифр. У минускул нижние элементы свисают со строки. Это наследие старых книжных шрифтов и выглядит архаично.

Noto и Lora похожи по рисунку и ближе к Georgia по настроению. Noto поплотнее, хорошо смотрится на экране. Лично мне Lora понравилась больше, хотя у неё чудаковатые кавычки-ёлочки. Выбрали её.

Для заголовков и подписей рассматривали два варианта: Roboto и Open Sans.

Roboto, Open Sans и сравнение рисунка букв

Roboto — шрифт операционной системы Android. Он универсален, безлик и прочно ассоциируется с телефонами Самсунг. У Roboto хорошая кириллица, но в Виндоус в сверхнасыщенном начертании он отображался с ошибками. Выбрали Open Sans.

Выбор пропорций

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

Без системы пропорций в текстовом наборе будет много случайного.

Система пропорций строится на базовой единице. Это произвольная величина, по которой удобно выстраивать отношения элементов. Базовой единицей может быть размер логотипа, ширина окна или шаг модульной сетки. Я взял за базу высоту строчной буквы основного текста.

В типографике высота строчной буквы называется x-height.

Размер буквы определяется шириной колонки и количеством символов в строке. В хорошем наборе ширина и количество соразмерны темпу повествования. Короткие сообщения в две-три строки читаются быстро, их легче воспринимать в узкой колонке. Статьи читаются медленнее, им нужна колонка пошире.

Я веду блог в среднем темпе, абзацами по три-четыре предложения. Оптимальная ёмкость строки — 75 символов. Такой текст читается легко, но неторопливо.

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

Зная ёмкость строки, ищем комфортный размер букв. Крупные буквы будут давить, мелкие — напрягать глаза. Подбираем по ощущениям и с оглядкой на блоги, которые легко читать. Мне нравятся Тинкофф-журнал, Амплифаер, Тильда и Редимаг.

Я выбрал размер в 20 пикселей. В этом размере у Lora высота строчной буквы — 10 пикселей. Ширина колонки при 72 символах в строке — 750 пикселей. Настраиваем в Фотошопе сетку, рисуем колонку и собираем набор элементов.

Всего нужны 5 стилей: основной текст, заголовок статьи, заголовок раздела, текст цитаты-врезки и служебный — для комментариев, тегов и подписей под картинками. Заголовок второго уровня я не использую.

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

При вёрстке соблюдаем правило близости: чтобы объекты воспринимались вместе, располагаем их рядом. Абзац ближе к своему заголовку, чем к следующему, отступы блоков меньше расстояния до границ экрана.

Готовый набор стилей. В макете с разрешением 72 dpi 1 пункт = 1 пикселю.

У Open Sans буквы чуть уже и крупнее. Чтобы шрифты в основном наборе смотрелись органично и не сбивали ритм, уменьшаем размер текста цитаты на пиксель и увеличиваем разрядку — расстояние между буквами в слове. Заголовки делаем максимально контрастными.

Lora 60/70 и Open Sans 60/70 без разрядки и 56/70 с разрядкой 0,023 em.

Полученный набор стилей переносим в CSS. Подкладываем сетку из макета, открываем отладчик и правим. Затем меняем разрешение экрана и повторяем.

Чтобы перевести разрядку из единиц Фотошопа в em, делим на 1000.
23 = 0,023 em. Другие размеры лучше указывать в пикселях, браузеры непредсказуемо округляют и набор плывёт.

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

Алгоритм

  1. Читаем о базовых гигиенических требованиях, разбираемся в правиле близости и методике подбора шрифтовых пар.
  2. Ищем визуальный стиль. Смотрим похожие по тематике блоги, которые приятно читать. Скриним, накладываем, сравниваем.
  3. Подбираем гармоничную шрифтовую пару. Один для заголовков и подписей, другой — для основного текста. Скачиваем и устанавливаем все шрифты на компьютер.
  4. Выбираем базовую единицу для системы пропорций. Удобно отталкиваться от размера основного текста.
  5. Рисуем сетку с шагом в базовую единицу. Её размер в пикселях или пунктах не важен, нужны только соотношения величин. На Маке рисуем в Скетче, на Виндоусе — в Индизайне или Фотошопе. В Фотошопе удобнее двигать попиксельно.
  6. Сводим все элементы к конечному числу стилей. Оптимально 5—7.
  7. Рисуем набор стилей, подбираем размеры, отступы, межстрочный интервал.
  8. Высчитываем размер базовой единицы, переводим пропорции в конечные значения в пикселях или пунктах. Пиксели точнее.
  9. Переносим в CSS. Подкладываем сетку и добиваемся сходства с макетом.
  10. Тестируем, правим, убираем сетку и публикуем.

Чтение по теме

Гигиенические требования к вёрстке в советах Бюро Горбунова.

Как выбрать шрифт объясняет арт-директор «Медузы» Сергей Сурганов. Очень упрощенно, чтобы начать ориентироваться в вопросе.

О шрифтовых парах в Школе Редимага.

Why website body text should be bigger, and ways to optimize it — почему размер шрифта нужно увеличивать. Доступно и убедительно на простом английском.

Типографика и вёрстка — книга Горбунова по платной подписке. Раз прочесть стоит.

2017   верстка   типографика

Как настроить оформление текста в Blogger

Я добрался до вёрстки статей в корпоративном блоге, настроил интерлиньяж и делюсь опытом.

Витторе Карпаччо «Святой Георгий и Дракон», 16 век. Дракон символизирует хаос и уродство корпоративной безблагодатности, а святой Георгий — систему, состоящую из взаимосвязанных компонент: мужика, копья, доспехов и лошади. Дама, взирающая на поединок, символизирует автора статей — юриста Алину. Алина, привет!

Каждый четверг в блоге FreshDoc выходит статья с советами юриста.

Три месяца я только редактировал черновики юристов и не мог повлиять на оформление. Результат выглядел плохо, я изводил коллег нытьём о нормах вёрстки, свисающих союзах, добре и красоте. Теперь мне доверили публикацию, я получил доступ к админке и оторвался, как мог.

Сегодня я расскажу: что и почему было не в порядке, как я это исправил и что еще я бы сделал, чтобы настала благодать.

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

Проблема

Блог размещен на веб-сервисе Blogger. Статьи пишут и редактируют в Гугл-доке, а потом вставляют в режиме визуального редактирования. Из-за этого вид статей непредсказуемо разнится:

Визуальный редактор Bloggera примитивен, в нем нельзя создать единый набор стилей. Изменить криво оформленный текст в редакторе не выйдет. Поплывут отступы, изменится расстояние между строками и абзацами. Точно задавать отступы редактор не даёт, это доступно только в режиме правки HTML. Чтобы привести все статьи к единому виду без трудоёмкой правки кода, придётся загнать их в Ворд, отформатировать и скопировать назад. А если позднее дизайн блога изменится, придётся переделывать.

Решение

Чтобы победить хаос и уродство, мало придумать метод. Нужна система.

Текст в блоге размечен HTML-тегами, делящими текст на заголовки, абзацы и списки. Внешний вид этих элементов определяется специальными правилами — таблицами стилей CSS.

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

Таблицу стилей необязательно писать с нуля. Можно оформить текст в Ворде или Гугл-доке, скопировать в Blogger и посмотреть, какими правилами задано оформление в режиме правки HTML.

Размечать текст HTML-тегами вручную трудоёмко. Нужна автоматизация. Кроме этого, в тексте нужно расставлять неразрывные пробелы — служебные символы, сцепляющие два слова вместе. Это нужно для привязки союзов к следующему слову и разделения чисел на разряды.

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

Технология

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

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

Готовый текст преобразовываем в «чистый HTML». Сохраняем разметку абзацев и гиперссылок, но убираем встроенные в теги стили. После этого текст слушается CSS.

Получившийся текст с тегами отправляем в «Типограф». Он корректно расставляет неразрывные пробелы, правильные кавычки и заменяет дефисы на тире. Обработанный текст предсказуемо ведёт себя при любой ширине колонки, если в будущем она изменится.

Копируем текст в Блокнот и размечаем заголовки тегами <H*>. В статье максимум три уровня заголовков. Первый — заголовок статьи, второй — раздела, а третий — строчный, с него начинается абзац. Если в популярной статье больше, её нужно переписать.

Не правьте HTML в Гугл-доке. Он заменяет латинские кавычки спецсимволами, их браузер не понимает.

Теперь организуем логические блоки.

Не переключаясь в режим визуального форматирования, вставляем картинки, помещаем их в контейнер <div class=”el_pic”> </div>. Для картинок прописаны отступы от текста, но можно добавить и других правил. Например, чтобы они растягивались по ширине колонки.

Размечаем фактоиды контейнерами <div class=”el_fact”> </div>. Фактоиды — выводы или цитаты, на которые редактор хочет обратить внимание читателя. Фактоид помогают разбить скучную портянку на небольшие блоки. В такой статье читателю проще ориентироваться, и выше вероятность, что он прочитает её до конца.

Организуем маркированные списки <UL>. Теги списка помещаем внутри тегов <P> и </P>. Логически список — это длинное предложение, для удобства чтения разбитое на строки. Отступ между описательным предложением и элементами списка не нужен. Маркеры списка заменяю на короткое тире и делаю его чуть светлее цвета основного текста. Так маркеры опрятны, помогают читать и не мешают. Для списков с перечнем гиперссылок предусмотрен стиль lnk, с увеличенным расстоянием между пунктами, чтобы по ссылкам было легче попадать курсором или пальцем.

Акронимы типа ОСАГО или ДТП заключаем в теги <acronym></acronym>. Акронимы состоят из заглавных, которые нужно разряжать — увеличивать расстояние между буквами. Такой акроним выглядит красиво и его проще читать. Это едва уловимая деталь добавляет редакторского пафоса.

Помещаем статью в родительский контейнер <div class=”editore”> </div>. Таблица стилей действует только на текст внутри этого контейнера, чтобы правила не ломали стили других элементов страницы. Это называется инкапсуляцией правил оформления.

Вставляем в запись блога в режиме редактирования кода, сохраняем, просматриваем, правим—дотягиваем. Ура! Главное — не переключаться в режим визуального редактирования. Он сломает разметку и придется вставлять подготовленный текст заново.

Вот как выглядит верстка текста из Ворда в сравнении с полученным результатом:

Что еще надо бы сделать

  • Переделать под новое оформление остальные статьи. На это нужно время, а его нет. По крайне мере, новые материалы будут выходить по технологии.
  • Сделать блогу нормальный дизайн. Его внешний вид за пределами добра и зла.
  • Подобрать гармоничную шрифтовую пару. Calibri и Cambria — не самое удачное сочетание.
  • Доделать CSS. Статья уже выглядит неплохо, но в стилях не хватает системности: гармоничных соотношений между размером шрифта и отступами. Еще не помешает привести единицы размеров к относительным величинам, привязанным к размеру шрифта.
  • Начать подбирать небанальные картинки и вменяемо их оформлять. Возможно, я доберусь и до них.

Ссылки по теме

Текстовый файл с таблицей стилей — для любопытствующих.

О программе «Типограф».

Convert Word documents to Clean HTML — чистит теги, заменяет <b> на <strong>, а <i> на <em>.

Гигиенические требования к вёрстке в Советах Бюро Горбунова. Редактор не может не уметь верстать, потому что вёрстка — единственная физическая форма текста. Работа редактора — космос.

2016   верстка   ДокЛаб   работа   типографика

Подглядывающий смайл о_|

Свит мемориз сандей псто. Почитайте, если не знаете, что такое C=}>;*{))

В 2006 году я придумал смайл с выглядывающей из-за угла рожицей: о_|
Смайл выражал осторожность и недоверие в диалоге, а в групповой беседе — безмолвное присутствие и эмоции наблюдателя. Сперва не читается, но один раз понять и уже не забудешь.

Борис Щас исполнительному письмо напишу, все скажу…
Костя о_|

Или

Анна Когда модуль сольёте, бездельники? Биллинг висит!
Кеша Паша — животное, перед отпуском код правил, комменты на пушту написал!!!
Женя о_|

Смайл получился из привычного горизонтального глазастика о_О. Набирался исключительно спортивно, без использования Юникода, и допускал развитие состояний — от праздного любопытства до шока и скорби.

Анна Как съездил?
Пётр Три часа ждал… Холопы директорские не пущали.
Костя ._| *у вас что-то интересное
Анна И как?
Пётр Квак! Правок тележку привез. Переделывать будем.
Костя о_| *интересно, послушаем
Пётр Дизайн не нравится. Мрачновато, говорят. Цвета нужно по-жиз-не-радо-стнее…
Костя О_| *о, ничоси!
Пётр И логотип нужно побольше сделать, календарь добавить. И котиков...
Анна Костя, зайди на минутку
Костя x_| *шок, преднизалон внутримышечно

Текстовые смайлы забылись, их заменили тысячи анимированных эмодзи и стикеров, но подглядывающего смайла как не было, так и нет ;—)

Про смайл в начале поста
C=}>;*{)) — пьяный дьявол шеф-повар с париком на ветру, усами и двойным подбородком.

2015   разное   типографика