Рост Осипов

Давно замечал в Chrome такой касяк. И это не только в CSS.
Проблема кроется в Управлении цвета и цветовых профилях. Попробуйте сменить рабочее цветовое пространство с sRGB на Adobe RGB.



Нашел алгоритм, но не знаю какие выводы из этого сделать ): Если обрабатываешь в Photoshop картинку в пространстве Adobe RGB и сохраняешь ее для web не конвертируя в sRGB - получаешь картинку, которая смотрится как и было задумано во всех браузерах, кроме Chrome - там она блеклая. Если же при сохранении в web поставить конвертацию в sRGB - картинка везде выглядит перецвеченной, кроме Chrome - там она выглядит ровно как первая картинка во всех браузерах, где не происходила конвертация в sRGB.

Вроде как известная проблема и с ней борятся. )

Если подписчик Creative Cloud, то можешь совершенно легально пользоваться ими как в полиграфии так и веб через TypeKit.

Был на Brackets, пересел на Visual Studio Code.
Бесплатен. Легок. Кросс-платформенный (Win, Mac, Linux). Куча расширений.

В своем .css файле пишешь строку:
@media only screen and (max-width: 540px)
и ниже прописываешь стили элементов, которые хочешь чтобы были изменены в мобильной версии.
h1, h2, p, divs. ets.
При загрузке страницы - если окно больше 540px - действуют стили, описанные раньше твоего медиа-запроса. Как только окно уменьшается до 540 и ниже - начинают вступать в силу стили которые ты указал в медиа-запросе.

Попробуйте использовать стандартный sans-serif (Helvetica / Arial) вместо KelsonSans. Проблема исчезнет.

Не путайте парня и не ограничивайте его в выборе. Послушает, замкнется на Open Sans, Roboto, Proxima Nova.

1. Выбор шрифта осуществляется в соответствии с конкретной задачей. Это первое правило, которое нужно держать в голове при выборе шрифта (шрифтов) для определенного проекта.
У Вас большие объемы текста и нужно добиться максимальной скорости прочтения? Выбирай шрифт с максимальной удобочитаемостью (Helvetica, Pragmatica, Aktiv Grotesk, etc).
Делаешь своей девушке сайт-визитку по продаже хенд-мейд бижутерии? Можешь присмотреться к декоративным шрифтам или серифам.

Кроме того, возможны ограничения по шрифтовым набором со стороны разработчика ПО под которое делается проект. Так например, Microsoft в Windows 8 Guidelines, настоятельно рекомендовала уйти от сторонних шрифтов в пользу Segoe UI.

Мне сложно представить, к примеру, сайт IT компании, параграфы которого набраны serif типа Bodoni или Baskerville. Это вызывало бы диссонанс, так как Антиква (serif fonts) отправляет нас в прошлое, а Информационные технологии - направление будущего, поэтому и выбирают Гротескные гарнитуры (sans-serif).

2. Практика - это хорошо, но без теоретических основ и понимания структуры Вам сложно будет добиться идеальных результатов. Образцы шрифтов Яна Чихольда, Живая Типографика Корольковой - отличные книги для начала.

3. Поиск шрифтовых пар.
Найдите пару шрифту для связки Заголовок/Параграф. Как и у людей - не все шрифты подходят друг другу. Собираетесь сделать моношрифтовой сайт? Почему бы нет. Однако, возможно, он будет скучноват и будет напрашиваться добавление еще одной гарнитуры к уже имеющийся.
В интернете полно сайтов, посвященных "играющим" парам.

НО. Никогда. ни в коем случае. Не при каких обстоятельствах. Нельзя использовать в заголоках и параграфов похожие шрифты. Например: Helvetica и Acumin Pro.

Почему некоторые шрифты популярны, а другие нет? Здесь есть много причин:
a) Бесплатность. Не нужно платить за лицензию на шрифт, либо лицензионные фи за использование в приложениях или web. Шрифт Лобстер набрал свою популярность именно по этой причине. (правда сейчас у него репутация, близкая к Comic Sans'у).
b) Качество набора гарнитур.
c) Поддержка языков.
d) Наличие лигатур (для кириллицы не актуально:))
e) Тенденции в Web Дизайне и т.д.

Возвращаясь к вопросу "Какие шрифты должны быть у каждого web дизайнера?" Не хочется ли Вам после всего вышеописанного перефразировать свой вопрос "Чем должен руководствоваться каждый web дизайнер при выборе шрифта?"

Сервисы:
Google Fonts (Free) и Adobe TypeKit (Free and Paid). Лично мне больше нравится сервис от Adobe. Немного сложнее в "установке" шрифта, но приятнее по качеству наборов гарнитур.