Лучшие веб-шрифты для создания заголовков
Автор: Диана Сиддикви Рейтинг топика: +1
IT-копирайтер, переводчик, контент-менеджер.
В бесплатной библиотеке веб-шрифтов Google можно найти много интересного. Главное отличие этих шрифтов заключается в том, что они загружаются через серверы Google. Они оптимизированы таким образом, что выдерживают тяжелые нагрузки и никогда не замедляют открытие веб-страницы. Это замечательно, но все же самая сложная часть работы – найти шрифт, который будет идеально соответствовать дизайну. В типографике самой важной частью любой страницы является заголовок, так что логично начать поиски шрифтов для сайта именно с заголовка. В этой статье собраны действующие примеры использования Google-шрифтов и если вам нужен красивый вариант для заголовка, вы можете воспользоваться доказавшими свою работоспособность идеями.
Roboto Slab
Родительский шрифт Roboto сам по себе очень неплох, но для заголовков больше подходит версия Roboto Slab. Это плотный, хорошо сбалансированный шрифт с небольшими засечками. Этот шрифт сегодня можно увидеть на самых разных сайтах. У Roboto Slab можно варьировать размер символов и интервал между буквами и он всегда будет выглядеть эффектно. Но самое главное – данный шрифт отлично смотрится на любых сайтах бизнес-тематики и, к примеру, в блогах, посвященных новым технологиям.
На сайте Hongkiat можно увидеть, насколько хорошо смотрится Roboto Slab в заголовке – он буквально «отскакивает» от фона и прекрасно читается. Это плотный, почти квадратный шрифт, в нем чувствуется основательность, которая важна для некоторых заголовков. Roboto Slab прекрасно вписывается в технологическую среду, но его можно использовать и в других темах. Вот пример: сайт Wide Open Country.
Может показаться, что Roboto Slab чересчур агрессивен, но от этого можно легко уйти, снизив контрастность.
Серый цвет шрифта смотрится очень неплохо, особенно если чуть увеличить межстрочный интервал, как это сделано на сайте Copyhackers. Заголовок темно-серого цвета выглядит очень сбалансированным и хорошо сочетается с остальным элементами дизайна. Если для сайта нужен плотный шрифт с засечками, то Roboto Slab будет одним из лучших вариантов. Он красиво выглядит во всех размерах, к тому же всегда можно поэкспериментировать с шириной штриха.
Open Sans
Open Sans это шрифт, который подходит почти для всего. Это универсальный основной шрифт, который замечательно смотрится в тонком начертании, он очень удобен и может украсить любую веб-страницу. Вот хороший пример – сайт How-To Geek, где шрифт Open Sans используется в заголовках и подзаголовках.
Open Sans отличается своей простотой, это «обычный» шрифт, поэтому дизайнеры редко обращают на него внимание. При этом Open Sans универсален и будет уместен практически в любом дизайне.
Но это еще не все. В библиотеке Google можно найти множество вариантов этого шрифта, таких, как Open Sans Condensed. Сжатое начертание также работает очень хорошо, особенно в заголовках. В дизайне игрового блога GamesRadar используется начертание Condensed, причем заголовок охватывает всю ширину страницы. Поскольку узкие буквы занимают меньше места, это позволяет использовать больше слов в заголовке без ущерба для композиции. Open Sans многолик, и если не нравится сжатое начертание, можно набрать заголовок тяжелым шрифтом, как на сайте Android Autority.
Делаем вывод: Open sans работает практически в любом дизайне и прекрасно подходит для заголовков. Конечно, над начертанием нужно подумать и потом немного повозиться с CSS, но результат того стоит.
Montserrat
Montserrat это очень интересный шрифт без засечек с примерно одинаковым соотношением ширины и высоты символов. По сравнению с Open Sans он выглядит более основательно, но в этом есть определенные преимущества. В Montserrat имеются все варианты начертаний от ультра-тонкого до жирного, а также соответствующие курсивы. Это означает, что дизайнер может в одном макете использовать разные варианты одного и того же шрифта, что существенно ускорит отображение страницы в браузере.
На главной странице Kindred можно увидеть, как хорошо смотрится Montserrat в заголовках. Шрифт настолько сбалансированный, что используется на всех страницах и не только в заголовках.
Montserrat, как и любой другой универсальный шрифт, позволяет экспериментировать с толщиной штриха, в результате чего можно снижать или увеличивать его контрастность. Данный шрифт хорошо подходит для корпоративных сайтов или для сайтов-портфолио, где важно привлечь внимание к заголовку.
Но желательно для заголовков использовать более жирное начертание.
На сайт Push Square используется самое жирное начертание Montserrat для всех заголовков. Естественно, это слегка увеличивает интервал между буквами, но его можно уменьшить, чтобы немного сократить длину строки. Шрифт очень читаемый, заголовок буквально прыгает в глаза, так что Montserrat рекомендуется использовать, когда нужно создать эмоционально насыщенный заголовок.
Lato
Шрифт Lato также является неплохим выбором, если нужно подобрать для заголовков универсальный шрифт без засечек. Шрифт работает в любом дизайне, он слега безликий и совсем не вычурный. Он не жесткий, не броский и при этом имеет множество видов начертания. В принципе, Lato смело можно использовать как основной шрифт, но для заголовков и подзаголовков он подходит идеально.
На сайт Anynines можно увидеть Lato практически везде. Он в навигации, в заголовках страниц и в маленьких текстовых блоках.
Если дизайнер решит использовать Lato в своем проекте, ему стоит поэкспериментировать с различными начертаниями этого шрифта. Процесс создания стилевого единства займет какое-то время, но в результате это хорошо отразится на внешнем виде и скорости открытия страницы. Lato – это самый безопасный выбор, он подходит для любых страниц и отсутствие индивидуальности ничуть не отражается на читаемости заголовков.
Catamaran
Catamaran – уникальный шрифт с большим числом начертаний, что делает его отличным выбором для создания заголовков. При этом Catamaran прекрасно работает в качестве основного шрифта, но там нужно использовать тонкое или нормальное начертание. Жирный шрифт – только для заголовков. Вот как выглядит catamaran на сайте Full Home Living, где используется самое тяжелое начертание.
Самое лучшее в шрифте Catamaran – это необычная форма букв. Шрифт выглядит действительно уникальным, при этом он очень спокойный и доброжелательный. Данный шрифт прекрасно подходит для портфолио или блога по творческой тематике. Он слегка игривый, так что не стоит использовать его в новостных сайтах или на сайтах бизеес-тематики. Кроме того, нужно быть осторожным с тяжелыми начертаниями – в некоторых заголовках шрифт может выглядеть некрасиво.
Raleway
Шрифт Raleway, безусловно, один из самых читаемых веб-шрифтов из библиотеки Google. В первую очередь читаемость обеспечивают тщательно выверенные линии символов – шрифт выглядит очень сбалансированным.
В техноблоге ReadWrite шрифт Raleway используется для всех заголовков. Неплохо он выглядит и в небольшом размере, например, в малых текстовых блоках. Если размер шрифта достаточно большой, то шрифт теряет в весе, но это можно легко изменить, уменьшив расстояние между символами.
Слегка ужатый заголовок будет лучше читаться.
У шрифта Raleway есть одна особенность – его строчная W выглядит как две буквы V. Это не то что бы плохо, но многим не нравится. Тем не менее, шрифт отлично подходит для заголовков. Шрифт не самый простой, но у него есть свое лицо и своя энергетика. Так что его обязательно стоит протестировать в макете.
На этом все, спасибо за внимание!
Источник
Корреляция шрифтов
Знакомство со шрифтами будет не практичным и неполным, если не уделить внимания их сочетаемости друг с другом.
По мере того, как шрифтовые дизайнеры представляют публике новые разработки, выбор шрифтов для конкретной работы усложняется. На первый план выходит уже не их качество (в целом, заметно повысившееся), а эффективность совмещения. Несочетаемые гарнитуры вызывают безотчётное раздражение, придавая изданию неуловимый, но явственный душок провинциальности и дилетантства. Напротив, грамотный подбор шрифтового материала — непременное условие профессиональной работы.
О сочетаемости шрифтов можно сказать многое — от философских обоснований до практических советов. С них и начнём.
Просто, но со вкусом
Как известно, умный в гору не пойдёт. Вот и подбор гарнитур можно упростить до предела — вы проявите грамотность и знание модных тенденций, если обойдётесь одной-единственной, но очень развитой супергарнитурой, подобной тем, над которыми сейчас работают ведущие дизайнеры мира. Считается ценным и перспективным объединять не только жирные, полужирные, узкие, широкие, прямые и курсивные, но и варианты с засечками и без, заголовочные начертания, неалфавитные символы, капитель. Число начертаний такого шрифта может перевалить за сотню. Например, у Тезиса (Thesis), разработанного голландским художником Лук[ас]ом де Гроотом (Luc[as] de Groot), их даже с избытком — более 300.
Супергарнитурой таких масштабов можно сделать что угодно. Это так удобно, что в типографически благополучных странах стало почти стандартом.
В одном шрифте найдутся начертания для основного текста, заголовков, колонтитула, примечаний и сносок. Об их гармоничности можно не думать — автор шрифта всё предусмотрел. Возникает вопрос: доступны ли всем современные супергарнитуры, существуют ли они в кириллице?
Ответ весьма неожиданный: всё не так плохо, как мы привыкли считать. Задача «догнать и перегнать Америку» здесь, конечно же, нереальна, да её никто и не ставит. Но работа в том же направлении активно ведётся и у нас: уже есть ITC Официна (ITC Officina Sans & Serif) Эрика Шпикермана и Юста ван Россума (Erik Spiekermann & Just van Rossum) как в брусковом, так и в рубленом варианте, кириллицу доработали Тагир Сафаев и Ольга Чаева; есть близнецы Масон Сериф и Масон Санс (Mason Sans & Serif) Джонатана Барнбрука (Jonathan Barnbrook), дизайнер кириллической части Владимир Ефимов. Если просмотреть последний каталог ParaType, будет ясна тенденция к разрастанию гарнитур. Так, в кириллической ITC Франклин Готик (ITC Franklin Gothic) 22 начертания, в FF Мета (FF Meta) — 20, в Битстрим Купер (Bitstream Cooper) — 10,в ITC Бодони (ITC Bodoni) — 7, в Прагматике (Pragmatica) — 52.
И работа над развитием популярных шрифтов продолжается; имеет смысл постоянно держать руку на пульсе шрифтовой жизни.
Банальности
Типографика — область искусства, где повторения общеизвестного совсем неплохи, и бояться их незачем. Ещё один способ оградить себя от всяких затруднений — применить самые простые шрифтовые пары Таймс/Гельветика (Times/Helvetica), Ньютон/Прагматика (Newton/Pragmatica) или чуть более современные ITC Гарамон/ITC Франклин Готик (ITC Garamond/ITC Franklin Gothic), ITC Чартер/ФриСет (ITC Charter/FreeSet). Трудно ошибиться, используя всего два шрифта — антикву и гротеск. Одновременно вы уважите правило, гласящее, что на одной странице не применяется больше 2-3 гарнитур. Но больше-то и не нужно, учитывая сказанное выше о числе начертаний. Кстати, правило трёх гарнитур в последнее время модно нарушать, так что, соблюдая его, вы окажетесь оригинальны.
Несколько менее тривиальный ход — опять довериться профессионалам, только уже при покупке библиотеки шрифтов.
Приобретая шрифты у разработчика, можно попросить сочетающиеся гарнитуры.
Разъяснения
Но всё-таки любые правила скучны для тех, кто склонен давать волю фантазии. Совет на этот случай таков: выбирайте любое сочетание, только пусть оно будет вразумительным и осмысленным. Разберитесь, чем обусловлен контраст шрифтов и для чего он вам нужен. Наименее удачными признаны сочетания без очевидного контраста, но и без сходства; где нет гармонии, различия смазаны и случайны. Особенно скверны сочетания разных версий одного рисунка. Сохрани вас Бог от использования вместе Прагматики и Гельветики, Таймса и Ньютона, а также близких по рисунку Ориджинал Гарамона и ITC Гарамона (Original Garamond/ITC Garamond), Гельветики и Универса (Helvetica/Univers), ITC Бодони и Дидоны (ITC Bodoni/Didona). Да и зачем, скажите на милость, это было бы нужно?
То, что вы хотите сказать шрифтовым оформлением текста, должно звучать внятно.
Именно этой цели и служат контрасты шрифтов — как, впрочем, и любые контрасты в дизайне. Ни одна аудитория не любит, когда перед нею кто-то мямлит и переминается с ноги на ногу — а упомянутые шрифтовые сочетания выглядят именно так.
Уходя с проторенных дорог, вы, может быть, захотите совместить разные гротески и разные антиквы. Здесь универсальных советов нет, остаётся лишь быть внимательным. Например, открытые и закрытые гротески плохо сочетаются. Если два шрифта применяются в близких кеглях, то ключевую роль играют цвет и пропорции — они должны гармонировать.
Есть шрифты, которые считаются «дружественными» и гармонируют с большим числом различных гарнитур; другие же, по мнению специалистов, в дизайне «тянут одеяло на себя». Правда, мнения о сочетаемости рисунков могут сильно расходиться. Чем своеобразнее, ярче и оригинальнее шрифт, тем, как правило, хуже он терпит соседей.
Но можно совместить даже несочетаемое, если утопить невнятность сочетания рисунков в ярком контрасте чего-нибудь другого, например, насыщенности и кегля.
Даже ITC Гарамон с Ориджинал Гарамоном или Мыслью могут ужиться, если первый применён в крупном и жирном заголовке, а второй — в мелком тексте. Самая тонкая Прагматика может оказаться совсем неплохой рядом со сверхжирным Универсом.
Идеи и мнения
В зарубежной литературе встречается немало советов по сочетанию шрифтов — вплоть до развёрнутых таблиц на десятки шрифтовых пар. Часть советов и примеров перекочёвывает в наши издания, причём в неизменном виде. К сожалению, там зачастую фигурируют шрифты, не имеющие кириллических версий. Да и когда кириллица присутствует, следует понимать, что кириллический Таймс — не совсем то же, что Таймс оригинальный. А раз уж речь зашла о Таймсе, вспомним, что русскоязычных Таймсов (как и Гельветик) много, и чем качественней выполнена кириллизация шрифта, тем лучше он сохраняет все свойства латинского прототипа. У латинского шрифта свой строй, своя графика, соответственно, и нюансы сочетаемости могут различаться. Смотрите и пробуйте!
Известный канадский исследователь типографики Роберт Брингхерст (Robert Bringhurst) советует выбирать для совместного использования шрифты одного дизайнера.
Независимо от разновидностей и групп, к которым они формально относятся, всегда найдётся глубокое внутреннее родство.
Другой логичный совет — обратить внимание на историю шрифта, на ту внутреннюю идею, которую он стремится выразить. Многие шрифты носят отпечаток времени. Либо они сознательно созданы автором в духе того или иного исторического периода, либо имеют собственную историю применения.
Не упускайте этого из вида — и станет ясно, почему, к примеру, Академическая в тексте так странно смотрится с заголовками, набранными сверхжирным ФриСетом. Зато её сочетание со старыми гротесками вопросов не вызывает.
Похоже объясняется, почему так плохо гармонирует с остальными шрифтами Курьер. Ведь это шрифт пишущей машинки и допотопного принтера, царивший там, где других шрифтов не было и в помине. Сейчас он — символ технической простоты и программистски-презрительного отношения к оформлению текста. Ещё он прочно ассоциируется с программным сбоем, когда ваш принтер «забывает» о том, что на свете есть какие-то шрифты, кроме Курьера… Мы просто-напросто не привыкли видеть Курьер в сочетании с чем-либо.
Зато в зарубежной типографике Курьер подобных свойств не имеет. Там это всего лишь один из многих шрифтов машинописного типа, существующий во множестве прекрасных версий и рекомендуемый к применению с Баскервилем и многими другими.
Очень часто шрифт напоминает не только о времени, но и о месте, явлении, событии. Он может перенести читателя в университетскую библиотеку или в международный аэропорт, в великосветский салон или на уличный митинг. Сочетаемость шрифтов трудно отделить от сочетаемости их со всем остальным: форматом издания, параметрами вёрстки, качеством и цветом бумаги, иллюстрациями, темой и литературным стилем. У газет, журналов, книг, выставок и уличных вывесок разные традиции шрифтового оформления. Выбор шрифтов для книги не всегда будет хорош в журнале, и наоборот.
По мере движения к вершинам мастерства правил сочетаемости шрифтов оказывается столько, а границы их применения размываются так сильно, что проще вовсе отказаться от правил в пользу творчества и интуиции.
Согласно мнению автора многих успешных шрифтовых проектов Тагира Сафаева, на свете нет абсолютно несочетаемых шрифтов. Самая неожиданная шрифтовая «команда» может эффективно сработать, будучи применённой в нужном месте и должным образом.
Выбор шрифтового сочетания чем-то похож на сочинение стихов: как поэт отыскивает рифму к удачной строчке, так и дизайнер ищет компаньонов приглянувшемуся шрифту. Иногда он чувствует, что первоначальный замысел нужно слегка изменить, и корректирует сделанное.
У ведущих дизайнеров, типографов обычно есть излюбленные сочетания шрифтов. Чтобы рассмотреть их, возьмём наугад несколько примеров с книжной полки.
Ежемесячный журнал «Юный натуралист», № 2, 1976
От шрифтов пестрит. Тексты набраны Академической, Журнальной рубленой и Литературной гарнитурами. Заголовок передовой статьи — Газетная рубленая (сейчас её цифровая версия находится в каталоге фирмы «Интермикро»), текст — Академическая полужирная.
Далее сочетаются: светлая Академическая, полужирная Журнальная рубленая и Литературная в примечаниях. Затем Журнальная рубленая выступает в заголовке, Академическая остаётся текстовой, а курсивная Литературная выполняет вспомогательные задания. В подзаголовках появляется гротеск, носивший в те годы немудрёное название Рубленая гарнитура. Во второй части журнала оформление становится ещё «веселее»: заголовки набраны декоративным шрифтом 1812 год (сделанным к юбилею в 1912 г.), гарнитурой Древняя (близкий к ней по рисунку Гермес есть в библиотеке шрифтов ParaType), шрифтом Коринна для ручного набора (не точно совпадающим с нынешней цифровой ITC Korinna) и Пальмирой. Текст в разделе «Клуб Почемучек» набран гарнитурой Школьная, а заголовки всё той же Рубленой. Журнал, по-видимому, печатался офсетной печатью, в результате чего все шрифты несколько «растиснуты» и выглядят жирнее, чем было предусмотрено. Что же до них самих, то здесь задействовано практически всё, чем располагало на тот момент издательство «Молодая гвардия».
Как видим, основные составляющие вёрстки 70-х — Академическая, Журнальная рубленая, Литературная, Газетная рубленая и Школьная — благополучно дожили до наших дней и имеются и в современных цифровых библиотеках. Если повторить те же сочетания в дизайне сейчас, родится эффект путешествия во времени.
Ежемесячный журнал «Новый мир», № 10, 1996
Комментировать почти нечего. Прошло 20 лет, и журналы перешли на компьютерную вёрстку, но набор шрифтов оставлял желать… Весь журнал набран одним, весьма невразумительным шрифтом, чьё название Тип Таймс метко отражало его сущность. Это действительно был не Таймс, а что-то «типа этого», доставшееся журналу в наследство из 80-х. Сейчас он канул в Лету, вытесненный более качественными версиями Таймса (например, Ньютон). Впрочем, если вам попадётся шрифт под названием Респект с индексом IM («Интермикро») — это и есть наш знакомый из скудного перестроечного набора.
Иллюстрированный еженедельник «Большой город», № 9, 2003
Очень красивый и стильный проект, к сожалению, быстро утративший блеск первоначального замысла.
Сочетание шрифтов классическое: гротеск/антиква. В качестве текстовой антиквы выбрана Октава, оригинальный шрифт Владимира Ефимова. Окружающий её со всех сторон (от аршинных заголовков до выходных данных издания) рубленый шрифт — Гротеск Любопытный, кириллизованный Сафаевым специально для журнала. Латинскую часть шрифта разработал в 1997 г. Тобиас Фрер-Джонс на основе гарнитуры Bell Gothic (C.H.Griffith, 1937).
Еженедельный журнал «Итоги», 2004
Шрифт — знаменитый ФриСет. Един во всех лицах. Подобно соевым бобам, превращающимся в руках кулинаров в первое, второе и третье, он безотказно работает и в заголовках, и в тексте, и во всех элементах дизайна, причём журнал ничуть не кажется однообразным и скучным. Живая иллюстрация к сказанному в начале статьи. «Соевый» дизайн не только удобен и практичен, но также моден и престижен. Были бы только подходящие гарнитуры!
ФриСет разработан Сафаевым в 1992-99 гг. на основе шрифта Frutiger фирмы Mergenthaler Linotype (1976), созданного Адрианом Фрутигером.
Еженедельный журнал «Русский Newsweek», 2004
Такие крупные успешные издания часто делают своей визитной карточкой шрифты, созданные специально для них. При открытии региональных отделений непременно делается заказ на локализацию фирменных шрифтов, чтобы сохранить характерный облик оригинального журнала или газеты. В американской версии журнала используется шрифтовая пара Vinsent (антиква)/Knockout (гротеск). Vinsent разработан Мэтью Картером (Matthew Carter) специально для Newsweek. Рисунок основан на ранних работах лондонского словолитчика начала XIX в. Винсента Фиггинса, известного введением в обиход брусковых шрифтов. Knockout — обширная супергарнитура, очень популярная в американской прессе (New York Times Magazine, Premier, Sports Illustrated и др.). Автор — американский дизайнер шрифта Джонатан Хёфлер (Jonathan Hoefler). Кириллические версии обеих гарнитур создал в 2004 г. Сафаев.
Ежедневная газета «Коммерсантъ», 2004
Послеперестроечный властитель дум, введённая которым в начале 90-х мода на Гарамон не изжита до сих пор, сейчас работает гротеском Гелиос (отечественная версия Гельветики) и антиквой, сделанной по заказу на основе шрифта Свифт голландского художника Герарда Унгера (Gerard Unger).
Схема всё та же: антиквой набирается слитный текст статей, а гротеском — вся служебная информация и небольшие заголовки. Отличие от схемы «Большого города» лишь в том, что заголовки и подзаголовки делаются тоже антиквой. Как и Knockout в Newsweek, Гелиос в «Коммерсанте» выбран, видимо, потому, что имеет достаточное число начертаний.
Литература
- Сафаев Т. Антиква+гротеск (шрифтовые соответствия в типографике) // «Лаборатория рекламы», № 1, 2002, с. 18–23.
- Bringhurst Robert. The Elements of Typographic Style. Version 2.5. Hartley & Marks Publishers, Canada, USA, 2002.
- Carter Rob, DeMao John, Wheeler Sandy. Working with Type: Exhibitions. RotoVision, 2000, pp. 56–57.
- Spiekermann Eric & E.M.Ginger. Stop Stealing Sheep. Adobe Press, 1993, pp. 88–112.
Об авторе: Анна Шмелёва ([email protected]), независимый автор, пишет статьи о шрифтах и типографике.
20+ лучших шрифтов для заголовков и как их эффективно использовать И если содержание или стиль веб-сайта непривлекательны, 38% людей покинут его. На самом деле, улучшение внешнего вида вашего сайта — лучший (и единственный) способ избавиться от поспешных суждений.
Наиболее важным компонентом дизайна веб-сайта часто является заголовок. Следовательно, всегда стоит потратить время на выбор идеального шрифта заголовка для вашего следующего проекта. Шрифт, который вы выбрали для своего заголовка, способен привлечь читателей и привлечь их внимание.
Поскольку в Интернете доступны тысячи шрифтов, мы помогли вам выбрать лучшие шрифты заголовков для вашего веб-сайта прямо под этой статьей.
Создайте потрясающий веб-сайт с помощью Magezon Page Builder
Содержание
- Почему так важны шрифты заголовков?
- Заголовки действительно есть?
- Влияние заголовков
- Читаемость
- Доступность
- Поисковая оптимизация
- Правила для заголовков
- Шрифты для заголовков.
Что можно и чего нельзя делать - Что можно делать
- Что нельзя делать
- 20 лучших шрифтов для заголовков
- Заключение
Что можно и чего нельзя делать Почему шрифты для заголовков имеют значение?
Глазу пользователя требуется 2,6 секунды, чтобы остановиться на той части веб-сайта, которая в наибольшей степени определяет его первое впечатление. С другой стороны, они тратят в среднем 5,59 секунды на просмотр текстового материала на веб-сайте. Таким образом, вы упускаете возможность получить более разборчивый и доступный материал, высоко оцененный пользователями, если вы не используете заголовки должным образом.
Заголовки действительно есть?
Заголовки в Интернете — это больше, чем просто текст. Если вы не знакомы с тем, как работает Интернет, веб-страницы должны быть сначала прочитаны машинами (например, вашим компьютером), прежде чем вы сможете их прочитать. Ваш браузер может «понимать» структуру вашего контента, когда он видит заголовки.
Он может не понимать, какой шрифт используется для заголовков. Тем не менее, он распознает, как они устроены.
В HTML есть шесть уровней заголовков, от h2 до H6, язык, на котором работают веб-страницы. Их приложения аналогичны планам вашего преподавателя, которые вы должны заполнить перед написанием работы в начальной школе. Уровень заголовка используется для обозначения каждого отступа. Вот пример:
Влияние заголовков
Удобочитаемость
Заголовки помогают ориентироваться в материале. Они также придают контекст абзацам. Они выделяются из блоков текста, что позволяет вам быстро найти их, чтобы понять, о чем эти абзацы. Хотя два веб-сайта могут иметь разные версии одного и того же заголовка, h2 обычно является самым высоким, а каждый соответствующий уровень меньше. Это создает бессознательную визуальную иерархию, которой читатели должны следовать.
Доступность
В то время как большинство пользователей интересует только то, как веб-страница отображается в браузере, некоторые пользователи с ограниченными возможностями полагаются на хорошо отформатированный HTML для чтения и доступа в Интернет.
Веб-страница — это просто набор текста, заключенный в HTML-код, который организует текст в простейшей форме. Программы чтения с экрана, стандартная служба для людей с нарушениями зрения, читают страницу как необработанный текст, точный текст, который читает ваш браузер, прежде чем преобразовать его в потрясающую веб-страницу для просмотра. Кроме того, программы для чтения с экрана позволяют пользователям читать заголовки страниц и быстро листать страницы слово в слово, прежде чем они найдут нужную им информацию, вместо того, чтобы сразу переходить к соответствующему сегменту.
SEO
Использование ключевых слов в заголовках поможет вам занять более высокое место в поисковых системах. Поскольку слова в заголовках имеют существенное значение при их размещении в заголовке, поисковые системы придают им большее значение, чем тексту в абзацах. Веса заголовков различаются: h2 имеет наибольший вес, а H6 — наименьший.
Попробуйте БЕСПЛАТНУЮ демо-версию Magezon Page Builder сегодня
Легко оформляйте каждый аспект вашего веб-сайта Magento так, как вы хотите, не полагаясь на разработчиков или дизайнеров.
Просто перетащите.
Попробуйте демо БЕСПЛАТНО
Правила для заголовков
1. Всегда начинайте с h2.
h2 является наиболее подходящим заголовком и должен появляться на каждой веб-странице. Обычно используется как заголовок страницы. Вы не должны использовать более одного h2 на одной странице, если это не требуется. Тег h2 — это самый высокий уровень, который должен включать в себя весь контент.
2. Никогда не пропускайте заголовки.
После h2 должен быть h3. Вы разделяете заголовки иерархической структуры, если пропускаете этап заголовка, например, переход от h2 к h4. При использовании средства чтения с экрана для чтения заголовков читатель может подумать, что он по ошибке пропустил строку.
3. Никогда не используйте заголовки в качестве стиля.
Каждый уровень заголовка веб-страницы будет иметь свою собственную тему. Например, заголовок страницы, скорее всего, будет напечатан более крупным шрифтом, чем другие заголовки.
Каждый уровень становился меньше и легче визуально по мере прохождения.
Хотя может показаться заманчивым выбрать тот заголовок, который, по вашему мнению, выглядит лучше, вы почти наверняка нарушите одно из упомянутых выше правил. Однако, если вам просто необходимо использовать определенную тему, есть варианты расширить ее до заголовков, например, используя классы CSS.
4. Заголовки должны классифицировать связанные материалы.
В заголовках важно содержание. Они существуют исключительно для этой цели. Когда вы вводите другой заголовок того же или более высокого ранга, заголовок должен объяснять весь материал под ним. Вы можете изменить структуру определенных абзацев или даже других заголовков, чтобы обеспечить хорошую организацию содержимого. Вот пример:
Шрифты заголовков Что можно и чего нельзя делать
Не знаете, какой шрифт использовать для заголовков? Приведенные ниже советы о том, что можно и чего нельзя делать, помогут вам выбрать наилучший из возможных вариантов.
Что нужно делать
- Во всей рукописи используйте один и тот же шрифт для всех заголовков.
- Чтобы построить иерархию документов, используйте размеры шрифта (например, самый большой размер шрифта должен быть у заголовка 1, второй заголовок должен быть заметно меньше, а затем третий заголовок должен быть заметно меньше, чем у заголовка 2).
- Чтобы предоставить более быстрые визуальные подсказки к иерархии, сделайте уровень заголовков полужирным или сделайте отступ для более низких уровней заголовков, если это необходимо. Это облегчает пользователям поиск информации.
- Каждый заголовок должен соответствовать следующему абзацу или списку. Убедитесь, что пространство над заголовком больше, чем пространство под ним. Кстати, вместо того, чтобы оставлять пустые строки для пробелов между текстом, вам следует научиться использовать параметр интервала между абзацами в вашем текстовом редакторе.
- Сохраняйте одинаковое пространство над и под каждым уровнем заголовков по всему документу.
- После заголовка абзац или список должны быть выровнены по левому краю с заголовком или иметь отступ от левой стороны заголовка.
Запрещается
- Используйте ВСЕ ЗАГЛАВНЫЕ БУКВЫ. Это может быть хорошо для коммерческих целей, но это затрудняет чтение для людей.
- Подчеркивание заголовков. Это затрудняет их чтение и сканирование, а также визуально отделяет заголовок от содержимого под ним.
- После заголовка используйте знаки препинания (например, без точек, двоеточий, запятых или восклицательных знаков). Вопросительные головы являются единственным исключением из этого правила. Заголовки сформулированы как вопрос по маркетинговым соображениям или в виде списков часто задаваемых вопросов (FAQ). В конце вопросов следует ставить вопросительный знак.
- В технических текстах используйте заголовок вопроса. Кроме того, следует использовать короткие заголовки, которые четко передают следующий контент.
- Внизу страницы поместите заголовок. Чтобы переместить заголовок на следующую страницу, используйте разрыв страницы.
- Растяните шрифт! Растягивание шрифта идет вразрез с оригинальным дизайном шрифта. Кроме того, растягивание шрифтов искажает вид, что некрасиво.
Чтобы переместить заголовок на следующую страницу, используйте разрыв страницы.20 лучших шрифтов для заголовков
1. Flix
Одним из лучших шрифтов для заголовков веб-сайтов является Flix. Он идеально подходит для создания заголовков веб-сайтов, плакатов, листовок и даже поздравительных открыток. Шрифт также доступен в двух разных стилях: обычном и контурном. Это позволит вам смешивать и сочетать стили для создания уникальных заголовков для ваших творческих проектов.
Этот шрифт — отличный выбор для профессиональных дизайнеров, поскольку Flix отличается элегантным и креативным стилем и доступен в форматах OpenType, TrueType и Web Font.
2. Visage
Шрифт Visage — один из лучших стилей шрифтов для заголовков — имеет ярко выраженный текстурный рисунок с нотками ретро. Visage — это шрифт с десятью различными стилями, состоящий только из заглавных букв и поддерживающий многоязычные символы.
Visage, лучший шрифт для заголовков, идеально подходит для создания заголовков для плакатов и обложек книг. Этот шрифт идеально подходит для текста с соответствующими наклонными стилями, когда удобочитаемость и ясность жизненно важны.
3. Ubuntu
Семейство шрифтов Ubuntu — один из хороших шрифтов для заголовков — представляет собой набор новых бесплатных/открытых шрифтов, разработанных в 2010–2011 годах. Шрифт Ubuntu бесплатен и может использоваться для всего: от текста навигации до огромных заголовков и основного содержимого. Кроме того, он невероятно адаптируемый и легкий, с быстрой загрузкой.
Буквы имеют закругленные углы, что придает им гладкий и современный вид. Это также один из немногих шрифтов, которые можно использовать в разных местах на вашем веб-сайте, что сокращает количество необходимых шрифтов.
Новое семейство шрифтов Ubuntu было создано, чтобы индивидуальность Ubuntu сияла в каждом меню, кнопке и диалоге. Шрифт без засечек использует возможности OpenType и намекается вручную для ясности на настольных и мобильных вычислительных устройствах.
Вот почему Ubuntu должен быть включен в список лучших шрифтов для заголовков.
4. Catamaran
Catamaran — это семейство латинских и тамильских шрифтов цифровой эпохи, совместимое с Unicode. В настоящее время он поставляется с девятью различными весами шрифтов, что делает его гибким семейством, которое находит баланс между типографскими стандартами и небольшим блеском.
Этот шрифт имеет уникальный стиль, особенно необычный шрифт, который становится лучшим шрифтом для заголовков. Каждая буква имеет свой особый стиль, который можно увидеть в более жизненных типах. Эти буквы действительно выделяются на странице при использовании в тексте заголовка. Катамаран следует использовать в заголовках с более крупным шрифтом, так как полужирный шрифт толстый.
5. Raleway
Raleway — стильное семейство шрифтов без засечек. Мэтт Макинерни изобрел его как один тонкий вес, но Пабло Импаллари и Родриго Фуэнзалида расширили его до семейства из 9 весов в 2012 году, а Иджино Марини интернировал его.
Шрифт
Raleway был вдохновлен геометрическим шрифтом без засечек. В результате у него есть отображаемое лицо, а загрузка включает в себя старые и подкладочные числа, стандартные и произвольные лигатуры, а также относительно обширную коллекцию диакритических знаков.
Кроме того, имена шрифтов Raleway бывают самых разных типов и символов, что дает веб-дизайнерам много вариантов того, когда и где они хотят их использовать. Отличительный внешний вид Raleway и огромный выбор шрифтов привлекли внимание многих крупных веб-сайтов и онлайн-изданий. В результате он должен быть занесен в сборник лучших заголовочных шрифтов.
6. Arvo
Arvo — один из лучших шрифтов для заголовков — семейство шрифтов с засечками, подходящее для экрана и печати. В семействе четыре стиля: римский, курсив, римский полужирный и полужирный курсив. Это бесплатный шрифт, который изначально появился в Google Fonts. Вкус шрифта немного смешанный. Он почти монолинейный, но с небольшим контрастом (что немного повышает разборчивость в Mac OS X).
0003
Это простой шрифт с засечками, неподвластный времени, он не скучный и не скучный. Вот почему Arvo лучше всего работает в блогах и цифровых публикациях и должен быть указан как лучший шрифт для названий и заголовков.
7. Nexa
Nexa — семейство шрифтов без засечек, футуристических и простых, лучших шрифтов заголовков для веб-сайтов. Этот шрифт имеет 4 бесплатные версии: Nexa Bold, Nexa Text Bold, Nexa Light и Nexa Text Light. Он также предоставляет многоязычную помощь (включая расширенную латиницу и кириллицу).
Nexa — лучший шрифт для заголовков веб-сайтов разных размеров и текстовых блоков разных размеров. Кроме того, семейство шрифтов включает 18 различных стилей шрифтов. Следовательно, имена шрифтов Nexa подходят для любого типа графического дизайна, включая веб, печать, анимированную графику и футболки, а также другие элементы, такие как плакаты и логотипы.
8. Aleo
Aleo — лучшее семейство шрифтов для заголовков — шрифт с засечками дополняет шрифт UKASZ Dziedzic Lato.
Этот шрифт был разработан Алессио Лайсо. Полукруглые черты и обтекаемая форма Aleo придают ему сильную индивидуальность, сохраняя при этом отличную читабельность.
Этот современный шрифт с засечками идеально подходит для изысканного брендинга, блогов, печати и Интернета. Лигатуры легко читаются, и вы можете выбрать один из шести различных стилей, чтобы создать идеальный заголовок для следующего заголовка.
9. Montserrat
Montserrat — великолепный шрифт без засечек с множеством личностей. Мы можем использовать Montserrat со всеми заглавными буквами, регулируемым интервалом между буквами и различными стилями шрифта, от тонкого до сверхтолстого. В результате он хорошо работает в различных условиях, от технического блога до домашнего веб-сайта.
Попробуйте Montserrat, если вы ищете особый шрифт для заголовков. Это не сработает для всех, но для многих дизайнеров это отличное место для старта. А поскольку дизайнов так много, вы можете получить несколько вариантов внешнего вида только для одного семейства.
Этот геометрический шрифт без засечек — лучший шрифт для заголовков веб-сайтов.
Попробуйте БЕСПЛАТНУЮ демо-версию Magezon Page Builder сегодня
Легко оформляйте каждый аспект вашего веб-сайта Magento так, как вы хотите, не полагаясь на разработчиков или дизайнеров. Просто перетащите.
Попробуйте демо-версию БЕСПЛАТНО
10. Intro
Intro — это современный шрифт без засечек с восхитительно эксцентричными штрихами, который украсит ваши заголовки и сделает ваш дизайн более доступным. Всего в семейство шрифтов включено 72 гарнитуры, стилистические и контекстные альтернативы, формы с учетом регистра и многое другое. И вы получите четыре шрифта в бесплатной версии.
Отличная читаемость в веб-дизайне и полиграфии, хорошо обработанные геометрические узоры и оптимальный кернинг — все это отличительные черты шрифта Intro. Этот шрифт хорошо работает с заголовками различной ширины и текстовыми блоками с максимальным и минимальным вариантами. Типы шрифтов можно использовать в любом графическом дизайне, включая веб-дизайн, печатную и анимированную графику, и идеально подходят для футболок и других товаров, таких как плакаты и логотипы.
11. Chillow
Chillow — лучший шрифт для заголовков — это характерный нарисованный от руки шрифт для заголовков с креативным видом. Это шрифт без засечек с оттенком ретро. Для этого шрифта с заглавными буквами доступны курсивный и обычный начертания, а также лигатуры и альтернативы. Благодаря своему уникальному дизайну Chillow Regular — идеальный шрифт для всех ваших забавных проектов.
Chillow имеет пять стилей: все заглавные буквы, пунктуация и цифры, многоязычный язык, альтернативные символы и лигатура. И это идеальный вариант для заголовков, логотипов, значков, типографики и любого винтажного дизайна.
12. Merriweather
Merriweather — лучший шрифт Google для заголовков — был создан как текстовое начертание, которое легко читать на экране компьютера. Он имеет сжатые формы букв, умеренное диагональное напряжение, надежные засечки и открытые формы. Этот универсальный шрифт отлично смотрится на любой странице и привлечет внимание к вашим заголовкам.
Выберите сплошной или полужирный курсив, если вы хотите использовать Merriweather на более значимой странице. Они на удивление аккуратные, хотя могут потребоваться некоторые настройки интервала между текстами. В любом случае, дизайн и темнота букв делают их очень удобными для чтения. Вот почему Merriweather стал одним из лучших шрифтов для заголовков.
13. Proza Libre
Proza Libre от Bureau Roffa — это бесплатная версия розничного семейства Proza. Он разработан, чтобы хорошо выглядеть на экранах в различных операционных системах, особенно в Windows, а Proza Libre стал лучшим шрифтом для заголовков. Существует также Proza Display — дисплейная версия Proza, предназначенная для заголовков и используемая в больших размерах.
Хотя Proza Libre является новым шрифтом и реже используется в библиотеке Google Fonts, он по-прежнему содержит заголовок с произвольной высотой x, низким контрастом штриха и курсивом, который следует использовать в больших размерах.
14.
РубикРубик — шрифт без засечек с плавно закругленными краями — лучший шрифт для заголовков. С римским и курсивным стилями Rubik имеет семейство шрифтов с пятью весами. Филипп Хьюберт и Себастьян Фишер создали Rubik как слегка закругленный тяжелый шрифт с буквами, которые точно вписываются в один кубик Рубика. Кроме того, шрифт был изменен, чтобы вместить символы кириллицы и иврита для шоу, которое будет перенесено за границу.
Rubik поставляется с крупномасштабным шрифтом заголовка и основным шрифтом с большой высотой x, низким контрастом штрихов и курсивом. По этой причине каждый может использовать Rubik в качестве одного из классных шрифтов для заголовков веб-сайта.
15. Elianto
Elianto — бесплатный шрифт без засечек, разработанный Эмануэле Папале. Многие из его букв имеют необычные формы и глифы, которые на первый взгляд могут показаться бесполезными, но они хорошо работают с заголовками.
С геометрическими линиями, которые являются невероятно инновационными, Элианто является современным шрифтом, одним из лучших шрифтов для заголовков.
Возможно, вы захотите попробовать это, если ищете что-то другое.
16. Coco
Coco — это высококачественный шрифт Slab Serif, разработанный Франко Фернандесом, который можно бесплатно загрузить и использовать в личных целях. В бесплатную версию включены все прописные и строчные буквы, а также несколько специальных символов.
Coco — стильный шрифт, идеально подходящий для приложений, связанных с модой, с большой высотой прописных и тонкими основами, один из различных шрифтов для заголовков. Это шрифт, который вы ожидаете увидеть на этикетке элитного парфюмерного флакона.
17. Exo
Exo – геометрический шрифт без засечек, разработанный для выражения технологической/футуристической атмосферы при сохранении привлекательного внешнего вида. Этот шрифт задумывался как универсальный; поэтому он имеет девять начертаний (больше всего в Интернете), каждый со своим естественным курсивным вариантом. Это фантастика в качестве выставочного лица, но также идеально подходит для письма малого и среднего размера.
Кроме того, Exo — веселый шрифт. Он имеет гладкий современный стиль, привлекающий внимание, с плавными изгибами и четкими краями и окончаниями букв.
18. Linotte
Linotte — это шрифт без засечек с теплым закругленным внешним видом. Это, наряду с несколькими незначительными особенностями дизайна, делает этот шрифт отличным выбором для проектов, требующих более естественного вида, таких как бренды продуктов питания или товары для детей, а также для всего, что должно передавать дружеские чувства.
Несмотря на небольшие недостатки, придающие ему теплый и наивный вид, прочная геометрическая архитектура обеспечивает высокую четкость длинных текстов любого натурального размера. В результате Linotte стал одним из лучших шрифтов для заголовков.
19. Allerta
Allerta была создана для использования в вывесках и предназначена для быстрого чтения на расстоянии. Каждый глиф использует отличительные характеристики каждой буквы, чтобы его было легко отличить от других.
Вот почему Allerta может очень быстро привлечь внимание любого.
Кроме того, интервалы между буквами выдержаны надлежащим образом, что делает их разборчивыми. Следовательно, этот шрифт является одним из лучших шрифтов заголовков для веб-сайтов.
20. Quantico
Quantico — это геометрический шрифт, вдохновленный винтажной пивной упаковкой и военным письмом. Он создает четкие формы символов, сочетая 30-градусные углы и абсолютно прямые линии.
Этот шрифт также очень характерен и сразу бросается в глаза. Quantico — один из лучших шрифтов для заголовков, хороший вариант, если вы хотите попробовать что-то другое для своего веб-сайта или если ваш бренд — мужской.
21. Capriola
Capriola — лучший шрифт для заголовков WordPress — это шрифт без засечек с характерным видом, вдохновленным почерком и курсивом. Скелеты самых узнаваемых символов построены на движении одной руки и вдохновлены быстрым письмом (G, a, g, k, e). Capriola стремится раздвинуть границы уникальности жанра, сохраняя при этом удобочитаемость.
Нечетные глифы выделяются огромными пропорциями, что позволяет создавать привлекательные заголовки. Однако эти движения менее заметны в каллиграфии меньшего размера, что позволяет размещать более длинные сообщения. Уникальность Capriola в сочетании с ее универсальностью делает ее превосходной для различных применений.
Заключение
Хотя яркий шрифт не сделает ваши заголовки более привлекательными, он может положительно повлиять на то, как ваши зрители увидят ваш дизайн.
Шрифты без засечек часто намного мощнее, чем шрифты с засечками, что делает их идеальными для заголовков. Если вы не нашли то, что ищете в этом списке, проверьте некоторые из ваших любимых ресурсов шрифтов, таких как Google Fonts, Behance и Font Squirrel.
Попробуйте БЕСПЛАТНУЮ демоверсию Magezon Page Builder сегодня
Легко стилизуйте каждый аспект вашего веб-сайта Magento так, как вы хотите, не полагаясь на разработчиков или дизайнеров. Просто перетащите.
Попробуйте демо-версию БЕСПЛАТНО
Заголовок Шрифты, темы, шаблоны и загружаемые графические элементы на Dribbble
Посмотреть Комические Пески! Новый шрифт уже доступен
Комические пески! Новый шрифт уже доступен
Посмотреть компании.
