Топ шрифтов для сайта: 20 Лучших веб-шрифтов от Google Web

Лучшие шрифты для вашего сайта

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

У вас уже есть готовый дизайн сайта с контент-планом и графическим дизайном? Идеально! Но разве это все? Вы должны помнить еще об одном важном элементе — шрифты! При создании сайта всегда возникает вопрос: какой шрифт выбрать? Если вы не уверены, какой шрифт больше подходит для вашего сайта — декоративный или обычный — не волнуйтесь! В BOWWE мы поможем вам выбрать шрифт, идеально соответствующий потребностям вашего бренда. В этой статье мы подготовили коллекцию самых интересных шрифтов из разных категорий. Познакомьтесь с лучшими шрифтами для вашей отрасли и используйте их на своем веб-сайте!

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

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

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

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

• Garamond,
• Georgia,
• Palatino,

Стоит отметить, что шрифты с засечками — наименее используемый тип шрифта в Интернете. Подавляющее большинство текстов, перенаправляемых к нам поисковыми системами, будут содержать шрифты без засечек. Почему это происходит? Шрифты с засечками часто считаются слишком серьезными. Более того, они затрудняют чтение более длинных текстов, особенно тех, которые мы читаем на экране, поэтому шрифты без засечек чаще выбираются в Интернете. В Интернете шрифты с засечками чаще всего используются на веб-сайтах, которые придают большое значение традициям и делают акцент на формальном изображении. Отличный пример — сайт известной New York Times . Здесь шрифт с засечками отражает характер печатной газеты.

Шрифты без засечек — это буквы без так называемых засечeк или крошечные выступающие линии на концах букв, которые являются орнаментом. Они не имеют декоративных акцентов и отличаются более геометрическими формами. Благодаря этому они выглядят современно. Они являются идеальным выбором для инновационных и современный компаний. Именно эти шрифты чаще всего используются в Интернете. Если вы считаете, что шрифты без засечек слишком сильны по своей природе, вы можете выбрать более мягкие версии с закругленными концами. Самые популярные шрифты без засечек:

• Helvetica,
• Tahoma,
• Trebuchet MS
• Verdana

Письменные и декоративные шрифты — отличаются тонкой линией и часто сложной формой. С помощью декоративных шрифтов вы действительно сможете выделиться и выразить свой уникальный характер — ваш или вашей фирмы. Есть два основных типа декоративных шрифтов:

• Шрифты «Slab Serif» (так называемые египетские или квадратные засечки) — содержат египетские засечки (то есть засечки в конце букв), которые создают оптически тяжелый, но выразительный стиль. Этот характерный декоративный шрифт сочетает в себе черты шрифтов с засечками и без засечек и определенно выделит вас. Пример так называемого Египетские шрифты — Century Extended или Rockwell .

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

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

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

• Если вы являетесь владельцем стартапа или технологической компании, выберите современный и прозрачный шрифт (например, Open Sans) или выберите футуристический шрифт (например, Roboto). А если вы хотите разместить фрагмент кода на своем веб-сайте, вы можете использовать шрифт Fira Mono.
• Если ваша целевая группа — более молодая аудитория, выберите, например, комбинацию шрифтов Karl с Merriweather. Они радуют глаз и облегчают чтение даже небольшого текста. Они точно не будут утомлять читателя и даже побудят его ознакомиться с вашим предложением.
• Если вы, например, управляете юридической фирмой, лучшим шрифтом будет именно тот, вызывающий доверие и отражающий серьезный тон вашей компании. Попробуйте достойные и элегантные шрифты Neuton.

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

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

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

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

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

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

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

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

• Характер: без засечек
• Стиль: имитирует рукописную подпись, стильный, очень характерный
• Применение: логотипы, графика, подписи, портфолио
• Предлагаемые отрасли: мода, фотография, искусство, креатив, дизайн.
• Совет: используйте подпись с помощью The Styled Edit вместо логотипа — благодаря этой процедуре вы придадите своему сайту оригинальное авторское выражение.

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

• Характер: сценарный
• Стиль: эффект письма кистью, имитирующий почерк, стильный
• Применение: блог, логотип, меню ресторана, фото / графика / оверлеи
• Предлагаемые отрасли: путешествия, туризм, кейтеринг, фотография, свадьба.
• Совет: Bahamas Brush, используемая в заголовках, добавит вашему тексту уникального стиля.

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

• Характер: сценарный
• Стиль: ручная роспись, декоративный, причудливый
• Применение: заголовки, фотографии, графика, социальные сети
• Предлагаемые отрасли: искусство, мода, свадьба, реклама, маркетинг, фотография.
• Совет: Little Wonder — жирный шрифт, поэтому не стесняйтесь использовать его для заголовков на своем веб-сайте.

Little Wonder — это нарисованный вручную шрифт, преобразованный в цифровой шрифт. Это необычный шрифт, который придаст каждой странице сказочную атмосферу.

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

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

• Характер: сценарный
• Стиль: рисованной, школа, милый, уникальный, хаотичный
• Применение: заголовки, логотипы, подписи, блог, графика, социальные сети, дизайн упаковки, этикетки.
• Предлагаемые отрасли: дети, образование, развлечения, мероприятия
• Совет: если вы проводите образовательное или развлекательное мероприятие, Little Day — хороший выбор.

Это очень милый, слегка хаотичный рукописный шрифт. Little Day — это нарисованный вручную шрифт, имитирующий неуклюжее детское письмо, поэтому он найдет свое применение во всех видах детских проектов.

ТОП-3 моих любимых шрифта, которые я использую для веб-дизайна | Обучение веб-дизайну

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

Каким-то 6-м чувством вы догадываетесь, что стандартные шрифты — немного не то, что нужно…И вы правы: стандартные шрифты в дизайне сайта — это скучно.

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

1. В Google Fonts нет некачественных шрифтов
2. Такие шрифты легко подключаются при верстке и с ними нет никаких проблем в отображении на разных браузерах.

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

1. PT Sans

Шрифт, который идеально подходит для основного текста размером 18-22 pt. Он отлично контрастирует с более изощренными шрифтами заголовков, например с Lobster, Roboto Condenced и тонким Open Sans Light. Пожалуй, мой самый любимый и самый первый шрифт.

2. Roboto

Этот шрифт я полюбила не сразу, но затем я оценила его прелесть в заголовках. Особенно состояние Condenced (сжатый) Bold. Люблю писать им заголовки, делая все буквы заглавными. С PT Sans, например, отлично сочетается. А еще круче, если взять Roboto Slab (брусковый шрифт, с засечками). Как и все шрифты из одного семейства одно из лучших сочетаний шрифтов — использование одного и того же шрифта, но с засечками и без.

3. Open Sans

Люблю его в первую очередь за то, что у него много интересных начертаний. Он может быть как и сжатым (Condenced) по примеру Roboto, так и тонким (Thin, Light), ну и конечно обычным (Regular) и жирным (Bold). Как его можно интересно применить? Возьмите сделайте крупный заголовок тонким Open Sans (36 pt), а основной текст под ним — мелким (18-20 pt) PT Sans или этим же Open Sans Regular. Уверена, вам понравится. Кстати, очень свежо и по-современному выглядит, и это то, что вам нужно, если вы ищите шрифты для flat дизайна.

Заключение

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

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

— с любовью,
Юлия

10 лучших бесплатных кириллических шрифтов с Google Fonts | GeekBrains

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

https://d2xzmw6cctk25h.cloudfront.net/post/2245/og_image/8a84cd2bb41242e077ef7e2a0ee0451b.png

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

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

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

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

О лицензии шрифтов Google Fonts

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

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

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

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

С лицензиями разобрались — переходим к подборке. 

Rubik

Rubik — это представитель семейства шрифтов без засечек со слегка закруглёнными углами. Его разработали дизайнеры Филипп Хьюберт и Себастьян Фишер. 

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

Примеры использования: dinoballiana.com, moeamaya.com, genesisblockchain.io.

Cormorant

Cormorant — это изящный шрифт с засечками, созданный Кристианом Талманном. Включает пять классических начертаний (Light, Regular, Medium, SemiBold, Bold) и большое количество символов. Посмотрите проект на Behance, чтобы детально изучить его. 

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

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

Примеры использования: sasha-ng.com, readwildness.com/eco, katescott.co/sparhawk.

Alegreya Sans

Alegreya Sans — это рубленый шрифт (без засечек), разработанный аргентинским дизайнером Хуаном Пабло дель Пералом. Представлен в семи начертаниях, в том числе в Italic.

Его рекомендуют для наборного текста или для небольших заголовков в начертании Bold. Alegreya Sans минималистичен и отличается необычными пропорциями, поэтому непрост в работе. Но он сильно недооценён на просторах Google Fonts и поэтому будет выглядеть оригинально.

Примеры использования: cafefrida.ca, shinbyeong.com.

Source Sans Pro

Source Sans Pro — это первый бесплатный шрифт Adobe. Разработан Полом Д. Хантом. Без засечек, предназначен для работы в пользовательских интерфейсах. У дизайна Source Sans Pro классический готический характер, который легко воспринимается зрительно.

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

Примеры: whitehouse.gov, owlstudios.co, abyssale.com.

Playfair Display

Playfair Display — один из самых известных шрифтов с засечками. Автор — Клаус Эггерс Соренсен. Идеология этого шрифта основана на изящных каллиграфических формах 18 века. Разработан в 2011 году, но до сих пор не теряет популярности. Контрастный и умеренно широкий, он идеально подходит для любых заголовков.

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

Примеры использования: zack.es, sachatourtoulou.com, councl.com.

Montserrat

Montserrat — это один из шрифтов, наиболее удобных для чтения. Без засечек, созданный Джульеттой Улановски в 1989 году — с тех пор невероятно распространённый. В Montserrat есть все варианты начертаний: от ультратонкого до жирного, — а также соответствующие курсивы.

У этого шрифта примерно одинаковое соотношение ширины и высоты, поэтому он удобен практически для всех типов проектов. За исключением, пожалуй, только интерфейсов и мобильных приложений. С 2019 года, когда в моду вошли широкие шрифты для заголовков (например, Druk Wide), Montserrat переживает новую волну популярности.

Примеры: welcometonext.com, melonfashion.ru, userflower.com.

Merriweather

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

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

Примеры: hopesandfears.com, interactive.unwomen.org, scmp.com.

Open Sans

Open Sans — пожалуй, самый известный шрифт без засечек, представленный на платформе Google Fonts. Разработан Стивом Маттесоном, директором шрифтов Ascender Corp. Open Sans стал хитом во всех областях дизайна: от печатных материалов до мобильных приложений.

Секрет его успеха очевиден уже по названию: это открытый, нейтральный и дружелюбный шрифт. Его главные плюсы — разборчивость и универсальность. А он ещё и бесплатный 🙂

Примеры: noiz.io, cordial.com, designthingy.co.

IBM Plex Sans

IBM Plex Sans — это нейтральный, но в то же время дружественный шрифт в стиле гротеск. Включает Sans, Sans Condensed, Mono и Serif. Остаётся разборчивым в печатных, мобильных и веб-интерфейсах.

В этом шрифте удачно сочетаются геометричность форм и мягкость изгибов — и это придаёт ему характер, сохраняя универсальность. Используйте его для проектов, связанных с IT, а также в интерфейсах и мобильных приложениях. Кстати, IBM Plex Sans — на данный момент основной шрифт GeekBrains.

Примеры: coolstuff.nyc, jasperterra.nl, niteeshyadav.com

Raleway

Raleway — это элегантный шрифт без засечек, предназначенный для заголовков и других текстов с большим кеглем. Первоначально его разработал Мэтт Макинерни только в тонком весе, а в 2012 году Пабло Импаллари и Родриго Фуэнзалида расширили его в семейство из девяти начертаний.

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

Примеры: weddingdronenewyork.com, bellevoye.fr/en, gdovindesigns.com/owed

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

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

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

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

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

Типы шрифтов

Шрифты делятся на два типа: с засечками и без них. Шрифты с засечками (например, Times New Roman) рекомендуется использовать в тех случаях, когда необходимо вызвать у читателя эмоции. Психологи объясняют это тем, что шрифты с засечками напоминают нашему сознанию рукописный или напечатанный на машинке текст. Такой шрифт интереснее читать. Засечки позволяют взгляду цепляться за буквы, в результате прочтение текста с засечками занимает меньше времени, чем текста без засечек.

Шрифты без засечек (Arial) применяются в строгой деловой переписке или правительственных отчетах. Это сухой официальный тип шрифта. Его не рекомендуется использовать на развлекательных порталах. Однако шрифт без засечек более понятен пользователю. При прочтении такого текста не возникает вопросов или сомнений.

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

Также существуют геометрические типы шрифтов и рукописные.

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

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

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

Лучшие шрифты для сайта

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

Примером геометрических шрифтов являются Helvetica, Futura, и Gotham. Буквы в них, как будто вырублены топором. Четкие строгие линии, прямые и геометрически правильные углы. Такой шрифт подходит для сайтов официальных организаций: банков, страховых компаний.

Слишком большое количество шрифтов на сайте отвлекает и путает пользователя

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

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

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

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

Топ-5 шрифтов и его использование

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

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

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

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

1. Poppins

Источник : Google Fonts

Ссылка на шрифт : https://fonts.google.com/specimen/Poppins

Примеры использования примеров: http://zipl.pro/  , http://www.nerval.ch/apollo_11/  , http://theisbothmann.com/http://www.kikk.be/2016/

Рекомендуется для: Модульных и минимальных веб-сайтов

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

2. Open Sans

Источник: Google Fonts

Ссылка на шоифт: https://fonts.google.com/specimen/Open+Sans

Примеры использования примеров: http://gravity-theme.site/(веб-сайт компании, корпоративных и продуктов)

Рекомендуется для: Стандартного вида

Описание: Open sans будет очень хорошей парой для многих шрифтов, таких как Raleway, Brandon Grotesk, Montserrat, Lato и т. Д. Он отлично отображается в браузере с хорошей читабельностью.

3. Montserrat

Источник: Google Fonts

Шрифтовая ссылка: https://fonts.google.com/specimen/Montserrat

Примеры использования примеров: http://www.dangblast.com/ , http://hansonwu.com/howtoordereggs/#/

Рекомендуется для: интересных веб-сайтов, он создает величественный, но забавный вид

Описание: Этот шрифт поставляется в трех вариантах и ​​напоминает модернистский стиль начала 20-го века, однако он выглядит менее формальным, чем, скажем, Futura. Montserrat действительно сияет для коротких кусков всех шапок и геометрической простоты букв. В нижнем регистре, Montserrat, все еще довольно приятный шрифт с красивой большой высотой x и намного большим характером, чем Arial или Helvetica.

4. Playfair Display

Источник: Google Fonts

Ссылка на шрифт: https://fonts.google.com/specimen/Playfair+Display

Примеры использования примеров: http://adrien-heury.net/designers-checklists/ http://mondaymusic.es/en , https://www.craftedbygc.com/ https://hoodzpahdesign.com/

Рекомендуется для: Это в основном тот, который подходит всем и создает чувство доверия. Он может использоваться как для модульных, так и для традиционных сайтов.

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

5. Avenir

Источник: Веб

Ссылка на шрифт: https://www.myfonts.com/fonts/linotype/avenir

Примеры использования примеров: https://playcharms.com/en/

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

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

6. Bebas Neue: дополнительный шрифт, который мы не могли бы указать

Источник: Веб

Ссылка на шрифт: https://www.fontsquirrel.com/fonts/bebas-neue

Примеры использования примеров: https://www.craftedbygc.com/ http://www.theqcamera.com/http://ekpesbookclub.com/

Рекомендуется для: Для стандартных, но прочных и стильных макетов.

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

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

 

[kkstarratings]

9 лучших бесплатных веб-сайтов с бесплатными шрифтами в Интернете

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

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

У Google Fonts одна из самых больших коллекций шрифтов, готовых к работе в Интернете. Он предлагает более 1000 различных семейств шрифтов.

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

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

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

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

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

Откройте страницу Google Fonts на Font.com и нажмите кнопку « Установить SkyFonts» .

После установки приложения вернитесь на страницу:

1. Нажмите Обзор шрифтов Google и найдите шрифт Google.
2. После того, как вы выбрали семейство шрифтов или несколько семейств шрифтов, щелкните раскрывающийся список SkyFonts и установите флажок « Добавить все семейство» .
3. Щелкните Добавить .

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

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

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

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

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

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

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

Dribbble – платформа, похожая на Behance, но не столь популярная. Тем не менее, Dribbble популярен среди дизайнеров пользовательского интерфейса, поэтому вы найдете на веб-сайте значительный выбор шрифтов. Для начала просто выполните поиск по запросу «бесплатные шрифты». Хотя коллекция не такая большая, как у Behance, здесь вы найдете множество современных шрифтов, шрифтов с засечками и шрифтов с засечками.

Dafont – один из старейших и лучших источников для загрузки шрифтов. На сайте Dafont представлено более 50 000 шрифтов.

Фильтрация через такую ​​огромную коллекцию может быть сложной задачей. Таким образом, Dafont имеет систему категорий вверху. Это лучшее место для начала. Изучите подкатегорию, например «Мультфильм» или «Рукописный текст». Вы также можете отсортировать список, используя такие темы, как Хэллоуин, Деревенский стиль, Ужас и т. Д.

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

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

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

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

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

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

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

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

По теме: OTF против шрифтов TTF: что лучше? Какая разница?

Добавьте новые шрифты в свои программы

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

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

Связанный

15 сайтов с бесплатными шрифтами | Дизайн, лого и бизнес

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

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

Создайте свой логотип онлайн. Более 50 тысяч брендов по всему миру уже используют логотипы от Турболого.

Создать логотип онлайн

1. Google Fonts

Данная площадка представляет собой библиотеку с более 800 бесплатными шрифтами. Активно функционирует с 2010 года и используется многими известными компаниями.

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

2. Font Squirrel

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

3. FontSpace

На данном сайте в свободном доступе представлено более 50 000 шрифтов. Для удобства можно использовать поисковую строку.

Гласная страница содержит список популярных дизайнеров шрифтов.

4. DaFont

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

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

5. Ten by Twenty

Ten by Twenty представляет собой коллекцию типографических экспериментов. На сервисе вы можете бесплатно и быстро скачать понравившийся шрифт.

При желании, возможно внести плату за используемую продукцию.

6. FontStruct

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

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

7. UrbanFonts

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

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

 8. 1001 Fonts

Площадка представляет собой библиотеку шрифтов различных стилей. Всего на сайте их содержится более 10 000.

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

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

  9. FontSpring

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

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

10.  Abstract Fonts

Данный онлайн-каталог содержит более 13 000 шрифтов, доступных для бесплатного скачивания. Особой популярностью пользуются кириллические шрифты, которых на сайте около 150 видов.

Возможен поиск по названиям, именам разработчиков и категориям.

 

  11. Neogrey

На сервисе доступен широкий выбор шрифтов. Возможная установка понравившегося варианта шрифта на известные операционные системы (Windows, Linux и Mac OS).

12. Artill

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

Для скачивания выбранного варианта необходимо поделиться им в Facebook.

Помимо основной существует профессиональная версия сайта, содержащая дополнительные функции.

13. Typedepot

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

14. Glukfonts

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

15. Fontfabric

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

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

Другие статьи

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

лучших шрифтов для веб-сайтов | Руководство эксперта по выбору шрифтов

7 смертных грехов выбора шрифта для вашего веб-сайта

1: не используйте липкие шрифты

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

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

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

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

2: Не используйте грязные, трудные для чтения шрифты

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

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

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

По-прежнему не можете выбрать правильный дизайн шрифта?

Вот изящная блок-схема дизайна шрифтов от Basekit, которая поможет вам выбрать правильный шрифт для областей содержимого:

3: Не перегружайте свой межстрочный интервал

Один из самых простых способов упростить ваш контент read — это добавить достаточный интервал между каждой строкой.

Магическое число идеальной высоты строки составляет 150% от размера шрифта, который вы используете.

Например, если вы используете размер шрифта 24 пикселей, высота строки будет 36 пикселей (что составляет 150% от 24 пикселей):

Межстрочный интервал может иметь огромное значение, когда дело доходит до читаемости.

Сразу видно, что левый столбец выглядит лучше всего.

4: Не используйте слишком много разных шрифтов

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

1. Стиль шрифта для заголовков и заголовков страниц
2. Стиль шрифта для основных областей содержимого
3. Стиль шрифта для цитат или субтитров (необязательно )

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

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

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

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

5: Не используйте слишком много цветов шрифта

Color — мощный инструмент брендинга.Например, когда вы думаете о Starbucks, какой цвет (а) вам приходит на ум? Скорее всего, это зеленый цвет, который вы видите в их логотипах и на их веб-сайтах.

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

Убедитесь, что цвет вашего шрифта четко выделяется на фоне цвета , чтобы его было легко читать. В Интернете есть бесплатные инструменты, такие как средство проверки контраста WebAIM, с помощью которого вы можете убедиться, что цвет вашего шрифта соответствует стандартам удобочитаемости!

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

6: Не выбирайте размер шрифта наугад

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

Рекомендуемые размеры шрифта: 8, 16, 24, 32, 48, 64, 95

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

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

Полезный ресурс:

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

7: Не недооценивайте пустое пространство

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

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

Некоторые из брендов, которые лучше всего используют пустое пространство, включают Apple, Squarespace и Medium — поэкспериментируйте с пустым пространством на своем веб-сайте и посмотрите, какие результаты вы получите!

7 смертных грехов выбора шрифта.Резюме:

• Избегайте липких шрифтов, таких как Comic Sans
• Не используйте грязные шрифты, которые трудно читать
• Используйте высоту строки, равную 150% от размера шрифта, который вы используете
• Не используйте слишком много дизайн шрифтов — выберите максимум два или три
• Не используйте слишком много цветов шрифта — выберите один или два фирменных цвета
• Не выбирайте размер шрифта наугад — мы рекомендуем 16 пикселей для основной копии
• Не забудьте включить белое пространство

33 лучших веб-шрифта (и веб-безопасных шрифтов) для вашего веб-сайта

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

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

Веб-шрифты и веб-безопасные шрифты: в чем разница?

–

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

• Веб-безопасные шрифты: также известны как «системные шрифты» или «шрифты браузера». Веб-безопасные шрифты — это шрифты, установленные на всех устройствах и браузерах.
• Веб-шрифты: хотя и нечеткие, веб-шрифтов относятся ко всем шрифтам, которые не являются веб-безопасными шрифтами , особенно коммерческими и независимо разработанными шрифтами.

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

Иллюстрация OrangeCrush

Какой из них следует использовать в веб-дизайне?

У обоих есть свои преимущества и недостатки.

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

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

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

Если у вас возникли проблемы с принятием решения, воспользуйтесь этой полезной блок-схемой от Дэвида Гилбертсона из Hackernoon (имейте в виду, что он использует «системные шрифты» в значении «веб-безопасные шрифты»).

Через Hackernoon.

А как насчет индивидуальной эстетики шрифта?

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

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

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

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

—

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

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

Также стоит отметить, что шрифты с засечками удобны для чтения, поэтому их часто используют для основного текста, заголовков и подзаголовков. Это не значит, что шрифты без засечек плохо читаются; они отлично подходят для длинных блоков текста. Но есть причина, по которой высококлассные издания, такие как The New York Times и Boston Globe , по-прежнему используют веб-шрифты с засечками для своих цифровых статей. И, не случайно, обе эти газеты склоняются к «формальному» и «классическому» стилям брендинга, продвигая при этом длинный текст.

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

Лучшие веб-безопасные шрифты с засечками:

Баскервиль

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

Камбрия

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

Курьер

Кажется, будто он снят прямо с пишущей машинки на ваш компьютер, Courier привносит ретро-стиль и удобочитаемость вашей копии.

Дидо

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

Garamond

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

Times New Roman

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

Лучшие веб-шрифты с засечками:

Одежда

По латинотипу.Загрузите его здесь.

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

Изготовлено литейным заводом atipo. Загрузите его здесь.

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

Богарт

Автор: Zetafonts. Загрузите его здесь.

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

Гивены

Автор Craft Supply Co. Загрузите его здесь.

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

Хуана

По латинотипу. Загрузите его здесь.

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

Май

Автор Creativetacos. Загрузите его здесь.

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

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

— Шрифты

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

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

Шрифты без засечек

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

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

Лучшие веб-безопасные шрифты без засечек:

Arial

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

Калибри

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

Dejavu Sans

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

Женева

Женева известна своим гротескным стилем. Он немного узкий и излюбленный для крупных брендов, таких как Facebook и Apple (компания, из которой он создан).

Helvetica

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

Лучшие веб-шрифты без засечек:

Devant Pro

Автор Webhance Studio. Загрузите его здесь.

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

Графтон

Изготовлено Zeune Type Foundry. Загрузите его здесь.

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

IBM Plex Sans

Автор: Майк Эббинк и смелый понедельник. Загрузите его здесь.

IBM Plex Sans был разработан, чтобы показать отношения между машиной и человечеством. Результат произвольный, но дружелюбный — используйте, чтобы придать вашему бренду более гуманистический вид.

Italico

Антонио Филиньо.Загрузите его здесь.

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

Монолит

Автор: Unio. Загрузите его здесь.

Важным преимуществом Monolith является то, что он имеет полные многоязычные возможности. У него есть легкая и обычная версии, и, если вы спросите меня, это довольно круто.

TT Norms Pro

По TypeType. Загрузите его здесь.

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

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

—

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

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

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

Лучшие декоративные веб-безопасные шрифты:

Брэдли Хэнд

Bradley Hand довольно привередлив к тексту, но он добавляет индивидуальности любому короткому заголовку или заголовку.

Кисть Script M7

Brush Script M7 напоминает о стационарных наклейках и наклейках на бампер. Он яркий, креативный и добавляет индивидуальности вашему бренду.

Медная плита

Copperplate хорошо работает со стационарными изделиями и брендами; он добавляет нотку причудливого характера к сдержанному дизайну.

Luminari

Великолепно готический, Luminari освещает любую страницу, которую он украшает. Средневековый, магнетический и нишевый.

Монако

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

Лучшие декоративные веб-шрифты:

Адмара

Автор Фарас.Загрузите его здесь.

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

Подпись Даниэль

Автор Rometheme. Загрузите его здесь.

Danielle Signature — элегантный, индивидуальный и ароматный. Это был бы отличный вариант логотипа для независимого розничного бренда.

Гипологический

Автор Kreafolk. Загрузите его здесь.

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

Warton

Автор Сердарибут. Загрузите его здесь.

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

Чудо-ночь

Автор: Artefak Project. Загрузите его здесь.

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

Или вы можете просто использовать Comic Sans

—

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

Если это решение кажется слишком большим, вы всегда можете просто использовать Comic Sans. В конце концов, какая вам польза от смертных, если вы можете ходить среди богов?

Нужна помощь в разработке вашего сайта?

Наше сообщество талантливых дизайнеров всегда готово помочь.

20 лучших шрифтов для веб-сайтов в 2021 году (бесплатные и платные)

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

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

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

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

20 лучших шрифтов для веб-сайтов

1. Abril Fatface

2. Прощай

3. Andika

4. Arvo

5. Canela

6. Centra No.1

7. Hatton

8. Lato

9. Linotype Didot

10. Lora

11. Open Sans

12. Opposit

13. Proxima

Prop

14. Proxima Soft

15. Recoleta

16. Roboto

17. Romana

18. Voyage

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

При выборе шрифта для вашего веб-сайта, как правило, целью является использование шрифтов:

• разборчивых,

• доступных,

• привлекательных,

• соответствующих,

• и легких .

Есть еще одна черта, о которой вам следует помнить, — это кроссбраузерность .

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

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

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

20 лучших шрифтов для веб-сайтов (бесплатные и платные)

1.

Abril Fatface

Тип шрифта: Serif

Бесплатно / премиум: Бесплатно

Foundry or designer: Veronika Burian and Хосе Скаглионе из TypeTogether

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

Семейство шрифтов в целом было переосмыслением классического информационного интерфейса для современных читателей. Однако этот конкретный шрифт выделяется среди членов своего семейства из-за более тяжелых («жирных») символов. Это потому, что шрифт Abril Fontface был вдохновлен текстом заголовка, который использовался на рекламных плакатах в 1800-х годах.

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

2.

Прощай

Тип шрифта: Расширенный без засечек

Бесплатно / премиум: Премиум Литейная мастерская или дизайнер: Кеннет Кнутсен из Good Type Foundry

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

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

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

3.

Andika

Тип шрифта: Sans serif Бесплатно / премиум: Бесплатно Изготовитель или разработчик: SIL International

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

Andika имеет латинский и кириллический алфавиты.

Когда вам следует его использовать: Разработанный специально для начинающих читателей (т.е. детей и изучающих язык), Andika имеет и другие приложения. Согласно Accessibility and Usability в Penn State , он также полезен для посетителей веб-сайтов с нарушениями чтения, которым полезны веб-сайты с четкими и отчетливыми буквами.

4.

Arvo

Тип шрифта: Geometric slab-serif

Бесплатно / премиум: Бесплатно Литейное производство или дизайнер: Антон Коовит

Предыстория: Финское слово Arvo переводится как «число, ценность, ценность». Это имеет смысл, учитывая, что Arvo — это геометрический шрифт с плоскими засечками. Хотя шрифт имеет упорядоченный эстетический вид, тонкие штрихи придают ему немного преимуществ и выделяют его среди других шрифтов с засечками.Обратите внимание, например, на контраст, добавленный к цифрам, и небольшие дополнения к буквам «G», «c» и «s», которые отличают их от других букв.

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

5.

Canela

Тип шрифта: Гибридный шрифт с засечками и без засечек

Бесплатно / премиум: Премиум Производитель или дизайнер: Miguel Reyes for Commercial Type

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

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

6.

Centra № 1

Тип шрифта: Геометрический без засечек

Бесплатно / премиум: Премиум

Литейное производство или дизайнер: Джошуа Финкли и Лукас Шарп из Sharp Type

Фон : В отличие от других модернистских шрифтов из жанра геометрического без засечек, Centra No.1 имеет современную окраску, что отличает его от таких известных шрифтов, как Futura и Century Gothic. Его текстуры и углы придают ему большую глубину, чем эти классические шрифты в стиле Баухауса.

Семейство шрифтов имеет восемь различных толщин. Самый тяжелый из семейства — Centra No. 1 Black, который идеально подходит для логотипов и заголовков. Тем не менее, Centra No. 1 Hairline, самый тонкий из семейства, выглядит почти как другой шрифт, поскольку отсутствие толщины упрощает стилизацию символов и лучше всего подходит для основного содержимого.

Когда вам следует его использовать: Если вам нужен универсальный шрифт, который может украсить различные части веб-сайта и его брендинг, Centra No. 1 может многое предложить. И из-за его модернистских тенденций вы можете ожидать, что этот будет выносливым.

7.

Hatton

Тип шрифта: Sans serif

Бесплатно / премиум: Premium

Foundry или дизайнер: Сотрудничество между Pangram Pangram Foundry и Two Times Elliot Studio

Фон: Хаттон-Гарден — старый ювелирный район Лондона (а также бывший район, где работала дизайнерская студия).Чтобы отдать дань уважения знаменитому ювелирному кварталу, дизайнеры наделили свои шрифты такими же характеристиками, как и в окрестностях, в виде вывесок и гравюр.

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

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

8.

Lato

Тип шрифта: Sans serif

Бесплатно / премиум: Бесплатно

Литейное производство или дизайнер: Лукаш Дзедзич из TyPoland, при поддержке Google

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

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

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

9.

Linotype Didot

Тип шрифта: Serif

Бесплатно / премиум: Premium

Foundry или дизайнер: Firmin Didot (оригинальный дизайнер) и Adrian Frutiger для Linotype Studio and Foundry

Предыстория: Шрифт Didot получил свое название от известной семьи Didot, владевшей очень успешными типографиями и литейными цехами в Париже в 18-19 веках.Фактически, они были настолько успешными, что стали популярным принтером короля, а созданный ими шрифт Didot был использован в La Henriade Вольтера. Его современная версия также была использована для разработки «глазного» логотипа CBS.

С тех пор он был переработан для цифровых ридеров и теперь является веб-шрифтом.

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

10.

Lora

Тип шрифта: Serif

Бесплатно / премиум: Бесплатно

Литейное производство или дизайнер: Cyreal

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

Доступный в четырех вариантах толщины, этот шрифт хорошо подойдет для основной части ваших страниц.

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

11.

Open Sans

Тип шрифта: Sans serif

Бесплатно / премиум: Бесплатно Литейное производство или дизайнер: Стив Маттесон; по заказу Google

Предыстория: Open Sans основан на более раннем шрифте Google под названием Droid Sans, который был создан для смартфонов Android.Это немного более широкая версия этого шрифта, и его удобочитаемость была улучшена, поэтому он хорошо смотрится на всех экранах, даже в небольших размерах.

Не зря более 20 миллионов веб-сайтов используют этот шрифт, и это второй по популярности шрифт Google за все время.

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

12.

Opposit

Тип шрифта: Sans serif

Бесплатно / премиум: Premium

Литейная мастерская или дизайнер: Кеннет Кнутсен для Good Type Foundry

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

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

13.

Optima

Тип шрифта: Sans serif roman

Бесплатно / премиум: Premium

Литейное производство или дизайнер: Hermann Zapf for Linotype

Фон: Optima — это веб- Безопасный шрифт, вдохновленный классическими римскими надписями, с некоторыми индивидуальными штрихами.В то время как шрифт в римском стиле имеет традиционный широкий и насыщенный набор символов, вы заметите отклонения, такие как наклоненная заглавная буква «S» и расширенная буква «M», среди прочего.

Это очень популярный шрифт с широким спектром приложений. Мемориал ветеранов Вьетнама, Estée Lauder и президентская кампания Джона Маккейна использовали его.

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

14.

Prophet

Тип шрифта: Sans serif

Бесплатно / премиум: Premium

Литейное производство или дизайнер: Йоханнес Брейер, Фабиан Харб и Эркин Карамемет для DINAMO Studio

Фон : Шрифт Prophet выделяется среди других шрифтов — с засечками или без засечек — своими нерегулярными сокращениями и изгибами, черпая вдохновение из мира более экспериментальной типографики . Он основан на другом шрифте под названием Georgina, разработанном Джозефом Черчвордом.

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

15.

Proxima Nova

Тип шрифта: Sans serif

Бесплатно / премиум: Premium (подписка Creative Cloud)

Литейная мастерская или дизайнер: Марк Симонсон из Mark Simonson Studio

Фон : Proxima Nova раньше использовалась как Proxima Sans, семейство шрифтов гораздо меньшего размера, использовавшееся в 90-х годах.В наши дни дизайнер построил это семейство геометрических шрифтов, которое включает восемь начертаний, три ширины и курсивные аналоги, в общей сложности 48 шрифтов.

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

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

16.

Proxima Soft

Тип шрифта: Sans serif

Бесплатно / премиум: Premium (подписка Creative Cloud)

Литейное производство или дизайнер: Марк Симонсон из Mark Simonson Studio

Справочная информация : Дизайнер Proxima Nova решил, что нужна закругленная и более игривая версия Proxima Nova, и поэтому была создана Proxima Soft.Он поставляется с таким же обширным набором из 48 шрифтов и с поддержкой греческого и кириллического алфавитов.

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

17.

Recoleta

Тип шрифта: Serif

Бесплатно / премиум: Premium

Foundry или дизайнер: Jorge Cisterna для Latinotype

Фон: Recoleta — популярная солянка. из 70-х все в одном лице.Хотя это не обязательно похоже на то, что мы традиционно считаем «ретро» типографикой, вы можете сказать, что оно пришло из другого времени, но в современной интерпретации.

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

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

18.

Roboto

Тип шрифта: Sans serif

Бесплатно / премиум: Бесплатно

Литейное производство или дизайнер: Кристиан Робертсон; по заказу Google

Справочная информация: Roboto — шрифт Google №1, с которым вы, скорее всего, сталкиваетесь каждый день, поскольку он является системным по умолчанию для всех устройств Android, а также продуктов Google, таких как Google Images, Google Maps, Google Play и YouTube.

Поскольку его идентичность так скрыта в Google, мы могли бы легко описать его так же, как и Google: он чистый, упрощенный, современный и непритязательный.

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

19.

Romana

Тип шрифта: Serif roman

Бесплатно / премиум: Премиум

Литейное производство или дизайнер: Густав Шредер и Теофиль Бодуар; опубликовано Bitstream

Справочная информация: Romana — невероятно старый шрифт.Первоначально он был разработан во Франции в середине 19 века как попытка возродить старые римские шрифты. Затем он был адаптирован и расширен в конце 19 века.

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

20.

Voyage

Тип шрифта: Каллиграфический

Бесплатно / премиум: Premium

Литейное производство или дизайнер: Джереми Шнайдер для VJ-Type

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

Voyage был создан, чтобы привнести авантюрный талант в большой шрифт на вашем сайте.

Когда его следует использовать: Это экранный шрифт, поэтому его лучше всего использовать в тексте заголовка, который должен сразу привлекать внимание посетителей.

Заключение

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

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

9 лучших сайтов с бесплатными шрифтами в Интернете

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

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

У Google Fonts одна из самых больших коллекций шрифтов, готовых к работе в Интернете.Он предлагает более 1000 различных семейств шрифтов.

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

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

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

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

Шрифты.com продает огромное количество разнообразных шрифтов. Но что вы должны знать об этом сайте, так это его интеграцию с Google Fonts и SkyFonts. SkyFonts — это настольное приложение для загрузки и управления шрифтами. Если вам нужен вариант загрузки и установки Google Fonts в один клик, вам следует использовать это приложение.

Открыть шрифт.com на странице Google Fonts и нажмите кнопку Установить SkyFonts .

Как только приложение будет установлено, вернитесь на страницу:

1. Нажмите Обзор шрифтов Google и найдите шрифт Google.
2. После того, как вы выбрали семейство шрифтов или несколько семейств шрифтов, щелкните раскрывающийся список SkyFonts и отметьте опцию Добавить все семейство .
3. Щелкните Добавить .

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

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

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

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

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

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

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

Dribbble — платформа, похожая на Behance, но не столь популярная.Тем не менее, Dribbble популярен среди дизайнеров пользовательского интерфейса, поэтому на веб-сайте вы найдете значительный выбор шрифтов. Для начала просто выполните поиск по запросу «бесплатные шрифты». Хотя коллекция не такая большая, как у Behance, здесь вы найдете множество современных шрифтов, шрифтов с засечками и шрифтов с засечками.

Dafont — один из старейших и лучших источников для загрузки шрифтов.На своем веб-сайте Dafont предлагает более 50 000 шрифтов.

Фильтрация через такую ​​огромную коллекцию может быть сложной задачей.Таким образом, Dafont имеет систему категорий прямо вверху. Это лучшее место для начала. Изучите подкатегорию, например «Мультфильм» или «Рукописный текст». Вы также можете отсортировать список, используя такие темы, как Хэллоуин, Деревенский стиль, Ужас и т. Д.

Нажмите кнопку Recently Added Fonts или Top Fonts , чтобы увидеть инструмент предварительного просмотра.Введите то, что вы хотите, в поле предварительного просмотра, и это отобразится в результатах ниже. Используйте инструмент расширенного поиска, чтобы еще больше сузить результаты. Если вы знаете, что ищете, перейдите к строке поиска вверху страницы.

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

Думайте о Urbanfonts как о современной отполированной версии Dafont.Сайт проще в использовании и приятнее для глаз. Но основная структура та же. Вы найдете список шрифтов, который можно отсортировать по категории, новейшим шрифтам или популярности.

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

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

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

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

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

По теме: OTF vs.Шрифты TTF: что лучше? Какая разница?

Добавьте новые шрифты в свои программы

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

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

Как добавить новые шрифты в Microsoft Word

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

Читать далее

Об авторе Джо Кили (Опубликовано 611 статей)

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

Более От Джо Кили

Подпишитесь на нашу рассылку новостей

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

Еще один шаг…!

Пожалуйста, подтвердите свой адрес электронной почты в письме, которое мы вам только что отправили.

лучших веб-шрифтов 2021 года

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

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

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

Каждый из перечисленных ниже веб-шрифтов можно бесплатно найти в Google Fonts или включить в подписку Adobe с Adobe Fonts.

Без засечек

Laca

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

Разработано Джоаной Коррейя. Издатель Nova Type Foundry.

Получить Laca на Adobe Fonts

Европа

Europa был моим популярным шрифтом в течение последних нескольких месяцев и продолжит оставаться одним из моих любимых в 2021 году.Основанный на двух классических стилях, Futura и Gill Sans, он сочетает в себе лучшее из геометрического и гуманистического стилей, объединяя их в один чистый, динамичный и легко читаемый шрифт. Это отличный вариант как для заголовков, так и для основного текста. Единственный недостаток Europa — это ограниченные возможности для толщины шрифта — вы можете встретить пару случаев, когда полужирный шрифт был бы хорош, но преимущества Europa намного перевешивают этот недостаток.

Разработан Фабианом Лойенбергером.Опубликовано EuropaTyp e.

Get Europa на Adobe Fonts

Межгосударственный

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

Разработано Тобиасом Фрере-Джонсом. Издано Frere-Jones Type .

Получить межгосударственные шрифты Adobe Fonts

Проксима Нова

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

Разработано Марком Симонсоном. Опубликовано Студией Марка Симонсона.

Получить Proxima Nova на Adobe Fonts

Ниво Гротеск

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

Дизайн Ханнес фон Дёрен. Опубликовано HVD Fonts.

Получите Niveau Grotesk на Adobe Fonts

Soleil

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

Разработано Вольфгангом Хомола. Опубликовано TypeTogether.

Получить Soleil на Adobe Fonts

Будь Вьетнам

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

Разработано Габриэлем Ламом.Опубликовано beGroup Vietnam.

Get Be Vietnam на Google Fonts

Serif

Freight Pro

Freight Pro — это суперсемейство шрифтов, что делает его отличным выбором, если вы ищете универсальный шрифт с обширным набором символов. Совместите Freight Display Pro для заголовков и крупного текста с Freight Text Pro для основного шрифта.

Разработано Джошуа Дарденом. Издатель GarageFonts.

Получите Freight Text Pro на Adobe Fonts
Получите Freight Display Pro на Adobe Fonts

Пролет

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

Дизайн Джейми Кларк. Опубликовано Джейми Кларк Тип.

Get Span на Adobe Fonts

Алга

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

Разработано Джоаной Коррейя.Издатель Nova Type Foundry.

Получить Alga на Adobe Fonts

Унна

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

Дизайн Хорхе де Буэн.Издается Омнибус-Тип.

Получить Unna на Google Fonts

Миньон Про

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

Разработано Робертом Слимбахом.Опубликовано Adobe Originals.

Получить Source Serif Pro на Adobe Fonts
Получить Source Serif Pro на Google Fonts

Полный список безопасных для Интернета шрифтов HTML и CSS

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

В частности, он играет решающую роль в создании уникальной идентичности бренда. Вы, вероятно, заметите определенные «стандартные» шрифты, связанные с известными брендами, особенно в их логотипах.Например, у Facebook, Amazon, Disney и Microsoft есть разные шрифты, которые их отличают. Большинство из них изготавливаются на заказ и являются вариациями существующих шрифтов.

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

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

Что такое веб-шрифты?

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

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

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

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

Какие бывают типы веб-шрифтов?

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

• Шрифты с засечками содержат засечки, небольшие декоративные штрихи, которые выступают из основной части письма. Шрифты с засечками легче читать в физических печатных форматах, поскольку они ведут взгляд зрителя от символа к символу. Times New Roman — это шрифт с засечками.
• Шрифты без засечек не имеют засечек.Шрифты без засечек легче читать на экранах, поэтому они гораздо чаще встречаются при копировании веб-сайтов. Arial — это шрифт без засечек.
• Моноширинный относится к шрифтам с одинаковым интервалом между символами. Courier — это моноширинный шрифт.
• Cursive относится к шрифтам, напоминающим рукописный текст. Brush Script MT — это курсивный шрифт.
• Fantasy относится к стилизованным декоративным шрифтам. Luminari — это фантастический шрифт.
• MS означает Microsoft и указывает на то, что шрифт был создан Microsoft для цифровых устройств.Trebuchet MS является примером.

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

Но это просто неправда. Давайте обсудим, почему веб-шрифты по-прежнему важны сегодня.

Нужны ли еще веб-шрифты?

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

Веб-шрифты — это самый простой способ гарантировать удобство работы пользователей в случае, если выбранный вами шрифт загружается некорректно. Возможно, вы выбрали самый красивый шрифт из Google Fonts, но если вы не объедините его с безопасным для Интернета шрифтом в своем стеке шрифтов CSS, вы рискуете отобразить текст, который будет выглядеть на вашем сайте небрендовым.

Представьте себе, например, рендеринг сайта HubSpot в Times New Roman — все потому, что мы не установили предпочитаемый веб-шрифт на серверной части. Time New Roman абсолютно безопасен в Интернете — проблема в том, что он по умолчанию установлен браузером, поэтому наш веб-сайт в конечном итоге выглядит непоследовательным и, ну, немного небрендовым.

Вот несколько причин, по которым вы захотите использовать веб-шрифты.

1. Ваш HTML-текст останется неизменным.

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

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

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

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

Это позволит вашему шрифту «плавно ухудшиться». Вместо того, чтобы переключаться с Playfair Display прямо на Times New Roman, шрифт может перейти с Playfair Display на Didot, гораздо более близкую альтернативу.Если Didot недоступен, шрифт можно изменить на Georgia и, наконец, на шрифт с засечками по умолчанию, используемый браузером.

3. У вас будет несколько резервных копий, если вы используете собственный шрифт.

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

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

Стеки шрифтов

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

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

Чтобы создать стек шрифтов, добавьте несколько связанных имен шрифтов в свойство font-family .Шрифты должны быть упорядочены по приоритету — шрифт, который вам нужен больше всего, должен отображаться первым, а общее семейство шрифтов должно завершать список. Вот пример:

  p {font-family: «Playfair Display», «Didot», «Times New Roman», Times, serif; }  

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

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

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

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

Веб-безопасные шрифты

1. Arial (без засечек)
2. Arial Black (без засечек)
3. Verdana (без засечек)
4. Тахома (без засечек)
5. Требушет MS (без засечек)
6. Impact (без засечек)
7. Times New Roman (с засечками)
8. Дидо (с засечками)
9. Грузия (с засечками)
10. Американская пишущая машинка (с засечками)
11. Andalé Mono (моноширинный)
12. Courier (моноширинный)
13. Консоль Lucida (моноширинный)
14. Монако (монокосмический)
15. Брэдли Хэнд (курсив)
16. Brush Script MT (курсив)
17. Luminari (фэнтези)
18. Comic Sans MS (курсив)

1.Arial (без засечек)

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

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

2. Arial Black (без засечек)

Arial Black — еще один родственный шрифт в семействе Arial. Это очень жирная версия, больше подходящая для заголовков, декоративного текста и выделенного текста.Однако его известность означает, что дизайнеры должны использовать его стратегически и осторожно.

3. Verdana (без засечек)

Verdana пользуется популярностью как в сети, так и за ее пределами. Хотя он напоминает Arial и Helvetica, он имеет простую структуру, благодаря которой буквы становятся крупными и четкими. Некоторые из его персонажей имеют удлиненные линии, что может быть несовместимо с некоторыми рисунками. В остальном это отличная альтернатива Arial.

4. Тахома (без засечек)

Подобно Verdana, шрифт Tahoma имеет более жирный вес и более узкое отслеживание (т.е. меньше места между символами).

5. Trebuchet MS (без засечек)

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

6. Impact (без засечек)

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

Impact был впервые представлен цифровым устройствам в Microsoft Windows в 1998 году, и с тех пор наблюдается возрождение популярности интернет-мемов, наложенных поверх изображений для создания юмористического эффекта.

7. Times New Roman (с засечками)

Times New Roman — лучший шрифт с засечками. Это чрезвычайно популярный и основной шрифт для устройств и приложений Windows, таких как Microsoft Word. Браузеры возвращаются к нему, когда указанный шрифт не отображается.

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

8. Дидо (с засечками)

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

9. Грузия (с засечками)

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

10. Американская пишущая машинка (с засечками)

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

11. Andalé Mono (моноширинный)

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

Andalé Mono — прекрасный пример моноширинного шрифта. Этот вариант без засечек был разработан Apple и IBM и часто используется в средах разработки программного обеспечения.

12. Курьер (моноширинный)

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

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

13. Lucida Console (моноширинный)

Консоль

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

14. Монако (монокосмический сектор)

Моноширинный шрифт без засечек Monaco встроен в macOS и в результате будет более знаком пользователям Apple.

15. Брэдли Хэнд (курсив)

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

16. Brush Script MT (курсив)

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

17. Луминари (фэнтези)

Шрифты

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

18. Comic Sans MS (курсив)

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

Тем не менее, Comic Sans полезен по причинам доступности: поскольку в нем отсутствуют похожие буквенные формы, такие как p / q и b / d, люди с дислексией, как правило, испытывают меньше трудностей с ним, чем с обычными шрифтами.

Используйте безопасные веб-шрифты CSS и HTML для своих проектов

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

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

Примечание редактора: этот пост был первоначально опубликован в марте 2020 года и был обновлен для полноты.

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

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

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

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

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

Во-первых, вам нужно использовать широко распространенный шрифт.

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

Обычно используемые веб-шрифты включают:

• Verdana, Женева, без засечек
• Джорджия, Times New Roman, Times, serif
• Courier New, Courier, моноширинный
• Arial, Helvetica, без засечек
• Тахома, Женева, без засечек
• Trebuchet MS, Arial, Helvetica, без засечек
• Arial Black, Gadget, без засечек
• Times New Roman, Times, serif
• Palatino Linotype, Book Antiqua, Palatino, с засечками
• Lucida Sans Unicode, Lucida Grande, без засечек
• MS Serif, New York, serif
• Lucida Console, Монако, моноширинный
• Comic Sans MS, курсив (используйте на свой страх и риск)

Awwwards.com рекомендует несколько веб-шрифтов Google, которые бесплатны, но могут иметь не самое высокое качество. (Однако учтите, что Microsoft Outlook не поддерживает веб-шрифты Google.) Они рекомендуют:

• Open Sans
• Josefin Slab
• Арво
• Лато
• Фоллкорн
• Абрил Fatface
• Ubuntu
• PT Sans + PT Serif
• Старый стандарт TT
• Droid Sans

Электронные кампании могут быть самыми сложными.