Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Серый текст на белом и на чёрном

Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.

Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:

Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным. Типографично:

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

Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:

Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.

У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: документация по Жуэлю). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: Вайрлесс-диджей).

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

Ещё про серый текст:
Не забледняй

Подписаться на блог
Поделиться
Отправить
Запинить
10 комментариев
Воображаемый эсперанто-уголовник

оно полностью растворилось среди соседних.

«Займи идиота на полчаса», называется.

Илья Бирман

Блин, я не ту картинки залил. Простите все. Перезагрузите страничку, пожалуйста :-)

Даниил КИБЕРНУАР Пронин

Золото

Евгений Арутюнов

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

Женя Волков

Не про типографику, но интересная тема к раздумью. Белый и чёрный — это один и тот же цвет, но с разной интенсивностью. https://www.youtube.com/watch?v=p-OCfiglZRQ

Алексей Петрик

Да зачем это.
Просто серый на черном проходит тест на читабельность. А серый на белом нет.

https://dequeuniversity.com/rules/axe/2.2/color-contrast?application=lighthouse

Sergey Yakunin

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

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

Есть простейший тест для выбора цвета букв:

  1. Внутри «почти-черного» параграфа делаешь одно слово совсем черным.
  2. Если при беглом прочтении пользователи не замечают разницы, значит почти-черный цвет нужен только дизайнеру.
Anatoly Kurganov

А смысл вообще думать о бумаге, когда люди по десять лет бумагу не читают даже сейчас. Может еще вспомнить стены пещеры, песок, бересту и т. д.

«Серый на белом выглядит компромиссно и поддельно:» только для человека со слабым кругозором.

Иван Иванов

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

Сергей Педан

а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна!

Божечки, а ведь правда: серой краски-то в природе не бывает!

Denis Drozhzhov

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

Популярное