Адаптивный веб-дизайн: как выбрать размер шрифта
Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».
Быстрая навигация по главам: Введение · iOS · Android · Веб · Принципы
Итак, эта статья для вас, если вы работаете с веб-дизаном и хотите ориентироваться (примерно) в размерах шрифтов — какой где лучше использовать.
Ниже я привожу информацию по мобильному дизайну и веб-дизайну — если очень хочется, можно сразу перейти к этим разделам. На дворе уже 2019, веб-сайты всё лучше и лучше адаптируются под девайсы. Узнаем поподробнее? Погнали.
Рекомендации по веб-типографике — мобильный дизайн
Если вы создаёте макет веб-сайта или приложения, которым можно будет пользоваться с телефона, зарубите себе на носу раз и навсегда:
- Размер шрифта в инпутах не менее 16px. Если шрифт будет меньше, на iOS браузер приблизит строку ввода, сместив её влево и обрезав правую сторону так, что после пользования строкой пользователю придется отдалять уже вручную.
Вот так это выглядит:
За гифку отдельное спасибо шустрому Ste Grainer. Можете ознакомиться с его статьёй по авто-зуму здесь.
Вся остальная информация о размерах шрифта в мобильном вебе в основном сводится к следующему:
- Размер шрифта основного текста должен быть около 16px. Цель: чтобы текст на вашем телефоне (при стандартном расстоянии от глаз) читался так же легко, как и на странице хорошо отпечатанной книги (при стандартном — обычно чуть большем — расстоянии от глаз).
- Для второстепенного текста, подписей для полей и картинок используйте размер на пару значений меньше: например, 13px или 14px. Уменьшать размер только на одну единицу я не рекомендую — в таком случае его будет легко спутать с обычным текстом. Менее важный текст должен быть оформлен соответственно, чтобы намеренно подчеркнуть его меньшую значимость.
- Проверяйте, как выглядит ваш дизайн на самом устройстве. Максимально обратите своё внимание на этот совет: макет приложения на экране ноутбука и макет приложения на экране смартфона в ваших руках дают абсолютно разные ощущения. В начале своего дизайнерского пути я едва ли не каждый раз поражался тому, как макет, который я делал на компьютере, по-другому выглядел на мобильном устройстве. Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror, Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.
- По всем остальным вопросам касаемо размеров шрифтов в вебе, идите читать гайдлайны материального дизайна — это понятный, хорошо структурированный, метко написанный (и вполне содержательный) материал. Чем больше я расту как дизайнер, тем больше убеждаюсь в следующем: хоть у Apple и есть максимальный авторитет с точки зрения дизайна, сегодня Google благополучно вытирает об него ноги. Только не говорите дизайнерам-снобам, что я так сказал.
Максимально обратите своё внимание на этот совет: макет приложения на экране ноутбука и макет приложения на экране смартфона в ваших руках дают абсолютно разные ощущения. В начале своего дизайнерского пути я едва ли не каждый раз поражался тому, как макет, который я делал на компьютере, по-другому выглядел на мобильном устройстве. Размеры шрифтов, отступы — всё слетало к чертям. Поэтому используйте Sketch Mirror, Figma Mirror или что вам там больше нравится, только проверяйте свой дизайн на самих девайсах.Руководство по веб-типографике на ПК
Когда речь заходит о выборе основного размера текста для вашего веб-сайта веб-приложения, в большинстве случаев дизайн представляет собой один из двух следующих видов:
- Текстовые страницы. Статьи, блоги, новостные сводки и т.д. — главная цель использования этих страниц — чтение. Взаимодействие с пользователем здесь практически сводится на нет, разве что придётся пару раз по ссылкам кликнуть — и то не факт.
- Интерактивные страницы. Приложения, которые подразумевают листание, клики, поиск нужного пункта в списке или таблице, редактирование, ввод текста и т.д. На такой странице может быть много текста, но не такого, который можно просто читать, как книгу.
Статьи, блоги, новостные сводки и т.д. — главная цель использования этих страниц — чтение. Взаимодействие с пользователем здесь практически сводится на нет, разве что придётся пару раз по ссылкам кликнуть — и то не факт.Привести пару примеров? Вот эта страница, на которой вы находитесь, — текстовая. А новостная лента на Facebook — интерактивная. Обе страницы преследуют слегка разные цели, поэтому разберем их по-отдельности. Информация об обеих может быть вам полезной. Страница «О нас» какого-нибудь безумного веб-приложения тоже нагружена текстом. А на странице «Контакты» в каком-нибудь ванильном бложике может быть много взаимодействия.
Текстовые страницы
Короче говоря, на текстовых страницах нужно использовать более крупные размеры шрифта.
Если подразумевается, что пользователь должен долго что-то читать, будьте лапочками: не заставляйте людей напрягать зрение. Конечно, шрифты отличаются друг от друга, даже в одном кегле, но вот о чём речь:
- 16px — абсолютный минимум для текстовых страниц
- 18px — лучше начинать с этого размера. Вы же не печатаете текст в ворде с одинарным межстрочником. Вы оформляете текст для людей, которые сидят в метре от своих допотопных мониторов.
- 20px+ — поначалу может показаться прям очень огромным, но попробовать его стоит в любом случае. Сайт medium.com может похвастаться лучшим дизайном текстовых страниц, а размер шрифта по умолчанию там равен 21px.
Это, на самом деле, довольно бесячее и тупое занятие: вам надо закрыть один глаз и, сщурившись, смотреть на книгу, держа её при это вертикально, что выглядит довольно-таки тупо. Найдите какое-нибудь уединенное местечко и проверьте свой сайт на работоспособность: читается ли мой шрифт даже с расстояния в метр? Даже с учётом моего острого, не испорченного годами зрения? Ну, вы поняли.Интерактивные страницы
Итак, для интерактивных страниц, подойдут и размеры поменьше. На самом деле, исходя из количества информации, которую единовременно получает пользователь, даже текст в 18px может быть слишком крупным для комфортного чтения. Зайдите на свою почту, в twitter, в любое приложение, где нужно скорее «сканировать» страницу, нежели чем читать; зайдите в приложение, которое предоставляет данные — вряд ли вы найдёте там длинные абзацы текста в 18px. Вместо этого нормой будет 14-16px. Однако одним размером шрифта дело не обойдётся. Скорее всего, для менее значимой информации будут использоваться более мелкие кегли, а для более значимой — кегли побольше (заголовки, подзаголовки и под-подзаголовки и так далее), и всё это будет смешано в одну большую типографическую солянку.
А теперь важная мысль: на любой интерактивной странице размер шрифта в МЕНЬШЕЙ степени зависит от свода правил (я о тебе говорю, скейлинг шрифтов), чем от определённых потребностей каждого участка текста и взаимодействия между ними.
Например:
- Шрифт для названий событий — 12px, medium, в начертании, которое полностью отсутствует в гайдлайнах материального дизайна. Но вот когда эти названия нужно уместить в 7 колонок на экране, ширина которого составляет всего лишь 1440px, а многие события состоят всего из одного-двух слов, данный размер шрифта идеален. Совсем чуть-чуть уменьшишь — и уже не прочитать. Совсем чуть-чуть увеличишь — и слишком много названий окажутся обрезаны. Дизайн — это череда компромиссов, ребята. Если вы не знаете, ради чего вы на этот компромисс идёте, возможно, вы идёте на него не там.
- Указатели времени слева («12pm», «1pm» и т.д.) имеют размер 10px. Это ещё один стиль текста, который полностью отсутствует в гайдлайнах.
- Размер дат — 48px. И вновь ничего подобного в материальном дизайне. В данном случае не знаю, почему не использовать 45px — ведь это официальный размер текста для второго монитора, но если бы разработку дизайна поручили мне, то я бы использовал жирный шрифт размером 48px, и вот здесь жирность создавала бы проблемы. Она привлекла бы слишком много внимания. Поэтому я в любом случае поработал бы ещё над стилем.
Помните об этом, когда будете разрабатывать дизайн интерактивных веб-страниц. К каждому тексту нужен индивидуальный подход. Согласованность — это хорошо, но вряд ли пользователь разозлится, если размер шрифта будет меньше на одно значение px, чем нужно — но он точно разозлится, если не сможет найти то, что ищет.
свежак
Deadsign
Твиты от @deadsignru
UI
29 Nov 2021
UI
04 Nov 2021
UI
28 Oct 2021
Шрифт в веб-дизайне | R-BAND
Пользователи сайта = деньги
Какова главная цель создания сайта? В большинстве случаев эта цель – заработать деньги.
Веб – сайт с уверенностью можно назвать бизнес-активом, а что же должен делать бизнес-актив? Приносить доход. Поэтому каждый элемент сайта должен быть понятен и удобен в использовании. Если вы «не объясняете», что люди должны делать на сайте или почему они должны что-то сделать, то они, как правило, этого делать не будут. Поэтому один из главных способов презентовать продукт пользователю – это использовать текст, а текст подразумевает чтение.
Поговорим о тенденциях
Современный дизайн задает свои тренды в использовании шрифта. Еще по-прежнему актуален минимализм и использование чистого «дышащего» пространства, поэтому довольно часто дизайнеры используют мелкий шрифтовой кегль, примерно 12 px. Где же баланс между красотой и удобочитаемостью? Ведь хочется сделать стильный макет и не провоцировать немолодых пользователей бежать за лупой.
Пример использования мелкого шрифта на сайтах
Так сколько же пикселей?
Один из крупнейших ресурсов для веб-дизайнеров и разработчиков smashingmagazine.
com даёт своё осмысление этой проблемы.
Smashing magazine утверждает, если вы хотите, чтобы максимальное количество людей находилось на вашем сайте, читало, понимало текст, то нужно установить его минимальный размер в 16 px. Так же ресурс приводит несколько статистических фактов, над которыми нельзя не задуматься.
Почти каждый десятый пользователь имеет проблемы со зрением (приведена давнишняя статистика, поэтому думаем, что на сегодняшний день эта цифра гораздо больше). Остальным, у кого со зрением все в порядке, все равно придется напрячься, чтобы прочитать текст меньше 16 px. Даже если пользователи не замечают, что напрягают глаза, то, на самом деле, всё равно это делают. Чем труднее читать текст, тем меньше вероятность, что он будет прочитан. Это значит, что пользователь прочтет меньше информации, чем ему было нужно, а, следовательно, меньше поймет. Использование 10 px на сайте — совершенно бессмысленно, а 12 px — все еще слишком мелко для большинства читателей.
Но возникает вопрос, ведь пользователи могут увеличить текст на том же десктопе при помощи клавиш на клавиатуре.
Но опять же статистика говорит о том, что как раз те пользователи, которым это увеличение действительно необходимо, просто не знают об этой возможности и функции, либо просто не захотят этого делать, им проще уйти с сайта, чем продолжать дальше напрягать свои глаза. В итоге получается, что из-за размера шрифта бизнес может потерять потенциальных клиентов, а, следовательно, и деньги.
Так же необходимо учитывать особенности шрифта, используемого в проекте. Например, шрифты семейства Futura меньше по размеру шрифтов семейства Helvetica примерно на 10-15% при выставлении одинакового размера у обоих.
Ссылка на статью Smashing magazine: https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/
Примеры удобного для чтения размера шрифта
Что на счёт заголовков?
Нет универсального рецепта для выявления оптимального размера основного заголовка. Дизайн сайта, а, следовательно, и размер зависит от решаемой задачи.
Главное правило любого заголовка – он должен быть заметен. Заголовок, как правило, несет в себе конкретный смысловой тезис, и дизайнер может его сделать сверхконтрастным по отношению к тексту, чтобы усилить посыл. Либо использовать данный метод, как дизайнерский приём. Данный прием используется для написания коротких заголовков.
Пример сайта с контрастным заголовком
Этот прием в основном касается заголовка h2.
Статистика показывает, что наиболее популярные размеры шрифта для заголовков — в диапазоне от 18 до 29 px.
Конкретнее в цифрах
Общие значения
Ниже приведены некоторые значения, основанные на анализе ресурсов и статей на тему размеров шрифтов.
— Чаще всего для основного текста используются кегли от 14 до 18 px.
— Чтобы получить оптимальный размер заголовка, нужно размер основного текста умножить на 2-2,5.
— Для того, чтобы узнать оптимальный интерлиньяж (межстрочное расстояние), нужно размер шрифта умножить на 1,48.
— Отступы между абзацами примерно в 1.
39 раза больше, чем интерлиньяж внутри абзацев.
— Размер строки 100 символов при размере контентной области в 1070 px.
Используя шрифтовые значения, нужно обязательно учитывать особенности шрифта и задачу проекта, не полагаясь слепо на цифры. Один из главных советов — это включение внутреннего чутья. Порой строит абстрагироваться от «красоты» макета и проанализировать текст с точки зрения удобочитаемости.
Адаптивная верстка
Все современные сайты являются адаптивными. Сайты создаются с расчетом отображения сайта на нескольких разрешениях экрана. При уменьшении разрешения происходит «скачок» от одной композиции экрана к другой (брейкпоинт). Стили шрифта с каждым последующим брейкпоинтом меняются. Отсюда возникает проблема пропорций шрифта. Если на десктопной версии размер шрифта 20 рх, а интерлиньяж 28 рх, то на мобильном устройстве размер шрифта ставится, например, 14 рх, а интерлиньяж может быть и 16 рх, и 20 рх. В таких случаях, дизайнер должен сидеть и высчитывать значения на калькуляторе…или воспользоваться скейтлингом шрифтов и упростить себе жизнь https://readymag.
com/kelnik/960360/
Скрипт от дизайн-бюро «Дизайн Кабак» designpub.ru помогает вычислять соотношения размера шрифта и интерлиньяжа. С этим инструментом ясно, что десктопный параграф размером 20/28 px на мобильном устройстве будет 14/20 px.
Заключение
Удобство сайта заключается не только в понятном интерфейсе и стильном дизайне, но и в удобочитаемости текста. Сайт с удобочитаемым текстом на голову опережает сайт конкурентов. Правильно подобранные шрифты и размер на сайте – это качество, которое человек, заходя на ваш сайт, может и не заметит, но обязательно почувствует.
Лучший шрифт для веб-сайта: Как сделать свой бренд популярным
Ник Аллен | 28 июля 2022 г.
Чтение на 8 мин.
Создание веб-сайта для вашего нового предприятия — это прекрасная возможность воплотить свою мечту в жизнь. Возможно, вы уже много думали о выборе и использовании фирменных цветов , или уже знакомы с дизайном логотипа.
Но есть пара деталей, которые можно было бы упустить, например, выбор шрифта. Вы знаете тон голоса и индивидуальность своего бренда, но выбор правильного шрифта для вашего веб-сайта помогает передать целостный образ так же, как использование цвета или слогана.
Попробуйте Site Maker бесплатно
На выбор предлагаются буквально тысячи шрифтов, и многие из них бесплатны. Тем не менее, с таким количеством доступных вариантов, как вы ориентируетесь в водах типографики? Как сохранить разборчивость и характер? К счастью, у нас есть то, что поможет вам выбрать правильный шрифт. Ознакомьтесь с этой разбивкой лучших шрифтов для веб-сайтов на основе ваших потребностей в брендинге и дизайнерских желаний.
12 лучших шрифтов для веб-сайтов
Чтобы считать шрифт лучшим шрифтом или одним из лучших, необходимо учитывать несколько факторов. Хотя личные предпочтения и узнаваемость бренда являются решающими факторами, шрифт должен быть читабельным. В частности, шрифт веб-сайта должен быть четким и чистым, потому что основная цель вашего сайта — донести информацию до ваших зрителей.
Поэтому все 12 примеров в нашем руководстве легко понять, поэтому вы можете сосредоточиться на распространении своего сообщения.
1: Montserrat
Google Fonts
Montserrat – популярный шрифт для создания веб-сайтов благодаря своему смелому и откровенному виду. Современность этого шрифта без засечек отлично подходит для всего: от привлекательных заголовков до мелкого текста. Благодаря обновлению, выпущенному летом 2017 года, корректировка веса делает варианты Montserrat Regular идеальными для более длинных текстов, таких как основной текст. Для брендов или личных веб-сайтов, предназначенных для провидцев в творческой сфере, Montserrat делает свое дело. Он молодой, свежий и инновационный.
2: Roboto
Google Fonts
Универсальность, присущая Roboto, делает его визуально привлекательным шрифтом, который лучше всего подходит для дизайна веб-сайтов или любого другого проекта, где вы хотите произвести впечатление доступного и профессионального.
Он стал довольно модным, и легко понять, почему, благодаря его геометрической, но открытой форме кривой. И независимо от его готического происхождения, он не имеет суженных, узких форм, как его предшественники, занимая необходимое пространство для улучшения читаемости, сохраняя при этом свой отличительный стиль.
3: Open Sans
Google Fonts
Скорее всего, вы слышали об этом. Open Sans не требует представления, потому что это один из самых известных шрифтов без засечек. Он излучает характер и теплоту, отдавая предпочтение удобочитаемости, поэтому понятно, почему бренды отдают предпочтение его надежной библиотеке шрифтов. Он идеально подходит для сайта бренда в сфере здравоохранения или гостиничного бизнеса, потому что продвигает честность и хорошие ценности — сильный моральный компас, которому люди могут доверять.
4: Поппинс
Google Fonts
В геометрическом стиле без засечек Poppins нет ничего нового, но это альтернатива тому жанру, на который стоит обратить внимание благодаря своим закругленным буквам и универсальности.
Он мягкий, но доминирующий. Это просто для расшифровки, а также визуально динамичный выбор для различных копий веб-сайтов. И в результате его можно использовать для множества сайтов.
5: Arsenal
Google Fonts
Получив признание в 2011 году на Всеукраинском конкурсе шрифтов, Arsenal отлично подходит для основного текста и передачи профессиональной информации. Многие шрифты предпочитают заголовки и крупный текст на экране, но Arsenal понимает тонкости контраста, элегантности и индивидуальности, которые делают типографику привлекательной.
6: Merriweather
Google Fonts
Merriweather напоминает Times New Roman — выдающегося пожилого джентльмена из мира типографики, которого мы знаем и любим. Тем не менее, Merriweather немного более расслаблен, что делает его идеальным современным шрифтом для веб-сайтов с большим количеством основного текста. Если вы хотите создать блог или иметь раздел своего сайта, посвященный статьям и размышлениям, то этот прочный шрифт с засечками с его потрясающей приятностью сослужит вам хорошую службу.
7: Monolith
Envato Elements
В семействе шрифтов без засечек Monolith гордится своей четкостью. Поэтому он отлично подходит для печати и чтения в Интернете. Кроме того, он обладает настоящим подходящим курсивом, поэтому любой акцент на печатном тексте выглядит как дома. Это фантастическая альтернатива Open Sans, если вы ищете любимое дружелюбие с изюминкой. Современный и элегантный, этот шрифт подходит для заголовков, подзаголовков и основного текста.
8: Либре Франклин
Google Fonts
Libre Franklin — альтернатива Franklin Gothic. Это дань уважения этому шрифту 1912 года, развитие его блеска и перенос его в 21-й век. Новая версия, созданная литейным заводом шрифтов в Аргентине, включает девять весов шрифта. Этот шрифт гарантированно сделает заявление в заголовках или баннерной рекламе, разбросанной по главной странице вашего сайта.
9: Metropolis
Github
Альтернатива модному Proxima Nova, Metropolis имеет девять начертаний и курсив, и это идеальная копия для своего вдохновения.
Бесплатный шрифт структурирован, динамичен и четок, поэтому вы можете легко использовать его в своем веб-сайте, не беспокоясь о читаемости. Он хорошо подойдет для любого бренда из-за простоты, которая делает его дизайнерским хамелеоном, поддающимся окружающей среде, в которой он обитает.
10: Pulse
Envato Elements
Минималистичный классический шрифт Pulse — высококачественная альтернатива Монтсеррату. У него есть только чутье, поэтому он может легко перемещаться между заголовками и основным текстом на веб-сайтах — отличительная черта лучших шрифтов для гибкости веб-сайта. Популярность ярких, но простых шрифтов без засечек проистекает из их простой эстетики с нужной долей элегантности, которая обеспечивает профессионализм и уравновешенность.
11: Нанум Готика
Google Fonts
Оптимальный для использования на экране, Nanum Gothic обладает теплотой и доступностью, которые радуют случайных пользователей, ищущих информацию с первого взгляда.
Шрифт Nanum Gothic, который подходит для разных размеров и языков, силен и надежен. Но не сбрасывайте со счетов его визуальную привлекательность, в которой реализованы современные типографские элементы, обеспечивающие как форму, так и функцию.
12: Enriqueta
Font Squirrel
Бесплатный дубликат Rockwell, популярного шрифта с засечками. Enriqueta имеет изогнутые буквы и штрихи, характерные для шрифтов с засечками. В этом шрифте буквы немного ближе друг к другу, поэтому рассмотрите возможность использования их в более крупном тексте. Это делает эффектный заголовок или рекламный баннер, когда вам нужно сказать что-то важное и декларативное своим зрителям. Используйте шрифт экономно, и пусть последние штрихи на буквенных формах ослепят зрителей, когда вы удивите их своим остроумием.
Другие соображения по выбору шрифта для вашего веб-сайта
Лучший шрифт для вашего веб-сайта зависит от вашего усмотрения. Вы были свидетелями того, как несколько лучших претендентов выставляли напоказ свои вещи, и у вас может сформироваться четкое представление о том, что делает шрифт хорошим для посетителей вашего сайта.
Но давайте остановимся на некоторых ключевых факторах, которые следует учитывать при выборе шрифта для вашего веб-сайта. Эти советы помогут вам в поиске идеального шрифта, который поможет вывести ваш бренд на новый уровень.
- Ваш бренд. В конечном счете, шрифт должен отражать ваш бренд, ваше руководство по стилю и запоминающуюся визуальную идентичность, которую вы довели до совершенства. Лирический или выдающийся шрифт может быть хорошим предзнаменованием в литературном секторе Интернета. Тем не менее, для бренда, подчеркивающего свою узнаваемость и солидный образ, более теплый и округлый шрифт является лучшим вариантом.
- Без засечек и без засечек. С засечками или без? Вот в чем вопрос. В Интернете благороднее заканчивать письмо декоративным украшением или отдавать предпочтение чистым, четким краям резкого окончания, мы никогда не узнаем по-настоящему. И все же стиль без засечек становится все более популярным среди брендов, которые хотят, чтобы их веб-сайты были легко читаемы для всех посетителей.
Шрифт с засечками по-прежнему удобочитаем, но он более классический и традиционный, тогда как шрифты без засечек выглядят современно и свежо. Опять же, выбор за вами — подумайте об идентичности вашего бренда и его удобочитаемости в равной мере.
- Изменчивость. Когда шрифт является переменным, он допускает изменение веса и ширины шрифтов. Это важно учитывать при выборе шрифта, потому что для заголовка могут потребоваться буквы большего веса, в то время как основной текст может иметь обычный или более легкий оттенок. Шрифт с вариативностью выглядит правильно для всех начертаний, размеров и заголовков.
Какой шрифт лучше всего подходит для вашего сайта?
Типографика — это искусство, и выбор правильного шрифта требует глубокого понимания потребностей вашего бренда и веб-сайта. Это еще одна форма выражения, которая может помочь вашим зрителям понять миссию бренда — личную или профессиональную. Это еще один идентификатор, который демонстрирует вашу индивидуальность.
Вы старомодны и серьезны, как Times New Roman, или хотите встряхнуть прошлое современным взглядом, достойным аплодисментов?
К счастью, с генератором бесплатных шрифтов Namecheap у вас будет место, где можно найти лучшие шрифты, достойные любой формы выражения. Здесь у вас будет возможность создавать привлекательный, разборчивый текст, который работает на множестве платформ, таких как социальные сети, личные веб-сайты и многое другое. Плата или вход в систему не требуются — просто введите стиль, скопируйте и вставьте! Чтобы получить еще больше возможностей, ознакомьтесь с партнерским генератором шрифтов Namecheap на Qwerty. Точно так же, если вы хотите создать веб-сайт с нуля, конструктор сайтов Namecheap предлагает простой и доступный вариант.
12 веб-сайтов для загрузки шрифтов в 2023 году
Типографика играет важную роль в веб-дизайне, и правильные комбинации шрифтов могут значительно улучшить вашу работу. Однако поиск оптимальных шрифтов для ваших проектов может быть сложной задачей.
Вы можете случайно наткнуться на понравившиеся шрифты, читая онлайн-журнал или просматривая веб-постер. Но даже после того, как вы определите шрифт, вам может быть трудно понять, откуда его скачать, ведь вокруг так много типографских сайтов. И поскольку типографика является важным элементом дизайна, это не только вопрос предпочтений, очень важно сделать это правильно.
Чтобы избавить вас от необходимости просматривать бесчисленные веб-страницы, мы составили список из 12 веб-сайтов с высококачественными шрифтами, которые вы можете использовать для личных и коммерческих проектов.
Google Fonts
Google Fonts является одним из самых популярных и наиболее часто используемых шрифтовых ресурсов в мире . Это библиотека с открытым исходным кодом с впечатляющим каталогом из 980 шрифтов, которые можно использовать на 135 языках. И вы можете получить их все бесплатно и создать потрясающие комбинации шрифтов Google для своего сайта.
Чтобы найти шрифт по своему вкусу, используйте функцию поиска в верхнем левом углу страницы. Существует также несколько категорий на выбор, например с засечками, без засечек, рукописный ввод и т. д. Вы также можете активировать дополнительные параметры поиска, такие как язык , а также свойства шрифта (толщина шрифта, ширина). Также можно просмотреть, как ваш контент будет выглядеть, написанный несколькими разными шрифтами. Превью отображаются на экране. Введите буквы алфавита, предложения, абзацы, цифры и собственный контент.
При наведении указателя мыши на определенный шрифт вы увидите, что можете изменить толщину шрифта и размер шрифта просматриваемого содержимого. Существует также возможность сортировки шрифтов по Популярные сейчас , Самые популярные, Новые и по имени .
Чтобы выбрать семейство шрифтов, щелкните значок + в правом верхнем углу рядом с названием шрифта.
Когда вы откроете окно Selected Font Family (в правом нижнем углу экрана), вы заметите, что есть код, который вы можете использовать для встраивания шрифта в свою веб-страницу, а также код, который нужно указать в вашем CSS. Также есть возможность изменить вес шрифта, а также выбрать один из нескольких языков в зависимости от шрифта. Например, если вы выберете Open Sans, вы сможете выбирать между кириллицей, греческим, латинским и вьетнамским языками.
Google Fonts также позволяет выбирать между светлым и темным фоном, а также просматривать шрифты в виде списка или сетки.
Font Squirrel
Font Squirrel — отличный сайт для поиска бесплатных шрифтов, готовых к коммерческому использованию .
Под названием каждого шрифта вы увидите несколько символов.
Значок компьютера означает коммерческое использование рабочего стола (для коммерческой графики и документов). Значок в форме земного шара предназначен для встраивания шрифта в ваш веб-сайт с помощью CSS.
Тот, что выглядит как Kindle, предназначен для встраивания шрифтов в электронные книги и портативные документы. А тот, что выглядит как телефон, предназначен для встраивания шрифтов в приложения и программы.
Если значок темный, это означает, что вы можете использовать шрифт, а если он светлый, то коммерческое использование шрифта является незаконным.
Несмотря на то, что все шрифты на Font Squirrel бесплатны, в своих часто задаваемых вопросах авторы предлагают вам внимательно прочитать лицензию для каждого шрифта , просто на всякий случай.
Просматривайте коллекцию шрифтов по имени, по тегам, лицензиям, размеру, языку и т. д. Вы также можете выполнять поиск по недавно добавленным, самым популярным, горячим сегодня, популярным веб-шрифтам и Почти бесплатные категории .
Некоторые из этих шрифтов можно загрузить напрямую с Font Squirrel, в то время как в случае некоторых других шрифтов вы можете быть перенаправлены на другие веб-сайты.
Что действительно круто в Font Squirrel, так это их Идентификатор шрифта . Когда вы увидите изображение с понравившимся вам шрифтом где-то в Интернете, загрузите это изображение в идентификатор, и он попытается сопоставить шрифт с доступным на Font Squirrel.
Fontspace
Просмотрите огромный ассортимент шрифтов на Fontspace и найдите идеальный шрифт для своего следующего проекта.
На данный момент Fontspace предлагает из более чем 64 тысяч бесплатных шрифтов на выбор, и все они имеют юридическую лицензию . Существует множество тегов шрифтов, которые вы можете просмотреть, чтобы найти шрифт, который лучше всего соответствует вашим требованиям. Кроме того, вы также можете просто просмотреть Популярные и Новые категории или прыгнуть в неизвестность, просмотрев Случайный выбор табл.
Некоторые шрифты предназначены только для личного использования, но если вы отметите Только 100% бесплатные шрифты , Fontspace покажет вам шрифты, которые вы можете использовать для всех типов проектов.
Также можно просмотреть содержимое, просто введя слова, символы или цифры в специальное поле. Размер каждого шрифта можно изменить прямо на месте, как и цвет его фона.
Нажав на название шрифта, вы можете прочитать дополнительную информацию о нем или оставить комментарий автору (для этого вам необходимо создать учетную запись).
Чтобы загрузить шрифт, вам даже не нужно нажимать на него и не нужно регистрироваться на сайте. Просто нажмите значок в виде облака со стрелкой вниз, и загрузка начнется сразу.
Befonts
Еще один отличный источник шрифтов для всех креативщиков — Befonts. Он содержит множество шрифтов, некоторые из которых бесплатны для личного использования, а другие также бесплатны для коммерческого использования.
Нажав на семейство шрифтов, вы сможете проверить формат шрифта и лицензию. Опция предварительного просмотра также доступна. Что здесь выделяется, так это изображений, показывающих выбранное семейство шрифтов в действии , поэтому вы можете легко представить, для какого проекта вы могли бы использовать этот шрифт.
Также есть кнопка Проверить еще , которая ведет на сайт автора или на исходный веб-сайт, где можно найти еще больше информации о шрифте.
В правом верхнем углу страницы вы найдете несколько категорий на выбор: «Основные», «Экран», «Сценарий» и «Разное» , каждая из которых содержит несколько подкатегорий. Также включен просмотр шрифтов по ключевому слову.
DaFont
DaFont — отличный источник шрифтов, доступный на 6 языках.
Платформа имеет впечатляющую систему категорий с множеством категорий шрифтов на выбор . Это важная функция для всех дизайнеров, так как облегчает процесс поиска подходящего шрифта для конкретного типа проекта .
Вы можете просматривать шрифты по алфавитному порядку, темам, авторам, странам, из которых они получены, и т. д. При выборе категории можно дополнительно сортировать шрифты по различным критериям, таким как популярность, имя или список последних шрифтов.
дополнения в первую очередь. Нажав на Дополнительные параметры в фильтре вы можете указать только 100% бесплатные шрифты, те, которые бесплатны для личного использования и т. д.
Конечно, можно просмотреть любое слово по вашему выбору и настроить размер шрифта. Чтобы загрузить шрифт, нажмите кнопку Download . Шрифты поставляются упакованными в виде файлов .ZIP, и для их получения вам даже не нужно регистрироваться на сайте.
Лучшие темы WordPress для всех креативщиков
Посмотреть коллекцию
Manon
Тема портфеля и агентства
Cinerama
Тема для киностудий и режиссеров
Amedeo
Multi-Concept Artist and Creative Agency Theam целая куча категорий шрифтов для изучения. категории перечислены слева, а превью шрифтов занимают центральную часть экрана.
При выборе категории шрифтов вы можете упорядочить шрифты по имени, последним добавленным или самым загруженным.
Выбрав определенный шрифт, вы получите больше информации о нем, а также сможете предварительно просмотреть содержимое с использованием этого шрифта. Существуют также всевозможные предварительные просмотры изображений, показывающие, как выглядит выбранный шрифт в различных творческих сценариях.
FFonts также имеет Font Finder , который поможет вам найти шрифт на любом изображении. Как и в случае с Font Squirrel, все, что вам нужно сделать, это загрузить изображение, содержащее шрифт, и FFonts поможет вам его идентифицировать.
Бесплатные рукописные шрифты
Если вам нужны рукописные шрифты , веб-сайт бесплатных рукописных шрифтов — отличное решение .
Большинство шрифтов бесплатны только для личного использования и могут быть загружены через Dropbox. Чтобы использовать их в коммерческих целях и получить полную версию любого шрифта, вам придется заплатить сумму, определенную автором шрифта.
Шрифты разделены на 8 категорий — Жирный, Демонстрационный, Необычный, Женский, Сердце, Логотип, Детский и Свадебный шрифт . Есть также несколько меток (расположенных в верхней части экрана), которые вы можете просматривать в поисках шрифта по своему вкусу (еще больше меток становится видимым после выбора шрифта). Вы также можете просматривать шрифты, используя определенное ключевое слово, в зависимости от типа проекта, над которым вы работаете.
На этом веб-сайте также представлены Ресурсы Adobe XD , и большинство наборов пользовательского интерфейса и значков можно загрузить бесплатно.
FontsArena
На веб-сайте FontsArena представлено множество великолепных шрифтов. Некоторые из них доступны только для личного использования, а другие также для коммерческих целей.
Как и на ранее перечисленных веб-сайтах, вы можете искать шрифт по ключевому слову или по категории. Некоторые из доступных категорий включают в себя — Best, Variable, Sans, Serif и т.
д. Вы можете предварительно просмотреть любое понравившееся слово перед покупкой шрифта. Все шрифты снабжены описаниями, где вы также можете проверить лицензию на шрифт, какие языки поддерживает выбранный шрифт и т. д.
На FontsArena есть не только шрифты. Вы также можете читать статьи на темы, связанные со шрифтами, и узнавать последние новости о шрифтах.
Pinspiry Fonts
Pinspiry Fonts поставляется с обширным каталогом шрифтов с засечками, без засечек, плоских, рукописных и экранных шрифтов, которые можно загрузить бесплатно.
Следите за вкладкой Weekly Freebies , на которой представлены коммерческие шрифты, которые вы можете получить бесплатно, но только в течение этой одной недели . Если вам нужно вдохновение, загляните на вкладку «Вдохновение», где собраны интересные коллекции шрифтов, например, T he 10 Best Free Vintage Script Fonts 2019 года. и подобные коллекции.
Когда вы увидите понравившееся семейство шрифтов, нажмите на него, чтобы увидеть его в действии и проверить, какую ценность он может добавить вашему дизайну.
Помимо шрифтов, этот веб-сайт предлагает другие бесплатные ресурсы для дизайна, такие как шаблоны, макеты, графика, фотографии и т. д. 1001 Free Fonts предлагает гораздо больше бесплатных шрифтов. На самом деле, существует более 2300 страниц, заполненных любым типом шрифта, который только можно придумать .
Вы можете ввести свой текст вверху, настроить размер и цвет шрифта, а затем прокрутить страницу вниз, чтобы увидеть, как содержимое будет выглядеть с каждым шрифтом.
Чтобы найти конкретный шрифт, используйте функцию поиска. Кроме того, можно просмотреть шрифты New и Top, просмотреть их в алфавитном порядке или просмотреть несколько доступных категорий шрифтов.
Большинство шрифтов на веб-сайте бесплатны, но некоторые бесплатны только для личного использования, поэтому, если вы хотите использовать их в коммерческих проектах, вам придется купить коммерческую лицензию.
Unblast
Unblast предлагает завораживающий выбор дизайнерских ресурсов, таких как макеты, значки, векторы и, конечно же, шрифты.
Доступны как бесплатные, так и премиальные шрифты, разделенные на несколько категорий: с засечками, без засечек, акцидентный, рукописный, сжатый, винтажный и другие.
Панель поиска расположена в верхней части страницы, поэтому вы можете искать шрифт по определенному ключевому слову. Другие ресурсы дизайна также появятся в результатах. Чтобы найти шрифты, соответствующие вашему ключевому слову, найдите значок Fn под изображением.
Несмотря на то, что вы не можете просмотреть свой контент с использованием определенного шрифта, есть предварительный просмотр изображений, которые показывают, как выглядит каждый рекомендуемый шрифт при применении.
Абстрактные шрифты
И последнее, но не менее важное: Абстрактные шрифты — еще один большой источник отличных бесплатных шрифтов.
Шрифты организованы в 62 категории, , но есть и такие, которые не разделены по категориям, так что обязательно ознакомьтесь с ними. Просматривайте шрифты в алфавитном порядке, проверяйте новые и популярные теги или ищите шрифты по их дизайнеру. Конечно, если вы знаете, что ищете, воспользуйтесь поиском. В верхней части страницы также есть пользовательский параметр предварительного просмотра.
Некоторые шрифты бесплатны для личного использования, другие — для личного и коммерческого использования. Это выделено под названием каждого шрифта, поэтому обратите на это внимание, прежде чем загружать какие-либо шрифты.
Final Words
Независимо от того, какой из этих 12 веб-сайтов вы посещаете, вы точно не уйдете с пустыми руками. Если вы ищете шрифты для личного или коммерческого использования, это, безусловно, самые надежные места, где можно найти то, что вам нужно.
И помните. Вам не нужно всегда использовать стандартные, чрезмерно используемые шрифты.
