Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта ?», многие на это не обращают внимания, а зря!

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

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

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

Часто используемые шрифты

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

• Times New Roman;
• Arial; Georgia;
• Impact;
• Trebuchet MS;
• Verdana и другие.

Они входят в группу безопасных. Рассмотрим их подробней:

Arial . Преимущество этого компактного шрифта в высоте букв.

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

Trebuchet MS . Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.

Times New Roman . Самый распространенный и широко-используемый шрифт. Идеально подходит для чтения, но при размере 12 px выглядит мелким.

MS Sans Serif . Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.

Georgia . Очень похож на Times. Но в нём более широкие и резкие засечки и концы.

Comic Sans MS . Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.

Courier New . Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием . -Минус: ненасыщенный цвет.

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

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

Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст - Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.

Бывает, шрифт не отображается на компьютере. В таком случае следует прописать не один шрифт, а несколько.

Например, Verdana, Impact, Trebuchet MS. Тогда браузер после неудачной попытки использования Verdana попытается использовать Impact, а затем Trebuchet. В случае не отображения всех заданных шрифтов, система обозначит свой - по умолчанию. Таким образом, можно легко и просто оформить сайт на свой вкус, сделать его ярким и необычным. Главное - предотвратить проблемы при отображении на компьютерах посетителей ресурса.

Нововведение от Яндекс. Размер имеет значение!

Вслед за мобильным алгоритмом «Владивосток », Яндекс сделал фактором ранжирования размер шрифта . Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.

Эта новость вызвала негативную критику у создателей сайтов. Ведь, например, ресурсам, сделанным с использованием flash- технологии, для того, чтобы нормально отображаться на экранах мобильных устройств, придется создавать специальное приложение. А это отнимет много времени и денег.

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

Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma - 12 px - выглядеть они будут по-разному. Последний, визуально будет смотреться больше.

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Файл TTF в ZIP-архиве

Какие шрифты использовать для сайта

Ресурсы с подборками сайтов в стиле минимализма

Минимализм - необычайно интересное искусство, сочетающее в себе огромные возможности, но при этом требующее много сил, идей и исследований для получения «яркого» результата. Заходя на такие сайты, мы часто даже не обращаем внимания на его очертания, ненавязчивый дизайн или некую легкость, которая в нем ощущается с первых страниц. Мы замечаем это лишь потом, когда заходим на эти понравившиеся нам сайты снова.

Минимализм в дизайне сайтов притягивает и все больше захватывает дизайнеров и простых пользователей, когда они находят их среди «толпы» разноцветных многостраничников. Дизайнерам начинает это нравиться и они придумывают свой минимализм, порой такой необычный, но такой классный.

Примеры сайтов и рассуждения на тему минимализма мы затрагивали в статьях из одноименной рубрики «Минимализм».

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

Уроки / Разное /

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

ТОП-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

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

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

Заголовок

Первый параграф параграф

Второй параграф параграф

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

50 крутых бесплатных шрифтов

Ниже приведён код CSS

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

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

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

Текст первого абзаца. Длинный и интересный.

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

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

Предыдущая статья
Учим сочетания горячих клавиш!Следующая статья
Как выбрать и зарегистрировать домен?

Комментарии к статье (vk.com)

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

Какой шрифт лучше? Какие шрифты лучше использовать? Это зависит от задачи, которую вам предстоит решить.

1. Arkhip

Скачать шрифт Arkhip

2. Boucle

Скачать шрифт Boucle

3. Cabana

Скачать шрифт Cabana

4. Eirik Raude

Скачать шрифт Eirik Raude

5. Gogoia

Скачать шрифт Gogoia Deco
Скачать шрифт Gogoia Regular

6. Muller

Скачать шрифт Muller Thin
Скачать шрифт Muller Extra Bold

7. Nexa Script

Скачать шрифт Nexa Script Thin
Скачать шрифт Nexa Script SemiBold
Скачать шрифт Nexa Script Light
Скачать шрифт Nexa Script Regularr
Скачать шрифт Nexa Script Bold
Скачать шрифт Nexa Script Heavy

8. Nickainley

Скачать шрифт Nickainley

9. Dewberry

Скачать шрифт Dewberry Regular
Скачать шрифт Dewberry Bold
Скачать шрифт Dewberry Italic
Скачать шрифт Dewberry Bold Italic

10. Pobeda

Скачать шрифт Pobeda Bold
Скачать шрифт Pobeda Regular

Не стоит обходить вниманием и платные шрифты.

Как правило, они более тщательно проработаны чем их бесплатные аналоги, и содержат более широкий набор символов.

11. Tesla

Купить шрифт Tesla

11. Tilda

Купить шрифт Tilda

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

Что касается использования. Универсальных шрифтов для решения любых задач не существует. Шрифт, который прекрасно смотрится на бумаге - может выглядеть ужасно в качестве основной гарнитуры на веб-сайте. Именно поэтому разнообразие шрифтов сегодня так велико, и у каждого из них своё предназначение. Например, акцидентный шрифт не стоит использовать для набора сплошного и мелкого текста, также как не стоит использовать рубленые шрифты на веб-сайтах. В обоих случаях восприятие и читабельность текста будут сильно нарушены. Например, лучший шрифт для текста на сайте - Open Sans. Читабельный и привычный глазу шрифт для работы с документами - Times New Roman.

Начинающие дизайнеры часто задаются вопросом, «какие лучшие шрифты для логотипов».

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

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

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

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

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

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

Павел ШУДНЕВ

Запомните правило: на бумаге лучше всего читается шрифт с засечками (Serif), с экрана – шрифт без засечек (Sans Serif).

Я думаю, что причина этого в том, что на бумаге и на экране монитора информация выводится по-разному. Так, в типографской печати для шрифта нормой считается от 700 dpi (dots per inch – количество точек на дюйм), а чёткость изображения на экране монитора составляет всего 72 dpi – в десять раз меньше…

Но вернёмся к нашему вопросу – какой же шрифт лучше? Однозначный ответ на него можно дать применительно к веб-сайтам: это Verdana. Причем, это не моя точка зрения, а научно доказанный факт. Этот шрифт действительно лучше всего читается с экрана! У этого шрифта довольно интересная история.

Он был разработан специально для компании Microsoft в 1996 году как шрифт, который легко читать с экрана даже при малом размере букв. Благодаря отсутствию засечек, широкому размеру символов и большому расстоянию между ними, шрифт Verdana действительно прекрасно читается!

Другое дело, что при потрясающей читабельности, он очень-то симпатичный: хочется ведь, чтобы текст было не только легко читать, но и чтобы он выглядел красиво (хотя нравится/не нравится – это уже дело вкуса). Тогда нужно искать альтернативу – благо, они есть.

Четвёрка лучших: шрифты Arial, Helvetica, Verdana и Georgia

Как показали результаты опроса 35 веб-дизайнеров журналом Smashing Magazine, первое место делят два шрифта: Helvetica и Arial. (Для общего образования скажу, что Helvetica была разработана швейцарскими дизайнерами более полувека назад, а шрифт Arial лет на двадцать моложе.) Эти шрифты – самые распространенные в интернете, а потому могут претендовать на звание лучших.

Очень популярен (и повсеместно любим) изысканный шрифт Georgia. Несмотря на то, что этот шрифт с засечками, он очень широко распространён в интернет. Его, например, используют в качестве основного шрифта в online версии журнала Forbes.

На самом деле, если посмотреть в интернете приличные веб-сайты, то можно обнаружить, что указанные выше четыре шрифта встречаются повсеместно. Другие шрифты являются скорее исключением, чем правилом. Поэтому, подводя итоги, можем резюмировать, что лучшие шрифты для сайта – это Arial, Helvetica, Verdana и Georgia.

Что же касается шрифтов для чтения с бумаги, то их настолько много (несколько тысяч), что выделить из них какие-то лучшие практически невозможно. Однако, как ни банально это прозвучит, в печати широко распространен шрифт Times New Roman и его вариации. Поэтому лавры лучшего шрифта offline оставим ему.

P.S. Кстати, Serif и Sans Serif с французского языка так и переводится: с засечками и без засечек.

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

ТОП-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

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

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

Заголовок

Первый параграф параграф

Второй параграф параграф

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

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

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

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

Текст первого абзаца. Длинный и интересный.

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

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