Основы web-типографики пришли к нам из далекого 1991 года, еще от небезызвестного Tim Berners-Lee :)
Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.
Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.
Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.
Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.
Бледно-розовый текст на бледно-голубом фоне, возможно и подойдет для вашей футболки, но читаться, поверьте, будет ужасно. Текст должен быть читабельным; всегда убеждайтесь в том, что текст в достаточной степени контрастирует с фоном.
Если же, вы не можете определиться в степени контрастности, то очень простой совет. Сделайте скриншот вашей странице и в любом графическом редакторе переведите его в gray-scale. Все сразу станет ясно. Как сказал Robert Bringhurst, типографика существует, для того чтобы сделать акцент на содержание.
Возможно это дело вкуса, но объемный текст, сложнее читать на контрастном фоне (пример на картинке, белый текст на черном (или темном) фоне).
Как часто вы видите книги с таким оформлением?
Такой контраст может использоваться только для небольшого объема текста, но и тем не менее, читать такой текст в любом случае тяжело.
В последнее время, в моду стали входить очень мелкие размеры шрифтов. Особенно, это модно на flash-сайтах. Если честно, то я сам очень любил мелкие шрифты, по типу такого, но со временем, начал понимать что это издевательство над пользователем.
Многие дизайнеры, свою любовь объясняют так, типа: «надень очки, я делал шрифты для нормальных читателей», или «это отражает мой минималистический подход к дизайну».
Не делайте размер шрифта основного контента ниже 10-12px.
Понятно, что на вашем 65-дюймовом плазменном мониторе все смотрится отлично, но я сомневаюсь, что все так же хорошо, на обычном 15-19-дюмовом мониторе.
Манипуляция со шрифтами – это лучший способ выделить содержание текста. Выделение цветом и рамкой, конечно же, могут помочь, но правильная расстановка размера текста может гораздо лучше помогает читателю в определении основного контента страницы.
А это значит, что ваш читатель, который очень спешит, всегда сможет быстро подчеркнуть для себя главное.
Иерархия может достигаться и другими путями. Мы лишь затронули размер шрифта.
Также можно варьировать стилями, к примеру, сделать все прописными буквами или использовать курсив в подзаголовках. Миксование Serif и sans serif тоже может дать неплохой результат.
Дайте вашему тексту дышать. Не бойтесь оставлять пустые места, они лишь помогут сконцентрировать внимание читателя на тексте и так как текст важнейшая составляющая, пусть он будет увиден.
И еще не забывайте о межстрочном интервале, расстояние должно быть минимум 140% от размера шрифта (свойство CSS
Лучшие дизайнеры шрифтов бьются за микро-пространство в своих шрифтах. Они проводят множество часов, в поисках идеального баланса, между черным цветом букв и окружающих их белого фона.
Так же нельзя упускать из внимания и пространство между блоками текста.
Помните, это не правила, это лишь советы. Старайтесь следовать им – КОНТРАСТ, РАЗМЕР, ИЕРАРХИЯ и ПРОСТРАНСТВО – и вы сами убедитесь, что качество web-типографики в ваших проектах, станет расти ввысь, как одно из суфле Gordon Ramsay.
А насчет обезьян – это была шутка ;)
Оригинал: ilovetypography.com/2008/02/28/a-guide-to-web-typography
Вольный перевод (со своими комментариями и добавлениями): SHAGGYSMILE
Если оглянуться назад, в страшные времена царствования IE 1.0, то web-типографика (я не говорю о web-дизайне) находилась в зачаточном состоянии. На данный момент, ситуация иная. Мы имеем достаточно средств, для грамотного оформления текста на web-странице.
Cуть web-типографики заключаться не просто в выборе нужного шрифта и умение отличить начертание одного шрифта от другого.
Рис. 1: Как показали последние опыты, 90% тренированных обезьян правильно отличают шрифт Helvetica.
Мы поговорим о web-типографике как о рецепте, содержащем четыре основных компонента. Если вы когда-нибудь пытались приготовить суфле, то скорее всего, смогли ощутить насколько важен рецепт его приготовления.
Контраст
Бледно-розовый текст на бледно-голубом фоне, возможно и подойдет для вашей футболки, но читаться, поверьте, будет ужасно. Текст должен быть читабельным; всегда убеждайтесь в том, что текст в достаточной степени контрастирует с фоном.
Если же, вы не можете определиться в степени контрастности, то очень простой совет. Сделайте скриншот вашей странице и в любом графическом редакторе переведите его в gray-scale. Все сразу станет ясно. Как сказал Robert Bringhurst, типографика существует, для того чтобы сделать акцент на содержание.
Возможно это дело вкуса, но объемный текст, сложнее читать на контрастном фоне (пример на картинке, белый текст на черном (или темном) фоне).
Как часто вы видите книги с таким оформлением?
Такой контраст может использоваться только для небольшого объема текста, но и тем не менее, читать такой текст в любом случае тяжело.
Размер
В последнее время, в моду стали входить очень мелкие размеры шрифтов. Особенно, это модно на flash-сайтах. Если честно, то я сам очень любил мелкие шрифты, по типу такого, но со временем, начал понимать что это издевательство над пользователем.
Многие дизайнеры, свою любовь объясняют так, типа: «надень очки, я делал шрифты для нормальных читателей», или «это отражает мой минималистический подход к дизайну».
Не делайте размер шрифта основного контента ниже 10-12px.
Понятно, что на вашем 65-дюймовом плазменном мониторе все смотрится отлично, но я сомневаюсь, что все так же хорошо, на обычном 15-19-дюмовом мониторе.
Иерархия
Манипуляция со шрифтами – это лучший способ выделить содержание текста. Выделение цветом и рамкой, конечно же, могут помочь, но правильная расстановка размера текста может гораздо лучше помогает читателю в определении основного контента страницы.
А это значит, что ваш читатель, который очень спешит, всегда сможет быстро подчеркнуть для себя главное.
Иерархия может достигаться и другими путями. Мы лишь затронули размер шрифта.
Также можно варьировать стилями, к примеру, сделать все прописными буквами или использовать курсив в подзаголовках. Миксование Serif и sans serif тоже может дать неплохой результат.
Пространство
Дайте вашему тексту дышать. Не бойтесь оставлять пустые места, они лишь помогут сконцентрировать внимание читателя на тексте и так как текст важнейшая составляющая, пусть он будет увиден.
И еще не забывайте о межстрочном интервале, расстояние должно быть минимум 140% от размера шрифта (свойство CSS
line-height). Лучшие дизайнеры шрифтов бьются за микро-пространство в своих шрифтах. Они проводят множество часов, в поисках идеального баланса, между черным цветом букв и окружающих их белого фона.
Так же нельзя упускать из внимания и пространство между блоками текста.
Помните, это не правила, это лишь советы. Старайтесь следовать им – КОНТРАСТ, РАЗМЕР, ИЕРАРХИЯ и ПРОСТРАНСТВО – и вы сами убедитесь, что качество web-типографики в ваших проектах, станет расти ввысь, как одно из суфле Gordon Ramsay.
А насчет обезьян – это была шутка ;)
Оригинал: ilovetypography.com/2008/02/28/a-guide-to-web-typography
Вольный перевод (со своими комментариями и добавлениями): SHAGGYSMILE
