30 лучших бесплатных красивых шрифтов
Содержание:
- Самые рекомендуемые Google веб-шрифты
- Как использовать веб-шрифты
- Сервисы встраивания веб-шрифтов
- Встраивание шрифтов с использованием правила @font-face
- Как всегда оставаться в тренде
- Выбор шрифта для сайта
- Переход начался
- О лицензии шрифтов Google Fonts
- Кому следует использовать безопасный шрифт для зрения?
- ГОСТ для российских шрифтов
- Какой самый безопасный шрифт для глаз?
- Где найти типографику для коммерческого использования
- Шрифты используемые в веб-дизайне
- Как создать шрифт самостоятельно
- Merriweather
- Как узнать название шрифта
- Посыл сайта
- Гимнастика для сохранения зрения при работе за компьютером
- Как появился самый безопасный для глаз шрифт?
- Как я выбирал шрифты?
- 15 безопасных веб-шрифтов
- Гротески
Самые рекомендуемые Google веб-шрифты
Здесь вы найдете подборку шрифтов, которые оказались в этом списке из-за их эстетического аспекта, но, прежде всего, функциональности, в том числе семейства с множеством стилей и весов.
Мы выделили шрифты, оптимизированные для интерфейсов, и другие, которые или удобны для чтения на мобильных устройствах, а также разборчивы на любом устройстве, будь то смартфон, стационарный компьютер или планшет.
- Alegreya
- B612
- Muli
- Titillium Web
- Varela
- Vollkorn
- IBM Plex
- Crimson Text
- Cairo
- BioRhyme
- Karla
- Lora
- Frank Ruhl Libre
- Playfair Display
- Archivo
- Spectral
- Fjalla One
- Roboto
- Montserrat
- Rubik
- Source Sans
- Cardo
- Cormorant
- Work Sans
- Rakkas
- Concert One
- Yatra One
- Arvo
- Lato
- Abril FatFace
- Ubuntu
- PT Serif
- Old Standard TT
- Oswald
Как использовать веб-шрифты
На данный момент большинство дизайнеров знают, как пользоваться веб-шрифтами, но, если вы не уверены, вот два основных способа. Первый —использовать библиотеки веб-шрифтов, такие как Google Fonts, Webtype, Fonts.com или Typekit и загружать шрифт с их серверов, как вы увидите в этом примере:
Второй — разместить шрифт на своем сервере и использовать правило @font-face в таблице стилей, как показано здесь:
Сервисы встраивания веб-шрифтов
Google Web Fonts (GWF) или Typekit — это сервисы которые позволяют использовать шрифты, размещенные на их серверах. GWF бесплатен, не требует наличия учетной записи и не ограничивает трафик или домены. Typekit же устанавливает стоимость услуги в зависимости от количества доменов, на которых используется шрифт, или от ежемесячного трафика сайта. Одной из наиболее ценных характеристик GWF является возможность загрузки версии шрифтов для стационарных компьютеров для использования на этапе разработки проекта.
Реализация
Это действительно быстро и просто:
1. Выберите шрифт. Вы можете добавить его в свою коллекцию или использовать “quick-use” для генерации кода и опций для этого шрифта.
2. Скопируйте и вставьте сгенерированный код в <Head>
<head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>
3. Шрифт теперь доступен в вашем коде CSS
body { font-family: 'Tangerine', serif; font-size: 48px; }
Здесь вы можете обратиться к расширенному руководству по стилям, подмножествам сценариев и использованию нескольких шрифтов.
Встраивание шрифтов с использованием правила @font-face
Шрифты размещаются на сервере пользователя независимо от внешних сервисов. @font-face — это устаревшее правило CSS2, которое было повторно введено в спецификации CSS3 и поддерживается почти всеми современными браузерами. Веб-шрифт — это настраиваемый шрифт, который поддерживается различными браузерами и доступен в таких форматах, как TTF, WOFF, EOT и SVG.
@font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }
Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.
Как всегда оставаться в тренде
Особенность современных тенденций — в их широте, гибкости и отсутствии четких рамок. В типографике мирно уживаются противоречивые стили. Поэтому, применив любой прием в логотипе, рекламной продукции или оформлении упаковки, вы можете не переживать, что через год перестанете быть актуальным.
Вот три лайфхака, как всегда оставаться в тренде:
- Создайте качественную базу. Делайте выбор в пользу простоты и лаконичности, которые не выходят из моды. Подберите многофункциональную графику, которая будет одинаково хорошо смотреться на эмблеме и билборде, на бланке и экране телефона.
- Позаботьтесь о смысле. Выбирайте начертания, которые соответствуют характеру бренда, и отличаются не только оригинальностью, но и смысловой нагрузкой.
- Используйте Logaster. В коллекции онлайн-генератора логотипов — сотни трендовых шрифтов, с которыми ваша айдентика будет актуальна. Ещё одно преимущество сервиса — возможность в любой момент обновить лого.
Выбор шрифта для сайта
После того как вы определились с посылом, который должен нести ваш сайт, пришло время выбрать идеально подходящий для этих целей шрифт. Количество шрифтов на данный момент просто не измеримо – есть платные, так и бесплатные варианты. В настоящее время в мире шрифтов доминируют две основные компании – Google и Adobe.
- Google Fonts – предлагает бесплатные шрифты, созданные профессионалами
- Fonts Adobe – шрифты предлагаются в едином пакете подписки Adobe Cloud.
Основным преимуществом этих двух пакетов шрифтов является то, что они создаются профессионалами, и отлично подходят как для Веба, так и для типографий. Эти шрифты можно просто скачивать и использовать. Чего нельзя сказать о сторонних вариантах, которые можно скачать в интернете на различных тематических сайтах и форумах. Как будет работать такой шрифт – не известно, все на свой страх и риск.
На что стоит обратить внимание при выборе шрифта для веб-сайта:
Толщина шрифта
Стоит выбирать те варианты, в которых есть как минимум три разных толщины (легкий, нормальный, жирный). Благодаря этому можно будет использовать один шрифт на странице и создавать необходимые логические иерархии между текстовыми блоками на сайте. Также это будет полезно при возникновении проблем с читаемостью, об этом ниже.
Проверка читаемости
После выбора шрифта с хорошим набором разных толщин, необходимо проверить как он отображается на мобильной и «декстопной» версии сайта. Ведь при нормальном отображении на большом экране, шрифт может оказаться не читаемым на мобильном устройстве. Особенно такое может случаться с очень тонким («Lite») шрифтом. Но так как у шрифта есть несколько толщин, то не составит особого труда сделать его немного толще, где это необходимо.
Сочетание шрифтов
На самом деле уметь сочетать различные шрифты – это целая наука. Так как выбирая несколько шрифтов для сайта нужно понимать, что они должны сочетаться. Шрифты должны гармонировать на странице, они должны поддерживать определенный контраст. И в конечном итоге эти шрифты должны донести пользователю сайта тот посыл, который был заложен в самом начале.
Специалисты в веб-дизайне чувствуют и знаю какие шрифты стоит использовать вместе. А вот для начинающих это может быть проблемой, это станет точкой преткновения. Но для таких людей есть помощники в интернете, например, при выборе шрифта в Google Fonts система автоматически предложит сочетающиеся варианты шрифтов. Или можно использовать сервис fontjoy.com — он автоматически подбирает сочетающиеся шрифты, просто нужно нажимать на кнопку «Сгенерировать».
Размер загружаемого шрифта
При выборе шрифта также важно учитывать его размер, так как от этого будет напрямую зависеть скорость загрузки сайта. И стоит подумать об использовании 2 и более шрифтов на одной странице, так как это может серьезно увеличивать время загрузки страниц сайта
После выбора хорошего шрифта стоит провести тест загрузки, если он не будет устраивать – стоит подобрать другой, более «легкий» шрифт.
Совместимость браузеров
Сейчас это встречается всё реже, но имеет место быть. При выборе шрифта, его также стоит проверить на отображение в различных популярных интернет-браузерах. Так как некоторые шрифты могут не отображаться в определенных браузерах, или выдавать ошибки.
Второстепенный шрифт
Несмотря на все тесты отображения и производительности, проблемы будут возникать. Поэтому рекомендуется выбрать второстепенный шрифт, который будет продолжать единый дизайн всего сайта. Он будет отображаться если исходный шрифт не отображается. Это позволит держать единый дизайн всего сайта под контролем, даже когда что-то пошло не так.
Переход начался
Проблемы с американскими шрифтами у российских компаний начались задолго до запрета на шрифты Monotype Imaging в декабре 2018 г.. Так, в конце 2016 г. все та же Monotype Imaging отказала «РусБИТех-Астра» в праве включить шрифты Times New Roman и Arial в состав дистрибутива Astra Linux. В качестве причины представители Monotype Imaging упомянули санкции США против российских компаний, сотрудничающих с Минобороны, а поводом для отказа, по данным «Коммерсанта», стало упоминание об участии разработчика Astra Linux в работе международного авиасалона МАКС.
Госкорпорации и организации начали переходить на российские шрифты, в том числе на упомянутое семейство PT Astra, в 2019 г. Например, согласно Росстандарту, первыми это сделали власти Ульяновской области в конце мая 2019 г. Использование PT Astra в госструктурах этого региона инициировано указом губернатора Ульяновской области №41 от 20 мая 2019 г.
Со временем Times New Roman исчезнет из всех государственных документов
В октябре 2019 г. CNews писал, что шрифты PT Astra Sans и PT Astra Serif, которые создатели назвали «полноценными аналогами зарубежных шрифтов, включая Times New Roman», вошли в состав российского пакета офисных программ «Мой офис». Это разработка компании «Новые облачные технологии», представляющая собой отечественный аналог американского Microsoft Office.
Появление этих шрифтов в «Мой офис» позволило ускорить переход на их использование ряда госструктур. Например, в конце ноября 2019 г. власти Москвы закупили 589 лицензий «Моего офиса» стоимостью 5,24 млн руб.
Шрифты PT Astra Sans и PT Astra Serif теперь используются и Федеральной службой исполнения наказаний (ФСИН). В конце декабря 2020 г. ведомство приобрело около 6300 компьютеров российской сборки с предустановленными на них отечественными ОС «Альт рабочая станция 9» и офисным пакетом «Мой офис стандартный».
- Короткая ссылка
- Распечатать
О лицензии шрифтов Google Fonts
Если с правилами использования изображений профессиональное сообщество уже более-менее разобралось, то правовые вопросы, касающиеся шрифтов, для многих остаются непонятными.
К бесплатным относятся системные шрифты, установленные в персональных компьютерах, а также те, что предоставляет Google Fonts. Вы можете задействовать их в логотипе, брендбуке, рекламной вывеске на улице или баннере в социальной сети. Единственное, чего вы не можете делать, — это продавать шрифты, скачанные с сервиса.
Важно: создавая коммерческий продукт, категорически нельзя использовать шрифты с платной лицензией, не приобретая их. В случае правового конфликта все обвинения лягут на дизайнера — а штрафы за такое нарушение неподъёмные для одного человека. . С лицензиями разобрались — переходим к подборке.
С лицензиями разобрались — переходим к подборке.
Кому следует использовать безопасный шрифт для зрения?
Сегодня представители многих профессий проводят перед экраном компьютера по 6-8 часов в день: копирайтеры, редакторы, журналисты, писатели, бухгалтеры и пр. Из-за несоблюдения правил работы за монитором у многих людей достаточно быстро снижается четкость зрения и развивается хроническая усталость глаз, которая сопровождается болезненными и дискомфортными синдромами (сухость, жжение, покраснение и пр.). Многие игнорируют это и продолжают работать в режиме повышенных зрительных нагрузок, что с течением времени приводит к серьезным проблемам с органами зрения.
Если Вам по долгу службы приходится много печатать или читать текст, используйте безопасный шрифт без засечек, например, Verdana, Arial или Tahoma, чтобы минимизировать напряжение органов зрения. Однако следует помнить, что это не поможет защитить глаза от пересыхания, усталости и прочих неприятных симптомов, связанных с длительной фокусировкой на одном объекте и редким морганием. Поэтому следует придерживаться определенных правил работы за компьютером. Только комплексная забота о здоровье глаз позволит сохранить высокую четкость зрения.
Правила работы за компьютером:
- Делайте гимнастику для глаз каждые 45 минут при чтении или написании текста;
- Установите хороший читабельный шрифт (Verdana, Arial или Tahoma);
- Установите комфортные параметры контрастности, яркости и частоты обновления дисплея;
- Старайтесь чаще моргать и фокусироваться на разных объектах;
- Следите за тем, чтобы монитор находился четко на одном уровне с Вашими глазами;
- Позаботьтесь об организации удобного рабочего места (комфортная мебель, достаточный уровень естественного освещения);
- Следите за тем, чтобы экран находился на расстоянии не менее 50-60 см от глаз. При необходимости увеличьте кегль шрифта или воспользуйтесь средствами коррекции.
ГОСТ для российских шрифтов
Российские госорганы и все государственные корпорации получили рекомендации по использованию исключительно отечественных и свободно распространяемых компьютерных шрифтов при работе с текстом. По информации «Коммерсанта», эти рекомендации стали следствием изменений в ГОСТ, внесенными Росстандартом.
Под «свободно распространяемыми» подразумеваются шрифты, на использование которых не требуется лицензия.
На момент публикации материала изменения в ГОСТ были приняты пока только техническим комитетом системы разработки и постановки продукции на производстве, о чем изданию сообщил член технического комитета, старший научный сотрудник ГУБ НИЦ «Курчатовский институт» Александр Харьков. Он добавил также, что нововведение еще рассматривается в других инстанциях, но не уточнил, в каких именно.
Привычный всем Times New Roman оказался под запретом для российских госорганов
Действующая версия ГОСТа подразумевает использование шрифта Times New Roman, который может использоваться без лицензии только в американских ОС семейства Windows, Российский госсектор в рамках импортозамещения постепенно отказывается от использования иностранного ПО.
Какой самый безопасный шрифт для глаз?
Врачи-офтальмологи утверждают, что в последнее время значительно увеличилось количество пациентов с компьютерным зрительным синдромом. По статистическим данным, ему подвержено от 65 до 90% людей, которые ежедневно читают или печатают большой объем текстовых данных. Чтобы максимально помочь пользователям в решении этой непростой проблемы, ученые провели ряд экспериментов, в ходе которых были выявлены параметры наиболее безопасного шрифта для органов зрения. Исследования проводились в лаборатории зрительной эргономики Америки (Vision Ergonomics Research Laboratory).
В результате было выявлено, что самый безопасный для глаз шрифт — Verdana, разработанный дизайнером Мэтью Картером в 1996 году для компании Microsoft. Это вызвало неоднозначную реакцию в широких кругах. Некоторые обвиняли компанию в фальсификации результатов с целью самопиара. Однако ученые опровергли слухи, приведя ряд логических доказательств.
У людей, которые использовали шрифт для чтения Verdana, наблюдалось снижение зрительного напряжения. Исследователи аргументировали это тем, что у такого шрифта нет засечек, а увеличение букв происходит за счет убавления межстрочного интервала. Благодаря этому человек может легко и быстро воспринимать информацию даже при мелком кегле. Хотя оптимальным считается размер в 10-14 пунктов
Это вызвано тем, что меньший кегль способствует более сильному напряжению глазных мышц и заставляет вынужденно принимать неудобную позу, а больший, наоборот, рассеивает внимание. Также ученые утверждают, что этот шрифт для чтения на компьютере активизирует у человека легкое чувство оптимизма
Хотя этот факт нельзя считать достоверной информацией. Таким образом, чтобы понизить напряжение глаз и риск появления компьютерного зрительного синдрома, рекомендуется использовать шрифт Verdana. Схожими свойствами обладают шрифты Arial и Tahoma. Они не имеют засечек, поэтому также относятся к категории «безопасных».
Почему лучший шрифт для чтения — это Verdana?
- Он не располагает засечками, что является преимуществом при чтении текста в электронном формате;
- Увеличение букв происходит за счет убавления межстрочного интервала;
- Позволяет легко и быстро воспринимать информацию даже при мелком кегле (размере букв);
- Способствует снижению зрительной нагрузки;
- Повышает читабельность текста и восприятие смысловой нагрузки;
- Активизирует у человека легкое чувство оптимизма при чтении текста.
Где найти типографику для коммерческого использования
Предлагаем несколько популярных ресурсов, на которых можно найти платные, бесплатные продукты или просто вдохновиться.
Обширная коллекция (больше 130 тысяч наименований) и расширенный поиск делают этот сервис один из самых лучших для поиска графики.
В подборке Google — 977 семейств популярных шрифтов и традиционно удобный поиск с фильтром по категориям, языкам, трендам и другим показателям.
Тщательно отобранные коллекции от модных дизайнеров. Каждую неделю разработчики предлагают скачать бесплатный шрифт.
Больше 23 тысяч шрифтов и сотни тысяч графических элементов. Удобная система поиска по категории или названию позволяет быстро получить нужный результат.
Коллекция бесплатной типографики. Из недостатков сервиса — отсутствие поиска по категориям.
Онлайн-сообщество, где дизайнеры выставляют свои работы. Советуем использовать этот ресурс для вдохновения — здесь много креативных и оригинальных продуктов.
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Шрифты используемые в веб-дизайне
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 шрифты:
Google Fonts — один из самых крупных архивов реально бесплатных шрифтов с сотнями гарнитур. Учитывая его универсальный характер и всеобщую доступность, теряется практически любой смысл использования обычных шрифтов по умолчанию.
Данный сервис позволяет использовать любые понравившиеся вам шрифты на своем сайте. Выбранные шрифты подгружаются на ваш сайт с CDN-хостинга. Не рекомендуется загружать большое количество шрифтов, так как это сказывается на скорости загрузки страниц сайта.
Как создать шрифт самостоятельно
При помощи генераторов шрифтов вы можете разработать собственную графику и придать ей оригинальности.
Хотите персонализировать био в Instagram? Получите уникальную графику, чтобы выделить свой профиль. Введите текст — и сервис будет генерировать бесконечное количество вариантов.
Ресурс создаст надпись на основе более чем 100 тысяч символов по стандарту Unicode: букв из кириллицы, латиницы и других алфавитов, цифр, символов и графики.
Введите текст, выберите из нескольких десятков готовых шрифтов, добавьте желаемый размер, цвет и эффекты (например, тени или градиент) — и получите уникальное изображение.
Merriweather
Merriweather — это шрифт с засечками, который был разработан специально для комфортного чтения на электронных устройствах. Ещё есть Merriweather Sans — версия без засечек, которая гармонично сочетается со всем семейством.
У Merriweather мягкие засечки и открытые формы, поэтому он практически универсален. Элегантно подчёркивает эстетичность проекта, но дружит и с бизнес-тематикой. Merriweather рекомендуется использовать в паре с самим собой либо с рублеными шрифтами для наборного текста. У Merriweather восемь начертаний, поэтому он может быть очень разным и практически всегда выглядеть безукоризненно.
Примеры: hopesandfears.com, , scmp.com.
Как узнать название шрифта
Заметили необычную графику, которая подойдет для вашего брендинга? Чтобы узнать, как она называется, сфотографируйте надпись (например, афишу или вывеску кафе) или сделайте скриншот экрана (если речь идет о сайте), а затем воспользуйтесь специальными онлайн-сервисами.
Ресурс, работающий на платформе My Fonts, сопоставит ваше изображение с более чем 133 тысячами начертаний. А приложение WhatTheFont для Apple или Android позволяет проводить поиск онлайн прямо с камеры телефона.
Платформа Font Squirrel предлагает воспользоваться опцией распознавания: загрузите изображение или укажите его URL — и искусственный интеллект выдаст результаты.
Поиск по каталогу из более чем 600 тысяч работ. Сервис предложит вам около 60 вариантов, похожих на те, что вы ищете, а также ссылки на сайты, где их можно приобрести.
Ресурс отличается мощным поиском, который тщательно детализирует загруженные изображения и выдает максимально точные результаты.
Посыл сайта
Перед началом разработки каждого сайта необходимо определить, какие эмоции мы хотим донести до конечного пользователя. Что должен испытывать пользователь, пролистывая страницы сайта.
Чтобы определить посыл, можно выбрать несколько слов, которые точно описывают бизнес с лучшей стороны, например:
- Профессиональная компания с многолетним стажем по продаже недвижимости
- Молодой, амбициозный, безумный онлайн-стартап
- Веселый, волшебный, детский летний лагерь.
Определив данные слова, можно будет лучше понять эмоции и послания, которые мы хотим передать на веб-сайте. После этого станет понятно какие лучше использовать изображения, видео и конечно шрифты.
Например, для семейной пиццерии, можно выбрать слова «профессиональный», «традиционный» и «семейный», значит, чтобы донести это через дизайн сайта лучше использовать:
- Черно-белые фотографии, для придания винтажности
- Темные и насыщенные традиционные цвета
- Классический курсивный шрифт с засечками
Или еще один пример: IT-стартап для инновационного приложения. Тогда посыл должен содержать слова «молодой», «амбициозный», «современный». Шрифт в таком случае будет уместен без засечек с жирными заголовками.
Гимнастика для сохранения зрения при работе за компьютером
Наиболее эффективным методом снижения зрительных нагрузок при длительном чтении или наборе текста на экране монитора является гимнастика для глаз. Она займет всего несколько минут Вашего времени, но при этом позволит снизить дискомфортные ощущения и вернуться к работе с новыми силами. Чередуйте закрытие и сильное напряжение глаз в течение 4 секунд с их расслаблением в течение 3-5 секунд. Повторять это упражнение следует 4-5 раз. Переведите взгляд на переносицу и задержите его на 3-4 секунды. Затем сфокусируйте зрение на дальнем объекте, например, пейзаже за окном, на 4 секунды. Повторять упражнение следует 2-3 раза. Посмотрите влево, не поворачивая голову, и зафиксируйте глаза в этом положении на 4 секунды. Затем повторите это упражнение, смотря влево, вверх и вниз. Моргайте максимально быстро в течение 10 секунд и ненадолго закройте глаза. Затем еще раз быстро поморгайте в течение 1 минуты и снова закройте веки на 2-3 секунды. Повторять упражнение следует 2-3 раза. Внимательно рассмотрите любой хорошо видимый объект вблизи в течение 30 секунд. Затем сфокусируйтесь на удаленном предмете. Повторите такое упражнение 2-3 раза.
Вы используете контактные линзы для коррекции зрения? Рекомендуем ознакомиться с широким ассортиментом товаров на сайте Очков.Нет. У нас Вы сможете выгодно заказать продукцию от мировых брендов по выгодным ценам!
Как появился самый безопасный для глаз шрифт?
Научно доказано, что печатный и электронный формат текстовых данных воспринимается глазами человека абсолютно по-разному. Экспериментальным путем было выявлено, что в печатном варианте более комфортно воспринимаются шрифты с засечками (небольшими выступающими черточками в буквах). Поэтому в книгах, журналах, брошюрах и рекламных проспектах зачастую используется шрифт Times New Roman. Кроме того, большой популярностью пользуется близкий к нему по начертанию аналог Georgia. Эксперты утверждают, что использование данных шрифтов существенно упрощает восприятие написанного на бумаге текста. Благодаря этому лучше усваивается смысл. Результаты исследований, проведенных американским писателем Джо Шугарманом, доказывают, что шрифт с засечками позволяет увеличить читабельность печатного текста в 4-5 раз. Однако к текстовым данным в электронном формате это не имеет никакого отношения.
Большинство людей получает информацию непосредственно с экрана и не видят смысла ее распечатывать. Впервые об удобстве восприятия текстовых данных в электронном формате задумались представители компании Microsoft, которые поручили дизайнеру Мэтью Картеру разработать шрифты, способствующие удобному чтению данных с монитора. Впоследствии их оптимизацией занимался Том Рикнер (Tom Rickner). Основная задача состояла в том, чтобы буквы имели хорошую читабельность даже при небольшом размере (кегле) и способствовали снижению зрительной нагрузки. Так появились знаменитые удобочитаемыми шрифты Verdana и Arial.
Как я выбирал шрифты?
Сложно объяснить, почему тебе нравится тот или иной шрифт, когда ты каждый день проводишь время в графическом редакторе, работаешь с дизайном и анализируешь тысячи визуальных решений. Большинство шрифтов было найдено случайно, когда я собирал мудборды, делал ресерч или просто находил интересные проекты.
Для того, чтобы было наглядно, как шрифт выглядит в использовании, я создал прототипы макетов, где шрифт используется в различных сценариях. Так легче понять, сильные и слабые стороны шрифта.
Хороший шрифт заставляет мгновенно на себя обратить внимания. Ты контактируешь с ним и сразу думаешь: «Вау, а что это за шрифт тут использовался, выглядит круто». Начинаешь изучать исходники и пополняешь свою коллекцию новыми находками.
В каждом представленном шрифте есть что-то особенное. У одного шрифта очень красивый крупный заголовок, у другого цифры, третий отлично подойдет для основного текста. Где-то шрифты более сбалансированные и их отлично использовать и в заголовке и в основном тексте. А где-то лучше комбинировать с другой парой.
15 безопасных веб-шрифтов
1. Arial
Arial — это стандарт де-факто для большинства и один из наиболее широко используемых шрифтов без засечек (что означает отсутствие маленьких завитков в конце каждой буквы).
2. Times New Roman
Times New Roman используется для шрифтов с засечками, как Arial для шрифтов без засечек.
Он один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times.
4. Courier New
Courier New, похожий на Times New Roman, является разновидностью еще одной старой классики. Он также считается моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, который мы только что видели).
5. Courier
Courier — это старый моноширинный резервный серверный шрифт, доступный почти для всех устройств и операционных систем.
6. Verdana
Вердана — настоящий веб-шрифт, потому что: 1) простые линии без засечек и 2) у него очень большой размер. Буквы почти вытянутые, что позволяет легко читать онлайн.
7. Georgia
Джорджия похожа на Вердану по размеру и высоте (с более крупными, чем обычно, буквами по сравнению с шрифтами того же размера). Поэтому, хотя он отлично подходит для определенных обстоятельств, избегайте сочетания этого шрифта с засечками с другими (например, Times New Roman), которые могут выглядеть незначительно в сравнении.
8.Palatino
Палатино восходит к эпохе Возрождения. Шутки в сторону! Это еще один крупный шрифт, который идеально подходит для Интернета, который традиционно используется для заголовков и рекламы в печатном стиле.
9. Гарамонд
Garamond — еще один шрифт старой школы, восходящий к стилям, используемым в Париже 16 века. Эта новая и улучшенная версия была представлена и включена в состав большинства устройств Windows (и с тех пор была принята другими).
10. Bookman
Книжник (или Bookman Old Style) — еще один идеальный вариант заголовка, который сохраняет читаемость (или читаемость) даже при использовании небольшого размера.
11. Tahoma
Тахома относится к шрифту без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых более ранних версиях Windows, таких как Windows 2000, Windows XP и Windows Server 2003.
12. Trebuchet
Требушет — еще один шрифт без засечек, получивший свое название в честь одноименной средневековой осадной машины. Он был выпущен в 1996 году и до сих пор остается одним из самых популярных шрифтов основного текста в Интернете.
13. Arial Black
Ариал Блэк — это более крупная, смелая и плохая версия вашего базового Arial. Как ни странно, он также имеет пропорции с Helvetica
Почему это важно? Чтобы они могли изначально использовать его для замены Helvetica и печати, не платя за лицензию
14. Impact
Impact — еще один смелый вариант заголовка, который отлично смотрится в нескольких коротких словах, но совершенно ужасен в предложении или длиннее.
15. Comic Sans MS
Comic Sans MS — забавная и причудливая альтернатива другим вариантам без засечек.
Это тоже довольно странно. Но с другой стороны, этот шрифт легко читать людям с дислексией.
Гротески
Neue Machina. Бесплатный вариативный гротеск с кириллицей, выпущенный Pangram Pangram. Презентацию оформил Васьен Катро aka Baugasm
Обратите внимание — ловушки для чернил (inktraps) вошли в моду
PT Root UI. Новый бесплатный шрифт компании Паратайп. Предназначен специально для интерфейсов, содержит 4 начертания.
Inter. Бесплатный гротеск с кириллицей в 8 начертаниях. Сделал дизайнер из команды Figma. Открытые исходники.
Greenwich. Современный гротеск с кириллицей по мотивам английских шрифтов начала 20 века. Цена за каждое отдельное начертание от 35 $. Два начертания доступны бесплатно.
Closer. Семейство гуманистических гротесков с кириллицей от Mint Type. Низкий контраст и очень закрытая апертура. 18 начертаний (9 прямых + италики), 7 наборов стилистических альтернатив. Два начертания раздают бесплатно, остальные от 35 $.
Closer Text. Семейство закрытых гуманистических гротесков для набора. Начертания Text Light и Text Light Italic бесплатные, остальные 16 стоят от 35 $ по отдельности и от 159 $ вместе.
FE Hero. Ультра-узкий гротеск с кириллицей. Идеально подходит для киноафиш и технических надписей. Можно использовать бесплатно в персональных проектах, коммерческая лицензия обойдётся всего в 299 ₽.
Vocal. Семейство гротесков с кириллицей. В гарнитуре 28 шрифтов толщиной от волосяного до хэви. Все вместе от 260 $, отдельные начертания от 35 $, начертание Light бесплатное.
Noah. 4 начертания этого семейства гротесков Fontfabric можно скачать бесплатно. Остальные 78 стоят от 299 $.
Mozer. Гарнитура Fontfabric с кириллицей. Полуузкий неогротеск, 16 начертаний. Начертание Semi Bold бесплатное. Остальные от 29 $. Вся семья от 169 $.
Kardinal. Гуманистический гротеск в 16 начертаниях (8 прямых + 8 италиков) с кириллицей. Два начертания бесплатные, остальные от 30 $, вся семья от 180 $.
Lil Stuart. Пара бесплатных шрифтов с латиницей: гротеск и скрипт. Повторяется в разделе с рукописными шрифтами.
