9 способов определить шрифты из изображений и веб-текста и как загрузить шрифты на свой сайт

При задании шрифтов указывают их размеры в различных единицах измерений, поэтому вам не помешает, наверное, ознакомиться с ними (при желании, конечно же) — единицы размеров (пикселы, Em и Ex) в CSS.

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

Для быстрых экспериментов советую попробовать использовать атрибут style, который нужно будет вставить в нужный тег. Например, я вставил его в код одного из заголовков этой статьи и прописал в него предложенное в Google Font CSS свойство:

Текст заголовка, где оперативно меняем шрифт

И, конечно же, я подключил нужный онлайн шрифт (Stalinist One) с помощью добавления строки:

в файл header.php из папки с моей темой оформления, которую я в данный момент использую на своем Вордпресс блоге. В результате, после перезагрузки страницы, получил такой вид одного из подзаголовков:

Однако, сейчас я убрал служебную гиперссылку Link из файла header.php, но идущий вслед за этим абзацем заголовок все равно использует шрифт «Stalinist One» подгружаемый с Google Font. Как так получилось? Просто я в начало статьи вставил этот самый Link — в тексте он никак не отображается, но нужный фонт с Гугла исправно подгружает. И еще я добавил ему наклон через font-style.

Так что Гугл фонтами можно использовать и локально, а не для всех страниц проекта.

Как установить красивые онлайн шрифты на сайт?

Итак, для того, чтобы добавить новый шрифт взятый в Google Font на сайт, сначала нужно будет подключиться к своему ресурсу по FTP, например, с помощью ФайлЗиллы, которую я использую сам. В статье про этот ФТП менеджер я добавил в конце способ сделать его по настоящему безопасным в плане хранения паролей.

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

Теперь вам нужно будет найти в файлах движка вашего вебсайта тот, где прописаны открывающие и закрывающие теги Head (читайте о нем в статье Doctype и структура Html документа).

Для блога на WordPress вам нужно открыть на редактирование файл Header.php из папки с используемой вами WordPress темой, о назначении шаблонов которой читайте тут. Найти ее можно по этому пути:

 wp-content/themes/название темы WordPress 

Лучше всего редактирование производить в каком-нибудь более-менее продвинутом редакторе, например в Notepad++, о котором я писал здесь (совсем недавно). В начале кода файла Header.php найдите открывающий Html тег Head и вставьте в любом месте до закрывающего тега Head полученную в Google Font служебную гиперссылку Link, которая будет выглядеть примерно так:

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

Для сайта на Joomla вам нужно будет открыть на редактирование файл Index.php из папки с используемым вами шаблоном:

 /templates/Название шаблона Joomla

В его начале вы найдете открывающий и закрывающий теги HEAD, между которыми и вставите нужную строчку кода, инициирующую загрузку наших красивых шрифтов.

Для форума на SMF вам нужно будет открыть на редактирование index.template.php из папки с используемой вами темы оформления. Если у вас на форуме используется тема по умолчанию (дефолтная), то путь к ней будет такой:

Themes/default

С помощью встроенного поиска редактора Notepad++ находите нужный участок кода и добавляете между этими двумя строками, начинающимися с тега Link, нужную строчку кода, инициирующую загрузку фонтов с серверов Google.

Так, это мы разобрались с тем, как настроить загрузку нужных онлайн шрифтов в браузер пользователя при просмотре им страниц вашего сайта, а теперь нужно будет добавить в файл стилей предложенные нам сервисом Google Font CSS свойства, которые выглядят примерно так:

font-family: 'Stalinist One', cursive;

Понятно, что это лишь «рыба», то есть заготовка. Нужно будет еще размер шрифта задать (font-size), его жирность (font weight), высоту линии (Line-height), возможный наклон (font-style) или изменить начертание строчных букв, как у заглавных (font-variant).

Правда, все это можно задать и в одном сборном правиле Font, которое подчиняется такому синтаксису:

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

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

Файл CSS найдете по указанному в этой строчке пути. Если вы еще не очень дружны с Html и CSS, то вам описанное выше действо по добавлению красивых шрифтов от Google на сайт может показаться сложноватым. Но не отчаивайтесь, просто попробуйте. Если я объяснил подключение не очень понятно, то вы так же можете воспользоваться хелпом по Google Font API.

Содержание Шаг 1 – Найти шрифты из изображений с помощью таких инструментов, как: 1. What Font Is 2. WhatTheFont 3. Font Squirrel 4. Matcherator 5. FontFaceNinja 6. Type Sample 7. WhatFont 8. Typ.io 9. Fount Шаг 2 – Предварительный просмотр вашего шрифта. Шаг 3 – Загрузите пользовательский шрифт на ваш сайт. Bright Calligraphy PSD Font Янтарный вкус Курение гарнитура Шнурки Этикетка виски Агресс Внутри коробки Шрифт Pin Up Мегаватт Augustine И в завершение…

Был ли у вас момент влюбиться в какой-то совершенно случайный дизайн сайта? Это классные изображения, отличные макеты текста, выигрышная цветовая схема, но самое главное – выдающиеся шрифты, которые буквально заставляют вас украсть их для вашего собственного проекта.

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

Я имею в виду, что вы всегда можете обратиться за помощью к опытным веб-дизайнерам, найти соответствующий форум или найти другой потрясающий вариант из коллекции шрифтов TemplateMonster. Что касается форумов, будьте готовы ждать: может быть, день, может быть, несколько недель.

… а что если нет времени ждать?

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

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

Продолжайте читать, и я расскажу, как это делается!

Шаг 1 – Найти шрифты из изображений с помощью таких инструментов, как:

1.What Font Is

image

«What Font Is» – самый популярный сервис для определения шрифта по фотографии или скриншоту. Все, что вам нужно, это загрузить изображение (или указать его URL), и программа отобразит наиболее похожие варианты, доступные для покупки на MyFonts. По словам создателей What Font Is, требования к изображению:

  • четко горизонтальный текст
  • высота буквы не менее 100 пикселей
  • буквы не касаются друг друга
  • не более 50 символов

2.WhatTheFont

image

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

И хотя по сравнению с What Font Is этот ресурс имеет более слабую коллекцию шрифтов, у вас все еще выше вероятность успешного распознавания шрифтов. 

3.Font Squirrel

Очевидно, Font Squirrel работает точно так же, как и предыдущие два сервиса: вы загружаете изображение, обрезаете шрифт, и программа обнаруживает возможные подходящие варианты шрифтов. Но есть нечто, что делает Font Squirrel уникальным ресурсом. В частности, возможность поворачивать изображения и определять шрифты, встроенные в нетрадиционную форму. Это очень полезный инструмент, когда изображения имеют шрифты, которые не расположены в обычном горизонтальном положении, и вы больше нигде не найдете эту функцию!

Кроме того, не забудьте просмотреть предлагаемые предложения Font Squirrel – некоторые из них действительно «горячие», поэтому не упустите их.

4.Matcherator

Matcherator является отличным инструментом распознавания шрифтов с точки зрения простоты использования. На сайте есть удобная функция перетаскивания. Это означает, что вы можете разместить изображение шрифта, просто перетащив его на сайт с помощью мыши. Программа обязательно найдет то, что вам нужно! С помощью этого инструмента вы можете распознать все виды шрифтов (с засечками и без) без затрат.

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

5.FontFaceNinja

FontFaceNinja на данный момент является бесспорным лидером. Расширение не только помогает вам найти заголовок шрифта на веб-сайте (не по изображению), но также дает вам возможность попробовать писать этим шрифтом. Более того, он позволяет вам скачать понравившийся шрифт!

В дополнение к красоте и удобству этого расширения, FontFaceNinja имеет своего рода волшебную кнопку (маску), которая скрывает всю рекламу на странице, что позволяет вам наслаждаться только шрифтами. Расширение полностью бесплатно и работает с Chrome и Safari.

6.Type Sample

Это еще одно полезное расширение, к сожалению, только для пользователей Chrome. Он работает аналогично предыдущему варианту, хотя Type Sample может похвастаться некоторыми классными уникальными функциями. Особого внимания заслуживает возможность «поиграть со шрифтами» в режиме реального времени. Когда вы щелкаете по выделенному текстовому блоку, вы можете изменить размер шрифта, посмотреть на диаграмму, ввести собственный текстовый пример и попробовать еще несколько хитростей, недоступных для других сервисов.

Входя в учетную запись Type Sample на Twitter, вы можете создать свою собственную коллекцию шрифтов и / или посмотреть чужую.

7. WhatFont

8. Typ.io

Typ.io – идеальный выбор для максималистов, отказывающихся выполнять дополнительные действия, или тех, кому просто безразличны стили шрифтов и цветовые коды. После установки расширения вы увидите кнопку с буквой «T» в нижнем углу браузера. Если вы нажмете эту кнопку, она отобразит названия всех шрифтов, указанных на странице, в отдельном столбце. Чтобы узнать, где находится шрифт, просто нажмите на его название.

9.Fount

Fount – отличный плагин для определения шрифтов на сайтах, используемых многими профессиональными веб-дизайнерами. Чтобы он работал, нужно добавить сайт в закладки и нажать на него. Курсор станет крестиком, поэтому при нажатии на шрифт вы увидите окно с его заголовком, размером в пикселях, весом и стилем. Чтобы выключить режим Fount – нажмите его еще раз. Расширение работает с такими браузерами, как Safari, Chrome, Firefox и IE8 +.

Шаг 2 – Предварительный просмотр вашего шрифта.

Теперь, когда вы, скорее всего, нашли тот потрясающий шрифт, который видели где-то еще, вам необходимо выяснить, будет ли этот шрифт соответствовать стилю вашего сайта. «Вы никогда не узнаете, если не попробуете» – возможно, вы уже подумали об этом, и вы были бы на 100% правы. Но загрузка каждого любимого шрифта на ваш сайт будет пустой тратой денег, верно?

Хорошей новостью является то, что если вы являетесь пользователем Chrome, вы можете получить предварительный просмотр любого шрифта. Расширение Google Font Previewer позволяет тестировать их на веб-сайте, не переходя в режим редактирования. Вы также можете пометить шрифты, которые вы предварительно просматриваете, и отметить их как избранные в вашем приложении.

Шаг 3 – Загрузите пользовательский шрифт на ваш сайт.

Итак, вы выбрали правильный шрифт, на который так долго охотились, и теперь пришло время внедрить его в свой собственный дизайн сайта. Наиболее распространенный подход к добавлению пользовательского шрифта на веб-сайт заключается в использовании правила CSS FontFace .

  1. Загрузите шрифт в соответствующем формате (.ttf или .otf)
  2. Создайте WebFont Kit для кросс-просмотра с помощью генератора Webfont
  3. Загрузите этот комплект на свой сайт, используя свой FTP или файловый менеджер
  4. Обновите ваш файл CSS
  5. Используйте собственный шрифт в своих декларациях CSS

Если у вас есть сайт на WordPress, с плагином для типографики все может стать еще проще – вам больше не нужно будет возиться с кодом. Или вы можете добавить эти шрифты в свою тему вручную, используя файл functions.php.

Если вы ищете современный, гладкий шрифт, то это именно то, что вам нужно. В него входят потрясающие персонажи в неоновом стиле. Идеально подходит для дизайна логотипов, пакетов или других рекламных материалов. Вы получите набор из 81 PSD (4000×4000 px) и PNG файлов (2000×2000 px). Вы можете легко комбинировать отдельные буквы для создания нужного слова. Более того, эти буквы легко настраиваются – вы можете изменить их цвет. Он также поставляется со шрифтом Golden Bush (файлы OTF и TTF, которые вы можете легко установить и использовать). Он снабжен темной текстурой фона. В целом, это привлекательный набор букв в неоновом стиле.

Янтарный вкус

Вот хороший винтажный шрифт. Это прекрасно, если вы хотите что-то продвигать. Это здорово использовать при разработке логотипа, меню или флаера. Старинный шрифт также может сделать ваш дизайн роскошным, особенно если вы используете красивый рисунок. Он поставляется в виде файлов шрифтов OTF и TTF – их легко установить и использовать. Этот шрифт поставляется с файлом EPS. Это обеспечено с бесшовным фоном образца. В целом, этот шрифт поставляется со всем необходимым для создания чего-то впечатляющего. Обратите внимание, что этот файл содержит только латинские символы.

Курение гарнитура

Это еще один винтажный шрифт, который может сделать ваш дизайн потрясающим. Это легко настроить. Он имеет отдельные файлы для шрифта и эффект текстурированной громкости, так что вы можете легко изменить цвет. Поэтому у вас есть несколько вариантов настройки. Он поставляется в виде файлов OTF, TTF и WOFF. Поэтому вы можете легко установить его и использовать. Все персонажи используют формат EPS 10. Это здорово, когда ты хочешь получить винтажный вид, когда ты что-то проектируешь. Это может быть идеально, когда вы создаете логотип или изображение для вашего сайта. Вы также получите бонусный постер.

Шнурки

Если вам нужен хороший шрифт в стиле рукописного ввода, то это именно то, что вам нужно. Этот шрифт имеет две версии – с эффектом «шнурка» и без него. Эффект «шнурка» добавляет специальную текстуру, которая добавляет прозрачные участки. Это может сделать ваш дизайн более интересным. Чистая версия не имеет такого эффекта, но все равно выглядит потрясающе и чисто. Он поставляется с 8 штрихами, лигатурами и альтернативами, чтобы вы могли сделать свой дизайн более сложным и интересным. Он поставляется в виде файлов OTF и TTF, поэтому его легко установить и использовать. Он содержит только латинские символы.

Этикетка виски

Это идеальный вариант, когда вы ищете шрифт в классическом стиле. Это может быть здорово использовать при разработке упаковки, этикетки или логотипа. Это сделает ваш дизайн роскошным и роскошным. Этот шрифт поставляется в файлах OTF и WOFF, поэтому вы можете легко установить и использовать их. Он снабжен четырьмя файлами EPS 10, которые демонстрируют, как его можно использовать. Векторные файлы включают в себя декоративные рамки, ленты и гранж текстуры. Шрифт включает цифры и знаки препинания. Если вы ищете шрифт, который может выделить ваш дизайн – получите его прямо сейчас.

Агресс

Вот современный, агрессивный шрифт, который может сделать ваш дизайн привлекательным. Этот шрифт в стиле граффити идеально подходит, если вы хотите, чтобы ваш дизайн выглядел нестандартным и сложным. Это чистый и хорошо продуманный. Этот шрифт предоставляется в виде файлов OTF и TTF, которые можно легко установить и использовать. Он поставляется с бонусными абстрактными изображениями – шестью 6000×6000 PSD и JPG файлами. Это многоязычный шрифт, поэтому у вас нет никаких ограничений. Все персонажи выглядят динамично, поэтому они делают дизайн более интересным и сложным. Поэтому, если вы хотите создать что-то, на что люди обратят свое внимание – этот шрифт – то, что вам нужно.

Внутри коробки

Вы устали от всех этих стандартных шрифтов? Если да, то этот шрифт для вас. Он выглядит потрясающе и сделает ваш дизайн концептуальным и ярким. Этот шрифт имеет 2 стиля. Он включает в себя широкие символы, которые выглядят современно и концептуально. Есть также тонкие персонажи, которые выглядят очень элегантно и чисто. Это приходит как файлы OTF и TTF. Они просты в использовании. Кроме того, он снабжен файлами шаблонов. Шаблоны могут быть настроены для получения нужного вам вида. Включает только латинские буквы. Этот шрифт может быть отличным, чтобы сделать ваш дизайн несколько футуристическим.

Шрифт Pin Up

Если вы художник, который создает иллюстрации Pin Up, то этот шрифт именно то, что вам нужно. Он идеально соответствует всемирно известным иллюстрациям в стиле Pin-Up. Он включает в себя два стиля шрифта, поэтому вы можете выбрать тот, который вам нравится больше всего. Он поставляется в форматах OTF и WOFF, поэтому их легко установить. Он снабжен несколькими штрихами, которые вы можете использовать, чтобы сделать ваш дизайн более интересным и динамичным. Самое замечательное, что этот шрифт снабжен иллюстрацией девушки в стиле пин-ап! Имейте в виду, что он включает только буквы.

Мегаватт

Этот красивый современный каллиграфический шрифт заставит ваш дизайн выглядеть мощным. Это замечательно, если вам нужно разработать логотип, постер, привлекательное изображение и т.д. Он сочетает стиль рукописного ввода с некоторыми острыми углами. Эта комбинация делает этот шрифт таким мощным. Включает несколько лигатур. Он поставляется в виде файлов OTF и TTF. В качестве бонуса вы получите высококачественный 3D-рендеринг гитарного усилителя (разрешение этого PSD-файла составляет 6000×4000 пикселей. Это многоязычный шрифт (включает символы Западной Европы). В целом, если вы хотите, чтобы ваш дизайн качался, тогда этот шрифт вам нужен.

Augustine

Вот современный элегантный скрипт шрифта. Он очень чистый и гладкий, поэтому идеально подходит для элегантного дизайна. Этот шрифт отлично подходит для создания приглашений, визитных карточек, меню, листовок, плакатов и т.д. Он имеет различные функции, такие как стилистические наборы, стилистические альтернативы, контекстная альтернатива, лигатура и т.д. Он поставляется с косой чертой, поэтому вы можете добавлять специальные штрихи к вашему дизайну и сделать его сложным. Он предоставляется в виде файлов OTF и TTF – вы можете легко установить и использовать его. У него много глифов. Все символы имеют код PUA – вы можете получить к ним доступ без использования дополнительного программного обеспечения. Это многоязычный, поэтому у вас нет никаких ограничений. Это очень чисто, и это сделает ваш дизайн впечатляющим.

И в завершение…

Иногда лучший способ найти правильный шрифт – это искать красивые примеры и коллекции шрифтов в Интернете. Худшее для графических дизайнеров – видеть красивый шрифт и не знать, как он называется. Но теперь, когда у вас есть девять способов определения шрифтов, вы сможете узнать их названия всего за пару минут … или, может быть, даже быстрее!

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

Источник записи: https://www.templatemonster.com

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который поддерживается операционной системой пользователя с очень высокой степенью вероятности. Поскольку о таком положении дел остаётся только мечтать, то абсолютно безопасных шрифтов не существует!

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

Шрифты с засечками — serif

font-family Пример
Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, serif

Это заголовок

Это абзац

Шрифты без засечек — Sans-Serif

font-family Пример
Arial, Helvetica, sans-serif

Это заголовок

Это абзац

«Arial Black», Gadget, sans-serif

Это заголовок

Это абзац

«Comic Sans MS», cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

«Lucida Sans Unicode», «Lucida Grande», sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

«Trebuchet MS», Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты — Monospace

font-family Пример
«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

С этой темой смотрят:

Всем добрый день!!! Сегодня мы поговорим о шрифтах. А поможет нам в этом иностранный товарищ. Внимательно читаем и перенимаем опыт.

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

Томас Лауринавичус (Tomas Laurinavicius) заинтересовался, какие шрифты любят больше всего использовать веб-дизайнеры в своей работе.

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

Кроме того, он взял короткое интервью у веб-дизайнеров с целью узнать, какой шрифт наиболее подходит в определенной ситуации. Результатами своего опроса Томас поделился на сайте hongkiat.com.

Опрос проводился в социальных сетях и микроблогах – Polldaddy, Forrst, Facebook и Twitter. В опросе приняли участие 34 дизайнера из 14 стран, которые, отвечая на вопросы о любимых шрифтах, объяснили, почему выбирают именно их.

Во время опроса веб-дизайнеры назвали 73 различных шрифта – 46 бесплатных и 27 платных.

Самыми любимыми шрифтами веб-дизайнеров оказались: Helvetica, Arial, Georgia, Gotham, Myriad Pro, DIN, Futura, League Gotic, Cabin, Corbel.

Нужно учитывать, что не все из представленных шрифтов имеют кириллическое начертание – тем более, в бесплатном варианте.

Далее показано два топ-10 – самые любимые бесплатные и платные шрифты.

Опрошенные дизайнеры выбрали 10 лучших шрифтов для веб-графики. При этом не учитывались шрифты, по умолчанию установленные в операционную систему, такие как, Arial, Verdana, Times New Roman, Georgia или Tahoma. (Это немного странно – на первом месте шрифт, который есть в операционной системе).

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

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

09 янв в 2019 9K imageРазместить сайт на хостинге

1. Заголовки и текст

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

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

Пример: заголовки – Verdana, текст – Arial.

2. С засечками или без?

Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.

Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.image

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

Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.image

3. Сочетание цветов

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

Естественно, тестируйте сочетаемость цветов не только между собой, но и на сайте, на том фоне, который вы выбрали. Особенно если фон не однотонный.

4. Выделение

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

5. Размер

Размер шрифта должен позволять без труда читать его.

В идеале это 12-14 пунктов; минимально — 10, максимально — 16.

Источники шрифтов

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

Google Fonts

https://fonts.google.com/

Один из самых известных сборников бесплатных шрифтов. Присутствует латиница, кириллица и другие популярные и не очень языки; всего 900 семейств. Есть несколько фильтров — например, можно отсортировать шрифты по толщине букв, наклону или ширине.

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

FontSpace

https://www.fontspace.com/

Здесь представлено больше 37 тысяч бесплатных шрифтов. Есть даже с пиктограммами (например, шрифт Trees Go с деревьями). Шрифты распространяются под разными лицензиями; некоторые нужно купить для того, чтобы использовать в коммерческих целях.

1001 Free Fonts

https://www.1001freefonts.com/

Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “Famous” (знаменитое) можно найти шрифты из «Парка Юрского периода» или «Черепашек-ниндзя».

FontStruct

https://fontstruct.com/

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

Font Squirrel

https://www.fontsquirrel.com/

Еще один сайт со множеством разных шрифтов. Помимо бесплатного раздела, в нем есть раздел с платными шрифтами (Almost Free Fonts), где продаются шрифты с очень хорошей скидкой.

DaFont

https://www.dafont.com/

Здесь можно найти бесплатные шрифты для личного и коммерческого использования. Есть интересная категория шрифтов “Foreign look”, которые стилизованы под буквы из алфавитов разных стран: русские, арабские, азиатские и другие.

Urban Fonts

https://www.urbanfonts.com/

Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “Free”.

Abstract Fonts

http://www.abstractfonts.com/

Еще одна коллекция с постоянно пополняющимися шрифтами.

А если ищете какие-нибудь оригинальные платные шрифты, посмотрите в MyFonts. Там довольно большая коллекция всевозможных шрифтов.

Заключение

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

P.S.

Тем, кто интересуется шрифтами и типографикой, рекомендую посмотреть фильм Helvetica:

imageКатерина Филиппова +57

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий