Самые популярные шрифты для сайта и web-дизайна
Всем добрый день!!! Сегодня мы поговорим о шрифтах. А поможет нам в этом иностранный товарищ. Внимательно читаем и перенимаем опыт.
Несомненно, выбор шрифтового решения играет огромную роль в восприятии сайта. Ведь большинство сайтов состоит из текстов практически полностью.
Томас Лауринавичус (Tomas Laurinavicius) заинтересовался, какие шрифты любят больше всего использовать веб-дизайнеры в своей работе.
Он провел небольшое социологическое исследование для выявления самых популярных и любимых шрифтов среди создателей дизайна сайтов и блогов.
Кроме того, он взял короткое интервью у веб-дизайнеров с целью узнать, какой шрифт наиболее подходит в определенной ситуации. Результатами своего опроса Томас поделился на сайте hongkiat.com.
Опрос проводился в социальных сетях и микроблогах – Polldaddy, Forrst, Facebook и Twitter. В опросе приняли участие 34 дизайнера из 14 стран, которые, отвечая на вопросы о любимых шрифтах, объяснили, почему выбирают именно их._(9507).jpg)
Во время опроса веб-дизайнеры назвали 73 различных шрифта – 46 бесплатных и 27 платных.
Самыми любимыми шрифтами веб-дизайнеров оказались: Helvetica, Arial, Georgia, Gotham, Myriad Pro, DIN, Futura, League Gotic, Cabin, Corbel.
Нужно учитывать, что не все из представленных шрифтов имеют кириллическое начертание – тем более, в бесплатном варианте.
Далее показано два топ-10 – самые любимые бесплатные и платные шрифты.
Топ-10 любимых бесплатных шрифтов веб-дизайнеров
Опрошенные дизайнеры выбрали 10 лучших шрифтов для веб-графики. При этом не учитывались шрифты, по умолчанию установленные в операционную систему, такие как, Arial, Verdana, Times New Roman, Georgia или Tahoma. (Это немного странно – на первом месте шрифт, который есть в операционной системе).
- Myriad Pro
- League Gothic
- Cabin
- Corbel
- Museo Slab
- Bebas Neue
- Ubuntu
- Lobster
- Franchise
- PT Serif
Топ-10 любимых платных шрифтов веб-дизайнеров
В следующем списке самые популярные платные шрифты, используемые в веб-графике и дизайне.
Некоторые из них очень дорогие, но их качество говорит само за себя и оправдывает затраты.
- Helvetica
- Gotham
- DIN
- Futura
- Neo Sans
- Adobe Caslon
- Skolar
- Kautiva
- Caecilia
- Fedra Sans
Причины, по которым веб-дизайнеры выбирают именно эти шрифты, как уже говорилось, можно прочитать в их интервью на сайте hongkiat.com.
Но в конечно счете, конечно, каждый сам выбирает дизайн, шрифты и их начертание. Поэтому прислушаемся к мнению профессионалов, а сделаем по-своему очередную ерунду
Разработка web сайтов, шрифты для web
Всем привет! Сегодня в рамках рубрики о веб-дизайне хочу рассказать, о шрифтах которые следует использовать при разработке web сайта.
Как правило, не все задумываются о том, какие следует использовать шрифты для контентной части сайта. Подбор красивых шрифтов для сайта является наиважнейшей частью разработки дизайна.
Так как от этой части зависит читаемость информации сайта, а это, как известно самое главное на сайте. По этой причине к этому вопросу стоит отнестись весьма серьезно.
Но использовать в дизайне сайта можно только те шрифты, которые есть у будущих посетителей сайта. Это делается для того чтобы страницы отображались корректно у Всех пользователей, с разными операционными системами и браузерами. В противном случае если использовать не стандартные шрифты, то большинство посетителей увидит все по-разному и в большинстве случаев в неприглядном виде. По этой причине рекомендуется использовать стандартные шрифты, которые приведены ниже в списке. В список шрифтов входят шрифты, которые установлены на операционной системе Windows XP и выше.
В данной статье я не рассматриваю шрифты из других операционных систем. Опытный верстальщик, должен знать сопоставление шрифтов в различных операционных системах, и во время верстки он пропишет этот момент в css-стилях.
В основном разрабатывая контентную часть дизайна используются две разновидности шрифтов:
- шрифты с засечками
- рубленые шрифты (шрифты без засечек)
Шрифты с засечками — (англ.
serif — засечка) шрифты начертание которых начинается и заканчивается штрихами. Например Times New Roman.
Шрифты без засечек (рубленые шрифты) — (англ.sans-serif —без засечки) шрифты со строгими ровными линиями без засечек. Например Arial.
Ниже Вы можете увидеть скриншот шрифтов с засечкой и без.
Шрифты для web дизайна:
- Arial
- Arial Black
- Arial Narrow
- Book Antiqua
- Century Gothic
- Comic Sans MS
- Courier New
- Franklin Gothic Medium
- Georgia
- Impact
- Lucida Console
- Lucida Sans Unicode
- Microsoft Sans Serif
- Palatino Linotype
- Sylfaen
- Tahoma
- Times New Roman
- Trebuchet MS
- Verdana
- Webdings (различные символы и знаки)
- Wingdings (различные символы и знаки)
Также хочется заметить такой момент как отсутствие курсива у ряда шрифтов, вместо курсива в них используется наклон, из-за чего текст становится плохо читабельным.
Из стандартных шрифтов в Windows не имеют курсива:
- Arial Black
- Comic Sans MS
- Franklin Gothic Medium
- Impact
- Lucida Console
- Lucida Sans Unicode
- Microsoft Sans Serif
- Sylfaen
- Tahoma
Раз уж заикнулся о шрифтах, которые не имеют курсива то за одно хочется отметить и тот факт, что есть шрифты, которые изначально являются шрифтами с жирным начертанием. По этим причинам применение стилей указывающих на жирный шрифт нет смысла, так как в результате мы получим не то, что нужно.
Из стандартных шрифтов в Windows имеют жирное начертание изначально:
- Arial Black
- Impact
- Lucida Console
- Lucida Sans Unicode
Также есть шрифты, в которых отсутствует жирное и нормальное начертание.
Несколько статей о шрифтах:
На этом вроде все, что я хотел рассказать.
Исходя из вышесказанного, можно сделать выводы, что нужно очень тщательно производить подбор шрифтов. Так как от этого зависит читабельность текстов.
10 великолепных open source шрифтов для web
Нашел недавно в интернете интересную статью про шрифты — The top 10 open source web fonts, где автор представил весьма классную подборку из абсолютно бесплатных шрифтов, которые можно использовать для своих сайтов. Но суть заметки не только в этом, пару раз в тексте повторяется некая революция @font-face. И ведь действительно то, какими были шрифты в Web`е лет 5 назад и сейчас не сравнить. Во-первых, раньше было неплохо найти крутой и при этом бесплатный шрифт (не лицензионное использование не в счет) для своего сайта. А сегодня ситуация меняется в лучшую сторону — уникальный (до определенной степени) и бесплатный (лицензия open source) шрифт уже не является редкостью. Более того, для многих дорогостоящих шрифтов можно найти отличную, а главное бесплатную замену, которая ни чем не уступает аналогу.
Во-вторых, помню сильно удивлялся, что в Web`е имеются весьма жесткие ограничения по используемым шрифтам на сайте — парочка стандартных и все. Сейчас же применение оригинальных элементов, нестандартных, яркий, креативных считается весьма хорошим тоном. Типографика в интернете стала более раскованной, интересной и свободной. Чем не революция? В статье ниже найдете 10 хороших шрифтов, которые могут стать украшением вашего сайта.
The Fell Types
Шрифты The Fell Types от автора Игино Марини (Igino Marini) выглядят просто потрясающе. Если верить описанию, то они созданы на основе реальных оригинальных шрифтов из рукописей 17-го века. Автор изучил их структуру, собрал воедино все наработки и сделал полноценный шрифт, который выручит вас когда нужно будет обыграть какую-нибудь «классическую» тему в дизайне сайта.
Open Baskerville
OpenBaskerville — шрифт основанный на оригинальном Baskerville (точнее на шрифте Fry’s Baskerville). Отличается универсальностью, чем и заслужил популярность. Open Baskerville — отличная альтернатива оригиналу. Шрифт имеет двойную лицензию — Open Font License и GNU GPL version 3.
Josefin Sans
JosefinSans — элегантный и изысканный шрифт идеально подходящий для заголовков. Основан на известных шрифтах Kabel, Memphis, Futura и прочих шрифтах «европейской школы». Дизайнер — Santiago Orozco. Данный набор имеет много разных стилей и вариантов использования, что делает его очень гибким для работы.
Open Sans
OpenSans — еще один шрифт из коллекции Google Web Fonts. Разработан Стивом Мэттесоном (Steve Matteson). Отличается тем, что содержит полный набор из 897 символов (в том числе кириллических), поэтому очень гибок в применении и его должен иметь в своей коллекции каждый уважающий себя дизайнер! Также имеет много вариантов стилей использования с разными значениями weight.
Gravitas
Gravitas — массивный и тяжелый шрифт отсылает нас к эпохе промышленной революции в Великобритании. Отлично подойдет для плакатов и рекламных заголовков. Буквы хорошо проработаны, смотрится здорово.
Jura
Jura — немного футуристический евро-шрифт (имеется в виду в традициях европейского дизайна). Основан на широко известном классическом шрифте Eurostile, но в то же время обладает своим характером.
League Gothic
LeagueGothic — по сути является open source-версией легендарного шрифта Alternate Gothic №1, разработанного компанией ATF (American Type Founders) в 1903 году, но содержит оригинальные элементы. Поклонникам шрифта Gothic качать обязательно!
Orbitron
Orbitron — шрифт который идеально подходит не только для «космических интерфейсов». Этому стильному шрифту можно найти много других применений, благо в «комплекте» имеется четыре «веса» — light, medium, bold и black.
Chunk
Chunk — имитация резьбы по дереву. Шрифт очень насыщенный и тяжелый, поэтому его можно смело использовать, например, для газетных заголовков.
Ostrich Sans
Кстати, много других интересных шрифтов вы можете найти на Google Web Fonts, стоит только хорошенько поискать! Проект начал работу всего год назад, а теперь там полно интересных шрифтов, которые можно легко и быстро подключить для своего сайта. Это один из элементов той «революции», о которой говорилось в начале статьи.
P.S. В связи с 6-летием хостинг-компания Inferno Solutions предлагает администрируемый сервер в Германии Core2Quad Q9550 4×2.83 Ghz + 8GB RAM + 2x500GB HDD + 5000Gb bw + 100Mbit — по СУПЕР цене
Комплексная и эффективная оптимизация сайтов от компании Web-Promo. Гарантия результата и качества.
В интернет магазине Линзмастер вы можете заказать контактные линзы и разные аксессуары к ним с доставкой по всей Украине.
16 px кегль в Вебе
16 px – это оптимальный размер шрифта для веб-страниц.
На первый взгляд это утверждение может показаться странным и даже провокационным. Основной шрифт у большинства веб-страниц не превышает 12 пикселей и многие веб-дизайнеры убеждены в том, что это – оптимальный размер для шрифта. Эта статья призвана убедить вас в обратном.
Специалист в области юзабилити сайтов Оливер Рейхенштейн утверждает, что 16 пикселей – это стандарт для нормального отображения шрифта в браузере. При этом шрифт не будет выглядеть гигантским (чего опасаются многие дизайнеры), потому что 16 пикселей – это много только на первый взгляд, а на практике это самый удобный размер шрифта для сайта, в чем уже убедились многие разработчики.
Более того, 16 px – это минимальный размер шрифта для современного сайта, и если вы не поддерживаете этот формат, то лишь напрасно тратите деньги ваших клиентов. Ниже приведены аргументы в пользу актуальности именно такого размера для шрифта.
Доход сайта и привлечение читателей
В большинстве случаев сайт создается с целью заработка, и чем больше у вас будет посетителей, тем большим будет вероятный доход. Если ваш сайт – продающий, то тем важнее для вас привлечь потенциального клиента среди аудитории сети Интернет. Каждый из читателей вашего сайта – это ценный бизнес-актив, который в конце-концов окупит ваши затраты на создание сайта.
Именно поэтому каждый элемент вашего сайта должен быть направлен на достижение конечной цели. Текстового контента это правило касается в первую очередь. Ведь текст на сайте – это основное средство влияние на читателя.
Если в текстах вашего сайта не будет четко указано, каких действий вы ожидаете от пользователя, то он не станет вашим клиентом. А для того чтобы текст эффективно воздействовал на пользователя он должен быть, как минимум, прочитан.
Итак, все ваши действия должны быть направлены на то, чтобы повысить легкость чтения контента для ваших читателей.
4 факта о чтении, которые должен знать веб-дизайнер
1) После двадцати лет качество зрения у людей снижается, в сорок лет к сетчатке глаза проходит только 50% света, а к шестидесяти годам – всего 20%.
2) У 9% американцев есть проблемы со зрением, а в России эти показатели еще ниже. Многим россиянам зрение не могут полностью исправить даже контактные линзы.
3) Скорость чтения зависит от расстояния до источника: чем выше расстояние, тем разборчивее воспринимаются символы и выше понимание прочитанного. Главный фактор, определяющий оптимальное расстояние, – это именно размер шрифта. Крупные шрифты на билбордах различают практически все люди, чего не скажешь о 12-пиксельном шрифте большинства веб-сайтов.
4) Учитывайте, что большинство пользователей компьютера находятся на расстоянии 50-60 сантиметров от устройства, это позволяет не напрягать глаза слишком сильно. Но печатные источники мы воспринимаем на более близком расстоянии, ведь журнал, который мы читаем, находится на расстоянии меньшем, чем расстояние вытянутой руки, всего несколько десятков сантиметров. Основываясь на этих расчетах, видно, что шрифт в 16 пикселей на экране воспринимается как 10-пиксельный шрифт в книге.
16px текст на 24′ мониторе и 12pt текст в книге
16px текст на 15,4′ мониторе и 12pt текст в книге
Плохие шрифты снижают посещаемость сайта
Плохой шрифт на веб-сайте является самой распространенной проблемой пользователей (по результатам опроса за 2005 год этот пункт набрал большинство голосов). На данный момент ситуация не улучшилась – показывает выборка дизайнов SiteInspire. Средний размер шрифта для основного текста у них составляет те самые 12 пикселей, которые стали стандартом среди веб-дизайнеров, вопреки требованиям пользователей, большинство из которых жалуется на маленький размер шрифта. Из всех этих дизайнов нет ни одного (!) со шрифтом больше 14 пикселей, а у некоторых размер шрифта еще меньше – 10 px.
Популярные источники готовых дизайнов для сайта ElegantThemes и ThemeForest предлагают веб-разработчикам шаблоны, с размером шрифта не превышающим 12-13 пикселей.
Какое количество ваших читателей имеют 100% качество зрения и не страдают от чрезмерного напряжения глаз во время работы с компьютером? Неужели все ваши читатели моложе 20 и не испытывают проблем с различением миниатюрных шрифтов?
Скорее всего, это не так: каждый из десяти ваших читателей будет просто не в состоянии различить 10-пиксельный шрифт, но размер в 16 пикселей будет для них оптимальным. В противном случае даже людям с отличным зрением придется ближе придвинуться к монитору, чтобы разобрать мелкий шрифт, а это сильно понижает удобство пользования сайтом. Поза сидящего перед компьютером должна быть максимально естественна и удобна, вы же не хотите, чтобы ваш читатель чувствовал себя неуютно и неловко?
Не напрягайте читателя лишний раз, иначе до него не дойдет смысл прочитанного (если он даже прочитает ваш текст, а не покинет сайт сразу).
Не отпугивайте посетителей неудобными шрифтами, ведь чем больше у вас посетителей – тем выше доход принесет сайт в конечном итоге.
Не заставляйте пользователя думать!
Многие дизайнеры считают, что «проблемы утопающих – дело рук самих утопающих», и если у пользователя возникают проблемы с чтением шрифта на сайте, то он должен обратиться к функции приближения, которая позволяет увеличить текст. Но с точки зрения пользователя, легче поискать необходимую информацию на другом сайте, чем настраивать под себя неудобный интерфейс веб-ресурса. А многие пользователи даже не знают о существовании такой функцией, и, сталкиваясь с текстом, который невозможно прочитать, не долго думая нажимают кнопку «Назад».
Не тратьте деньги ваших клиентов понапрасну, создавая заведомо нерентабельный сайт. То, что кажется красивым вам, не всегда удобно для пользователя. Думайте о том, что интересует пользователя, и вы достигнете цели, какой бы она ни была.
Дизайн печатных изданий отличается от дизайна веб-ресурсов – это очевидно. И если крупные шрифты в полиграфии выльются в дополнительные затраты на каждый миллиметр использованной бумаги, то стоимость создания интернет-издания не зависит от размера шрифта, который вы используете, так что нет смысла ограничиваться компромиссными решениями.
16 px – это удобно
Если вы все-таки не воспринимаете крупный шрифт как приемлемый для сайта с эстетической точки зрения, то подумайте о том, что нет ничего более гибкого, чем вкус дизайнера. В основном, наши предпочтения основаны на том, что мы уже видели раньше. И если вы впечатлились веб-дизайном, выполненным с использованием 10-пиксельного шрифта, это ни в коей степени не отрицает того, что дизайн с 16-пиксельным шрифтом будет привлекательным.
Подумайте, а вдруг именно ваш дизайн станет новым стандартом? Сделать свой сайт более удобным для восприятия – это отличный способ преодолеть конкуренцию и сформировать обширную аудиторию пользователей.
Как и где выбрать шрифт для сайта – База знаний Timeweb Community
Какой шрифт выбрать для своего сайта – вопрос кажется простым, но только на первый взгляд. Как известно, в дизайне мелочей не бывает. И то, что сначала кажется не особо важным, в дальнейшем может сыграть важную роль.
1. Заголовки и текст
Для сайта оптимально выбрать два шрифта – один для заголовков, другой для текста. Это удобно для пользователей, им будет сразу ясно, где заголовок, а где текст. И дизайн самого сайта будет выглядеть более целостно.
Если двух шрифтов для выполнения нужных задач не хватает, и нужно использовать больше, то тогда придерживайтесь правила: не больше четырех шрифтов на странице.
Пример: заголовки – Verdana, текст – Arial.
2. С засечками или без?
Обычно шрифты с засечками (короткими штрихами на концах букв; так называемые serif-шрифты: Times New Roman, Garamond, Georgia) используются в печати. На бумаге такие шрифты воспринимаются хорошо, при чтении глаза устают меньше.
Следовательно, для веба обычно используются шрифты без засечек (так называемые sans-serif: Arial, Verdana, Trebuchet, Helvetica), потому что на экране, в отличие от бумаги, засечки превращаются в помехи, которые только усложняют восприятие текста. При этом важно оставлять нормальное межстрочное расстояние, чтобы глаз визуально мог отделять одну строчку от другой.
Считается, что любые правила можно нарушать, так что шрифты с засечками на сайте использовать можно… но очень-очень аккуратно и в исключительных случаях. Например, шрифтом с засечками можно набрать заголовок, чтобы сделать его еще более отличающимся от основного текста.
Кстати, есть еще шрифты monospace (Courier, Lucida Console, Monaco). Они похожи на шрифты для пишущей машинки, а сейчас используются для оформления кода.
3. Сочетание цветов
В отношении шрифтов действует такое же правило, как и в отношении общей цветовой гаммы сайта — используйте цветовой круг, и будет вам счастье. Например, удачные сочетания можно поискать в Color wheel от компании Adobe.
Естественно, тестируйте сочетаемость цветов не только между собой, но и на сайте, на том фоне, который вы выбрали. Особенно если фон не однотонный.
4. Выделение
Выделять текст можно не только цветом, но и выделением (текст — белый, выделение черным). Важно обратить внимание на контрастность — чем она выше, тем проще прочитать текст. Поэтому так легко воспринимать черные буквы на белом фоне и так сложно читать текст темно-серого цвета на светло-сером фоне.
5. Размер
Размер шрифта должен позволять без труда читать его.
В идеале это 12-14 пунктов; минимально — 10, максимально — 16.
Источники шрифтов
При выборе шрифта не забывайте про лицензию — ворованные шрифты грозят не только муками совести, но и проблемами с законом (а оно вам надо?). Сейчас существует множество разных бесплатных шрифтов, и вы легко найдете что-то подходящее для вашего сайта. Итак, где искать бесплатные шрифты.
Google Fonts
https://fonts.google.com/
Один из самых известных сборников бесплатных шрифтов. Присутствует латиница, кириллица и другие популярные и не очень языки; всего 900 семейств. Есть несколько фильтров — например, можно отсортировать шрифты по толщине букв, наклону или ширине.
Тексты можно редактировать, так что сразу можно посмотреть, как будет выглядеть нужная фраза в этом шрифте.
FontSpace
https://www.fontspace.com/
Здесь представлено больше 37 тысяч бесплатных шрифтов. Есть даже с пиктограммами (например, шрифт Trees Go с деревьями). Шрифты распространяются под разными лицензиями; некоторые нужно купить для того, чтобы использовать в коммерческих целях.
1001 Free Fonts
https://www.1001freefonts.com/
Еще один сайт с бесплатными шрифтами. Шрифты разделены на категории: например, в категории “Famous” (знаменитое) можно найти шрифты из «Парка Юрского периода» или «Черепашек-ниндзя».
FontStruct
https://fontstruct.com/
Ресурс для тех, кто хочет создать шрифт самостоятельно. Если такого желания нет, то можно заглянуть в галерею, где есть созданные другими пользователями шрифты.
Font Squirrel
https://www.fontsquirrel.com/
Еще один сайт со множеством разных шрифтов. Помимо бесплатного раздела, в нем есть раздел с платными шрифтами (Almost Free Fonts), где продаются шрифты с очень хорошей скидкой.
DaFont
https://www.dafont.com/
Здесь можно найти бесплатные шрифты для личного и коммерческого использования. Есть интересная категория шрифтов “Foreign look”, которые стилизованы под буквы из алфавитов разных стран: русские, арабские, азиатские и другие.
Urban Fonts
https://www.urbanfonts.com/
Здесь есть платные и бесплатные шрифты — вторые выделены в отдельный раздел “Free”.
Abstract Fonts
http://www.abstractfonts.com/
Еще одна коллекция с постоянно пополняющимися шрифтами.
А если ищете какие-нибудь оригинальные платные шрифты, посмотрите в MyFonts. Там довольно большая коллекция всевозможных шрифтов.
Заключение
Выбор шрифта — важный момент при создании собственного сайта. Не нужно впадать в крайности — слишком простые шрифты (особенно в заголовках) могут смотреться скучно, слишком сложные (фантазийные) — мешать восприятию самой фразы.
P.S.
Тем, кто интересуется шрифтами и типографикой, рекомендую посмотреть фильм Helvetica:
10 правил сочетания шрифтов в дизайне
Говорят, что типографика является наиболее важной частью графического дизайна. Она может поразить ваших читателей, если вы сделаете правильный выбор. Размер, цвет, межстрочное расстояние, кернинг – все эти элементы образуют внешний вид шрифта. Но перед всем этим идет процесс выбора самого шрифта.
Комбинации шрифтов в макетах, веб-сайтах и логотипах невероятно важны, поскольку они являются первым шагом, который оживляет ваш дизайн. Если вы пролистаете разработанную брошюру или макет, то заметите, что дизайнеры обычно используют два или три шрифта. Это потому, что сочетать шрифты может быть сложным даже для самых опытных дизайнеров.
Хорошее сочетание шрифтов важно, потому что оно определяет, насколько профессиональным, читаемым и эстетичным будет ваш дизайн. Если вы соедините неправильные шрифты, ваш дизайн пострадает, и читатель может чувствовать себя перегруженным и просто пропустить текст.
Используйте типографику как инструмент, чтобы ваш дизайн выделялся из толпы. Избегайте сочетания шрифтов только потому, что они вам нравятся; попытайтесь понять их. В этой статье я дам несколько советов и подсказок о том, как соединять шрифты и покажу лучшие сочетания шрифтов от Envato Elements.
Если вы хотите оживить свой дизайн, внешний вид шрифтов очень важно, тем более что они могут вызывать определенные настроения и чувства.
1. Используем одну гарнитуру шрифтов
Если вы начинающий дизайнер и до сих пор не знаете, как комбинировать шрифты, то выберите безопасный путь. Суперсемейства – это семейства шрифтов, которые имеют много весов и стилей в рамках одного шрифта. Придерживаясь одного суперсемейства, вы делаете еще один шаг в сторону создания минималистичного макета. Кроме того, вы будете знать, что шрифты будут хорошо работать вместе, потому что структурно они одинаковы.
Посмотрите на семейство шрифтов Bw Modelica. Этот минималистичный шрифт имеет четыре ширины, каждая из которых содержит восемь различных весов, включая курсив. Вы сможете использовать самый жирный для заголовков или просто для привлечения внимания, тонкий для подзаголовков и нормальный вес для основного текста. Поскольку это семейство включает в себя ширину, можно экспериментировать еще больше!
Преимущество использования суперсемейства заключается в том, что дизайнер позаботился о мелких деталях шрифта, адаптировав его для больших и маленьких масштабов. Поэтому, если вам нужно использовать один стиль для заголовка, а другой – для основного текста, вы будете уверены, что символы читаемы в обоих размерах. Суперсемейства имеют бесконечные варианты, которые позволяют смешивать их. Эти качества хороши, если вы ищете комбинации шрифтов для сайта или разрабатываете макет проспекта.
2. Придерживаемся минимализма
Не многим людям нравится устанавливать границы, но, когда дело доходит до сопряжения шрифтов, это всегда к лучшему. Старайтесь не тратить слишком много времени на объединение нескольких стилей шрифтов. Попробуйте придерживаться максимум двух или трех шрифтов – это сэкономит время и читатели не будут пропускать чтение текста.
Шрифты имеют индивидуальность и могут конкурировать за внимание на странице. Если вы выберете суперсемейство и остановитесь всего на нескольких опциях, это тоже имеет значение! Попробуйте объединить шрифт с засечками со шрифтом без засечек или рукописный шрифт со шрифтом без засечек; это и даст необходимое разнообразие, что сделает ваш дизайн захватывающим.
Ниже я сочетала Tharon Brush Style и Berlin. Tharon – это энергичный рукописный шрифт, который идеально подходит для логотипа или заголовка в редакционной статье. Шрифт жирный и сильный, поэтому, чтобы сбалансировать его, нужно что-то современное и базовое. Вот тут и приходит Berlin – этот шрифт без засечек геометрический и структурированный, а стилистически он противоположен рукописному шрифту. Berlin минималичный и чистый, идеально подходит для сочетания со шрифтом, который побуждает движение.
3. Выбираем контрастные шрифты
Выбор пары шрифтов для макета – серьезное дело. Вы хотите, чтобы шрифты контрастировали и дополняли друг друга. С анатомической точки зрения, если между шрифтами нет большой разницы, это может быть ошибкой. Распространено, и некоторые могут даже сказать, что это универсальное правило, использовать шрифт без засечек и шрифт с засечками, потому что они достаточно разные, чтобы объединить их в макете.
Некоторые дизайнеры могут даже рискнуть использовать два шрифта одной классификации. Например, если вы решите использовать два шрифта без засечек, убедитесь, что они вызывают похожее настроение, но полностью отличаются друг от друга.
Подумайте, как вы используете шрифты и как можете это сделать. Вы можете добиться контраста, смешивая веса, кернинг и стили. Если вы действительно склонны к тому, чтобы использовать два совершенно разных шрифта, то можете выбрать классический вариант без засечек и с засечками, или в зависимости от темы вы можете использовать рукописный и шрифт с засечками.
Ниже представлен Ropstone, старинный декоративный шрифт, вдохновленный классическими плакатами. Есть несколько способов подобрать ему пару: можем комбинировать с рукописным шрифтом или со шрифтом без засечек. Отличным рукописным шрифтом для сочетания с Ropstone является Ink Blank. Каллиграфическое ощущение приятно контрастирует с декоративными тонкостями Ropstone.
Если вы хотите упростить, выбирайте шрифт без засечек, например Noir Pro. Шрифт без засечек будет поддерживать декоративный шрифт, не мешая слишком сильно. Декоративный шрифт можно использовать только в особых случаях, например в заголовках. Между тем, шрифт без засечек можно использовать для основного текста, чтобы он был разборчивым и позволял декоративному шрифту сиять. Если вы работаете со старинной тематикой, это хорошая комбинация шрифтов для печати и редакционной статьи.
4. Передаем настроение (текст и содержание)
Шрифты похожи на людей: у каждого свой характер и индивидуальность. Если вы создаете дизайн с особым настроением, обратите особое внимание на тип шрифта, который используете. Например, на приглашении на день рождения ребенка уместно использовать декоративные шрифты. Но вы не захотите использовать тот же шрифт в официальном документе.
У каждого шрифта есть история, и чаще всего она передает определенный период времени. К примеру, избегайте использования sci-fi шрифт в тексте, который говорит о традиционных процессах печати. Прежде чем выбирать шрифт, прочитайте текст и поймите его значение, подумайте, какие шрифты могут раскрыть тему. Это применимо ко всем стилям шрифтов.
Almeda – это винтажный декоративный шрифт, который идеально подходит к тексту 1920-х годов, приглашению или редакционной статье. Хороший компаньон для Almeda – Bw Vivant. Этот элегантный шрифт передает очарование стиля арт деко. Сверхчистые формы делают его идеальным в качестве основного текста для поддержки тонкостей Almeda.
5. Шрифт для заголовков – спасение
Допустим, вы выбрали хорошую комбинацию шрифтов, но страница все равно выглядит слишком просто. Или вы хотите выделить заголовок на странице, но у вас уже есть два шрифта, с которыми вы работаете. Все в порядке: заголовочные/декоративные шрифты придут на помощь и помогут оживить дизайн.
Если вы пролистаете журнал, то заметите, что для основного текста обычно используется шрифт с засечками, а для заголовков и подзаголовков – без засечек. Но если вы любите приключения, вполне нормально использовать декоративный шрифт для заголовка. Избегайте использования этих шрифтов для основного текста, делайте большие массивы текста как можно более разборчивыми.
Ниже представлен Addington, классический и универсальный шрифт, который легко читается при небольшом размере шрифта. Mojita – это сложный геометрический шрифт, вдохновленный дизайном японского арт деко, ацтеков и майя. Чтобы сбалансировать визуальный шум, который приносит Mojita, Addington добавляет традиционную тишину. Я считаю это сочетание одной из лучших комбинаций шрифтов для печати, особенно для модного журнала.
6. Избегаем одного и того же стиля шрифта
Использование одного и того же стиля шрифтов может создать конфликт в дизайне. Это потому, что анатомически они выглядят почти одинаково. Мы должны помнить, что читатели не всегда профессиональные дизайнеры, поэтому они не заметят небольших различий между шрифтами.
Например, если вы хотите использовать два шрифта с засечками вместе, то будет трудно работать над проектом, и все может выглядеть как ошибка. Вместо этого вы можете попробовать использовать шрифт с прямоугольными засечками и с обычными засечками. Прямоугольные засечки тяжелее, чем обычные шрифты с засечками, такой шрифт может работать как ведущий в дизайне, тогда как шрифт с засечками может выступать в качестве поддерживающего шрифта.
Давайте возьмем Addington из предыдущего примера (разносторонний, помните?) и смешаем его с Bw Glenn Slab. Эта прочное и крепкое основание добавляет причудливость традиционному Addington. Вы можете использовать Bw Glenn Slab для заголовков; у него есть тяжесть и индивидуальность, чтобы возглавлять страницу. Многие газеты используют эту пару, потому что это одна из лучших комбинаций шрифтов. Шрифты с прямоугольными засечками достаточно разные и требуют внимания, в то время как традиционные с засечками придают разборчивость длинным текстам.
7. Используем иерархию в своих интересах
Если говорить о иерархии, то нужно учитывать множество свойств. Размер, цвет, вес, кернинг – эти переменные могут помочь вам создать более продуманный макет.
Например, для заголовка используется больший размер, чем для основного текста. Таким образом, читатель в первую очередь увидит заголовок, а вторым – наборный текст. Если вес шрифта заголовка аналогичен тому, который используется для основного текста, то дизайну будет не хватать контраста, и поэтому страница будет выглядеть монотонной.
Выбирайте шрифты, которые дают вам возможность поиграть с их весом. Nista Grotesk и Antique имеют различные веса, что позволяет вам решать, как смешивать и сочетать их.
Например, вы можете использовать Antique Regular для наборного текста и Nista Grotesk для заголовков. Современный шрифт помогает сохранить стройность в макете, а с помощью семи весов вы можете найти настроение и нужное решение для заголовка. Новые тренды в дизайне предполагают использование шрифта без засечек для наборного текста и с засечками для заголовков. Этот современный стиль идеально подходит для печати и резюме.
8. Держимся за дизайнера
Если вы начинающий дизайнер и все еще учитесь комбинировать шрифты, попробуйте сочетать шрифты одного и того же дизайнера. Помимо использования суперсемейств, это самый простой способ научиться сочетать шрифты. У дизайнеров особое видение и стиль, и это также относится к дизайнерам шрифтов.
У Envato Elements есть отличные дизайнеры с широким спектром шрифтов, которые можно использовать. Maulanacreative имеет обширную библиотеку рукописных шрифтов и шрифтов без засечек. Saturasi – это энергичные рукописные шрифты, которые обязательно выделятся в любом макете, здесь он в паре с Lostfield. Этот шрифт без засечек представляет собой небольшое семейство с несколькими весами, которые могут отлично смотреться в сочетании с тонкими линиями Saturasi.
Социальные сети становятся все более популярными, поэтому объединение этих двух шрифтов превосходно подходят, если вы ищете цепляющий дизайн. Комбинации шрифтов на сайте, как правило, статичны, с помощью этого прекрасного рукописного шрифта можно добавить движение.
9. Пробуем шрифты-дуэты
Дуэты шрифтов популярны на Envato Elements. Дизайнеры уже прошли строгий процесс поиска лучших комбинаций. Мы все любим экономить время! Эти пары пригодятся, если вы создаете свадебные приглашения, посты в социальных сетях, редакционные статьи и даже логотипы. Если вы ищете определенное настроение, то это отличный способ выбрать шрифты.
Ripon – это классический шрифт с засечками, дополненный рукописным шрифтом. Дуэт шрифтов имеет воздушный и традиционный вид с экспрессией. Идеально подходит для свадебных приглашений, бланков или модной одежды.
Дуэт шрифтов Audacity содержит шрифт без засечек и рукописный шрифт. Эта пара идеально подойдет, если вы ищете хендмейд или винтажный стиль для своего дизайна. Проекты только выиграют от этого варианта!
10. Доверяем своей интуиции
Как и любой навык, сопряжение шрифтов требует практики. Ваши навыки станут только лучше, если вы будете попробовать и комбинировать шрифты самостоятельно. Попробуйте самые безумные комбинации наряду с самыми традиционными, чтобы увидеть, как они работают. Нет точных данных о том, какие пары шрифтов будут идеально работать вместе. Все зависит от содержания и настроения, которое вы хотите вызвать. Попробуйте использовать несколько шрифтов, измените их размер, используйте разные цвета и смотрите на символы, как если бы они были изображениями. Это передает ощущения?
Этот потрясающий дуэт Lemonade – лучшая комбинация для свадебных приглашений. Не многие решатся сочетать рукописный шрифт с шрифтом с засечками, но это соединение работает очень хорошо. Современный рукописный шрифт сохраняет актуальность дизайна, а тонкие засечки второго шрифта добавляют гламура и контраста. Оба шрифта элегантны сами по себе, но вместе они образуют фантастических компаньонов. Так какие чувства они передают? Дружелюбие, подлинность, любовь: все положительные эмоции, которые вы хотели бы сочетать на свадебном приглашении.
Заключение
Вот 10 советов о том, что делать, а что не стоит, они помогут вам выбрать комбинацию шрифтов для следующего проекта. Хотя это правила получены из практики (а это означает, что вы можете их нарушить), они хорошо помогут выйти из зоны комфорта и поэкспериментировать.
Давайте соберем вместе все советы и подсказки из статьи:
- Используйте суперсемейство и воспользуйтесь его разнообразием
- Придерживайтесь минимализма – комбинируйте только два-три шрифта
- Выбирайте контрастные шрифты и стили
- Пробуйте передать настроение контента
- Придайте живости с помощью декоративных шрифтов
- Избегайте комбинировать шрифты одних и тех же стилей
- Используйте веса шрифтов для соблюдения иерархии
- Объединяйте шрифты от одного дизайнера
- Используйте шрифты дуэты (кто ж против хорошего совета по экономии времени!)
- Доверяйте своей интуиции и практикуйтесь, практикуйтесь, практикуйтесь
Существует множество эффективных вариантов, которые помогут вам избежать ошибок. Как только вы освоитесь, вперед – начинайте экспериментировать с самыми безумными комбинациями.
Автор: Laura Keung
Перевод: Екатерина Полковникова
Источник
Как выбрать шрифты для веб-дизайна
При создании идеального веб-дизайна нужно учитывать миллион вещей: создание графики, выбор цветов, выбор правильных изображений … Но есть одна вещь, которую люди любят недооценивать при создании своего веб-сайта, — это выбор шрифтов. Не делайте той же ошибки. Выбор правильного шрифта может иметь огромное влияние на окончательный вид вашего веб-дизайна. Это может показаться мелочью, но оно способно вывести ваш веб-дизайн на новый уровень.Позвольте мне показать вам, как это сделать. В этой статье я расскажу вам обо всем, что вам нужно знать при выборе шрифтов для своего веб-дизайна.
Есть рекомендации по использованию бренда? Следуйте за ними.
–
от Deni K для Civil PourРуководящие принципы бренда определяют, как используются элементы, составляющие ваш бренд. Рекомендации по использованию вашего бренда — важный инструмент для передачи последовательной стратегии брендинга. Это набор правил, которые помогут вам и вашему дизайнеру создать единую идентичность при соединении нескольких элементов вашего бренда, определяя ваши цвета, ваш логотип и, конечно же, вашу типографику.
Так что, если у вас уже есть руководство по бренду, с которым можно работать, обязательно придерживайтесь его при создании веб-дизайна. Если у вас его еще нет, вот как создать руководство по бренду.
Важность последовательности
У вас может возникнуть соблазн поэкспериментировать с новыми шрифтами при создании веб-дизайна, но не делайте этого! Каждый раз, когда кто-то получает вашу визитку или посещает ваш веб-сайт, он получает небольшое представление о ДНК вашего бренда и общем дизайне вашей компании. Вместе эти представления о вашем бренде должны создать полную и последовательную картину — иначе ваш бренд может в конечном итоге выглядеть как беспорядок, не имеющий ценности для узнавания.Вот почему крайне важно обеспечить единообразие всех ваших цифровых платформ и печатных материалов, когда речь идет о цвете, стиле и, как вы уже догадались, шрифтах.
Соответствие шрифтам существующего бренда
by FuturisticBug для NordkernРуководящие принципы бренда будут включать гарнитуры и семейства, размеры шрифтов и иерархию шрифтов, используемых вашим брендом, чтобы вы могли сразу интегрировать их в свой веб-дизайн. Но если ваш бренд использует неизвестный шрифт, используйте такие инструменты, как функция «WhatTheFont» в Myfonts.com может помочь вам определить название шрифта, с которым вы имеете дело.
Однако, если ваш бренд использует нестандартную типографику, ваш дизайнер попытается найти веб-шрифт похожего вида для использования в вашем веб-дизайне. Из-за различных веб-браузеров ваша настраиваемая типографика может выглядеть менее четкой и чистой, чем хотелось бы, поэтому многие веб-дизайнеры будут использовать шрифты Google Fonts, чтобы максимально соответствовать типографии вашего бренда.
У вас еще нет шрифтов и руководств?
–
Еще не выбрали шрифты вашего бренда? Вот несколько важных вещей, о которых следует подумать при выборе шрифта для вашего веб-дизайна:
Определите индивидуальность вашего бренда
Ваш выбор шрифта должен отражать индивидуальность вашего бренда, чтобы ваш дизайн выглядел хорошо.Вы занимаетесь традиционным бизнесом, или вы минималистский и современный, или веселый и необычный? Вы бы охарактеризовали свою компанию как ретро, классику, резкость, фанк? Прочтите эту статью, чтобы узнать о других вопросах, которые вы можете задать себе, чтобы понять свою уникальную индивидуальность бренда.
После того, как вы ответите на эти основные вопросы, вы получите представление о личности вашего бренда и о том, к какому стилю вы должны стремиться при своем веб-дизайне. Основываясь на этой идентичности, теперь вы можете выбрать правильные шрифты для своего бренда.
Выберите шрифты, соответствующие вашему бренду
Допустим, у вас есть магазин винтажной одежды с классной современной атмосферой. Вы можете смешать старый добрый шрифт для заголовков с классическим шрифтом без засечек для основного текста. Например, если вы используете красивый старинный шрифт, такой как Arvo, для заголовков, то неплохо использовать для основного текста шрифт без засечек, например Open Sans, который известен своей удобочитаемостью. Это придаст вам сбалансированный вид, неподвластный времени и современности, который идеально сочетается с вашим крутым ретро-брендом.
Или, допустим, вы представляете юридическую фирму или бренд элитной косметики и хотите, чтобы ваша типографика отражала доверие и профессионализм с оттенком класса. Вы можете выглядеть стильно, но в то же время классически и элегантно, используя шрифты с засечками, такие как Frank Ruhl Libre или Playfair Display, чтобы показать потенциальным клиентам, что вы цените надежность и первоклассное обслуживание. Если вы хотите узнать больше, Venngage написал прекрасную статью о психологии шрифтов, которая поможет вам сделать правильный выбор.
by gotzaНезависимо от того, какой шрифт вы в конечном итоге выберете, чтобы соответствовать своему бренду, убедитесь, что вы выбрали безопасный для Интернета шрифт, который прост в использовании и подходит для большинства браузеров.Вы спросите: «Что означает веб-безопасность»? Читай дальше что бы узнать.
Что такое веб-безопасные шрифты?
–
Использование безопасного веб-шрифта означает, что вашим посетителям не нужно устанавливать на компьютере определенный шрифт, чтобы правильно его видеть. Раньше, 10 лет назад или более, существовало примерно 13 семейств шрифтов, и веб-дизайнерам приходилось использовать только те немногие шрифты, которые будут отображаться в большинстве компьютерных систем. В настоящее время золотым стандартом являются шрифты Google Fonts, которые отлично отображаются в любом веб-браузере.
Имейте в виду, что многие бренды используют собственные шрифты или шрифты, не основанные на Интернете. В этом случае разработчики могут использовать программное обеспечение для преобразования шрифта в «веб-шрифт». Но иногда даже это не является гарантией того, что он будет хорошо смотреться на экране, особенно если вы хотите, чтобы ваша типографика выглядела очень четкой. Вот почему дизайнеры часто сталкиваются с проблемой поиска похожих (почти идентичных) веб-безопасных шрифтов, которые были бы бесплатными и хорошо отображались во всех веб-браузерах.
Какие типы шрифтов подходят для Интернета и почему это важно?
–
через Google Fonts.При поиске идеального безопасного шрифта для Интернета лучше всего просмотреть библиотеку Google Fonts, и в большинстве случаев вы найдете то, что ищете. С более чем 800 бесплатными лицензионными шрифтами это одно из лучших мест для поиска веб-шрифтов. Если вы включите эти шрифты в свои наборы шрифтов, почти каждый в конечном итоге увидит вашу страницу правильно. Поскольку эта библиотека шрифтов размещена в веб-службе, ваши посетители со всего мира будут видеть одну и ту же страницу с одним и тем же шрифтом. Кроме того, это гарантирует, что ваше присутствие в Интернете будет одинаковым для всех браузеров и устройств.
Как комбинировать разные шрифты в веб-дизайне
—
Когда вы создаете веб-сайт, скорее всего, вам понадобится более одного шрифта. Есть три основных правила, которым вы должны следовать при комбинировании шрифтов:
Первое фундаментальное правило комбинирования шрифтов — никогда не использовать более трех шрифтов в одном дизайне. Правило номер два — убедиться, что выбранные вами шрифты дополняют друг друга . И третье правило, которого вы хотите придерживаться, — всегда определять иерархию среди них.
пользователя MarkoSimić.Вот как это выглядит в действии: сначала определите основной шрифт, который является наиболее заметным и должен использоваться для заголовков. Совет: вы можете сопоставить этот шрифт со стилем вашего логотипа . Как правило, вы хотите, чтобы ваш основной шрифт привлекал внимание. Мне очень нравятся тяжелые шрифты, такие как Rubic Black, или слегка закругленные, такие как Nunito, для заголовков, но выбор шрифтов полностью зависит от вашего бизнеса и бренда. Затем выберите дополнительный шрифт, который будет использоваться для основного текста.Он должен быть легко читаемым при использовании для более длинных текстовых отрывков даже на маленьких экранах, поэтому мы могли бы выбрать шрифт, такой как Noto Sans, в дополнение к нашим основным параметрам шрифта. И, наконец, ваш третий шрифт должен быть акцентным шрифтом. Этот шрифт можно использовать на кнопках, CTA или для выделения определенных частей текста, чтобы привлечь внимание посетителей. Такой шрифт, как Monserrat, будет хорошо работать с нашим основным и второстепенным выбором.
Как разные типы шрифтов влияют на ваш веб-дизайн
—
Как сказал великий Винсент Ван Гог: «Великие дела не совершаются импульсивно, а представляют собой серию мелких вещей, соединенных вместе», поэтому выбирайте шрифты с умом.Умная комбинация шрифтов может оказать сильное влияние на ваш веб-дизайн.
автор LoudFrog для Coffee And Chokes BJJПосмотрите, как дизайнер использовал уникальный шрифт кисти в приведенном выше примере, чтобы подчеркнуть тему боевых искусств и создать культурную связь. Остальной основной текст и призыв к действию используют чистый, легко читаемый шрифт, сочетающий в себе разные размеры, а также все заглавные буквы, которые обрамляют и закрепляют основной шрифт и выделяют его. В результате получается хорошо сбалансированный дизайн, привлекающий внимание именно к нужным местам.
Видите, как два приведенных выше веб-дизайна имеют два совершенно разных вида? Дизайн для финансовых услуг Satoshi Nation имеет чистый и современный вид с немного угловатым шрифтом без засечек, в то время как в дизайне люксового кофейного бренда Wallenford используется элегантный шрифт с засечками, чтобы подчеркнуть его элитный стиль бренда. В обоих случаях выбор шрифтов легко сочетается с остальным дизайном и прекрасно передает, что отстаивают бренды. В этом сила типографики.
Скажи это шрифтом
–
Выбор правильного шрифта для вашего веб-сайта полностью зависит от цели, которую вы хотите достичь.Когда вы думаете о стиле и дизайне, вам нужно иметь повестку дня и понять, как вы хотите, чтобы вас представили миру. И шрифты — идеальный инструмент для этого. Хотите быть стильным, серьезным или традиционным? Выберите элегантный шрифт с засечками. Хотите выглядеть современно и минималистично? Выберите чистый шрифт без засечек. Ищете что-то среднее? Комбинируйте шрифты, чтобы получить практически любой стиль, какой захотите. Проще говоря, ваш выбор шрифтов многое говорит о вашем бизнесе, поэтому выбирайте с умом.
Ваш веб-дизайн нуждается в прикосновении эксперта?
Работайте с нашими талантливыми веб-дизайнерами, чтобы создать что-то действительно уникальное.
Красивый Интернет: 10 лучших шрифтов для Интернета
БрендингЭрик Гровс
В Flying Hippo мы вроде снобы шрифтов. Мы постоянно ищем лучшие веб-шрифты. В частности, есть 10 веб-шрифтов, которые мы довольно часто используем в наших веб-проектах.У каждого семейства шрифтов свой характер, внешний вид и различные вариации. Имея богатый выбор стилей для каждого из этих шрифтов, есть много способов включить их в наш веб-дизайн.
10. Арво
Arvo — очень хорошее семейство плоских шрифтов с засечками, созданное Антоном Коовитом. Он имеет 4 различных варианта: от обычного и нормального курсива до полужирного курсива. Довольно редко можно найти полное семейство веб-шрифтов Slab Serif, и этот шрифт довольно близко удовлетворяет все наши потребности в сильных символах и высокой удобочитаемости.В сочетании с основным шрифтом без засечек Arvo отлично подходит для заголовков и субтитров.
9. Дисплей Playfair
Playfair — уникальный шрифт, созданный Клаусом Эггерсом Соренсеном. Нам он нравится больше всего за его нетрадиционные, мягкие засечки и приятный курсив. У него классические контрастные буквы и нежные линии волос. Это один из наших лучших вариантов шрифта с засечками, кроме обычных шрифтов, таких как Georgia и Time New Roman. Обычно мы используем Playfair, чтобы добавить «классический» вид заголовкам и заголовкам сайтов.
8. Желтохвост
Yellowtail — действительно забавный скриптовый шрифт. Он вдохновлен шрифтами с плоской кистью и средней плотностью, а стиль шрифта основан на Gillies Gothic и Kaufmann. Он имеет очень уникальный внешний вид и имеет тенденцию быть разборчивым даже при небольшом размере. Мы рекомендуем оставить его выше 14 пикселей для лучшей читаемости.
Блог: Ваше агентство слишком велико?
7. Merriweather
Это один из наших любимых шрифтов с засечками.Merriweather имеет очень геометрическое ощущение и очень хорошо читается при небольших размерах. Его даже можно использовать как основной шрифт из-за его естественной ширины и веса букв. Ваш основной экземпляр будет отлично выглядеть, когда он будет обработан Мерривезером.
6. Titillium Sans and Dosis
Titillium — очень красивый шрифт без засечек. Он имеет очень четкие буквенные формы, которые позволят вам использовать его для заголовков или в качестве основного текста. Нам он нравится, потому что он выглядит «современно», а также имеет довольно обширное семейство шрифтов с различными вариациями веса.Он хорошо читается при разрешении 8 пикселей и выше. Мы использовали его на сайте портфолио художника, показанном ниже.
Dosis — еще один шрифт, который имеет очень уникальный и «современный» чистый вид. Его буквы имеют более округлую форму, но придадут вашему сайту больше характера и разборчивости. Он имеет легкий вес, который можно использовать в больших заголовках. Оба этих шрифта могут помочь добавить больше характера вашему дизайну.
5. Алегрея
Alegreya — отличный шрифт с засечками, который может заменить любой веб-шрифт с засечками по умолчанию.Первоначально он предназначался для литературы с разным весом букв и высокой удобочитаемостью. Шрифт имеет каллиграфический вид, а также включает в себя более современный вид с засечками. Он определенно входит в число наших любимых шрифтов.
4. Open Sans
Мы заметили, что Open Sans стал одним из наиболее часто используемых шрифтов в Интернете. Многие известные бренды проходят процесс очистки своих веб-сайтов, и многие из них используют Open Sans или Lato, чтобы обеспечить высокую удобочитаемость и удобный внешний вид.Open Sans имеет отличную разборчивость, а его буквенные формы невероятно сильны с очень обширной библиотекой шрифтов, этот шрифт является очень сильной заменой шрифтам без засечек по умолчанию.
3. Альтернативная готика
Нам нравится этот шрифт, и мы используем его всякий раз, когда нам нужно смешать основной текст или добавить ясности нашему сайту. Альтернативная готика была разработана Моррисом Фуллером Бентоном как аналог Franklin Gothic, и она отлично смотрится, когда ее используют в заголовках.Наряду с этим шрифтом нам очень нравится сочетание Alternate Gothic и Proxima Nova, которое используется вместе на сайте Grand Blue Mile.
2. Освальд и Абель
Если вы ищете сокращенный шрифт без засечек, который выглядит как League Gothic, Oswald — самый сильный соперник. Это отличный шрифт, вдохновленный классическими заголовками газет, и был разработан специально для бесплатного использования в Интернете и в редакционных материалах.
Abel — еще один отличный современный сокращенный шрифт.Первоначально используемый в заголовках новостей и постерах, этот шрифт также хорошо работает в Интернете. Его четкие буквы идеально подходят для больших заголовков и заголовков, а при меньших размерах он остается разборчивым. Хотелось бы, чтобы было больше вариантов веса, но возможно, что позже у этого семейства будут пополнения.
1. Тиса
Tisa, вероятно, является лучшей заменой Helvetica или Arial по умолчанию в Интернете. Это также шрифт номер один, который мы выбираем всякий раз, когда хотим добавить больше символов в дизайн сайта, сохраняя при этом четкий, читаемый стиль.
Если вам нужна удобочитаемость, Tisa чрезвычайно разборчив во многих размерах текста, создавая уникальный дизайн дисплея.
ПОЗНАКОМЬТЕСЬ О ВАШЕМ БРЕНДЕ . МЫ ОБЕЩАЕМ НИКАКИХ ДЕЙСТВИТЕЛЬНЫХ УДАРОВ ПО ГРУНУ.
Акция Артикул
CSS шрифтов Google
Google Шрифты
Если вы не хотите использовать какие-либо стандартные шрифты в HTML, вы можете использовать Google Fonts.
Google Fonts можно использовать бесплатно, и вы можете выбирать из более чем 1000 шрифтов.
Как использовать шрифты Google
Просто добавьте ссылку на специальную таблицу стилей в разделе
, а затем обратитесь к шрифту в CSS.Пример
Здесь мы хотим использовать шрифт «Sofia» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Пример
Здесь мы хотим использовать шрифт «Trirong» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Пример
Здесь мы хотим использовать шрифт «Audiowide» из Google Fonts:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Примечание: При указании шрифта в CSS всегда указывайте в минимум один запасной шрифт (чтобы избежать неожиданного поведения). Итак, здесь вы также должны добавить общее семейство шрифтов (например, serif или sans-serif) в конец списка.
Чтобы просмотреть список всех доступных шрифтов Google, посетите наш How To — Google Fonts Tutorial.
Использовать несколько шрифтов Google
Чтобы использовать несколько шрифтов Google, просто разделите имена шрифтов вертикальной чертой.
символ ( | ), например:
Пример
Запросить несколько шрифтов:
Результат:
Попробуй сам »Примечание: Запрос нескольких шрифтов может замедлить работу ваших веб-страниц! Так что будьте осторожны с этим.
Стилизация шрифтов Google
Конечно, вы можете стилизовать шрифты Google по своему усмотрению с помощью CSS!
Пример
Стиль шрифта «Sofia»:
Результат:
Lorem ipsum dolor sit amet.
123456790
Попробуй сам »Включение эффектов шрифта
Google также включил различные эффекты шрифтов, которые вы можете использовать.
Сначала добавьте effect = effectname в Google API,
затем добавьте имя специального класса к элементу, который будет использовать специальный
эффект.Имя класса всегда начинается с font-effect- и заканчивается именем эффекта .
Пример
Добавить эффект огня к шрифту «София»:
body {
семейство шрифтов: «София», без засечек;
font-size: 30 пикселей;
}
София, ул. Пожар
Результат:
Попробуй сам » Чтобы запросить несколько эффектов шрифта, просто разделите имена эффектов вертикальной чертой
( | ), вот так:
Пример
Добавьте несколько эффектов к шрифту «Sofia»:
body {
семейство шрифтов: «София», без засечек;
font-size: 30 пикселей;
}