Как определить название шрифта на сайте за 1 секунду
В одной из ранних статей мы рассказали об Интернет-ресурсах, способных превратить процесс распознавания шрифтов если не в нечто занимательное, то по крайней мере в рядовую, но перспективную процедуру.
И хотя лучшее — враг хорошего, сегодня мы пойдём ещё дальше. Ведь кому нужны целые сайты, когда есть расширения для браузеров?
Повальное увлечение азиатской, и в частности японской, культурой, охватившее западный мир в предыдущем столетии, едва ли могло не найти отражения и в сфере IT.
На примере отдельных веб-продуктов мы видим это в минимализме, граничащем со строгостью, в смещении акцентов с результата на процесс и, безусловно, в симпатии к внешней атрибутике. А особую привлекательность для разработчиков, по-видимому, представляет собой воинственный и загадочный символизм самураев и их негласных антагонистов — ниндзя.
Расширение для идентификации шрифтов Fontface Ninja для Safari и Chrome вполне соответствует идее скрытного и эффективного наёмника. Работа с ним строится так: нажав на кнопку расширения, наведите курсор на интересующий шрифт — всплывающая подсказка будет содержать информацию о его названии, межстрочном интервале, размере. Если повезёт, тут же шрифт можно будет скачать.
Весьма любопытной может оказаться функция Mask: она позволяет скрывать графическое содержимое страницы, оставляя лишь текстовые блоки.
Ещё одно полезное расширение, но только для пользователей Chrome. Остальные могут приобщиться к прекрасному по старинке — воспользовавшись услугами закладок.
Принцип работы в данном случае аналогичен; особого внимания заслуживает, пожалуй, реализованная возможность «поиграться со шрифтами» в режиме реального времени. Всплывающая подсказка с информацией о гарнитуре — прошлый век, когда по нажатии на выделенный текстовый блок вы способны изменить размер шрифта, посмотреть на панграмму (англоязычную), ввести собственный пример текста и позволить себе иные вольности.
Посредством авторизации чере аккаунт Twitter’a с помощью Type Sample можно создать собственную коллекцию шрифтов и поглядеть на чужие.
Расширение и для Chrome, и для Firefox, и для Яндекс.Браузера. Компенсируется такая всеядность предельно простым функционалом: нажал на кнопку, включив режим определения шрифтов, навёл на нужный и узнал кое-что новое.
Стоит отметить: WhatFont позволяет определить не только название, но при нажатии на текст также межстрочный интервал, начертание, размер, семейство, которому принадлежит шрифт, а также его текущий цветовой код.
Кроме того, можно посмотреть, как шрифт выглядит на примере английского алфавита в целом и скачать — если к его разработке приложила руку сама Google.
Чем объяснить тот пиетет, который испытывают разработчики к пользователям Chrome, неизвестно, однако факт остаётся фактом: расширений для распознавания шрифта, поддерживаемых этим браузером, чуть больше.
Typ.io — идеальный вариант для максималистов, которые не приемлют лишних телодвижений. После установки расширения в нижнем углу браузера появится кнопка с букой «Т», нажатие на которую выводит названия всех идентифицированных на странице шрифтов в отдельном столбце. Чтобы узнать, где какой шрифт использовался, достаточно кликнуть на его название.
Автор: Денис Стригун
Как определить шрифт на сайте
В интернете доступно сразу несколько сервисов, позволяющих определить шрифт онлайн на сайте или найти аналогичный. Рассмотрим наиболее эффективные инструменты.
WhatFont
Наведите курсор на текст и сразу сможете узнать шрифт онлайн. WhatFont определяет любой шрифт, используемый на сайте. Он также может идентифицировать шрифты, предоставляемые Typekit или Google Fonts. Сервис доступен в виде браузерного расширения и букмарклета.
Единственная проблема заключается в том, что этот инструмент работает только на веб-страницах и не распознает шрифты на изображении или фотографии.
WhatTheFont!
Данный сервис, осуществляющий определение шрифта онлайн предоставляет из самых больших коллекций шрифтов (130 тысяч). А также позволяет сравнивать типографику, использованную в надписи на изображении. Для этого вставьте изображение и вырежьте текст, шрифт которого хотите идентифицировать. Вы даже можете использовать изображения с несколькими шрифтами и строками текста.
Но с помощью этого инструмента вы идентифицируете только платные шрифты.
Font Finder
Продвинутый инструмент, который сравнивает шрифты с библиотекой, состоящей из 550 тысяч образцов. Но за один раз сервис может идентифицировать шрифт только одной строки текста.
Чтобы восполнить этот недостаток, инструмент снабжен графическим редактором, который позволяет увеличить контраст для темных изображений, обрезать ненужные участки и т.д. Это повышает эффективность определения шрифта онлайн по тексту.
Fontspring Matcherator
Чтобы использовать этот сервис, осуществляющий определение шрифта онлайн по тексту, загрузите или укажите ссылку на изображение, и обрежьте текст, шрифт которого хотите идентифицировать. Fontspring Matcherator автоматически сопоставляет фигуры и глифы.
С помощью этого инструмента вы найдете бесплатные и премиальные шрифты. Для этого нажмите на конкретный результат, чтобы увидеть страницу загрузки шрифта.
Identifont
Если вы пытаетесь определить узнать какой шрифт используется на сайте, воспользуйтесь Identifont. Этот инструмент задаст вам несколько вопросов о стиле гарнитуры, а затем выдаст несколько похожих шрифтов. Сервис также предоставляет информацию об авторе шрифта и где его можно купить.
Найдите любой шрифт
Раньше процесс поиска шрифта занимал много времени. Теперь благодаря рассмотренным в этой статье сервисам можно узнать используемый шрифт за считанные секунды.
Данная публикация является переводом статьи «5 Resources to Help Identify a Font» , подготовленная редакцией проекта.
Как узнать шрифт на сайте?
При создании индивидуального, интересного и красивого интернет-продукта используются разнообразные способы дизайна. Одной из основных особенностей является подбор практичного и подходящего по стилю шрифта. Для ознакомления с самыми популярными и распространенными видами не обязательно связываться с редактором или владельцем проекта. Можно воспользоваться одним из способов, как узнать шрифт на сайте.
Инструменты разнообразны и делятся на несколько категорий:
- функциональные расширения браузера;
- применение разметки, CSS;
- локальные инструменты;
- проверка.
Каждый из методов подбора зависит от ресурсов пользователя и его целей. Перед тем как узнать, какой шрифт используется на сайте, изучите несколько простых правил.
Применение расширений
Для того чтобы определить формат написания на веб-странице, можно воспользоваться дополнениями WhatFont. Они доступны для Chrome, Firefox, Safari. Для этого необходимо открыть каталог опций, найти соответствующий инструмент и установить его. Открыв программу, выделите ту часть текста, которая интересует, выбрать проверку. В окне появится вся информация о тексте. Font Family показывает, как узнать название шрифта на сайте. Также все демонстрируется в алфавитном порядке. Это самый быстрый и удобный способ, он выдает характеристики сразу же.
Указанное приложение можно применять для получения сведений о тексте на рисунке. Необходимо выделить ссылку или перетащить изображение в поле поиска, потом подождать. Недостаток такого способа в том, что если качество картинки не очень хорошее для идентификации исходного шрифта, то манипуляция становится бессмысленной.
Похожий метод отвечает на вопрос о том, как узнать размер шрифта на сайте. Вам понадобится Font Size.
Ручная проверка с помощью CSS
Некоторые браузеры предоставляют возможность узнать шрифт на сайте вручную. Для этого необходимо выделить фрагмент, кликнуть правой кнопкой мыши, выбрать поле «Проверить» («Исследовать элемент»). Можно воспользоваться горячими клавишами Ctrl+Shift+I. В результате в правой части окна появляется поле с расписанными кодами и подробной информацией о создании сайта (режим разработчика). Здесь представлена история изменений и правок. Сведения, которые перечеркнуты линией, были использованы в предыдущей версии, но уже изменены. Нужно выбрать самую последнюю правку стиля, чтобы точно определить параметр.
Такая манипуляция требует навыков работы с HTML и понимания языка разметки. Этими способами, как узнать, какой шрифт на сайте, пользуются дизайнеры и тестировщики.
Онлайн-инструменты
Indentifont — это сервис для определения стиля, подбора похожих шрифтов онлайн. Работает непосредственно на базе сайта. Эта функция может найти характеристики не только по заданному коду, но и по имени конструктора, издателя, сходству с другими видами написания. Ресурс используется графическими дизайнерами и редакторами страниц.
Как выбрать шрифты для сайта (9 советов и 5 полезных сервисов)
Я, Николай Шмичков, сделаю твой бизнес успешным.
У меня только 1 вопрос, ты готов значительно увеличить продажи?
Содержание:
Текст — основной источник информации на сайте.
Над ним работают, его затачивают под целевую аудиторию, думают о том, как он будет решать задачу, которая перед ним стоит.
А еще текст стараются сделать легким для восприятия, таким, чтобы его хотелось прочитать.
И без шрифтов в этом случае — просто никуда.
Именно хорошо подобранные шрифты помогают быстрее читать, лучше воспринимать и усваивать информацию.
А еще они меньше утомляют глаза, и это тоже важно.
Особенно для тех, кто ежедневно проводит перед монитором долгие часы.
Многие люди вообще не задумываются о шрифтах, заходя на сайт, не знают, какими они бывают и чем отличаются — это нормально.
Но при этом они поморщатся и могут даже закрыть сайт, где со шрифтами что-то не так, потому что это «что-то» воспринимается практически на уровне подсознания.
Можно сказать, что шрифт для текста — как одежда для человека.
Если прийти на собеседование в легкомысленном сарафане — эйчар вряд ли станет обсуждать этот наряд, но и работу Вы вряд ли получите.
Да и явившись на пляж в деловом костюме удовольствия Вы не получите, а вот тепловой удар ― легко.
Также и со шрифтом: он может делать тексты более убедительными и деловыми, или, напротив, легкомысленными и развлекательными.
И если подавать серьезную информацию легкомысленным шрифтом или наоборот — это будет вызывать диссонанс.
ГЛАВА 1:
Как определить шрифты на сайте: полезные сервисы
В чем трудность выбора шрифтов?В их запредельном разнообразии.
Подскажем несложный метод, который поможет быстро найти для своего сайта оптимальные сочетания шрифтов.
Когда речь заходит о выборе шрифтов легко растеряться ― ведь только Microsoft предлагает сотни шрифтов, а в сети их можно найти тысячи.
От такого разнообразия голова кружится, а мысли разбегаются.
Но есть интересная возможность, которая поможет подобрать шрифты.
Вы всегда можете «подсмотреть», что за шрифты используются на сайте, где их сочетание пришлось по душе.
Чтобы выяснить, какие именно сочетания шрифтов покорили Ваше сердце, можно воспользоваться удобным «дешифрующим» сервисом Capyba.
Все просто: в поисковую строку сайта вводится адрес нужного ресурса, и в течение нескольких секунд перед глазами оказывается список шрифтов, которые на этом ресурсе встречаются.
В поисковую строку вводим адрес сайта…
…и получаем список шрифтов
Впрочем, можно обойтись и без использования специальных сервисов.
Зайдите на страницу, на которой Вам приглянулось сочетание шрифтов.
Кликните правой кнопкой мыши на выбранном элементе страницы => выберите в выпадающем меню пункт «Исследовать элемент», и в правой стороне экрана откроется код.
Нажимаем на «Исследовать элемент»…
В коде Вам нужно найти атрибут font-family или «семейство шрифтов».
Сделав это, Вы увидите названия всех шрифтов, присутствующих в выбранном Вами элементе.
…находим font-family и видим названия шрифтов
Это варианты для тех, кто хочет найти гармоничные сочетания шрифтов прямо здесь и сейчас.
Но чтобы глубже разобраться в этом вопросе, придется перейти к теории и даже отчасти к истории.
А в завершении мы познакомим Вас с еще четырьмя очень интересными «шрифтовыми» сервисами ― это Allfont, Fontstorage, Typ.io и Modulcare.
ГЛАВА 2:
Общие подходы к выбору шрифтов
Поговорим в целом о том, на что ориентироваться, выбирая шрифты.И о том, сколько шрифтов можно использовать на сайте, а где начинается моветон.
Основных принципов немного — заблудиться сложно.
Принцип 1. Простота
При использовании необычных, эксцентричных или рукописных шрифтов любой текст читать будет сложнее.
Это увеличит количество посетителей сайта, которые закроют его, решив не тратить времени на то, чтобы привыкнуть к шрифту.
Использовать декоративные шрифты или готику есть смысл только в заголовках, чтобы привлечь внимание.
Такие шрифты лучше использовать только для заголовков
А известный западный веб-дизайнер Тед Хант провел целое исследование о том, какие эмоции у людей вызывают разные шрифты.
Речь идет об использовании текста в логотипе, но и для контента выводы вполне подходят.
Разные шрифты и начертания вызывают совершенно различные эмоции. Хотя текст может быть идентичным!
Принцип 2. Сочетаемость
На сайте редко используется только один шрифт.
Как правило, применяются сочетания, состоящие из 2-3 видов шрифтов.
При этом они должны смотреться гармонично и не противоречить друг другу по условной «тональности».
Принцип 3. Выразительность
Если Вы решили использовать на сайте 2 или 3 шрифта, делайте их контрастными — или ограничьтесь одним.
Слабые, невыразительные отличия не дадут красивой, яркой, четкой, привлекательной картинки.
Это принцип большого и малого: контраст арбуза и крыжовника очевиден (хотя в этих ягодах есть и много общего — обе они зеленые и полосатые), контраст двух яблок, лишь слегка отличающихся по размерам, под вопросом.
Арбуз и крыжовник — контраст очевиден
Контраста можно добиться, даже используя всего один шрифт, отличающийся начертанием и размером
Принцип 4. Отображение
Шрифт не только должен подходить к тематике сайта и хорошо читаться — он должен корректно отображаться во всех браузерах и операционных системах.
Экзотические и платные шрифты могут либо вовсе не отображаться на сайте (вместо них пользователь увидит резервный вариант, если он предусмотрен), либо отображаться не так, как было изначально задумано дизайнером.
И это может стать эпик фейлом.
ГЛАВА 3:
Рассматриваем варианты: шрифт с засечками
Шрифт с засечками и его особенности.Откуда пошли засечки?
Почему их любят работники типографий?
Как засечки помогут прочесть текст, написанный латиницей?
Есть в классификации шрифтов вечная тема.
В интернет-пространстве часто разворачиваются баталии между «собачниками» и «кошатниками», между теми, кто за прививки и против них, а также между адептами совместного сна с малышом и раздельного.
Примерно так же можно спорить о том, какие шрифты лучше — с засечками или без.
Поговорим о шрифтах с засечками — например, вот таких.
Засечки — это основное отличие шрифтов, которое может заметить даже неподготовленный пользователь.
Шрифты со штрихами-засечками на концах называются антиквой, а в их английских названиях часто есть слово serif (засечка).
Считается, что произошли эти шрифты от латиницы, которую древние римляне высекали на камнях.
Поскольку писать на камне непросто, то на концах букв часто появлялись дополнительные тонкие линии, которые в какой-то момент стали считаться нормой.
Антиквы — самый старый из известных типов шрифтов, который благополучно прошел путь от каменного века до эпохи всеобщей компьютеризации.
Пример использования текста с засечками
Самый популярный шрифт из группы антикв сегодня — Times New Roman.
Шрифты с засечками традиционно использовались в текстах на бумажных носителях — в книгах, газетах и буклетах, их знали и любили типографы, а затем антиквы перекочевали и в интернет-пространство.
Сторонники антикв утверждают, что засечки на символах словно направляют глаза человека слева направо, чтение при этом получается более плавным и менее утомительным для глаз.
При использовании шрифтов с засечками чуть большим оказывается и межбуквенное расстояние, что тоже — вроде бы — облегчает чтение.
Исторически сложилось так, что шрифты с засечками ассоциируются с традиционностью, обстоятельностью, некоторой формальностью.
Все они визуально «звучат» в серьезной деловой тональности.
А значит, делают тексты более убедительными.
Дополнительный плюс использования шрифтов с засечками — они помогают идентифицировать буквы при написании текста латиницей, не дают символам «сливаться» и мимикрировать друг под друга.
С латиницей это случается!
Пример, когда засечки не дают латинским буквам сливаться
ГЛАВА 4:
Изучаем шрифты: шрифт без засечек
Почему для сайтов предпочтительнее рубленые шрифты.Самые популярные шрифты группы гротеск.
Почему «детские» — это шрифты без засечек?
Шрифты без засечек относятся к группе гротесков или рубленых шрифтов.
В их названиях часто присутствует слово sans/sans serif — «без», «без засечек».
Штрихи на концах символов в таких шрифтах отсутствуют.
У представителей этой группы адептов не меньше, чем у шрифтов с засечками; в виртуальном пространстве минималистичные и чистые шрифты без засечек встречаются чаще.
Пример использования шрифта без засечек
Наиболее распространенные представители этой группы — шрифты Arial, Helvetica и Verdana.
Один из аргументов при выборе рубленых шрифтов для оформления сайта — их более гибкая масштабируемость.
Вновь вспоминаем о том, что пользователи смотрят сайт с самых разных гаджетов с разными операционными системами и браузерами.
Чтобы текст на экране любого гаджета был гармоничным, он должен быть масштабируемым, хорошо поддающимся оцифровке.
При недостаточно высоком разрешении шрифты с засечками могут воспроизводиться менее качественно, тогда как рубленые шрифты без дополнительных линий остаются четкими и разборчивыми.
Шрифтами группы гротесков часто оформляют детские книги и тексты ресурсов, ориентированных не детей.
Считается, что простота букв делает их более узнаваемыми, а значит, такие шрифты лучше воспринимаются детьми.
В целом рубленые шрифты ассоциируются с чистотой, аккуратностью, универсальностью и актуальностью.
Информационные, обучающие и развлекательные тексты чаще оформляются шрифтами без засечек.
ГЛАВА 5:
Часто встречающиеся шрифты
Самые распространенные шрифты Интернета.Как они выглядят и чем друг от друга отличаются?
Вот так выглядит перечень из 8 распространенных шрифтов, на которые легко можно наткнуться, гуляя по современным интернет-ресурсам.
Все они относятся к числу безопасных — их «знают» все гаджеты, браузеры и операционные системы, что практически исключает проблемы с отображением.
Times New Roman. Пожалуй, один из самых распространенных шрифтов. Традиционно этим шрифтом оформляются все (или почти все) деловые документы, как в реальном, так и в виртуальном пространстве.
Arial. Ближайший «заклятый» конкурент Times New Roman — шрифт-гротеск Arial. Он часто встречается на сайтах самой разной тематики и направленности. Используется как шрифт по умолчанию в самом распространенном офисном приложении Google Docs.
MS Sans Serif. Системный шрифт Microsoft Windows, которым прописаны все оповещения этой операционной системы.
Tahoma. Этот шрифт считается техническим и часто используется в описаниях сложной продукции или технических решений; в инструкциях.
Georgia. Шрифт из группы антикв, напоминает Times New Roman, но с более широкими и резкими засечками.
Courier New. Это компьютерная имитация (и довольно удачная) шрифта печатной машинки. Отличается от большинства шрифтов ненасыщенным графитовым цветом. Достаточно четкий, хорошо читается. Идеален для воспроизведения фрагментов печатных изданий на сайте. Используется как предустановленный шрифт во многих редакторах.
Impact. Шрифт, который сразу был рожден полужирным. У него толстые штрихи и уменьшенное межбуквенное расстояние. Читать текст, полностью оформленный таким шрифтом, очень сложно. Используется преимущественно в заголовках.
Verdana. Считается идеальным шрифтом для интернет-ресурсов. Крупные округлые буквы и оптимальное межбуквенное расстояние делают его очень удобным для чтения.
ГЛАВА 6:
Советы по выбору шрифтов для сайта
Мы кое-что знаем о шрифтах.Но как эти знания использовать?
В конце концов, с засечками или без?
Что и как выбрать?
При выборе шрифтов для Вашего сайта:
- Учитывайте тональность. Характер и тональность шрифта должны соответствовать общему стилю сайта. Так, для сайта, посвященного дизайну класса люкс, лучше использовать утонченные изящные графичные шрифты. Простая Verdana или сжатый Impact убьют такой контент. Так же, как забавный Сomic Sans MS уничтожит научную статью или техническое описание.
- Сочетайте антиквы и гротеск. В типографике есть распространенный прием, когда заголовок набирают рубленым шрифтом, а сам текст — традиционным шрифтом с засечками. Это сочетание считается классическим; выбирая его, трудно ошибиться. Впрочем, нередко поступают и наоборот.
Классическое сочетание шрифтов с засечками и без
- Минимизируйте. 2 шрифта — оптимальное сочетание для сайта, для использования 3 уже нужно какое-то дополнительное обоснование. Например, заголовок набирается шрифтом Verdana, основной текст — Georgia, а справочная информация во врезках — Calibri. Нежелательно использовать и слишком много вариантов начертания — обычно достаточно нормального и полужирного начертания, или нормального начертания и курсива. Помните, что полужирный шрифт почти как капслок: если его использовать слишком активно, сложится ощущение, что Вы кричите на посетителя сайта.
- Не используйте для основного текста рукописные шрифты. Дочитать текст, написанный шрифтом Mistral, до конца желающих найдется немного. И, кстати, здесь используется тот же 16 кегль, что и во всем остальном тексте — а разве скажешь?
- Соблюдайте пропорциональность. Не используйте вместе моноширинные шрифты (например, Courier New) — такие, где все буквы имеют одинаковую ширину — вместе с пропорциональными (например, Arial). Это будет выглядеть дисгармонично, как в этом примере.
- Делу время — потехе час. Шрифт Comic Sans оставьте для сайтов с комиксами и подписей для фото в Instagram. Для остального этот забавный развлекательный вариант не подходит.
- Помните об аудитории, ее возрасте, культурном бэкграунде и сфере интересов. Например, для детей желательно использовать крупные округлые шрифты с не слишком «серьезным начертанием» и без засечек — они лучше воспринимаются именно детьми. Например, это шрифты Sassoon Primary или Adigiana.
Пример «детского» шрифта…
…и еще один
Для молодежной аудитории можно выбирать оригинальные и нестандартные шрифты… и даже нарушать правила.
Текст для молодежной аудитории. Основной контент — Lato, заголовок — Carter One
С технической интеллигенцией и людьми старшего возраста лучше не экспериментировать, выбирая привычный Times New Roman.
- Обращайте внимание на интервалы. Межстрочные и межбуквенные интервалы, если выбрать их неправильно, сделают невозможным чтение даже самого простого и привычного шрифта. Межстрочный интервал, оптимальный для больших текстовых блоков — 1,5.
Пример, когда интервалы и отсутствие форматирования убивают текст, набранный обычным Calibri.
Так лучше! Шрифт и текст — те же, что и в примере выше
- Тестируйте. Никто не запретит Вам провести А/Б-тест, меняя только шрифты и их сочетание. Тестирование — лучший способ узнать, что лучше работает в каждом конкретном случае.
ГЛАВА 7:
Четыре «где?» — где выбрать, подобрать, посмотреть и примерить шрифты
При выборе шрифтов для сайта не обязательно полагаться только на себя, свои знания и вкус.Можно посоветоваться с умными digital-сервисами!
Они помогут заранее визуализировать результат.
Например, выбрать один или несколько из огромного разнообразия шрифтов можно с помощью сервиса Allfont.
Одних только кириллических шрифтов здесь собрано более 2200!
Есть и удобная классификация шрифтов — можно найти декоративные, винтажные, восточные, готические, комические и даже поцарапанные шрифты, чтобы воплотить любой самый изощренный шрифтовой каприз.
Любые текстовые капризы воплощаются здесь
Отличный сервис для подбора гармоничных шрифтовых сочетаний и размеров шрифтов — Fontstorage.
Добро пожаловать на Fontstorage
На сайте Вы найдете удобный раздел «Полигон», где размещена текстовая «рыба» — пример условных заголовка, лида и основного текста.
Вы можете произвольно менять шрифты и их размер и видеть, как это будет смотреться на странице.
Так выглядит раздел «Полигон»
А еще там же можно вставить подходящую по тематике картинку и посмотреть, как выбранный шрифт будет смотреться вместе с визуальным рядом.
Можно «примерить» шрифт вместе с картинкой
Еще один интересный с точки зрения шрифтов ресурс — Typ.io.
На нем можно, кликнув по выбранному шрифту в разделе «Searching for it», увидеть, какие шрифты рекомендованы ему в пару.
Сервис подскажет, с какими шрифтами сочетается тот, который выбрали Вы
«Поиграть» с размером шрифта можно при помощи сервиса Modularcale (создатель ― Тим Браун, глава отдела типографики компании Adobe).
Выбрав шрифт и меняя его размеры, можно увидеть, как разница в размере между заголовком и основным текстом будет выглядеть с точки зрения посетителя сайта.
Вот так быстро можно посмотреть, как будет выглядеть разница в размерах
Наша справка: Существует и формула, по которой можно рассчитать, каким размером шрифта должен быть набран заголовок по отношению к основному тексту. Для этого используется коэффициент «золотого сечения», который равен 1,6. Так, чтобы получить оптимальный (с точки зрения этой формулы) размер заголовка, кегль (размер) шрифта основного текста умножают на 1,6.
Пример:
- Основной текст: 14 px
- Формула: 14х1,6=22,4
- Оптимальный размер текста заголовка: 22 px
Заключение
Свой взгляд на шрифты, личные предпочтения, дизайнерское видение — это прекрасно; но главное для текста на сайте — его читабельность.
Также в задачи шрифта входит помощь в донесении информации до пользователей — быстро и не выводя их из зоны комфорта.
При этом, как ни печально, но одного универсального совета в стиле «используйте всегда Calibri 14 px и будет вам счастье» дать невозможно.
Итог можно подвести только так: выбирайте шрифты, которые подчеркнут направленность сайта, помогут посетителям воспринимать контент и не утомят их.
В работе с сайтом нет мелочей — на конверсию влияет все, в том числе и грамотная работа со шрифтами.
Учитывая это, можно избежать грубых ошибок, из-за которых посетители навсегда уйдут с Вашего ресурса.
Как я могу узнать, какие шрифты использует сайт?
Вариант 1: использовать расширение для браузера (Easy)
Такие расширения, как WhatFont (доступны для Chrome, Firefox и Safari), позволяют довольно легко обнаруживать семейства шрифтов любого текста на веб-странице. Вам просто нужно установить расширение, активировать его на сайте и нажать на элемент, который вы хотите проверить. Результаты отображаются во всплывающем окне, всегда в выбранном вами контексте.
Вариант 2. Проверка CSS с помощью инспекторов браузера (Дополнительно)
Большинство веб-браузеров позволяют легко находить шрифты с помощью right-click→ «Проверять» или «Проверять элемент». Это также можно сделать, нажав F12. Это покажет список стилей, прикрепленных к веб-сайту, которые вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.
Использование инспектора не так просто, как использование расширения, но имеет ряд преимуществ. Требуется некоторое понимание CSS, так как вам обычно нужно пройти через несколько стилей, чтобы найти применяемый. Как правило, перечеркнутые стили перезаписываются, поэтому всегда ищите те, которые применяются последними.
Все стили на странице перечислены на вкладке « Стиль », но если вместо этого вы используете вкладку « Вычисленные », вы можете найти свойства, которые активно применяются к выбранному элементу, включая, конечно, семейство шрифтов.
Наконец, еще один способ быстро проверить, какие шрифты используются глобально (но НЕ как и где) — перейти к «Приложение → Кадры → Шрифты» . Там вы найдете список всех ссылочных (несистемных) шрифтов.
Этот второй метод медленнее, но с помощью инспектора вы сможете лучше понять, как создается вся страница. Кроме того, многие дизайнеры и разработчики используют его в качестве инструмента для тестирования изменений перед тем, как записывать их в таблицу стилей (поскольку изменение строки CSS в инспекторе вызывает предварительный просмотр в браузере в реальном времени).
Поиск шрифта по картинке — лучшие бесплатные онлайн сервисы
Иногда попадаешь на какой-то сайт и влюбляешься в дизайн с первого взгляда. Хорошие картинки, отличные текста, удачная цветовая схема, а главное – классные шрифты, которые так и хочется “одолжить” для собственных проектов. Но вот незадача-то, как понять что это за шрифт? Ведь на поиск визуально подобной типографии могут уйти часы. Я не раз попадал в подобные ситуации, и поэтому решил создать небольшую подборку бесплатных онлайн инструментов, которые помогают осуществлять поиск шрифта по картинке. Каждый из них имеет свои особенности и преимущества, так что давайте подберем то, что пригодится именно вам.
Итак, вам понравился шрифт. Узнать, что это за шрифт можно несколькими основными способами. Первый, наиболее традиционный, это конечно же спросить у разработчика дизайна, каким шрифтом он пользовался. Но само собой это создает ряд дополнительных действий, и далеко не факт, что этот человек с большим удовольствием сразу же раскрое все карты.
Второй, более рациональный метод, это использовать фотошоп, в котором есть функция поиск шрифта по картинке в разделе шрифтов. Преимущество этого метода в том, что этот шрифт может уже присутствовать среди скачанных или стандартных шрифтов. Но, увы и ах фотошоп есть не у всех пользователей, множество людей просто хотят использовать его в удобном текстовом редакторе. Именно поэтому третий вариант является наиболее выигрышным для любых пользователей.
Третий вариант – это поиск шрифта по картинке с помощью специальных сайтов, позволяющих определить шрифт путем загрузки изображения и его анализа. Поскольку таких онлайн инструментов на сегодняшний день масса, мы подобрали несколько бесплатных и удобных инструментов, позволяющих осуществить распознавание шрифта. Именно о них пойдет речь далее.
WhatTheFont, разработанный одним из крупнейших поставщиков шрифтов, является специалистом по распознаванию шрифтов номер один. Вот как это работает: вы загружаете изображение, а онлайн инструмент находит самый похожий шрифт в базе данных. Это самый простой и быстрый способ определить шрифт онлайн.
Matcherator это идеальный инструмент для распознавания шрифтов с точки зрения простоты использования. Более того, на сайте есть удобная функция drag and drop. Это значит, что вы можете поместить изображение шрифта, просто перетащив картинку на сайт с помощью мышки, а затем программа запустится и найдет то, что нужно! С помощью этого инструмента вы сможете распознать всевозможные шрифты (с засечками и без), и все это бесплатно.
С инструментом Identifont распознавание шрифтов выглядит несколько иначе. Вы можете распознавать все типы шрифтов, но сначала вам нужно ответить на ряд вопросов о наиболее важных для вас элементах шрифты (высота, изгибы, засечки). После нескольких вопросов вы получите список возможных шрифтов, соответствующих указанным ответам.
В левой колонке на каждом этапе отображается список вопросов, на которые вы уже ответили. Вы всегда можете нажать на вопрос, чтобы проверить параметры и, возможно, изменить свой ответ. Если вы не уверены, вы можете нажать «Не уверен», чтобы пропустить этот вопрос. Таким образом, поиск шрифта по картинке может быть довольно забавным!
Сервис WhatFontIs также может быть полезен, чтоб не только определить шрифт, но и найти бесплатную его альтернативу. У инструмента есть отличная функция, с помощью которой вы можете установить распознавание и фильтровать выдачу ориентируясь исключительно на бесплатные шрифты. Таким образом, хоть этот инструмент и не может обнаружить все шрифты, вы можете найти максимально похожее бесплатное решение и сэкономить.
Этот инструмент-расширение можно прикрепить в меню браузера, и это довольно удобно, если вы дизайнер и часто занимаетесь работой со шрифтами. Fount не только бесплатно покажет вам, какой шрифт использовался, но и укажет его ключевые характеристики. Он также определяет размер шрифта, вес и стиль. Неплохо для бесплатного онлайн инструмента, не так ли?
Вот как это работает:
- Выберите кнопку «Fount».
- Перейдите на любой сайт и нажмите на закладку Fount.
- Нажмите на шрифт, который вы хотите идентифицировать.
- Та дам! Все отображается. Быстро, легко и бесплатно.
- Чтобы отключить Fount, нажмите на закладку еще раз.
Fount совместим с Safari, Chrome и Firefox.
By-Sight может распознать совершенно любой шрифт, но с ним придется немного повозиться. Ответьте на вопросы о свойствах для определения шрифта. Только после этого вы получите список шрифтов, которые наилучшим образом соответствуют описанию, которое вы предоставили.
Единственный существенный недостаток: By-Sight в настоящее время доступен только на английском языке.
Fontshop и использует те же принципы, что и By-Sight. Да, это займет некоторое время, но вы узнаете многое о распознавании текста. В целом, я действительно впечатлен Fontshop и могу тепло порекомендовать его всем пользователям.
Этот инструмент может быстро и легко идентифицировать шрифты. На основе элементов, которые лучше подходят для вашего шрифта, инструмент предлагает список возможностей. И тогда вам нужно немного поработать и выбрать особые характеристики шрифта из предложенных. Это мелочи, которые важны для распознавания текста. Так что не стоит пренебрегать процессом и лучше потратить несколько минут на отметки.
Подводим итоги
Иногда лучший способ найти правильный шрифт – это поискать красивые примеры и подборки шрифтов в интернете. А если уж какая-то картинка с надписью никак не выходит у вас из головы – то просто воспользуйтесь онлайн инструментами и выудите заветный шрифт.
Есть какие-то инструменты, о которых мы не рассказали в статье? Мы с нетерпением ждем ваших отзывов и предложений по этому поводу. Оставляйте комменты и используйте шрифты с удовольствием!
Другие полезные статьи по теме
Лучшие шаблоны сайтов
Как сделать логотип: 7 полезных советов
Бесплатные векторные изображения – 30 лучших сайтов
Веб дизайн книги: 10 лучших книг для новичков
Добавляем шрифты Google Fonts на HTML сайт
Какая бесплатная программа для сжатия фото идеально подойдет для вашего сайта?
Выбираем редактор фото онлайн для работы и творчества: 5 лучших примеров
Купить хостинг за $1
Какие самые лучшие шрифты для сайта и логотипа: тренды в 2021 году, как выбрать и можно ли использовать стиль леттеринг?
- Главная
- Блог
- Какие самые лучшие шрифты для сайта и логотипа: тренды в 2021 году, как выбрать и можно ли использовать стиль леттеринг?
Шрифт — это буквально почерк вашего бизнеса, важный визуальный элемент для создания правильного восприятия вашего бренда. Текст зачастую выступает главным способом коммуникации компании с клиентом. Использование гармоничных сочетаний шрифтов на сайте, в рекламных материалах и других составляющих айдентики помогает сформировать образ компании, отражающий ее позиционирование.
То, какой шрифт используется в веб-дизайне, косвенным образом влияет и на конверсию: посетители интернет-портала более лояльны к контенту, представленному читабельными — чёткими и различимыми шрифтами, в этом случае они с большей вероятностью станут постоянными клиентами.
Рассмотрим, каков же самый лучший шрифт для сайта и логотипа и какими могут быть критерии выбора подходящего шрифта, а также чем хорош стиль леттеринг и в каких случаях применим.
Популярные шрифты 2021 года
В 2021 году исследователи типографики выделили основные тренды шрифтов, общая суть которых в том, что можно всё, что уместно и гармонично. Консерватизм и стереотипы в сфере графического дизайна уходят в прошлое — сегодня в почете новые креативные решения и гибкий подход.
На многих современных сайтах в шрифтах можно встретить и классику, и ретро-шрифты и минимализм. Из моды никогда не выходит лаконичность, простота.
Вот основные тенденции самых популярных шрифтов 2021 года:
- Неоновые цвета и яркость, или стиль 1970-80х годов. Это такие оригинальные шрифты, как Miami Vice, Alba, Nasalization, Rotola TH Pro, Liberta TA, 8th Avenue, 6th Aniversario — они прекрасно подойдут для логотипа, использования в дизайне упаковок, постеров, плакатов, заставок в медийном контенте.
- Стиль Ретро — всегда актуален, создаёт налёт лёгкой ностальгии, романтики. В то же время может подчеркивать немейнстримовый характер компании, проверенное временем качество или апеллировать к определенной временной эпохе, ее ценностям и настроению. Например, шрифты Aesthetic, Curious Type, Big Bro, Groovy, The Banthink будут отлично смотреться на плакате, афише, стилизованном логотипе, вывесках, сувенирных футболках.
- Минимализм — лёгкие, эффектные шрифты: Black rovers Font, Agnostic Font, QSansPro, Mofita, Munich Sans. Подобная декоративная графика с геометрическими элементами отлично подойдёт для упаковок, заголовков, эмблем, оформления цитат, меню.
- Классика по-прежнему универсальна: Classic Roman ™, Galano Classic, George, Chloe утончённы и легко читаемы.
- Шрифты с засечками, вносящие настроение доцифровой эпохи: Recoleta, Voga, Magfirah, Selvina. Чаще всего их можно встретить в глянцевых журналах, презентациях, открытках, принтах.
- Подчеркнутая элегантность также в моде. Шрифты Vaguely Fatal Font, Oleo Font, Le Royale, Roihu создают тёплую, непринуждённую атмосферу.
- Современность — подобным шрифтам присуща лёгкость, динамика, оригинальность, лаконичность. Это, к примеру: Codec Pro, Impossible, Nevrada, Cremona, Sofia Font. Часто используются для визиток, презентаций, постеров, сайтов, подписей в электронной почте.
- Чистая графика — это тоже актуально: Veneer Clean ™, Palomino Clean, Papua Font, Mimi Typeface, Fox & Cat гармонично выглядят на логотипах, упаковках, визитках, открытках, в заголовках.
Какой шрифт выбрать для сайта?
При выборе шрифтов для корпоративного сайта нужно продумать каковы основные ценности компании, какая целевая аудитория будет приходить на сайт и какими эмоциями компания хочет зацепить и зажечь своих клиентов. Проанализируйте ваших клиентов: каков их возраст, интересы и потребности.
Шрифт как визуальная составляющая корпоративного стиля должен затрагивать эмоциональную сферу, быть конгруэнтным мотивам целевой аудитории. Например, сухой формальный строгий шрифт, которым печатаются бюрократические документы, точно не подойдёт блогу студии развития творчества у детей, а вычурные разноцветные буквы будут странно смотреться на серьёзном портале по медицинской тематике.
Шрифт должен находиться в гармонии с остальными элементами дизайна сайта — изображениями, фотографиями, фоном. Выбирайте шрифт в зависимости от того, на что нужно сделать акцент — на иллюстрацию или содержание? Например, в заголовках и подзаголовках допустимо применять визуально сложные шрифты, с деталями — для привлечения внимания и выразительности.
«Базовый» же шрифт — для отображения текстовых страниц сайта должен быть достаточно простым и нейтральным, хотя при этом вовсе не обязательно использовать «скучные» и всем привычные шрифты, можно выбрать и нечто более оригинальное.
Какие шрифты для сайта бывают? Классификация основных семейств шрифтов
Можно также опираться на классификацию семейств шрифтов, чтобы сориентироваться в примерном направлении, куда двигаться:
- Serif, или Антиква — группа шрифтов, имеющих засечки на буквах. Представители — Times New Roman, EB Garamond, Baskerville, Lora и др. Они считаются классикой — такими шрифтами напечатаны книги наших домашних библиотек. Serif можно использовать как для заголовков, так и для блоков с основным текстом. Согласно исследованиям, такие шрифты делают тексты более убедительными для восприятия, подчёркивают верность традициям.
- А вот шрифты группы Blackletter следует включать в тексты крайне дозировано — например, только в заголовках, поскольку это тяжёлые, трудно читаемые готические буквы: Deutsch Gothic, Portcullion, Proclamate Heavy.
- Есть шрифты с толстыми засечками, осовремененные — Slab-serif или брусковые: Rockwell, Courier New, Arvo. От них веет молодым, хипстерским бунтарским духом. Эти шрифты хорошо смотрятся при использовании в заголовках или в цитатах на интернет-порталах проектов, связанных с модой, стилем, искусством.
- Sans-serif или Гротеск — группа шрифтов, не имеющих засечки, довольно обширная и востребованная у дизайнеров. Шрифты этого семейства обладают хорошей читабельностью, они современные, новаторские, отлично подходят как для основного текста, так и для заголовков: Arial, Open Sans, Roboto и подобные. Один из популярных шрифтов — Helvetica, имеющий закруглённые буквы с чётко простроенной высотой.
- Существует ещё интересное семейство рукописных шрифтов: Script или Handwriting: Lucida Script, Pacifico, Allura, Satisfy и др. Эти шрифты относятся к неформальным, не очень читабельным, поэтому ими лучше оформлять выборочные элементы — например, заголовки или цитаты. Не подходят для официальных документов.
- К декоративным шрифтам, где нет соблюдения строгих принципов построения, относятся Display или Акцидентные: Fredericka, Fredoka One, Lobster Two. Они не подходят для длинных текстов, но ими хорошо писать заголовки, включать в дизайн логотипов.
Основными создателями и поставщиками профессиональных шрифтов для веб-дизайна и типографий выступают 2 компании: Fonts Adobe и Google Fonts. Приобретая их продукт, вы можете быть уверенными, что шрифт будет качественным, адаптивным на любой платформе и никуда не расползётся.
Сколько шрифтов можно использовать одновременно?
Оптимальное количество разных шрифтов, которые можно использовать в веб-дизайне — это 2.
На некоторых сайтах прекрасно уживаются и 3 шрифта, но всё должно быть продуманно и в меру. Должна соблюдаться чёткая иерархия, чтобы было понятно, какой шрифт за какой блок информации отвечает. Например, один из этих трёх шрифтов может быть основным, другой дополнительным, третий — для особенных акцентов.
При использовании без острой необходимости большого количества шрифтов разрушается внутренняя целостность сайта, структурированность; его контент делается менее читабельным и понятным. И в результате читатель начинает запутываться в этой аляповатости, особенно если каждый шрифт ещё используется в вариантах жирного, курсивного или подчёркнутого начертания.
Кроме того, если используется более 2–3 типов шрифтов, загрузка сайта может проходить медленнее. И есть риск, что потенциальный клиент покинет страницу, так и не дождавшись, пока там что-то появится.
Дополнительные советы
- Выбирайте шрифт, у которого есть несколько вариантов начертания: лёгкий, обычный, жирный. Это поможет создать структуру и иерархию заголовков, текстовых блоков, цитат и сносок на вашем сайте.
- Обращайте внимание, поддерживает ли выбранный вами шрифт кириллицу, латиницу, другие иностранные языки с умляутами у букв, на которых говорят ваши клиенты и сотрудники.
- Проверьте читаемость шрифта с точки зрения адаптивного дизайна: как шрифт отображается на экране мобильных гаджетов. Желательно протестировать, как отображаются шрифты в разных интернет-браузерах.
- Воспользуйтесь сервисами для проверки сочетаемости двух типов шрифтов, если появились сомнения, гармонируют ли шрифты на странице. Google Fonts предлагает подходящие варианты пар шрифтов; также есть полезный сервис fontjoy для анализа сочетаемости.
Какой шрифт выбрать для логотипа?
Шрифт, подобранный для логотипа, также, как и шрифт, подобранный для сайта, несёт определённый посыл, ассоциации, настроение, отражает позиционирование компании.
Чтобы выбрать оптимальный шрифт для логотипа, проведите небольшое исследование, выделив и описав:
- портрет вашего клиента — каков он;
- имидж вашей компании;
- что в компании ценят клиенты;
- какие ценности вашей компании вы хотите подчеркнуть;
- какими словами вы можете описать ваш бренд;
- какие эмоции связаны с вашим брендом.
Каждый логотип, включая входящий в него шрифт, имеет свою личность — может быть дружелюбным, серьёзным, изящным, игривым, надёжным, торжественным, hi-techи т. п. Одна из основных задач логотипа — делать компанию узнаваемой, вызывать доверие и лояльность целевой аудитории.
Советы как выбрать подходящий шрифт для логотипа
- Выбирайте простые, читабельные шрифты, подчёркивающие дух вашего бренда, ориентированные на правильное восприятие клиентом.
- Шрифт должен быть различимым во всех ситуациях использования логотипа: на крупноформатных плакатах, на кузове автомобиля, на сайте, на экранах гаджетов, на визитках, на сувенирной продукции маленького размера, например, на корпоративных ручках.
- Оптимальный шрифт, подобранный для логотипа, всегда вне времени, поэтому осторожно рассматривайте трендовые шрифты: через несколько лет они могут уже стать нетрендовыми. Можно использовать 2 шрифта в логотипе, которые дополняют друг друга.
- Доверяйте подбор шрифта для логотипа профессиональному дизайнеру по айдентике, чтобы быть уверенными, что будут учтены все детали: соответствие шрифта существующему фирменному стилю, запросам и мотивации целевой аудитории.
Стиль леттеринг: в каких сферах и для каких аудиторий подойдут рукописные шрифты?
Если вы хотите выделить свой проект на фоне других, внести изюминку, вам поможет необычный шрифт, например стиль леттеринг или рукописный. Такой стиль может применяться в создании логотипов, баннеров, упаковки, визиток, наружной рекламы, айдентики в целом.
Леттеринг — это рисованная надпись, представляющая единую гармоничную стилизованную композицию. Интересно, что леттеринг был в моде уже в XIX веке, например его можно встретить на рисованных плакатах Альфонса Мухи, Тулуз-Лотрека.
В целом стиль леттеринг похож на каллиграфию, но его основное отличие в том, что в каллиграфии соблюдаются строгие правила и буквы пишутся, а в леттеринге — рисуются, дополняются иллюстрациями, деталями, элементами. Главные принципы леттеринга — это уникальность каждой буквы, написание каждого символа вручную.
Есть огромное количество разновидностей нового, современного леттеринга, вот только некоторые из них:
- Brush Lettering — письмо, созданное с помощью кисти или брашнепа.
- Chalk Lettering — письмо мелом, на меловых досках. Активно применяется в ресторанах, магазинах, на упаковке. Доска со словами, написанными мелом, не только носитель информации, но и креативное украшение интерьера.
- Vintage Lettering применяется в дизайне фирменного стиля косметических, парфюмерных, алкогольных брендов.
- Back In USSR или советский леттеринг — стиль от художников-каллиграфов, оформляющих произведения советского кинематографа, книги, упаковки. Сейчас такое направление леттеринга пользуется успехом в оформлении полиграфии брендов молодёжной одежды, баров, арт-пространств.
- iPad Lettering — текст, создающийся с помощью планшета графическими дизайнерами.
Нужно учитывать предпочтения и профессиональную направленность ваших клиентов: рукописный шрифт прекрасно будет воспринят творческими молодыми людьми, но для целевой аудитории сайта солидной юридической фирмы он явно неуместен. Также, стиль леттеринг может иметь сложности в адаптивном дизайне: будучи хорошо читаемым на экране ноутбука, он не всегда различим на дисплее небольшого по размеру гаджета.
Рукописный шрифт выглядит очень хорошо в заголовках, в оформлении отдельных смысловых фраз или цитат, несёт посыл теплоты, неформальности, уюта, привлекает внимание. Идеально включать такой стиль в дизайн надписей для кофеен, проектов, связанных с искусством и модой, магазинов эксклюзивных авторских работ и продуктов.
Для основного текста использовать леттеринг не рекомендуется: такой текст сделается плохо читаемым, из-за того, что клиенту придётся вглядываться в буквы, чтобы понять их.
Профессиональный графический дизайнер, владеющий основами леттеринга и знаниями об основных правилах создания рисованной надписи, поможет вам создать уникальное представление вашего бренда или проекта.
Заключение
В идеале создание сайта происходит на базе имеющегося фирменного стиля, в котором прописаны и допустимые для использования шрифты. Если же такого руководства у компании нет, или имеется только логотип, то шрифт, подобранный для представления текста в веб-дизайне, должен соответствовать посылу, который несёт компания.
Оптимальный шрифт для сайта и логотипа должен быть запоминающимся, уникальным, разборчивым на любом носителе и поверхности, работающим на любой платформе.
Команда нашей веб-студии может решить все обозначенные задачи — от разработки айдентики (логотип, фирменный стиль, брендбук) до создания сайта. Айдентика включает в себя подбор подходящих шрифтов. Если же вы хотите перейти к созданию сайта минуя этап разработки фирменного стиля, то шрифты для него подберет дизайнер на этапе создания макетов.
Поделитесь материалом в социальных сетях
Услуги
Сайт-визитка
Создадим простой, стильный и лаконичный сайт для адекватной презентации вашей компании и ее возможностей в web-пространстве.
от 200 000 ₽
Промо-сайт
Разработаем продающий сайт для инновационных товаров или нестандартной акции с необходимым набором информационных блоков для привлечения внимания клиента.
от 200 000 ₽
Корпоративный сайт
Разработаем презентационный сайт компании, представив ваши преимущества, услуги и продукты в понятном, структурированном и визуально привлекательном виде.
от 300 000 ₽
Сайт-каталог
Воплотим весь ваш товарный каталог в формат структурированного и единообразно заполненного сайта с широкими возможностями поиска и фильтрации.
от 350 000 ₽
Интернет-магазин
Создадим интернет-магазин, учитывающий особенности ваших товаров и полностью готовый к SEO-продвижению, рекламным кампаниям и онлайн-продажам.
от 400 000 ₽
Логотип и фирменный стиль
Разработаем уникальный фирменный стиль, транслирующий нужные смысловые ассоциации вашим клиентам. Цельный и единый образ компании на всех носителях.
от 100 000 ₽
Поддержка сайтов
Внедрим на сайт новые блоки и функционал по мере его развития, поможем с обновлением контента в активных разделах, разберемся с техническими проблемами.
от 1300 ₽/нормо-час
Продвижение и развитие сайтов
Создадим постоянный поток целевого трафика из Яндекс и Google, конвертирующийся в реальные заявки.
от 70 000 ₽/мес.
ОСТАВЬТЕ ВАШУ ЗАЯВКУ
5 способов определить шрифты на веб-странице.
Значит, вы занимаетесь своим делом, просматривая веб-страницы, и натыкаетесь на самую неудачную комбинацию шрифтов, но не можете определить шрифт? В этом видео (и приведенном ниже списке) я покажу вам, как именно найти эти шрифты…
1. Fontanello (Chrome + Firefox)
Fontanello Chrome and Firefox Extension, на мой взгляд, самый быстрый способ узнать, какой шрифт используется на веб-странице.Вы просто щелкаете правой кнопкой мыши по тексту, находите Fontanello в меню и видите семейство шрифтов и некоторые дополнительные атрибуты.
2. WhatFont (Chrome и Safari)
WhatFont Chrome and Safari Extension — мой любимый вариант, когда дело доходит до обнаружения шрифтов. Чтобы активировать инструмент, вы должны щелкнуть значок «Какой шрифт» в меню браузера. Теперь вы можете выбрать несколько частей текста, что позволяет лучше визуализировать разбивки шрифтов по сравнению с Fontanello.
3. Визуальный инспектор (хром)
РасширениеVisual Inspector для Chrome предлагает немного больше возможностей, чем два вышеупомянутых.Вы просто щелкаете значок «Визуальный инспектор» в меню Chrome, чтобы активировать инструмент, а затем переходите к разделу «Типографика» в раскрывающемся списке. Теперь вам представлены используемые семейства шрифтов с дополнительной разбивкой всей типографики на веб-странице.
4. Старый добрый Проверка кода (все браузеры)
Итак, если вы пытаетесь избежать установки десятков расширений браузера, мы сможем узнать больше об используемых шрифтах с помощью старой доброй проверки кода:
Если вы используете Google Chrome , щелкните правой кнопкой мыши загадочный текст и выберите «Проверить».Появится DevTools, убедитесь, что вы находитесь на вкладке «Стили» и перейдите к атрибутам Font-Family, чтобы узнать больше о шрифтах.
Если вы используете Firefox , щелкните текст правой кнопкой мыши и выберите «Проверить элемент». Появится их инспектор, теперь перейдите на удобную вкладку шрифтов для получения необходимой информации.
Если вы используете Safari , убедитесь, что меню «Разработчик» отображается, установив флажок в нижней части вкладки «Дополнительно» в настройках Safari. Теперь щелкните текст правой кнопкой мыши и выберите «Проверить элемент».Откройте боковую панель с подробностями, если она закрыта, и выберите вариант Стили — Вычисленные. Раздел font-family представит информацию о шрифте в атрибутах стиля.
5. Раскрытие переименованных шрифтов (расширенный метод)
Препятствие, с которым мы можем столкнуться, — это когда семейство шрифтов не имеет четкого названия, естественно, отбрасывать инструменты и методы проверки шрифтов. Мы начинаем миссию по спасению с фактической загрузки шрифта.
Есть несколько способов сделать это, но я начну с записи текущего имени шрифта.Теперь откройте инструмент Inspector (я использую Google Chrome), перейдите на вкладку «Приложение», прокрутите до раздела «Фреймы» и откройте «Шрифты». Нам нужно сопоставить имя файла с именем шрифта, указанным ранее. Теперь откройте этот шрифт в новой вкладке, чтобы загрузить его. Наконец, мы перетаскиваем этот файл шрифта в удивительный What Can My Font Do? веб-сайт и бац, информация о шрифтах представлена красиво.
С большой любовью,
Роб
Twitter: @robhope
LinkedIn: @robhope
Электронная почта: [адрес электронной почты защищен]
Как узнать, какой шрифт используется на веб-сайте
Если вы когда-либо полностью увлекались шрифтом, который вы видели на веб-сайте, вы, возможно, задавались вопросом, как узнать, как он называется, чтобы использовать его в своем собственном контенте.Качественная типографика может улучшить восприятие ваших посетителей чтением, поэтому, возможно, стоит попытаться ее найти. Независимо от причины, по которой вы проверяете, какой шрифт используется на веб-сайте, существует множество инструментов, которые могут помочь.
В этой статье мы обсудим, почему вы можете захотеть узнать, какой шрифт используется на веб-сайте. Мы также покажем вам, как это сделать.
Приступим!
Подпишитесь на наш канал Youtube
Почему вы можете проверить, какой шрифт использует веб-сайт
Как мы уже упоминали, красивые и удобочитаемые шрифты могут улучшить пользовательский интерфейс и удобочитаемость вашего сайта.Это также гарантирует, что посетители могут комфортно взаимодействовать с вашим контентом, не пытаясь его расшифровать. Если ваш текст стильный, но неразборчивый, читателям будет сложно понять или оценить ваш материал.
Кнопкис призывом к действию (CTA) также могут оказаться бесполезными, если их текст не читается. Вот почему вам может быть удобно вести список шрифтов, которые привлекают ваше внимание, будучи одновременно стильными и удобочитаемыми. Затем вы можете использовать их на своем сайте или для клиента в будущем.
Как узнать, какой шрифт используется на веб-сайте (3 доступных метода)
Есть несколько методов, которые вы можете использовать, чтобы проверить, какой шрифт использует веб-сайт. Функция проверки вашего браузера — отличное решение, но есть расширения, которые могут производить аналогичные эффекты. Вы даже можете найти шрифты из изображений с помощью онлайн-инструментов. Давайте рассмотрим каждый из этих вариантов.
1. Определите шрифты с помощью инструмента инспектора браузера
Один из самых простых способов проверить, какой шрифт используется на веб-сайте, — использовать инспектор браузера.Хотя в этом примере мы будем работать с Chrome Inspector, стоит отметить, что другие браузеры имеют аналогичные функции.
Сначала щелкните правой кнопкой мыши веб-страницу, содержащую шрифт, который вы хотите найти. В появившемся меню выберите Inspect:
.Если вы предпочитаете использовать сочетание клавиш, попробуйте Ctrl + Shift + I для Windows или Linux. Если вы используете Mac, эквивалент Cmd + Shift + I.
В окне в правой части экрана найдите текст с использованием шрифта, который вы хотите извлечь.Он будет выделен, когда вы выберете соответствующий элемент HTML:
Затем щелкните вкладку Computed и найдите «font-family»:
Здесь вы должны увидеть название шрифта и его стиль.
Чтобы увидеть CSS, связанный со шрифтом, перейдите на вкладку Стили . Вы можете прокручивать страницу для поиска значений, связанных со шрифтом. Однако, поскольку здесь могут быть переопределения и нерелевантные правила стиля, вкладка Computed обычно более полезна.
2. Найдите шрифты с помощью расширения браузера
Расширениядля браузера могут обеспечить более простой способ поиска сведений о шрифтах на веб-сайте, особенно если вам неудобно пользоваться Инспектором. Кроме того, они обычно могут быстрее дать ответ, который вам нужен, чтобы вы могли вернуться к текущей задаче.
Некоторые такие надстройки включают:
- Fontanello: Это бесплатное расширение позволяет вам находить название, толщину, стиль и другие параметры шрифта, просто выделив его и щелкнув правой кнопкой мыши во время просмотра.
- WhatFont: Еще больше упростив определение шрифтов, WhatFont позволяет просматривать название шрифта, просто наведя на него курсор.
- CSS Peeper: Это расширение, созданное для веб-дизайнеров, является немного более надежным и может сообщать вам дополнительные сведения из кода CSS веб-страницы.
Однако каждое из этих расширений поддерживает различные браузеры. WhatFont доступен для Firefox, Chrome, Safari и Internet Explorer. С другой стороны, Fontanello доступен только для Firefox и Chrome.CSS Peeper — это специальный инструмент для Chrome, который вы не сможете использовать с другими платформами.
WhatFont — самый простой вариант для быстрого поиска названия конкретного шрифта. Поскольку он также поддерживает большинство браузеров, мы воспользуемся им для быстрой демонстрации.
После установки WhatFont вы можете проверить, какой шрифт использует веб-сайт, активировав его на панели инструментов браузера и наведя курсор на текст:
При первом наведении курсора на текст вы увидите только название шрифта.Однако, щелкнув имя, вы увидите развернутое всплывающее окно с более подробной информацией, такой как размер, вес, цвет и высота строки. Он также может определить, доступен ли шрифт через Typekit или Google Fonts.
Когда вы закончите проверку сведений о шрифте, вы можете выйти из инструмента с помощью кнопки Exit WhatFont в правом верхнем углу окна браузера.
3. Обнаружение шрифтов в изображениях
Наконец, вы также можете попробовать просмотреть шрифты, используемые в изображениях. Сюда входят шрифты, которые вы видели в логотипах или инфографике.По нашему опыту работы с детекторами шрифтов, WhatTheFont является наиболее эффективным онлайн-инструментом для этой работы.
Чтобы использовать WhatTheFont, вам необходимо загрузить соответствующее изображение и выбрать раздел с соответствующим шрифтом:
Затем он вернет страницу результатов с несколькими шрифтами, которые похожи, если не полностью совпадают, с тем, который вы пытаетесь определить:
Ваш уровень успеха здесь может варьироваться в зависимости от источника и популярности шрифта. Если для вас очень важно точное название шрифта, может быть сложно найти инструмент, который даст вам то, что вы хотите.
Однако, если вы готовы использовать шрифт, похожий на тот, который вы нашли на изображении, онлайн-детектор должен соответствовать вашим потребностям.
Заключение
Визуально привлекательные и разборчивые шрифты могут улучшить впечатление от чтения для посетителей вашего веб-сайта. Это может побудить вас продолжать искать новые гарнитуры, которые вы могли бы использовать на своем сайте или для своих клиентов. Независимо от причины, по которой вы хотите проверить, какой шрифт использует веб-сайт, существует множество инструментов, которые могут вам помочь.
В этом посте мы обсудили три метода, чтобы узнать, какой шрифт использует веб-сайт:
- Определите шрифты с помощью инструмента инспектора браузера.
- Найдите шрифты с помощью расширения браузера, например WhatFont.
- Обнаружение шрифтов в изображениях с помощью WhatTheFont.
У вас есть вопросы о том, как проверить, какой шрифт используется на веб-сайте? Дайте нам знать в комментариях ниже!
Изображение rudall30 / shutterstock.com
Как я могу узнать, какие шрифты использует веб-сайт?
Вариант 1. Используйте расширение для браузера (Easy)
Расширения, такие как WhatFont (доступны для Chrome, Firefox и Safari), позволяют легко обнаруживать семейства шрифтов любого текста на веб-странице.Вам просто нужно установить расширение, активировать его на сайте и щелкнуть элемент, который вы хотите проверить. Результаты отображаются в плавающем поле, всегда в выбранном вами контексте.
Вариант 2. Вручную проверьте CSS с помощью инспекторов браузера (расширенный)
Большинство веб-браузеров позволяют легко находить шрифты с помощью , щелкнув правой кнопкой мыши → «Проверить» или «Проверить элемент». Это также можно сделать, нажав F12 . Это покажет список стилей, прикрепленных к веб-сайту, который вы можете изучить, чтобы найти шрифты, используемые в любом элементе HTML.
Использование инспектора не так просто, как использование расширения, но у него есть несколько преимуществ. Требуется некоторое понимание CSS, так как обычно вам нужно пройти через несколько стилей, чтобы найти тот, который применяется. Как правило, зачеркнутые стили перезаписываются, поэтому всегда ищите те, которые применялись последними.
Все стили со страницы перечислены на вкладке Style , но если вместо этого вы используете вкладку Computed , вы можете найти свойства, которые активно применяются к выбранному вами элементу, включая, конечно, семейство шрифтов.
Наконец, еще один способ быстро проверить, какие шрифты используются во всем мире (но НЕ как и где) — это перейти в «Приложение → Фреймы → Шрифты» . Там вы найдете список всех ссылочных (несистемных) шрифтов.
Этот второй метод работает медленнее, но использование инспектора может дать вам хорошее представление о том, как построена вся страница. Кроме того, многие дизайнеры и разработчики используют его как инструмент для тестирования изменений, прежде чем фактически записывать их в таблицу стилей (поскольку изменение строки CSS в инспекторе вызывает предварительный просмотр в реальном времени в браузере).
Как определять шрифты в Интернете »XO PIXEL
Эй, пиксели! Вы когда-нибудь были на веб-сайте и замечали, что на нем используется великолепный шрифт, но не знали, какой это был шрифт? Это определенно случалось со мной много раз. Есть так много замечательных веб-шрифтов, готовых к использованию дизайнерами. На этой неделе я покажу вам, как определить любой шрифт в Интернете. Итак, без промедления, приступим!
1. Adobe Fonts
Adobe Fonts — такой замечательный ресурс.Вы можете не только использовать шрифты в связанных приложениях, таких как Illustrator и XD, но также можете использовать шрифты Adobe на своих веб-сайтах. Еще один замечательный инструмент, который мне очень пригодился, — это визуальный поиск шрифтов. Это очень полезно, если у вас есть изображение с шрифтом, который вы хотите использовать. Просто перетащите изображение или снимок экрана шрифта, который вы хотите найти, и Adobe Fonts мгновенно отсканирует фотографию и подберет шрифт.
2. Веб-инспектор
Как веб-разработчик я прекрасно понимаю, что нельзя принимать то, что вы видите на веб-сайте, за чистую монету.Один из моих любимых способов изучить понравившийся мне веб-сайт — использовать веб-инспектор. Таким образом, я действительно могу видеть код и другие ресурсы веб-сайта. Вы также можете использовать веб-инспектор, чтобы узнать, какой шрифт используется на любой веб-странице. Просто выделите текст, нажмите «Проверить в Chrome» и на вкладке «Стили» вы увидите, какой именно шрифт используется. В качестве альтернативы, в Firefox щелкните правой кнопкой мыши и выберите «Проверить элемент», а на правой панели просто выберите вкладку шрифтов, чтобы увидеть текущий используемый шрифт, а также все шрифты на странице.
3. WhatFont
Существует действительно отличное расширение для Chrome под названием WhatFont. Просто активируйте расширение Chrome, и на любом веб-сайте вы можете навести курсор мыши на области и мгновенно увидеть семейство шрифтов, вес, стиль и т. Д. Существует также множество других расширений Chrome, которые вы можете использовать для поиска шрифтов на любом веб-сайте.
Давай поговорим!
Как вы определяете шрифты в Интернете? Какие инструменты вы используете? Оставьте комментарий ниже!
Сообщение навигации
8 инструментов для определения шрифтов, используемых на веб-сайтах и в приложениях
В моем предыдущем посте я подробно описал, как можно использовать инструмент WhatFontis для идентификации шрифтов из изображения приложения.На этот раз я принес список инструментов , которые вы можете использовать для определения шрифтов, используемых в приложениях, на веб-сайтах, а также логотипов.
По мере чтения вы обнаружите, что некоторые из этих инструментов (включая WhatFontis) идентифицируют шрифты из изображения текста . Эти инструменты можно использовать для поиска шрифтов, используемых в приложении или на веб-сайте, используя для этой цели их снимки экрана.
С другой стороны, некоторые инструменты предложат вам набор вопросов, основанный на внешнем виде шрифта, и выдадут результаты, сосредоточенные на вашем описании.Эти инструменты пригодятся в тех случаях, когда вы вспоминаете шрифт, который видели в приложении или на веб-сайте, но не помните источник.
В этом списке также упоминается полезное расширение браузера , которое может рассказать вам подробную информацию о шрифте, используемом на веб-странице.
Как упоминалось ранее, WhatFontis — это онлайн-инструмент, который может идентифицировать шрифт из изображения текста , которое вы загружаете на сайт. Вы можете прочитать мое руководство о WhatFontis, чтобы узнать пошаговый процесс использования этого инструмента.
WhatTheFont — еще один онлайн-инструмент, который может идентифицировать шрифт по изображению . Вы можете начать с загрузки изображения, инструмент проанализирует изображение и вернет наиболее близкое совпадение из своей базы данных. Инструмент работает даже со связанными скриптами и когда в изображении более одного шрифта
Font Squirrel’s Matcherator также поможет вам определить шрифт на изображении с помощью шрифта. Вы можете загрузить изображение или предоставить URL-адрес изображения для Matcherator, чтобы помочь вам с идентификацией шрифта.Инструмент также поддерживает функции OpenType.
Вы также можете опубликовать свое изображение, содержащее образец текста, на сабреддите / r / identifythisfont, чтобы получить помощь в определении используемого шрифта от их сообщества.
Identifont — это онлайн-инструмент, который предоставит вам набор из вопросов по ключевым особенностям шрифта , вы можете выбрать один из предложенных вариантов, чтобы описать ваш шрифт наилучшим образом. Он определит шрифт на основе ваших ответов.Кроме того, он также позволяет искать шрифты на основе различных параметров, включая имя дизайнера / издателя и внешнее сходство с другим шрифтом.
Font in Logo позволяет искать и находить шрифты, используемые в популярных брендах . Вы можете выполнить поиск по названию бренда, и он расскажет вам, какой шрифт был использован в логотипе. Кроме того, вы также можете найти все популярные логотипы, в которых используется один и тот же шрифт.
Как следует из названия, Руководство по идентификации шрифтов с засечками поможет вам идентифицировать шрифты с засечками.Вы должны описать особенности вашего шрифта с засечками, такие как форма засечек, перекрестие и т. Д., Выбрав вариант из тех, которые представлены на сайте, которые, по вашему мнению, лучше всего определяют ваш шрифт. Инструмент вернет шрифты, которые соответствуют описанному вами внешнему виду .
WhatFont Tool может помочь вам определить шрифты при просмотре веб-сайтов. Вам нужно добавить букмарклет в ваш браузер , активировать его и навести курсор на текст на веб-странице, чтобы получить сведения о шрифте.Также доступны расширения для браузеров Chrome и Safari . Это расширение браузера также обнаруживает службы, используемые для обслуживания шрифта, с поддержкой Adobe Typekit и Google Font API.
Я уверен, что эти инструменты помогут вам идентифицировать шрифты, с которыми вы сталкиваетесь при просмотре веб-сайтов или использовании приложений, и находить их привлекательными. Вы также можете посетить эти сайты бесплатных шрифтов, если вы ищете бесплатные шрифты для коммерческого использования для вашей работы. Если вы хотите создать свой собственный шрифт для вашего приложения или логотипа веб-сайта, вы также можете использовать эти инструменты для создания шрифтов.Пожалуйста, поделитесь этим постом с другими, если вы нашли его полезным!
Как проверить, какие шрифты используются на веб-сайте
Как и многие другие приложения для повышения производительности, представленные сегодня на рынке, расширения для браузеров созданы для повышения производительности. Работа веб-дизайнером и разработчиком на протяжении многих лет показала мне на собственном опыте, что способность определять, какие шрифты используются на веб-сайте, является обязательной.
Прочтите по теме : 12 расширений Chrome для разработчиков и дизайнеров
Да, вы можете легко войти в режим инспектора из параметров разработчика, чтобы увидеть структуру веб-страниц и их элементов, но этот процесс — долгий путь.Лично я предпочитаю видеть то, что хочу, менее чем за 3 клика, и вот тут-то и пригодятся эти расширения для браузера.
Фонтанелло
Раньше я использовал несколько расширений шрифтов, но остался только Fontanello. Это расширение с открытым исходным кодом для Google Chrome, а Firefox отображает основные типографские стили любого выделенного текста. Эти стили включают: семейство шрифтов, толщину шрифта, размер шрифта, высоту строки и цвет.
РЕКЛАМА
Как работает Fontanello? Выберите любую группу текста и щелкните правой кнопкой мыши, чтобы вызвать контекстное меню.Наведите указатель мыши на « Fontanello », и вы увидите стили текста. Легкий.
Fontanello — Показать шрифты, используемые на веб-сайте
WhatFont
WhatFont — еще одно расширение браузера, которое упрощает определение шрифтов на веб-страницах. Для пользователей, которые не хотят выделять блоки текста для просмотра их свойств, WhatFont имеет достаточно широкое всплывающее окно, в котором перечислены семейство шрифтов, размер, стиль, высота строки, толщина и цвет. Он также включает образец текста алфавитов, как это делают библиотеки шрифтов.
Как работает WhatFont ? Щелкните значок расширения, чтобы активировать его, а затем наведите указатель мыши на любой текст на веб-странице. Вы заметите, что WhatFont более стильный, поскольку он использует более организованное всплывающее поле с помеченными заголовками и цветными полями для его цветовых кодов. Он также поддерживает Google Font API и Typekit.
WhatFont — поиск шрифтов, используемых на веб-сайте
В зависимости от того, какой рабочий процесс вы предпочитаете, выберите Fontanello или WhatFont , зная, что вам никогда не придется переходить в режим разработчика только для того, чтобы проверить свойства шрифта веб-сайта.
лучших шрифтов для сайтов | Руководство эксперта по выбору шрифтов
7 смертных грехов выбора шрифта для вашего веб-сайта
1: не используйте липкие шрифты
Никогда не используйте Comic Sans — когда-либо . Это может быть что-то, что вы хотите использовать в приглашении на день рождения вашего ребенка, но безвкусным и забавным шрифтам нет места на любых веб-сайтах, которые нужно воспринимать всерьез.
Каждый дизайн шрифта имеет свою индивидуальность. В зависимости от дизайна, который вы выберете, ваш шрифт будет создавать различное впечатление о вашем веб-сайте и вашем бренде.
Например, шрифт «Папирус» заставляет задуматься о древних цивилизациях. Это шрифт, который вы ожидаете увидеть в названии фильма о египетских мумиях, а не на сайте финансового планирования.
Хотя эти липкие шрифты находят свое место на сайтах для развлечений и хобби, пожалуйста, не используйте их на своем сайте, если вы хотите выглядеть профессионально.
2: Не используйте грязные, трудные для чтения шрифты
Выбор дизайна шрифта для основного контента сильно отличается от выбора шрифта для заголовка, заголовка или логотипа.Цель содержания вашего веб-сайта — предоставить читателям полезную информацию о ваших продуктах или услугах, поэтому удобочитаемость здесь очень важна.
В случае сомнений, вы всегда можете обратиться к дизайну шрифтов:
Эти пять шрифтов очень удобочитаемы, что делает их безопасным вариантом для вашего контента на сайте.По-прежнему не можете выбрать правильный дизайн шрифта?
Вот изящная блок-схема дизайна шрифтов от Basekit, которая поможет вам выбрать правильный шрифт для областей содержимого:
3: Не перегружайте свой межстрочный интервал
Один из самых простых способов упростить ваш контент read — это добавить достаточный интервал между каждой строкой.
Магическое число идеальной высоты строки составляет 150% от размера шрифта, который вы используете.
Например, если вы используете размер шрифта 24 пикселей, высота строки будет 36 пикселей (что составляет 150% от 24 пикселей):
Межстрочный интервал может иметь огромное значение, когда дело доходит до читаемости.Сразу видно, что левый столбец выглядит лучше всего.
4: Не используйте слишком много разных шрифтов
Вы должны выбрать не более трех шрифтов для своего веб-сайта.В идеале вы должны стремиться к использованию всего двух стилей шрифтов для всего вашего веб-сайта:
- Стиль шрифта для заголовков и заголовков страниц
- Стиль шрифта для основных областей содержимого
- Стиль шрифта для цитат или субтитров (необязательно )
Если больше, то ваш веб-дизайн может начать казаться загроможденным и сбивающим с толку — и вы подорвите идентичность бренда, над которым так много работали!
Попробуйте найти два шрифта, которые дополняют друг друга — это называется парой шрифтов .
Вам понадобится шрифт для заголовков и шрифт для более длинной копии на сайте, и вы можете немного повеселиться, сопоставив эту пару. Если вы обнаружите, что испытываете трудности, Google Fonts предлагает варианты сочетания, а также есть бесплатные онлайн-инструменты, которые помогут вам.
Шрифт Anton слишком сложен для использования на всем сайте — к счастью, Google Fonts показывает вам популярные сочетания, чтобы помочь вам найти наиболее подходящий шрифт.5: Не используйте слишком много цветов шрифта
Color — мощный инструмент брендинга.Например, когда вы думаете о Starbucks, какой цвет (а) вам приходит на ум? Скорее всего, это зеленый цвет, который вы видите в их логотипах и на их веб-сайтах.
Когда вы выбираете цвета для своих шрифтов, выбирает только один или два фирменных цвета , которые действительно представляют вас или ваш бизнес, для использования в заголовке или подзаголовках.
Убедитесь, что цвет вашего шрифта четко выделяется на фоне цвета , чтобы его было легко читать. В Интернете есть бесплатные инструменты, такие как средство проверки контраста WebAIM, с помощью которого вы можете убедиться, что цвет вашего шрифта соответствует стандартам удобочитаемости!
Использование слишком большого количества цветов, несовместимых цветов или неправильного цвета (например, салатового или бледно-желтого) сделает ваш веб-сайт беспорядочным и затруднит усвоение контента.
6: Не выбирайте размер шрифта наугад
Модульные масштабируемые размеры шрифта придадут вашему тексту более гармоничный вид. Это серия шрифтов с идеальными пропорциями, которые широкая публика считает «красивыми».
Рекомендуемые размеры шрифта: 8, 16, 24, 32, 48, 64, 95
16 пикселей — идеальный размер шрифта для основного текста. Он не слишком маленький и не слишком большой, поэтому он действительно помогает улучшить читаемость вашего абзаца.Фактически, размер шрифта, который мы используем в основных областях содержания наших статей, составляет 16 пикселей.
8px действительно слишком мало для основной копии — вместо этого вы должны использовать этот размер только для второстепенного текста, такого как штампы даты. Что касается заголовков, можете поиграть с шрифтом большего размера, если считаете нужным!
Полезный ресурс:
- Хотите, чтобы размер шрифта отличался от рекомендованного? Вы можете использовать этот модульный калькулятор масштаба, чтобы создать свой собственный идеальный масштаб размера шрифта.
7: Не недооценивайте пустое пространство
Пустое пространство — это пустое пространство вокруг содержимого, такого как заголовки, абзацы, изображения или кнопки, и оно жизненно важно для вашего веб-дизайна.Использование пустого пространства — одна из самых простых вещей, которые вы можете сделать прямо сейчас, , чтобы мгновенно упростить чтение содержимого вашего веб-сайта.
Белое пространство не дает вашему веб-сайту выглядеть загроможденным и дает вашему контенту больше воздействия и «пространство для дыхания», что, в свою очередь, упрощает сканирование и усвоение информации для посетителей.