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

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

Прежде чем рабо­тать над слай­дами, важно подо­брать шрифт, кото­рый будет соот­вет­ство­вать теме пре­зен­та­ции. Что же делать, если вас заму­чили стан­дарт­ные шрифты? Где найти отлич­ные от Calibri и Times New Roman совре­мен­ные шрифты? Мы под­го­то­вили пре­зен­та­цию с 11 сер­ви­сами, кото­рые помо­гут вам решить вопросы под­бора шриф­тов раз и навсе­гда.

Font Squirrel

FontSquirrel — луч­ший источ­ник высо­ко­ка­че­ствен­ных латин­ских шриф­тов для ком­мер­че­ского исполь­зо­ва­ния. На сайте пред­ло­жена отлич­ная система филь­тров, чтобы вы тра­тили меньше вре­мени на поиск. Такие раз­делы, как «Недавно добав­лен­ные» и «Самые попу­ляр­ные» поз­во­лят вам озна­ко­миться с новин­ками, а также про­сто наи­бо­лее попу­ляр­ными образ­цами.

 

 

DaFont

Удобный ресурс, кото­рый содер­жит более 8000 латин­ских шриф­тов! Все они раз­биты по кате­го­риям, поэтому для поиска необ­хо­ди­мого шрифта вам потре­бу­ется мини­мум вре­мени. Кроме того, на сайте есть раз­делы «Новые шрифты» и «top 100», где собраны самые луч­шие образцы. Для поиска есть спе­ци­аль­ная форма + алфа­вит­ный руб­ри­ка­тор. В раз­деле «Помощь» вы смо­жете найти ответы на часто зада­ва­е­мые вопросы, напри­мер, о том, как уста­но­вить шрифты на раз­ные опе­ра­ци­он­ные системы. Есть воз­мож­но­сть добав­лять свои файлы, тем самым попол­няя кол­лек­цию.

 

 

UrbanFonts

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

 

WordMark

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

 

WhatTheFont

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

 

Fount

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

 

WhatFont

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

 

Identifont

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

 

Fontface Ninja

Fontface Ninja — это про­стой и удоб­ный в исполь­зо­ва­нии ресурс, с при­ят­ным дизай­ном и кру­тыми функ­ци­ями. Этот сер­вис поз­во­ляет опре­де­лить, что за шрифты исполь­зу­ются на любых выбран­ных вами сай­тах. Изучайте шрифты в пре­де­лах сайта, про­буйте их для сво­его текста, загру­жайте к себе. Доступен абсо­лютно бес­платно для Google Chrome и Safari.     

esprezo.ru

10 простых в использовании онлайн сервисов для работы со шрифтами | DesigNonstop

10 простых в использовании онлайн сервисов для работы со шрифтами

5

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

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

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

3. typenav.fontshop.com — сервис не работает
С помощью этого сервиса можно задавать необходимые характеристики для шрифта с помощью интуитивно понятной онлайн формы (желтый блок) и находить подходящие по начертанию шрифты.

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

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

6. STC Font Browser
Сервис, аналогичный предыдущему, с той разницей, что набор демонстрируемых шрифтов гораздо больше и есть настройки предварительного просмотра.

7. PXtoEM
С помощью этого сервиса можно с легкостью переводить одни единицы измерения шрифтов в другие и получить css код.

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

9. Identifont
Сервис помогает искать шрифт по определенным параметрам. Для этого нужно ответить на базовые вопросы о шрифте.

10. CSS Type Set
Этот сервис помогает создавать стиль CSS в режиме онлайн. Надо ввести текст, выбрать стиль шрифта, согласно настройкам, и можно получать готовый код.

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)

www.designonstop.com

Выбираем шрифт для сайта — Online сервисы

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

Подборка online ресурсов по работе со шрифтами


Подбор шрифтов:
— http://www.typetester.org/ — Тестирования и подбора шрифтов, вывод его в CSS.
— http://csstypeset.com/ — Работа с разными стилями и атрибутами текста и вывод в CSS.
— http://www.designerplaything.co.uk/designer-plaything.html — Подбор шрифта и цвета.
— http://www.texster.ru/ — Помошник в выборе шрифта.
— http://flippingtypical.com/ — Просмотр вашего текста в разном стиле.
— http://www.stcassociates.com/lab/fontbrowser.html — Аналогичен предыдущему (более расширен).
— http://www.blindtextgenerator.com/ru — Русский онлайн Lorem Ipsum генератор.

Распознавание шрифтов:
— http://www.myfonts.com/WhatTheFont/ — Определение шрифта по образцу.
— http://www.identifont.com/identify.html — Выявляет шрифт через ряд вопросов о нем.
— http://www.typophile.com/ — Крупнейшее сообщество на тему шрифтов.
— http://www.bowfinprintworks.com/ — поиск шрифтов по образцам.
— http://www.fontshop.com/research/ — выясняет название по форме отдельных символов.
— http://www.flickr.com/groups/typeid/ — определяет названия шрифтов, используемых в различных изображениях.

— http://fount.artequalswork.com/ — бесплатный онлайн сервис для моментальной идентификации шрифта.

Скачать шрифты:
— http://www.xfont.ru/ — Крупнейший сервис по шрифтам.
— http://www.fontov.net/ — бесплатный русскоязычный сервис для поиска и подбора интересующегося Вас шрифта.
— http://ifont.ru/ — Большой русскоязычный сервис шрифтов.
— http://www.dafont.com/ — шрифты с предпросмотром вашего примера.
— http://www.fonts-online.ru/ — База шрифтов с просмотром Online

Прочее:
— http://fontstruct.com/ — создание собственных шрифтов Online
— http://www.fontsquirrel.com/fontface/generator — загрузка и доробатка ваших шрифтов.

— http://pxtoem.com/ — С помощью этого сервиса можно с легкостью переводить одни единицы измерения шрифтов в другие и получить css код.
— http://csswarp.eleqtriq.com/ — Онлайн сервис для подготовки эффектного текста.
— http://www.bestwebfonts.com/ — Удобный сервис для просмотра веб-шрифтов, в том числе с применением различных эффектов.

«Безопасные» шрифты (Шрифты поддерживающие кириллицу)

— Arial
— Arial Black
— Comic Sans MS
— Courier New
— Georgia
— Impact
— Times New Roman
— Trebuchet MS
— Verdana
​* в колонке напротив шрифта означает, что родных кириллических эквивалентов Windows шрифта у операционной системы не имеется. Но в то же время есть большая вероятность, что в операционной системе установлен непосредственно сам этот шрифт.

Выбор шрифта:


Бонус:
Статистика по установленным у пользователей шрифтам
Список шрифтов, установленных в разных версиях Windows
Расширение для гугл хрома: Font Editor — Просмотр шрифтов на сайте без установки.

P.S: Yannick Mathey создает программу генератор шрифтов — Prototyp-0 (Жду с нетерпением). Демонстрация работы программы:

 

www.nulled.cc

Советы веб дизайнерам по работе со шрифтами

Добрый вечер, читатели блога Webvim.ru. Сегодня написал заметку-рекомендацию веб-дизайнерам. Если кратко — не лепите первый понравившийся шрифт при создании дизайн-макета. Особенно это касается случаев, когда сайт уже есть и нужно отрисовать новую страницу. Кому интересны подробности — читаем далее.

Немного теории

Промотать сразу к советам

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

Сравнение шрифтов Times New Roman и Tahoma. Оба по 17px, но ширину занимают разную:

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

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

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

Теперь рассмотрим распространенные ситуации с которыми я сталкиваюсь.

Ситуация 1 — новый сайт

Дизайнер создает с нуля дизайн-макет сайта. Бывает что у фирмы-заказчика разработан фирменный стиль и есть собственный шрифт, который обязательно нужно использовать на сайте. Здесь вопросов нет: нужно — сделаем! Но так происходит крайне редко, 1 сайт из 10. В остальных случаях у дизайнера полная свобода действий. И тут он решает, что будет не плохо использовать нестандартный шрифт…

Первым делом ответьте на вопрос — зачем? В основном ответы такие: «красиво», «нестандартно», «индивидуально»… Тут я открою вам тайну: посетитель заходит на сайт не за «красиво», а за информацией, будь то товар, услуга или ответ на его вопрос. Чем быстрее он получит то, за чем пришел — тем лучше (иначе может уйти на сайт конкурента).

Вторым делом — задумайтесь, почему набор стандартных шрифтов переходит из версии в версию операционной системы? Ответ прост — эти шрифты обеспечивают наилучшее отображение текста, его легко читать. Например, шрифты Arial и Times New Roman — входят в список стандартных еще с Windows 95. Прошло 20 лет, а они до сих пор включены в последние версии Windows — говорит это о том, что лучших решений еще не нашли.

При выборе шрифта будьте готовы аргументировать свое решение. Если не можете — шрифт подобран неверно.

Ситуация 2 — старый сайт

Сайт уже есть: нарисован, сверстан, работает. Появляется новый раздел или элемент и нужно его нарисовать. 

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

Ваш шрифт будет выглядеть как-то так:

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

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

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

Прикрепляйте файлы шрифта к макету

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

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

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

Естественно, это касается только нестандартных шрифтов и тех, которых нет в Google Fonts.

Наличие кириллицы и латиницы

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

Убедитесь что шрифт поддерживает как латиницу, так и кириллицу.

То же касается цифр и специальных символов.

Используйте целые значения

Задавая размер шрифта используйте целые значения.

Не все браузеры правильно отображают дробные значения.

Итоги

Работа дизайнера — это работа в команде. Соблюдайте простые рекомендации и вас будут любить:

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

Надеюсь статья оказалась полезной. Дополнения и возражения готов выслушать в комментариях.

Экономьте время и нервы своих коллег. Удачи!

webvim.ru

Поиграйте со шрифтами | NetLore веб-дизайн, дизайнеры, заказчик и исполнитель, заказчики, клиенты, шрифты

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

(Залогиньтесь, чтобы почистить страницу.)

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

Аргумент разумный

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

Посмотрите на самые успешные сайты как в мировом, так и в русскоязычном интернете. Например: Гугл, Ютуб, Яндекс, Википедия, Фейсбук, ВКонтакте, Твиттер. Никто из них не «играет со шрифтами», все они используют стандартные системные шрифты вроде Ариала или Тахомы; причём чаще всего один единственный шрифт на весь сайт.

А теперь посмотрите на сайты, где таки «играли со шрифтами». (И показывал типичные поделки диких степных дизайнеров).

Примерно две трети собеседников после этого соглашались на Ариал, с остальными мы вежливо прощались.


Аргументы глумливые

Заказчик (бодро) из-за спины Первого дизайнера: Поиграйте, пожалуйста, шрифтами!
Первый дизайнер (громко, чтоб слышал Второй дизайнер): Ариал!
Второй дизайнер: Ага, мне на «Л»… э… Леттер готтик!
Первый дизайнер: Каслон! Тебе на «Н»!
Второй дизайнер: Нью баскервиль!
Первый дизайнер: Лазурский!
Второй дизайнер: Ижица!
Первый дизайнер: Стова на «А»… Академия!
Второй дизайнер: Янус!
Заказчик (тихо): Спасибо, спасибо! Оставим шрифт как есть….

xxx: Я придумал идеальную бизнес-модель!
xxx: На предложение клиента «Давайте поиграем со шрифтами/цветами/вон той загогулиной»
всегда нужно отвечать «Давайте поиграем с бюджетом проекта»


Флеш-игра по мотивам «пятнашек»

Игра от РА Ruport. Жмите «перемешать» и расположите названия шрифтов по алфавиту.


Web Design Randomizr

Автоматический «игрун» шрифтами: парсер, который собирает готовые стили и сортирует их по области применения.


Игры от студии Лебедева (идея)




 









Можно играть и так




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


Играть со шрифтами, между тем, можно красиво. 

Клиенты из ада

Шрифты и алфавиты

Если бы шрифты были котами

Заказчики и исполнители

www.netlore.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Авторское право © 2024 Es picture - Картинки
top