Каким должен быть шрифт для сайта?



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

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

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

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

Как выбрать шрифт?

Многие шрифты уже по умолчанию установлены на наших компьютерах и ноутбуках. Это такие шрифты, как: Arial, Georgia, Comic Sans MS, Times New Roman, Verdana, Tahoma и другие. Но если вы будете устанавливать нестандартный шрифт на сайт, следует помнить, что у посетителей вашего сайта может не оказаться такого шрифта, и страница будет отображаться не так, как вы задумали.

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

В случае, если вам нужно что-то нестандартное, типо заголовка, красивой надписи или кнопок, лучше сделать это изображением, в формате gif или jpg. Таким образом, например, можно сделать красивое название сайта рядом с логотипом, и такой текст у всех пользователей будет смотреться одинаково.

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

Размер шрифта

Предпочтения у каждого человека свои. Самая используемая гарнитура шрифта это 10-12 , если шрифт мельче, то это, как я писала выше, не очень уважительно к посетителям, которые должны напрягать глаза при чтении, но и больший шрифт не подойдет, так как страница будет  выглядеть как транспарант.

Мелкий шрифт чаще всего используется для примечаний или надписей под изображениями. Гарнитура таких надписей примерно от 8 до 10 . Заголовки и подзаголовки следует писать крупным размером шрифта, а так же не забывать выделять ключевые слова жирным текстом , подчеркиванием или наклоном.

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

Цвет шрифта

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

Не следует делать яркие, кричащие цвета, а-ля синий фон и красный текст.

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

Сглаживание шрифта

В таких браузерах как InternetExplorer и Safari уже включено сглаживание шрифтов по умолчанию, это касается и маленьких и больших шрифтов. В остальных браузерах Opera, Mozilla, сглаживание начинается с 17-18 px., а мелкий текст остается без сглаживания.

В идеале должно выглядеть вот так:

Шрифты используемые в веб-дизайне

Arial. Компактный шрифт, имеет преимущество благодаря высоте букв.

Tahoma. Подходит больше для технической тематики, имеет средне-широкие буквы.

Verdana. Хороший вариант использования шрифта для сайта. Будет хорошо и удобно читаться, благодаря ширине букв и между буквенном расстоянии.

Trebuchet MS. Не совсем подходит для чтения, даже при 12 px. приходится напрягать глаза.

Times New Roman. Шрифт имеет хорошую читаемость, используется во всех редакторах. Но при 12 px выглядит мелко.

MS Sans Serif. Системный шрифт Windows, хорошо читается при разных режимах.

Чтобы правильно выбрать нужный шрифт для сайта, можно написать несколькими выбранными шрифтами, чтобы визуально сравнить, какой шрифт лучше смотрится и воспринимается для чтения. Еще можно попробовать изменить расстояние между буквами и размер шрифта.




  1. Лисёнок Рэнди:

    Мои глаза.. Тот с синим фоном даже боковым зрение смотря на него напрягаешь глаза. Аж заслезились.

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

  2. Ирина:

    Спасибо за информацию, но не могли подсказать, а какой вы используете шрифт на своем сайте. Уже перекопала все, что можно так и не могу прийти к конечному решению. Помогите.

  3. Иван:

    Verdana? 11? По моему так

  4. Алина - Thinking Creature:

    Привет, Оля. Спасибо за статью. Благодаря ей я немножко изменила шрифт у себя на блоге. Спасибо за вдохновение.

  5. Александр:

    Здравствуйте, не могли бы подсказать или дать ссылку на видеоурок, как поменять шрифт на вордпрессе, тема 2013? У меня есть программа
    Notepad++ и я знаю как открыть таблицу стилей, но вот в какой строке что изменить — не пойму.:-)

  6. Татьяна:

    Уважаемый автор статьи, подскажите пожалуйста, каким шрифтом был написан этот текст?

  7. Татьяна:

    Уважаемый автор статьи, подскажите пожалуйста, каким шрифтом был написан этот текст? Мне очень нужно. Спасибо :-)

  8. Алина:

    Для начала шрифт необходимо прописать в header, после этого можете менять в firebug и смотреть

  9. ZOiE:

    Я так и не понял какой шрифт лучше. Все знают что с шрифт с засечками лучше читается. И на Вашем сайте он используется но как по мне то он какой-то слишком большой как будь-то «болд». Дело в том что с появлением мобильных девайсов, ретина дисплеев встает вопрос «кросшрифтности-читабильности».

Ваш отзыв