Шрифты для сайта: самые популярные и используемые

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

ТОП-10 самых лучших и самых используемых шрифтов

Все приведённые ниже шрифты считаются базовыми, поэтому могут быть использованы на сайте даже без загрузки файла шрифта (*.ttf) в директорию с сайтом

1. Tahoma


2. Verdana


3. Arial / Arial Black / Arial Narrow


4. Times New Roman


5. Palatino Linotype / Palatino


6. Impact


7. Century Gothic


8. Helvetica


9. Georgia


10. Gill Sans MT



Дополнительно:

11. Courier New


12. Calibri


13. Trebuchet MS


14. Lucida Sans Unicode


15. Corbel


Полезная ссылка на все поддерживаемые шрифты: здесь

Несколько правил использования шрифтов на сайте

1. Основа читабельного текста - заголовки. Они выступают своеобразными маяками, которые позволяют читателю сфокусировать внимание на нужной части или отрывке, не раздражая его потоком общей информации. Также старайтесь выделять ключевые слова!

<h1>Заголовок</h1> <!-- используем теги заголовка -->
<p>Первый параграф параграф</p>
<p><strong>Второй</strong> параграф параграф</p> <!-- выделяем ключевое слово -->

2. На сайте должна быть выдержана какая-то общая концепция, поэтому старайтесь использовать не более 2-3 шрифтов на сайт. Ниже приведён код CSS

body { font: 14px/100% Tahoma, Verdana, sans-serif }

14px размер шрифта, 100% отступ между строк, Tahoma используемый шрифт
3. Текст после оформления должен быть читабельным - соблюдайте контрастность (чёрный текст на белом фоне, белый на синем и тп). Старайтесь не используйте ни для того, ни для другого яркие цвета. Есть исключения, но под стандартные практики оно не попадает.

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

5. Текст должен быть читабельным! Старайтесь делать абзацы, отступы у подпунктов или справочной информации.

<p>Текст первого абзаца. Длинный и интересный.</p>
<p>А вот текст второго абзаца со вторым сливаться не будет, так как между ними будет отступ.</p>

Спасибо за внимание! И удачи в разработке дизайна проектов!)