Выбор цвета для шрифта в веб-дизайне

Это то, с чем я боролся некоторое время, и я действительно хочу это исправить.

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

Мой выбор цвета в прошлом для основного текста был около #999999 или #aaaaaa, но я замечаю, что в проектах дизайнеров, за которыми я следил в Интернете, их выбор шрифта слегка склонялся к одному из основных цветов в их цветовых палитрах.

Существует ли проверенный метод подбора цвета для шрифта таким образом, или это просто делается с помощью глаза?

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

Ответы (1)

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

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

руководство

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

Небольшое снижение яркостного контраста можно компенсировать увеличением контраста оттенок/насыщенность. например. наличие темно-коричневого деревянного фона (30-градусный оттенок) потребует яркого шрифта, но яркость шрифта можно немного уменьшить, если мы установим его оттенок, скажем, 210-градусный синий, который является прямым дополнением 30-градусного коричневого деревянного фона. Насыщенный контраст может быть сильным, или можно лишь немного отодвинуть насыщенность от серого, ровно настолько, чтобы придать ему легкий оттенок синего. Как далеко мы заходим, так это то, где наша индивидуальность как дизайнеров вступает в игру.

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


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

Обзор лучших практик может быть полезным справочным инструментом: http://www.smashingmagazine.com/2009/08/typographic-design-survey-best-practices-from-the-best-blogs/