Шрифты и заголовки

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

Многие почему-то забивают на заголовки разных уровней и в большинстве тем, с которыми я сталкивался, я вижу лишь H1, H2 и H3. А когда мне понадобится H4, то он почему то выглядит как обычный текст. Почему?

H1 ставится в название статьи или страницы. Получается в статьях доступно лишь 2 уровня заголовков. Этого мало.

В моих шаблонах H5 всегда совпадает по размеру с обычным текстом из абзацев, но ставится другая толщина шрифта и сам шрифт. Я перенял такую практику из Bootstrap.

Из моего макета ниже верстальщик легко сможет проработать основные HTML-элементы.

  1. Заголовки от H1 до H6 и их отступы.
  2. Ссылки (:hover, :visited, :visited:hover).
  3. Цитаты (blockquote).
  4. Маленький текст (small).

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

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

Fonts Billy Tallent Theme

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s