Архивы Шрифты — Уроки фотографии и веб дизайна
Шрифты
Скачать шрифт Gost (RUS/ENG)
Красивый шрифт с поддержкой русской и английской раскладки. Имеет один режим отображения Regular. Хорошо подойдет для оформления landing Page, особенно радует наличие кириллического отображения.
08.12.2014 в рубрике Шрифты.Скачать шрифт Antikvar (RUS/ENG)
Интереснейший шрифт, который поддерживает как русскую, так и английскую раскладку клавиатуры. Имеет один режим отображения Normal. Отлично подойдет для оформления титульных листов и заголовков.
28.02.2014 в рубрике Шрифты.Скачать шрифт Proun (RUS/ENG)
Декоративный шрифт с поддержкой русской раскладки клавиатуры. Имеет один режим отображения Normal. Отлично подойдет для украшения Hi-Tech графики.
23.02.2014 в рубрике Шрифты.Скачать шрифт Peignot Cyrillic (RUS/ENG)
Красивый шрифт, который поддерживает русскую и английскую раскладку клавиатуру.
Поддерживает один режим отображения Bold. Отлично подойдет для любых видов графических работ.
Скачать шрифт PlainScriptCTT (RUS/ENG)
Интересный шрифт с поддержкой русской раскладки клавиатуры. Имеет один режим отображения Normal. Отлично подойдет для украшения полиграфической продукции.
21.02.2014 в рубрике Шрифты.Скачать шрифт Rodeo (RUS/ENG)
Строгий шрифт, который поддерживает русский и английский язык. Имеет один режим отображения Regular. отлично подойдет для оформления Flat дизайна.
15.02.2014 в рубрике Шрифты.Скачать шрифт Taurus (RUS/ENG)
Интересный шрифт, поддерживающий русский и английский язык. Присутствует один режим отображения Normal. Хорошо подойдет для оформления креативной графики.
Скачать шрифт Respect Narrow (RUS/ENG)
Интересный декоративный шрифт, имеющий поддержку русского и английского языка.
Имеет один режим отображения Bold Italic. Отлично подойдет для оформления заголовков статей и другой печатной продукции.
Скачать шрифт Helvetica Neue Cyr (RUS/ENG)
Строгий шрифт Helvetica Neue Cyr с поддержкой русского и английского языка. Имеются все возможные режимы отображения от Ultra Light до Black. Этот шрифт использует компания Apple в своей запатентованной системе iOS7. Такой маркетинговый ход не мог не сказаться на популярности этого шрифта. Шрифт Гельветика можно скачать ниже, по ссылке. Скачать шрифт Helvetica Neue Cyr (RUS/ENG)
Скачать шрифт Chow Fun (ENG)
Интересный, декоративный шрифт без поддержки русской раскладки клавиатуры. Имеется один режим отображения — Normal. Отлично подойдет для декорации любых работ (только английский)
18.12.2013 в рубрике Шрифты.Скачать шрифт Cliffhanger (ENG)
Декоративный шрифт, выполненный в качестве мазков грубой кисти.
Скачать шрифт Desperado One (ENG)
Интересный шрифт, без поддержки русской раскладки клавиатуры. Имеет один режим отображения — Bold. Отлично подойдет для декоративного украшения графических работ любого вида (только английский)
18.12.2013 в рубрике Шрифты.Скачать шрифт Pepsi (ENG)
Интересный шрифт, который знаком всем по этикетке торгового знака «Pepsi». Присутствует один режим отображения — Bold. Может отлично использоваться в декоративных целях (только английский)
Скачать шрифт Odessa Script (ENG)
Декоративный, рукописный шрифт без поддержки русского языка. Имеется один режим отображения — Regular. Отлично подойдет для украшения различного рода графики, но я бы не рекомендовал использовать его в качестве основного шрифта (только английский)
16.
12.2013 в рубрике Шрифты.
Скачать шрифт Pokemon Solid (ENG)
Интересный шрифт без поддержки русского языка. Я думаю он всем нам знаком, так как в свое время использовался в популярном японском мультипликационном сериале «Покемоны». Один режим отображения — Normal (только английский)
-
Скачать шрифт Prospect (ENG)
Просмотров (61) | Дек 08, 2013 -
Скачать шрифт Helvetica Neue Cyr (RUS/ENG)
Просмотров (50) | Фев 15, 2014 -
Скачать шрифт BancoDi (RUS/ENG)
Просмотров (48) | Дек 09, 2013 -
Скачать шрифт Peignot Cyrillic (RUS/ENG)
Просмотров (40) | Фев 21, 2014 -
Скачать шрифт Pepsi (ENG)
Просмотров (32) | Дек 16, 2013
Как выбрать шрифт для дизайна Web-сайта :: Дмитрий Маслов
Как выбрать шрифт для дизайна Web-сайта :: Дмитрий МасловВведение
Будем считать, что художественный вкус дизайнера в рамках данной статьи не обсуждается.
Я — всего лишь программист, технарь, придаток машины, да что же я понимаю в Прекрасном? Разве могу я указывать дизайнеру как Творить? Конечно же нет.
Долгое время на веб-страницах в Интернете можно было использовать только ограниченное количество шрифтов, которые встроены в операционную систему, так называемые web-safe-шрифты. Но несколько лет назад появилась директива @font-face, позволяющая встроить в страницу любой шрифт. Конечно же, дизайнеры обрадовались этой новости. Ещё бы, ведь у них появилась дополнительная возможность приблизить вид веб-страницы к её идеалу!
Но мечты о Прекрасном могут разбиться об стену Реализации, если не задумываться о ней заранее. В результате то, что видит пользователь в своём браузере может значительно отличаться (как правило, в худшую сторону) от того, что дизайнер видит у себя в Фотошопе. Чтобы так не случалось, на основе своего богатого профессионального опыта приведу несколько житейских советов. В этой статье — относительно выбора шрифтов.
Для начала, если вы вдруг не осведомлены, рекомендую прочитать статью о хинтинге — то есть о том, как шрифты отображаются на экране компьютера, и каковы различия в отображении в разных браузерах и операционных системах.
Итак, что же должен знать и делать дизайнер при выборе шрифта для дизайна сайта, чтобы конечный результат не пёрнул в лужу?
Набор символов
Думаю, это очевидно, но для порядку всё же напомню: далеко не во всех шрифтах есть кириллица (“русские буквы”). Поэтому при выборе шрифта стоит поинтересоваться, есть ли в нём кириллические символы. И в Фотошопе набирать рыбу не Lorem Ipsum, а какой-то русский текст, потому что даже если кириллица в шрифте и есть, её качество может быть ниже, чем латиницы. Набрав в качестве рыбы русский текст, вы дополнительно это проконтролируете. Если только, конечно, вы не делаете дизайн для англоязычного ресурса, где русские буквы не могут встретиться в принципе. Но эта статья о реалиях нашей страны, поэтому я рассматриваю наличие кириллицы обязательным.
Кроме того создатели шрифта могут “схалтурить” на символах, не являющихся буквами. Например, могут отсутствовать (или отвратительно выглядеть) знаки копирайта, торговой марки, знаки валют и т.д.. Особенно это относится к декоративным шрифтам, которые вполне могут содержать только буквы с цифрами и всё. Также бывают шрифты, содержащие в себе только прописные буквы и не имеющие строчных. Если вам в заголовках нужны какие-то знаки помимо букв — убедитесь, чтобы они были. Для абзацев наличие прописных и строчных букв, цифр, знаков препинания и т.д. — обязательно. Лучше использовать рыбу, содержащую все интересующие вас знаки.
Количество шрифтов на сайте и их параметров на странице
Чтобы вставить шрифт на страницу, его сперва надо сконвертировать в понятный для браузеров формат. Потом css для него правильно написать. Хорошо если шрифт взят из Гугл Фонтс, он сразу даёт готовое к применению. А если шрифт не оттуда, то делать это будет верстальщик.
Если вы в своём дизайне использовали десять разных нестандартных шрифтов без веской на то причины, верстальщик вам спасибо не скажет. Во-первых, всё это добро ему предстоит встраивать, во-вторых, при вёрстке каждого элемента, помимо всего прочего, ему придётся сверяться с фотошопом, чтобы узнать, какой именно там шрифт.
Другое дело, когда шрифтов в дизайне мало и в их использовании есть логика. Например, для заголовков — такой шрифт, для всего остального — сякой. Для каких-то особо исключительных случаев (например, какая-то супер крутая кнопка на сайте или надпись на логотипе) — третий. Тогда верстальщик в качестве основного устанавливает шрифт “для всего остального” и меняет его в “торжественных случаях”. Так как это логично, каждый раз альт-табаться в Фотошоп ему не надо, и вёрстка идёт гораздо быстрее.
То же можно сказать о размере, цвете и межстрочном расстоянии. Примите за правило, что, например, в блоках с основным текстом цвет — тёмно-серый, размер 16, межстрочное 22.
В заголовках размер 36, цвет чёрный. Будет просто прекрасно, если вы, помимо PSD-файлов, на словах передадите это верстальщику. Тогда будет можно один раз и для всех страниц записать правила для такого типа элементов.
Это не говоря о том, что дизайн, где вроде бы одинаковые элементы выглядят в разных местах чуть по-разному, выглядит сам по себе неряшливо. И вместо того, чтобы сделать единый набор правил css для всех однотипных элементов, верстальщик вынужден сверять параметры и писать правила для каждого блока, что также увеличит количество матюков в ваш адрес, потому что это увеличивает его работу в разы. В худшем случае при вёрстке дизайн придётся упрощать для экономии времени. В итоге пользователь у себя на экране увидит совсем не то, что приготовил для него дизайнер.
Нет, ну конечно, если вы считаете, что на одной странице нужно делать текст цвета #222, на второй в таком же блоке #333, а на третьей снова #222, но разрядка не 22, а 23, потому что такова ваша гениальная дизайнерская задумка, и вы настаиваете, чтобы это было именно так, а верстальщик просто не хочет работать, то так тому и быть!
Но усложнение вёрстки приводит к увеличению времени, которое верстальщик затратит на работу, иногда в разы, если дизайн сделан очень безалаберно.
А рабочее время верстальщика тоже стоит денег. Расскажите лично заказчику о своей гениальной дизайнерской мысли и о том, сколько дополнительно он за это заплатит. Думаю, он не очень обрадуется. Экономьте время своих коллег и бюджет проекта, когда есть такая возможность. Это прямая обязанность дизайнера, помните об этом.
Отображение
Абзац
Начнём с того, что надо с особой тщательностью относиться к выбору шрифтов для абзацев. Под “шрифтом для абзацев” я понимаю шрифт, которым будут отображаться все мелкие надписи (текст в абзацах, циферки в счётчиках, копирайт в футере и всё остальное, что мелко). Здесь обязательно нужен шрифт с хинтингом, иначе получим запредельный нечитаемый трындец.
Чем мельче надпись, тем выше шанс охренеть от результата.
К сожалению, выбор-то тут весьма невелик. Качественных шрифтов с хинтингом в принципе мало (потому что делать их сложно, дорого и не окупается), а кириллические среди них — вообще вид из Красной Книги.
Так что придётся вам, дизайнеры, в данном случае обуздать свою шрифтовую фантазию, и выбирать из крайне ограниченного списка, тут ничего не поделаешь.
Какие это шрифты? Ну, во-первых так называемые “безопасные” или web-safe шрифты. Те самые, которые уже “встроены”, т.е. “стандартные”:
Как сообщает w3schools, “безопасных шрифтов” всего 13 штук:
Georgia
Palatino Linotype
Times New Roman
Arial, Arial Black
Comic Sans MS
Impact
Lucida Sans Unicode
Tahoma
Trebuchet MS
Verdana
Courier New
Lucida Console
Почему-то среди дизайнеров бытует мнение, что использовать их “западло”, что они уже “намозолили глаза”, но есть много примеров как хороших дизайнов со стандартными шрифтами на абзацах так и дерьмовых дизайнов со вставленными (и они становятся ещё дерьмовей из-за того, что, конечно же, шрифты эти без хинтинга рендерятся криво).
Тут, скорее, плохому танцору яйца мешают.
Но не стандартными шрифтами едиными! Имеются и другие шрифты с поддержкой кириллицы и с корректным хинтингом. Их мало, но они есть. Среди всех прочих особое внимание хочу обратить на PT Sans.
Шрифты гарнитуры «PT Sans»
Технически он выверен даже лучше встроенных в Windows. К тому же он бесплатен для использования на Web. В отличие от Myriad Pro, качество отображения которого в низком разрешении тоже высоко, но за его использование на сайте надо, мало кто знает, платить! Фактически этого никто, конечно не делает, но я бы всё равно не рекомендовал без лицензии встраивать его на страницы. Сегодня за это не ловят, а завтра начнут. Вы ж знаете, в какое время и в какой стране живём.
Кроме того, мне нравится, как технически выполнены шрифты гарнитуры Ubuntu. (Ubuntu — это не только семейство операционных систем, но также и семейство шрифтов!) Даже на маленьком кегле они сохраняют чрезвычайную чёткость.
И к тому же использование их совершенно бесплатно. Однако сам шрифт весьма “шутливый”, что ли, поэтому он будет “в тему” далеко не во всяком дизайне. Однако уже как раз это оставим на выбор дизайнера в соответствии с его вкусами.
Пример надписи шрифтом из гарнитуры «Ubuntu»
Наверное, практически все бесплатные кириллические шрифты с толковым хинтингом собраны в библиотеке “Гугл Фонтс”. Их мало, вот они и держатся вместе. Если слева выбрать в меню Script пункт Cyrillic, то мы увидим всего-навсего 55 шрифтов. Но даже из них не все имеют хороший хинтинг, в частности, декоративные, не рассчитанные на отображение в маленьком размере. Поэтому не поленитесь переключиться на вкладку Paragraph, выбрать там размер шрифта, который предполагается использовать в дизайне, посмотреть на результат и решить, насколько он вас удовлетворяет. Если вы используете Mac, то не поленитесь проделать это под Windows, чтобы увидеть, как это будет отображаться именно на Винде.
Если же вы выбрали какой-то другой шрифт для абзацев, не из библиотеки Гугла, то тем более обязательно проверьте, как он будет отображаться на веб-странице, а также все ли знаки имеются в шрифте, есть ли там кириллица, какие-то другие символы, если таковые нужны. Сделайте тестовую страницу с этим шрифтом и посмотрите, как она выглядит в разных ОС (в Windows надо проверить обязательно) и разных браузерах (хотя бы в самых популярных — Chrome, Firefox, IE).
Заголовки
Для заголовков выбор шрифта не такой строгий. Так как размер шрифта в заголовке обыкновенно бывает бОльших размеров, чем в абзаце, у растеризатора куда больше пространства, чтобы отобразить символ корректно. Поэтому здесь допустимо использовать и шрифты, не имеющие хинтинга. Специалисты-шрифтовики утверждают, что хинтинг для символов не нужен при размере 60 и более пунктов. Я же не столь категоричен и считаю, что обычно шрифт без хинтинга уже примерно при 24 пикселях в высоту выглядит сносно, после 36 разницу найдут только эстеты с лупой.
Тем не менее бывают случаи, когда даже в довольно большом размере шрифт выглядит парашно, особенно если в его символах много тонких штрихов.
Поэтому не поленитесь и шрифт для заголовка проверить тоже на корректность отображения.
Примеры
Помните, что основная задача букв — быть прочитанными. Если текст набран распрекрасным раскрасивейшим шрифтом, но его не прочитать, то ваши старания пропали даром. Вот вам примеры.
Шрифт UniSansThinCAPS в размере 18 пикселей в Фотошопе. Ну, вроде, неплохо.
Он же, но на веб-странице в Google Chrome под Windows 8.1. Жутковато.
Он же в Firefox. Уже не так плохо, хотя и хуже, чем в Фотошопе.
Он же в размере 11 пикселей в Фотошопе. Так себе, если честно.
Он же, в Хроме. Страшненько, но хотя бы читаемо.
Он же в Firefox.
Провал! Читать невозможно.
А вот фрагмент дизайна другого сайта. Здесь использованы шрифты Cuprum (48 пикселей) для заголовка и PT Sans (16 пикселей) для абзаца.
Фрагмент дизайна в Фотошопе
Результат в Хроме
Оно же в Firefox
Хоть и есть незначительные различия в отображении, во всех случаях текст чёткий, хорошо читается. В целом страницы выглядят идентично, если только не сравнивать с лупой.
Я не говорю, что UniSans плохой, а PT Sans и Cuprum — хорошие. Просто UniSans для использования на веб-странице не предназначен.
Поэтому не надо бросаться применять в своём дизайне все шрифты, о которых вам известно, несмотря на то, что с некоторых пор имеется такая возможность. Используйте эту возможность с толком!
Список web-safe шрифтов
Шрифты PT Sans, PT Serif и PT Mono на сайте их авторов
Законность использования Myriad Pro
Семейство шрифтов Ubuntu на своём официальном сайте
Гугл Фонтс
You can leave a comment with «Facebook»: Не забывайте оставлять комментарии при помощи «ВКонтакте»:
Строгий шрифт кириллицы Роялти бесплатно векторное изображение
Строгий шрифт кириллицы Роялти бесплатно векторное изображение
org/BreadcrumbList»>ЛицензияПодробнее
Стандарт Вы можете использовать вектор в личных и коммерческих целях. Расширенный Вы можете использовать вектор на предметах для перепродажи и печати по требованию.Тип лицензии определяет, как вы можете использовать этот образ.
| Станд. | Расшир. | |
|---|---|---|
| Печатный/редакционный | ||
| Графический дизайн | ||
| Веб-дизайн | ||
| Социальные сети | ||
| Редактировать и изменить | ||
| Многопользовательский | ||
| Предметы перепродажи | ||
| Печать по требованию |
Владение Узнать больше
Эксклюзивный Если вы хотите купить исключительно этот вектор, отправьте художнику запрос ниже: Хотите, чтобы это векторное изображение было только у вас? Эксклюзивный выкуп обеспечивает все права этого вектора.
Мы удалим этот вектор из нашей библиотеки, а художник прекратит продажу работ.
Способы покупкиСравнить
Плата за изображение $ 14,99 Кредиты $ 1,00 Подписка 9 долларов0082 0,69Оплатить стандартные лицензии можно тремя способами. Цены составляют $ $.
| Оплата с помощью | Цена изображения |
|---|---|
| Плата за изображение $ 14,99 Одноразовый платеж | |
| Предоплаченные кредиты $ 1 Загружайте изображения по запросу (1 кредит = 1 доллар США). Минимальная покупка 30р. | |
| План подписки От 69 центов Выберите месячный план. Неиспользованные загрузки автоматически переносятся на следующий месяц. | |
Способы покупкиСравнить
Плата за изображение $ 39,99 Кредиты $ 30,00 Существует два способа оплаты расширенных лицензий.
Цены составляют $ $.
| Оплата с помощью | Цена за изображение |
|---|---|
| Плата за изображение $ 39,99 Оплата разовая, регистрация не требуется. | |
| Предоплаченные кредиты $ 30 Загружайте изображения по запросу (1 кредит = 1 доллар США). | |
Оплата
Плата за изображение $ 399Дополнительные услугиПодробнее
Настроить изображение Доступно только с оплатой за изображение 9 долларов0082 85,00Нравится изображение, но нужно всего лишь несколько модификаций? Пусть наши талантливые художники сделают всю работу за вас!
Мы свяжем вас с дизайнером, который сможет внести изменения и отправить вам изображение в выбранном вами формате.
Примеры
- Изменить текст
- Изменить цвета
- Изменить размер до новых размеров
- Включить логотип или символ
- Добавьте название своей компании или компании
Включенные файлы
Подробности загрузки.
..
- Идентификатор изображения
- 22803555
- Цветовой режим
- RGB
- Художник
- денисгорелкин
Type Network движется на восток с CSTM Fonts
Последним партнером Type Network стала компания CSTM Fonts, московская литейная мастерская, которой руководят отмеченные наградами дизайнеры Илья Рудерман и Юрий Остроменцкий.
By Type Network Staff
С появлением нового партнера по литейному производству CSTM Fonts, Type Network расширяет свою коллекцию, чтобы увеличить охват Восточной Европы, Северной и Центральной Азии. Несмотря на то, что многочисленные семейства шрифтов в Type Network включают кириллицу, CSTM Fonts — первая российская литейная, присоединившаяся к нам. Все их шрифты поддерживают не только расширенный набор латинских символов, но и, конечно же, кириллицу — официальную систему письма для национальных языков более четверти миллиарда человек.
Помимо широкого диапазона начертаний, BigCity Grotesque Pro включает впечатляющее количество оригинальных лигатур верхнего и нижнего регистра.
Илья Рудерман и Юрий Остроменцкий основали CSTM Fonts в 2014 году. Их шрифты завоевали внушительное количество наград на конкурсах Modern Cyrillic, Granshan и European Design Award. И Рудерман, и Остроменцкий окончили факультет графического дизайна Московского государственного университета печати. Рудерман также посещал знаменитый курс для аспирантов «Тип и медиа» в Королевской академии художеств (КАБК) в Гааге. Помимо семилетнего преподавания в Британской высшей школе искусства и дизайна в Москве и работы арт-директором в информационном агентстве РИА Новости, Рудерман нарисовал кириллические расширения для нескольких популярных шрифтов для других компаний, а также создал ряд коммерческих и заказных шрифтов. . До 2013 года Остроменцкий работал главным образом редакционным дизайнером и арт-директором Журнал «Большой город», , автор нескольких книг по дизайну и логотипам.
Его редакционная работа для BigCity послужила выходом для его личных надписей, которые, в свою очередь, стали его точкой входа в шрифтовой дизайн. В 2015 году к CSTM Fonts присоединилась Ольга Панкова, выпускница Московского энергетического института, прошедшая двухгодичную программу «Шрифт и типографика» Британской высшей школы дизайна и дизайна.Яркие буквы Казимира заставляют текст искриться. Скорректированные пропорции и контрастность позволяют избежать мерцания в размерах текста.
Первоначальный выпуск CSTM Fonts в Type Network состоит из четырех различных семейств шрифтов, которые охватывают широкий спектр стилей. Изначально Рудерман разработал BigCity Grotesque для Большой Город. Он нарисовал гуманистический шрифт без засечек на скелете старых шрифтов с засечками, придав ему знакомый и легко читаемый вид. Этот шрифт предлагает творческое использование и эксперименты — это первый журнальный шрифт без засечек, в котором используются кириллические и латинские лигатуры как для прописных, так и для строчных букв.
Текущая версия, BigCity Grotesque Pro, была пересмотрена Панковой, которая обновила формы символов, расширила семейство новыми прямыми и курсивными стилями, а также добавила маленькие заглавные буквы, символы и даже больше лигатур: две тысячи дико творческих соединений.
Казимир — акцидентный шрифт в стиле необарокко с узкими пропорциями и динамичными формами. Основанный на книжной типографии конца девятнадцатого — начала двадцатого века, он включает элементы дореволюционной русской типографии в современные представления о моде, форме и гармонии. Стилистический набор «Irregular» включает в себя удивительные формы символов, которые трудно изобразить в текстовом виде, но они прекрасно работают на экранах. Позже семейство было расширено за счет Kazimir Text, разработанного с немного более широкими пропорциями и более низкой контрастностью для иммерсивного чтения. Он имеет расширенную языковую поддержку и больший вес, чем его дисплейный аналог. Стилистический набор «Нерегулярный» был немного смягчен, чтобы интересные варианты лучше подходили для текста.
При ближайшем рассмотрении обнаруживаются характерные детали, такие как усеченные углы в серьезных, практичных формах букв Navigo. Набор значков и символов делает этот шрифт отличным выбором для навигации и корпоративного брендинга.
Первоначально разработанный для системы навигации и визуальной идентификации Московского городского округа, Navigo представляет собой современный геометрический гротеск, который включает в себя полный набор значков и символов для сигнальных целей. Универсальный дизайн перерос свою первоначальную функцию поиска пути; теперь его также можно развернуть в требовательных настройках текста и отображения. Наконец, Pilar — самая эксцентричная часть выпуска CSTM Fonts. Первая итерация этой современной интерпретации европейской типографики в стиле ар-деко была нарисована Остроменцким в 2012 году для 9Заголовки 0236 Большой город . Он имеет четыре стилистических набора — каждая буква представлена в четырех разных формах — которые становятся все более и более авантюрными: от обычного обычного открытого через широкий закрытый и узкий до буйного дикого.
