Информация Уроки | Теория | Как выбрать правильно шрифт в Веб-Дизайне | ★☆☆

[DELETEDТNEW]

​

Стандартные шрифты для сайтов​

Большинство сайтов в сети используют стандартные шрифты. То есть те, которые присутствуют у пользователей на компьютере. При этом существует список так называемых безопасных шрифтов. Это те шрифты которые с вероятностью 99% присутствуют на всех компьютерах в мире, а также на смартфонах и в планшетах. При использовании таких шрифтов текст будет выглядеть одинаково на Windows, Linux, iOS, Mac OS и Android.

Безопасные шрифты для веб​

После прочтения не одной тонны страниц на эту тему я составил свой список 100% совместимости шрифтов между Windows и Mac.
Windows fonts / Mac fonts / Font family

• Arial, Arial, Helvetica, sans-serif
• Arial Black, Arial Black, Gadget, sans-serif
• Courier New, Courier New, monospace
• Lucida Sans Unicode, Lucida Grande, sans-serif
• Tahoma, Geneva, sans-serif
• Times New Roman, Times New Roman, Times, serif
• Verdana, Verdana, Geneva, sans-serif

Шрифты с засечками и без​

Как вы обратили внимание, всего три типа шрифтов. И если не брать во внимание моноширинный Courier New, то нами приходится иметь дело с двумя семействами — это шрифты с засечками serif (serif — «засечка») и шрифты без засечек sans-serif (sans — «без»). Следующий рисунок наглядно все демонстрирует.



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

Как подобрать подходящий шрифт.​

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

Мы рассмотрим 4 варианта сочетаний разной насыщенности шрифта в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.

1. Полужирный заголовок и нормальный текст​

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

Для каких сайтов подойдет: для любых.

2. Жирный заголовок и нормальный текст​

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

Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.

3. Жирный заголовок и тонкий текст​

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

4. Тонкий заголовок и тонкий текст​

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

Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.

Правила которые помогут вам выбрать нужный шрифт​

1. Комбинируйте шрифт с засечками и шрифт без засечек, чтобы создать контраст. Чем больше стили шрифтов не похожи друг на друга, тем больше у вас шансов создать удачную пару. Шрифты, которые слишком одинаково выглядят, плохо смотрятся вместе. (Попробуйте совместить Helvetica и Univers, чтобы убедиться на примере, что это плохой вариант). Можно выбрать два шрифта с засечками или два без засечек для создания комбинации только в том случае, если они радикально отличаются друг от друга.
2. Избегайте выбора шрифтов из одной категории, например, рукописные шрифты или брусковые. (Шрифты Clarendon и Rockwell смотрятся вместе не очень хорошо).
3. Определите каждому шрифту его задачу и придерживайтесь её.
4. Попробуйте шрифты из различных категорий, которые имеют одинаковую высоту строчных знаков и ширину глифов. (Например, Futura вместе с Times New Roman смотрятся плохо, потому что у них большая разница между х-высотой и шириной. )
5. Найдите какие-либо отношения между основными формами. Например, посмотрите на букву «О» в верхнем и нижнем регистре. Круглые и овальные буквы «О» не любят друг друга, поэтому их лучше не сочетать.
6. Сравните начертание шрифтов: оно должно быть разным. (Например, Didot и Rockwell выглядеть очень плохо вместе по многим причинам, но одна из главных — потому что они оба имеют жирное начертание).
7. Используйте разную цветность. Простой способ проверить цветность—это прищурившись посмотреть на блок со шрифтами: главное, чтобы ваш дизайн не превращался в одно размытое пятно, а сохранял визуальную иерархию. Если оба ваши образца шрифтов примерно одинакового цвета, попробуйте поиграть с размером шрифта, межстрочным интервалом, кернингом или замените начертание.
8. Найдите умный способ для создания контраста. Увеличьте трекинг для одного шрифта и проверьте, как смотрится сочетание.
9. Не пренебрегайте тем, чтобы использовать различные шрифты из одного семейства. Например, можно выбрать Helvetica Black для заголовка и Helvetica normal для основного текста.
10. Попробуйте сочетать шрифты из одного исторического периода. Это займет немного времени, но оно того стоит.