Шрифты для Вашего сайта


Содержание

Шрифты для сайта в CSS

Здравствуйте уважаемые начинающие веб мастера.

В этой статье мы узнаем, какие шрифты применяются в интернете, и как они оформляются свойствами CSS.

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

И конечно же посмотрим, как внедрить свободный шрифт на сайт управляющийся CMS WordPress.

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

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

Дело в том, что есть такое явление, как кроссбраузерность, то есть возможность какого либо элемента, одинаково отображаться во всех имеющихся в интернете браузерах.

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

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

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

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

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

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

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial Шрифты для сайта
б) Arial Black Шрифты для сайта
в) Tahoma Шрифты для сайта
г) Verdana Шрифты для сайта
д) Lucida Sans Unicode Шрифты для сайта
е) Trebuchet MS Шрифты для сайта
ж) MS Sans Serif Шрифты для сайта
з) Impact Шрифты для сайта
е) Century Gothic Шрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New Roman Шрифты для сайта
б) Georgia Шрифты для сайта
в) Palatino Linotype Шрифты для сайта
г) MS Serif Шрифты для сайта
д) Sylfaen Шрифты для сайта
е) Garamond Шрифты для сайта
ж) Century Шрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier New Шрифты для сайта
б) Lucida Console Шрифты для сайта
в) Consolas Шрифты для сайта
г) Courier New Шрифты для сайта

4. Семейство cursive .

а) Сomic Sans MS Шрифты для сайта
б) Monotype Corsiva Шрифты для сайта
в) Mistral Шрифты для сайта

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

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

, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family , а в значении указывается название шрифта.

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

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно – без кавычек.

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

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

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size , и давайте установим его для всех абзацев, допустим, в 18px.

Так же можно задать это свойство заголовку h1 , в том случае, если размер заголовка нужно ещё увеличить

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег и атрибут style

Тег вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size .

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-wieght , которое принимает следующие значения:

1. normal — нормальный;
2. bold — полужирный;
3. bolder — жирнее родителя;
4. lighter — тоньше родителя;
5. от 100 до 900 — цифровое значение, не обладает кроссбраузерностью;

Курсив задаётся свойством font-style , принимающим значение – italic .

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

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

Для изменения расстояния между символами применяется свойство css letter-spacing

Для изменения расстояния между словами применяется свойство word-spacing

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

Дополнительные шрифты

А теперь, как и было обещано, познакомимся, и научимся пользоваться сервисом Google Fonts

Представляю скриншот Главной страницы сервиса в Chrome, с русским интерфейсом.

Правда интерфейсы популярных сервисов постоянно обновляются, но только в сторону улучшения и упрощения.

Сервис Google Fonts

Немного поясню, что и куда. В левой колонке (Filters) можно выбрать из коллекции шрифты определённой толщины наклона и ширины букв, затем в «Сценарист» (Script) выбрать язык.

Кнопка «Показать все стили» (Styles), откроет различные доступные варианты у каждого шрифта.

Потом, прокручивая коллекцию, выбираем нужный шрифт, и нажимаем «Добавить в коллекцию» (Add to Collection), после чего, в самом низу, во вкладке «Коллекция» (Collection), в скобках появиться запись «1 шрифт» (1 font family).

Откроем её, щёлкнув по треугольнику, чтоб убедиться в точности выбора, и если всё нормально, щёлкаем «Использование» (Use), которая переводит на вторую страницу.

Тут уже настройки именно выбранного нами шрифта.

1. Выберите стили которые Вы хотите (Choose the styles you want).

2. Выберите набор символов который Вы хотите (Choose the character sets you want).Выбираем «Кириллица» (Cyrillic)

Дальше, в пунктах 3 и 4 дан код шрифта, который нужно вставить в код страницы сайта.

Посмотрим, как это делается. Код пункта 3 вставляется в тег , а код пункта 4 — в селектор блока, для которого этот шрифт задаётся.

Ещё один очень интересный прибамбас находиться в пункте 3 справа, и называется он «See an example» (смотрите пример), так и называется.

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

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

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

Добавляются они очень просто. В код представленный в пункте 3, добавляется пара слов, и все, эффект установлен.


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

Всё шрифт,как говориться, внедрён. Можно посмотреть, как он отображается. Хотя особо переживать по этому поводу не стоит.

Сервис выложит шрифт на сайт именно в том виде, и с тем эффектом, который Вы выбрали. На всех компьютерах, которые откроют Вашу страницу.

И на времени загрузки страницы, это практически не отразится.

А теперь посмотрим, как внедряется шрифт из библиотеки Google Fonts, на сайт управляющийся CMS WordPress.

Сделать это можно прямо из панели управления (одно из неоспоримых достоинств этой CMS).

Заходим в Панель управления > Внешний вид > Редактор, и находим в php-файлах темы, файл с тегом head .

В теме TwentyTen — это файл header.php . В коде этого файла, после тега обычно расположен блок с подключающими тегами

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

Обновляем файл — шрифт внедрён, и в дальнейшем на Ваше усмотрение.

Если Вы хотите, чтобы все определённые заголовки Вашего сайта, отображались данным шрифтом, то нужно в файле style.css , в том же редакторе, найти селектор заголовков, допустим h1<> , и вставить в него название и семейство шрифта (пункт 4).

Если Вы захотите выделить данным шрифтом часть текста, или какое либо слово в статье, то этот текст или слово нужно заключить в следующий код:

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

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

fontstorage.com — Большая библиотека шрифтов на многих языках.

www.xfont.ru — Самая большая библиотека русскоязычных шрифтов.

Подробнее, как поменять шрифты в шаблоне WordPress TwentyTen, можно посмотреть в статье Редактируем тему оформления

Желаю творческих успехов.

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

Петя всего-навсего сказал «Привет!», а Люся мысленно сыграла свадьбу и родила троих детей.

Использование шрифтов

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

Основные группы шрифтов

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

Serif (с засечками)

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

Илон Маск рекомендует:  Что такое код mb_decode_numericentity

Slab serif (прямоугольные засечки)

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

Script (пропись)

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

Blackletter (готический шрифт)

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

Sans serif (без засечек)

Буквы не будут иметь засечек. Они довольно схожи со шрифтами, которые имеют засечки и будут замечательно смотреться в тексте любого интернет ресурса или в заголовках. Обычно их применяют на компьютере, потому как читать их намного удобней, когда шрифт имеет мелкие размеры. Эти шрифты могут помочь сделать ваш проект более простым, а его дизайн — более минималистичным. На сегодняшний день San serif — это самый популярный шрифт, который дизайнеры используют для текста статей, размещаемых на своих веб-сайтах.

Handwriting (рукописный шрифт)

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

Decorative (декоративный)

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

Подборка и совмещение шрифтов

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

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

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

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

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

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

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

Рассмотрим несколько принципов совмещения шрифтов, которые позволят добиться красивого оформления текста.

Сайт должен быть читабельным

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

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

Не используете большое количество разных шрифтов

Создавая дизайн проекта, старайтесь не использовать большое количество шрифтов. Оптимальным количеством для использования будет три шрифта. Этому есть несколько причин:

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

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

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

Не используйте неподходящие сочетания

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

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

Примеры объединения шрифтов

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

Заголовки:
Sentinel (serif slab)

Параграфы:
Gotham Narrow (sans-serif)

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

Заголовки и параграфы:
Freight Text Pro (serif)

Остальное:
Freight Sans Pro (san-serif)

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

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

Заголовки:
PMN Caecilia (slab serif).

Параграфы:
Gill Sans (sans-serif)

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


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

Заголовки и параграфы:
Skolar (serif)

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

10 лет работаем с лидерами рынков и молодыми амбициозными компаниями

— Реализуем любой сервис с нетипичным функционалом;

— Переезды на Битрикс, интеграции со всем на свете;

— Налаженная система менеджмента: четкое соблюдение дедлайнов и ТЗ

WebFonts.pro — здесь собраны лучшие шрифты

Рады приветствовать вас на нашем скромном сайте, где мы собрали лучшие шрифты для вас. Сотни русскоязычных (кириллических) и латинских шрифтов рассортированы в удобные категории для вас. Мы постарались удобно отобразить каждое начертания шрифта, максимально удобно и информативно реализовать процесс скачивания и установки шрифта на сайт. Если вам не нужен весь шрифт целиком, вы всегда можете отдельно скачать и установить именно то начертание, которое вам нужно. Если вы новичок, у нас есть для вас подробная инструкция по установке шрифта в любую операционную систему или Photoshop.

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

Не смогли найти нужный шрифт — предложите его нам, мы обязательно его добавим!

Спасибо, мы добавим этот шрифт как можно быстрее!
Предложить еще один шрифт?

Произошла неведомая ошибка. попробуйте позже, или воспользойтесь формой обратной связи!

Много новых шрифтов для вашего сайта!

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

Несколько наших рекомендаций по применению шрифтов на вашем сайте:

  • Старайтесь не использовать более трех разных шрифтов на сайте, так как большое количество разных шрифтов может негативно повлиять на восприятие вашего сайта.
  • Уделите внимание улучшению читаемости и восприятию всех текстов. Цвет фона сайта и цвет шрифта должны контрастировать, текст должен легко читаться, но не «резать глаз». Особенно это касается случаев, когда у вас в качестве фона используется изображение.
  • Используйте один и тот же шрифт для заголовка и для текста на одной странице.
  • Если вы не уверены, какой шрифт лучше всего подойдет вашему сайту, то лучше отдать предпочтение классическим шрифтам: Arial, Helvetica, Times New Roman / Times, Courier New / Courier, Verdana, Georgia, Comic Sans MS, Trebuchet MS, Arial Black и др.
  • Не надо стараться заполнить пустое пространство только потому, что оно пустое.
  • Не бойтесь экспериментировать со шрифтами, пробуйте задавать разные размеры. Выделяйте важную информацию жирным или курсивом.
  • Старайтесь, что графика и шрифты на сайте дополняли друг друга и все смотрелось гармонично.

Мы будем рады вашим отзывам и пожеланиям по улучшению возможностей выбора и применения шрифтов на вашем сайте.

15 сайтов, где можно скачать шрифты бесплатно и легально

Большие и красивые коллекции, в которых легко найти то, что нужно.

1. Google Fonts

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

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

2. FontSpace

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

На странице шрифта написано, как его можно использовать: только в личных или ещё и в коммерческих целях.

3. 1001 Free Fonts

Несмотря на название, в этой коллекции порядка 10 000 шрифтов. Их можно сортировать по стилю, названию и новизне.

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

4. Font Squirrel

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

Фильтрация в Font Squirrel очень удобна. Можно сортировать шрифты по стилю, языкам, популярности и новизне.

Кроме того, Font Squirrel предоставляет пару удобных и полезных инструментов: Webfont Generator для создания собственных веб-шрифтов и Font Identifier, который может распознавать шрифты на загруженных вами картинках и находить идентичные в библиотеке Font Squirrel.

5. FontStruct

FontStruct — это удобный онлайн-инструмент для создания шрифтов в формате TrueType. Для этого имеется визуальный редактор, в котором несложно разобраться.

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

Илон Маск рекомендует:  Что такое код com_isenum

Большинство представленных здесь шрифтов весьма экстраваганты.

6. DaFont

Ещё одна популярная коллекция из 3 500 бесплатных шрифтов. Большинство из них рассчитаны только на личное использование.

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

7. Urban Fonts

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

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

Система сортировки на Urban Fonts довольно гибкая и удобная.

8. Abstract Fonts

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

Единственный минус — найти во всём этом многообразии шрифты с кириллическими буквами не так-то просто. А всё потому, что здесь отсутствует фильтрация по языкам.

9. Fontspring

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

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

10. Behance

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

Беглый поиск по Behance по запросу free font приносит много крутых авторских шрифтов. Большинство из них можно скачать бесплатно.

11. Acid Fonts

Подборка из 7 500 шрифтов с необычными начертаниями. Как и следует из названия сайта, выглядят они кислотно.

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

12. Font Freak

На этом сайте размещено около 9 000 бесплатных и свыше 125 000 платных шрифтов от 400 дизайнеров. За 9 долларов можно скачать архив с 5 000 шрифтов.

Правда, интерфейс, конечно, пришёл из прошлого.

13. Creative Market

Площадка, где продают шрифты, векторную графику и прочие штуковины для дизайнеров. Шрифты здесь очень качественные — ещё бы, ведь они недешёвые.

Но каждую неделю Creative Market предлагает загрузить часть товаров бесплатно. И среди них один шрифт.

14. Fontasy

Здесь собрано больше 1 000 бесплатных шрифтов. Правда, кириллических среди них маловато.

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

15. The League of Moveable Type

Небольшая, но красивая коллекция шрифтов, размещённая на GitHub. Все шрифты можно использовать как в личных, так и в коммерческих целях.

25 Gorgeous Web Safe Fonts для вашего сайта

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


Вот в чем дело, у вас может быть отличный шаблон WordPress или выложить впечатляющие изображения на своем сайте ОДНАКО, если вы используете непривлекательный базовый шрифт (или хуже Comic Sans!), Тогда у вас все равно останется сайт, который выглядит и чувствует себя непрофессиональный.

Кроме того, вам не хватает изобилия великолепной веб-типографии, доступной в Интернете.

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

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

Что такое безопасный веб-шрифт?

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

Почему важны веб-безопасные шрифты?

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

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

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

В других целях, чтобы избежать этого, веб-дизайнеры использовали Основные шрифты для Интернета что Microsoft выпустила в 1996 в качестве стандарта для большинства веб-сайтов. Эти шрифты в конечном итоге стали «веб-безопасными шрифтами», потому что независимо от компьютера шрифты будут безопасно отображаться на вашем веб-сайте.

Должен ли я использовать веб-безопасные шрифты для моего сайта?

Короткий ответ: Абсолютно.

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

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

Как добавить эти веб-безопасные шрифты?

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

Если вы все еще не уверены, просто выполните следующие несколько простых шагов:

  1. Загрузите файл header.php
  2. Скопируйте источник шрифта / стандартный код
  3. Вставьте код в верхней части файла заголовка.
  4. Загрузите свой стиль.css, поместите код шрифта, чтобы изменить текст шрифта по вашему выбору.

К концу этого вы должны иметь таблицу стилей, которая выглядит так:

Образование | 5 сайтов с бесплатными шрифтами для вашего проекта

Алек­сандр Цыган­ков

Всего материалов: 221

5 сайтов с бесплатными шрифтами для вашего проекта

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

Сервис Google Font — красивые шрифты для вашего сайта

Используя сервис Google Font, вы получите доступ к различным красивым шрифтам. Как скачать и установить данную программу — речь пойдет в данной статье. Если вы хотите избежать стандартов и попробовать что-то действительно оригинальное, то данная программа — именно то, что вам нужно.

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

Изменить шрифты в браузере вы можете следующим образом — зайдите в панель управления с помощью кнопки «Пуск«, найдите папку «Windows«.

Далее найдите папку «Fonts«, где вы сможете изменить шрифт, при необходимости, скачав его предварительно из интернета, использовав специальный сайт Xfont.ru. Скачав и выбрав нужный файл, в меню нажмите «установить«. Для обновления вашего списка шрифтов, нажмите клавишу F5. Как вы видите, данный способ достаточно простой.

Программа Google Font вам будет необходима в том случае, если вы захотите использовать новый красивый текст для вашего вебсайта. Для того, чтобы и другие пользователи смогли видеть шрифты, установленные вами для сайта, необходимо поработать со стилями CSS. Для этого просто в файл добавьте необходимые варианты шрифтов. Укажите в font-family все типы шрифтов, которые могут быть использованы в данном случае.

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

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

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

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

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

  • с помощью гиперссылки (мета тега Link), которую можно указать между тегами;
  • благодаря директиве @import, которую необходимо будет дописать в так называемый стилевой файл;
  • с помощью введения кода ДжаваСкрипт, который можно прописывать между тегами или использовать в качестве отдельного файла скриптов .js;
  • последний вариант — это написание определенного элемента на сайте заданным шрифтом, с помощью font-family.

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

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

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

Для размещения оригинальных шрифтов на собственный вебсайт, необходимо изначально подключиться к специальному ресурсу FTP. Затем найдите в файлах вашего сайта теги Head. Далее необходимо найти начальный html тег и в любом месте до последнего тега вставьте ссылку (Link), полученную в программе.

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

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

Здравствуйте, уважаемые читатели!

В предыдущей статье «Применение стилей CSS в редакторе WordPress» я писал о том, как нестандартным образом, используя строчные CSS-стили, оформить контент на сайте под управлением WordPress. Используя стили можно, в том числе, изменять и шрифт, применяемый в тексте.

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

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

Можно, но есть определенные условия.

Стандартные и нестандартные шрифты

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

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

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

Как же решить эту проблему?

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

Как подключить шрифты для сайта

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

В этой статье мы рассмотрим подробнее первый способ.

Работа с сервисом Google Fonts

Начнем с сервиса Google Fonts , как самого известного и надежного.

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

На сайте Google Fonts, как видно из скриншота, на данный момент в коллекции содержится 708 шрифтов, но не все они нам подходят. Для русскоязычных сайтов нужны шрифты, поддерживающие кириллицу. Слева располагаются фильтры для выбора, где в выпадающем списке Script выбираем Cyrillic, после чего остается уже 61 вариант. Из них мы и выбираем. Понравившиеся шрифты добавляем в коллекцию, нажимая на кнопку Add collection.

После выбора переходим к следующему пункту – кнопка Review. На открывшейся странице можно посмотреть, как будет выглядеть текст, попробовать изменить его параметры.

Илон Маск рекомендует:  Что такое код intersectrect

Далее переходим к последнему пункту – кнопка Use. Здесь можно скопировать код для подключения шрифта к сайту.

Этот код следует вставить на HTML-страницу вашего сайта между тэгами и . Для сайтов на WordPress эти тэги находятся в файле заголовка header.php. В пункте 4 копируется код для описания стиля CSS.

Как видите, я выбрал три варианта, и если теперь в HTML-редакторе WordPress набрать такой код:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.


то на странице это будет выглядеть так:

Этот текст оформлен нестандартно. Poiret One.

Сделать это можно двумя основными способами. Russo One.

Рассмотрим подробнее первый способ. Marck Script.

Работа с сервисом AllFont.ru

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

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

После этого можно скопировать коды для вставки на сайт. Все делается аналогично тому, как делали на сайте Google Fonts. Я для примера выбрал шрифт AGZeppelin-Roman, посмотрите, как он выглядит.

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Добро пожаловать в крупнейшую библиотеку AllFont.ru

Надеюсь, что статья оказалась для вас полезной. Если так, подписывайтесь на обновления блога, так как готовятся новые полезные статьи.

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

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

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

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

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

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

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

Из каких критериев состоит выбор шрифта для сайта?

1. Выбор семейства шрифта

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

  • Arial
  • Verdana
  • Times New Roman
  • Georgia
  • Trebuchet MS

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

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

Во-первых, появляется зависимость от других сайтов (в данном случае от Google). Например, Google по каким-то причинам может медленно работать, то в этом случае Ваш сайт также затормозится. За примерами далеко ходить не надо. Я лично подгружал скрипт для работы AJAX (jquery) с сайта Google, но периодически он вообще не грузился и это приводило к некорректной работе всего сайта. Решение проблемы было простым: просто скопировал весь .js файл к себе на хостинг и подгружать его с моего хостинга. Поэтому лучше всего, когда весь сайт грузится с Вашего же хостинга. Однако перенести шрифты к себе на сайт не получится, придется всегда грузить их с сайта Google.

Во-вторых, в таких браузерах, как Opera в глазах пользователя все будет выглядеть следующим образом: он заходит к Вам на сайт, контент уже появился и примерно через полсекунды — хоп и шрифт поменялся. Это произойдет, как только браузер подгрузит его с Google и обработает. На мой взгляд, что для серьезных ресурсов это «мерцание» стилей у текста неуместно. Конечно, такая ситуация не на всех браузерах, но лично мне и одной оперы хватает, чтобы отказаться от идеи использования малопопулярных шрифтов.

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

2. Выбор размера шрифта

Выбор размера шрифта является сложной задачей, поскольку некоторым нравится более мелкий шрифт, а кому более крупный. Лично я для себя сделал предпочтение размеру 12-14 пикселей. Этот размер является стандартом во многих областях.

3. Выбор цвета шрифта и фона под него

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

Список сочетаний цвета шрифта и фона (в порядке убывания читаемости):

  • Черный на белом;
  • Черный на желтом;
  • Зеленый на белом;
  • Синий на белом;
  • Зеленый на красном;
  • Красных на желтом;
  • Красный на белом;
  • Оранжевый на черном;
  • Черный на пурпурном;
  • Оранжевый на белом;
  • Красный на зеленом;

Чем выше в списке сочетание цвет/фон, тем лучше его читаемость.

4. Другие мелочи

К этим мелочам я бы хотел отнести следующее:

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

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

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

Arial

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

Tahoma

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

Verdana

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

Trebuchet MS

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

Times New Roman

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

MS Sans Serif

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

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

Так какой все таки шрифт считается самым оптимальным?

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

Американские специалисты отмечают: шрифт Verdana 10-13 кегля наиболее комфортен для восприятия с экрана. Преимущества шрифта — отсутствие засечек, увеличенный межстрочный интервал, большая высота строчных букв без выносных элементов и четкие различия между знаками схожего начертания (такими как i/I/L/l/1).

Создатель шрифта Verdana — художник Мэттью Картер (Matthew Carter). Он разработал данный шрифт для компании Microsoft в 1996 году. Целью было создание шрифта, который легко читается с экрана даже при малом размере букв. Сегодня Verdana входит во все версии Windows, Office и Internet Explorer для операционных систем Windows и Macintosh. Плюс все перечисленные выше шрифты.

В настоящее время все больше используются подгружаемые Google fonts шрифты: https://fonts.google.com/

Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию.

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

ТОП-10 кириллических шрифтов Google fonts

1. Open Sans — безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.

2. Roboto — этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica. Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.

3. PT Sans — содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля.

4. Ubuntu — этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.

5. Arimo — данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.

6. Noto Sans

7. Play

8. Cuprum — универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL