Контрасты в веб-типографике

http://www.webdesignerwall.com/tutorials/typographic-contrast-flow/
  • Перевод
Наткнувшись на предложенную общественности статью (оригинальное название «Typographic Contrast and Flow»), не мог не перевести, т. к. во-первых, она написана простым и понятным языком, а во-вторых, изобилует множеством примеров и иллюстраций.

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

1. Размер


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

С другой стороны вы можете уменьшить значимость за счет использования меньшего размера шрифта.


2. Шрифт


Контраста можно добиться за счет комбинирования различных шрифтов. Однако необходимо использовать «веб-безопасные» шрифты двух основных типов: serif и sans-serif.

Как правило, для создания контраста между заголовком и текстовым блоком можно использовать шрифт с засечками (serif) для заголовка и без засечек (sans-serif) для остального текста.


3. Цвет


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

Вы можете воспользоваться блёклыми цветами для указания чего-то запрещенного или невозможного.

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

Вы также можете использовать цвет для различия отдельных слов внутри текста.

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


4. Регистр


Когда в заголовке и тексте используется один и тот же шрифт, контраст может быть усилен за счет регистра. Строчные притягивают больше внимания, чем прописные, следовательно, этот метод больше подходит для заголовков. CSS свойство для смены регистра букв text-transform: uppercase.

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


5. Стиль


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

Взамен вы можете применить курсив (italic).


6. Начертание


Подчеркнуть значимость определенного текста можно, выделив его полужирным (bold) шрифтом.

Другая распространенная ошибка состоит в том, что люди имеют тенденцию выделять полужирным шрифтом целые строчки в тексте. От этого теряется важность или контрастность фрагмента.


7. Пространство


Пустое пространство играет важную роль в формирование вашего дизайна. Его хорошее использование расскажет читателю где начало, где пауза, где конец и что делать дальше.

Существует различные пути создания пространства:
  • Разбиение на блоки — создание отступов между блочными элементами с помощью padding или margin.
  • Разбиение на параграфы — создание промежутков между <р> элементами.
  • Межбуквенные интервалы (letter-spacing).
  • Межстрочные интервалы (line-height).
  • Использование абзацев для работы с цитатами и списками.

Заключение


Давайте соединим все эти методы вместе на практике.
Метки:
Поделиться публикацией
Похожие публикации
Комментарии 44
  • +9
    А разве для кого-то это неочевидные вещи?
    • +11
      Конечно очевидные, а в данном случае ещё и удачно структурированные.
      • +3
        Отличный ответ:)
    • 0
      А для кого не очевидные, хорошо и внятно описаны и переведены. ;)
      Во всяком случае есть что подчеркнуть для себя.
      Спасибо.
    • 0
      Очевидные, поэтому подавляющее большинство веб-сайтов замечательно выглядят с точки зрения дизайна ;)
    • 0
      Я уверен, одна из самых больших проблем плохих сайтов - разработчик не понимает что важно что нет. Видимо, о красоте думает. Так что не для всех очевидные.

      Хочется еще статью о важности разделения навигации и содержания. Есть такая?
  • +2
    в принципе азбука, но даже здесь есть спорные моменты:

    в п.3, например, для текста на русском языке, возможно, стоит делать как раз наоборот —
    шрифт без засечек (sans-serif) для заголовка, а с засечками (serif) для остального текста.

    и в п.6, может быть, стоит воспользоваться советом из п.5, и тоже сделать курсивом (в ководстве есть рассуждения на эту тему)
    • +1
      насчет вашего второго замечания - на любом языке с монитора легче читать шрифт без засечек, а с бумаги с засечками. Поэтому заголовок с засечками, а весь остальной текст - без засечек для более приятного чтения.
      • 0
        да, это общепринятое мнение, которого все придерживаются :)

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

        к сожалению, мне не попадалось хороших исследований на эту тему
        • 0
          Может в этой книге http://store.artlebedev.ru/books/design/… есть такие исследования (или хоть выводы из таковых)? Читал бы - ответил бы более содержательно, а так, извините, только вот вспомнил про неё и ссылку вам подскажу...
          • 0
            Нет, там таких исслдований наверняка нет, потому что исследование такое провести практически невозможно. Как товарищ w3coder заметил, есть общепринятое мнение, но никто его ни подтвердил, ни опровергнул. И не смогут, потому что слишком много факторов оказывают влияние на читаемость, и заключить, что вот этот текст читается плохо/хорошо именно из-за того, что он набран с засечками/без засечек практически невозможно.
  • 0
    «Строчные притягивают больше внимания, чем прописные…» — ну-ну. =)
    Да и строчку про uppercase зря не взяли из английской версии. А то некоторые понимают буквально и забивают заголовки заглавными.
    • 0
      Почему же "ну-ну", если грамотно воспользоваться вполне даже.
      И строчку про css свойство добавил.
      • 0
        Вот это — правильно! Регистр лучше стилями менять, а не «печатать»... вдруг завтра передумаем ;)
  • 0
    У меня почему-то было стойкое убеждение что шрифт с засечками используеться для основного текста, без - для заголовков. В стать конкретно обратый пример.
    • –1
      Логичнее как раз наоборот.
    • +1
      Это в книгах так.
  • 0
    полезно
  • 0
    Удивительно, казалось бы, но многие люди, в том числе гордо именующие себя дизайнерами, не знают этих элементарных правил. Так что, как говорится, повторение — мать учения.
  • 0
    Согласен с предыдущими высказываниями относительно того, что это вполне очевидные вещи. Подобная мурзилка будет интересно лишь новичку, которые опять же интуитивно понимает все эти нюансы, видя грамотно сверстанную страницу. Здесь нет никаких секретов, каких-то аксиоматических постулатов и прочих полезных по-настоящему вещей. Это все равно, что заявить , что небо синее, л трава зеленая, вода мокрая а снег белый.
    • 0
      Кстати, в принт-типографике, как правило, акцидентный шрифт используется набоборот обычно без засечем, в то время как текст набирается антиквенными гарнитурами вроде Таймса или Баскервилля - так текст в большом объеме воспринимается гораздо лучше.
  • +1
    В веб-типографике рокировка шрифтов с засечками и без сделана по причине намного меньшего разрешения (экрана), чем при печати. В печати наоборот.
    Разрешение монитора - главное препядствие применения всех правил и красот типографики.
    • 0
      Сила (и красота) типографики в ее удобстве, а не в слепом перенесении с бумаги в веб. В случае с вебом пока никому от sans serif неудобно не было. Ну вот хоть бы весь хабр взять.
  • 0
    Тоже хотел написать, что основной текст обычно набирается серифом, а заголовки серифом. Потом, кажется, понял: веб-типографика сбилась с пути с популяризацией ЖК-мониторов. Стали набирать всё крупно, оставлять больше пустых мест.

    Например, я на своем сайте уже давно хочу жирные шрифты выкинуть, хотя раньше, на ЭЛТ-мониторе, ничего против них не имел.
    • 0
      Заголовки санс-серифом то есть :)
  • +1
    Те, у кого маки, макось и все такое - уже давно привыкли к качественному отображению контента с хорошим сглаживанием. Современные сайты в большинстве своем смотрятся хорошо. Люди же, заходящие на такие сайты из-под винды или линукса с отключенным антиалиасингом, да еще из какого-нибудь IE6, видят жуть какую-то. Таймс Нью Роман в кегле 24 пункта на Макоси в Сафари и тот же шрифт на ХР в ИЕ без сглаживания - абсолютно две разные вещи. В первом случае все элегантно и именно так, как задумывал автор. Во втором случае все просто очень ужасно.
    Лет 10 назад дизайнеры сайтов мечтали, чтобы все перешли на броузеры, поддерживающие HTML 4.0 и CSS, чтобы мониторы стали с разрешением 800х600 и выше у всех поголовно. Теперь большинство дизайнеров мечтают о том, чтобы помимо адекватных броузеров и оптимального разрешения (1024х768 минимум, хотя и он уже уходит в небытие, уступая место Wide-резолюшенам вроде 1200х900) был еще у всех включен режим сглаживания (в Макоси де факто, в винде - ClearType). Тогда можно навсегда забыть про надписи в виде картинок, ибо обычный HTMLный текст будет отображаться абсолютно нормально, читабельно и без идиотских зазубрин, как и должно быть. Да здравствует тотальный WYSIWYG!!!
    • 0
      Вот-вот. Я, пересев на Мак, сразу задался вопросом: А что плохого в Таймсе и почему у всех он вызывает такое отторжение? Немудрено: то, что все видят под виндами — разумеется ужасно, но ведь на самом деле шрифт совсем не так выглядит. Самое грустное, что даже под OS X разные браузеры показывают разное. В частности, Файерфокс с кириллической Хельветикой делает что-то невообразимое.
      • 0
        Я сразу же увидел этот косяк в ФФ и полез подыскивать нужный фонт. По привычке поставил Verdana, потом попробовал Tahoma и вездесущий Arial. Вроде бы неплохо, но то на мелких кеглях не особо (например, Helios выше 12 пт смотрится идеально, чего не сказать о 9 пт), то на крупных косолапо (Вердана жуткая выше 12). Попробовал эппловское семейство Lucida - тоже вроде бы и то, и не то... А потом вспомнил про любимый эпплом и адобом Myriad Pro, который идет в комплекте макоси русифицированым. И он оказался идеальным сансерифным фонтом для любых кеглей маковского антиалиасинга... Рекомендую попробовать. Я его назначил фонтом по умолчанию везде. Теперь почта в Mail, мессаги в Skype, Adium и сайты с непрописанными жестко фонтами - все выглядит чудесно.. хоть 9 пт, хоть 99.... шрифт роскошный, и к тому же курсивная версия не режет глаз, как у Ариала или Тахомы.
        • 0
          Спасибо, возьму на заметку.
        • 0
          Попробуйте третью бету. Там все исправили с русскими шрифтами ;)
      • 0
        Вам тоже советую взглянуть на 3й фаерфокс ) Пока еще бету.
  • 0
    Иногда так замечтаешься о том, каким бы стал web, если бы все подобные правила применялись везде на практике.
    Частенько они нарушаются в угоду SEO, вставляя везде и всюду подчеркивания без ссылок, заглавные буквы и т.д.
  • НЛО прилетело и опубликовало эту надпись здесь
    • 0
      Серым по белому это одно из решений проблем творческой дистрофии и незнания правильных приёмов. Результат «исследваний» был примерно таков: меньше контраст элементов - меньше цепляется глаз за плюсы и минусы, псевдостильность своеобразная.
  • 0
    Простые истины, но — заметил некоторую странность в повествовании о «пространстве», межстрочный и межбуквенный интервалы работают на тон страницы, а не на разделительную пустоту, как абзацы, параграфы и т. д.
  • 0
    В принципе то же самое, только касающееся не только типографики, а дизайна вообще было в книге Кирсанова по веб-дизайну.
    • 0
      Читал статью в оригинале — в контексте сайта однако совсем по-другому читается
  • 0
    НЕ ПРАВИЛЬНО!

    "Как правило, для создания контраста между заголовком и текстовым блоком можно использовать шрифт с засечками (serif) для заголовка и без засечек (sans-serif) для остального текста."

    Как раз на оборот. Для заголовка - без засечек. Для текста с засечками. Текст с засечками легче читается.
    • 0
      по идее да...
  • 0
    Мне эта статья кажется очень скупой. Вариантов контраста вагон и маленькая тележка, а здесь приведена лишь малая, "очевидная" как сказано выше часть. Читайте Рудера, Мильчина, и Розенталя и переводные статьи вам более не понадобятся :)
  • 0
    а мне вот нравится выделять ссылки исключительно подчёркиванием (пример)

    это плохо?
    • 0
      Это нормально, ссылки и должны быть подчёркнутыми.
    • 0
      Посмотрел, мое имхо — этого недостаточно.
  • 0
    Нельзя делать uppercase, иначе говоря, капсить. Нужно использовать капитель, т.е. small-caps.

Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.