8 рекомендаций для лучшей удобности чтения в сети | by Writes
Хотя мультимедиа и становится всё популярнее в сети, вы не найдете лучшего способа общения с вашими посетителями, чем старый, добрый текст. Вы можете подумать: «Текст, ты думаешь мы не умеем с ним работать?» И я соглашусь — у нас было достаточно времени, чтобы усвоить основы письменного контента. Но тем не менее, по какой-то причине, существует множество сайтов, которые всё еще плохо справляются с отображением текста.
Вы знаете, что люди читают онлайн текст на 25% медленнее, чем печатные материалы? Согласно исследованию, проведенному Nielsen, ваши посетители прочитывают только 20–28% слов на вашем сайте.
При чтении книги или статьи в журнале, мы, обычно, читаем слово за словом, поглощая весь текст, пытаясь вникнуть в его суть. Информацию в сети, большинство из нас, просто просматривают, перепрыгивая с одного места, в другое, надеясь наткнуться на интересные факты. Вот 8 рекомендаций, которые помогут вам улучшить читабельность вашего контента, и в конечном счете, усовершенствовать общение с вашими посетителями.
Давайте начнем с самой основной части любого письменного контента. По началу, виды и стили шрифтов определялись используемым веб браузером. И только с выходом, и, в конечном итоге, стандартизацией HTML тэга <font>, веб дизайнеры смогли как-то контролировать отображение текста. Но шрифты, определенные под этим тэгом, все равно должны были быть установлены на компьютере пользователя, что могло стать проблемой из-за разных стандартов шрифтов на разных ОС. Только с представлением веб-шрифтов, дизайнеры получили возможность использовать любой шрифт по своему выбору.
Итак, плохо это, или хорошо? Стандартные шрифты были ограничены, но в то же время, такое положение вещей оставляло немного места плохим дизайнерским решениям. Творчество вполне может приходить ценой удобочитаемости. Например, недавно, меня попросили провести краткую оценку UX разных туристических сайтов для TTG Virtual: Technology. Я наткнулась на сайт Black Tomato, который выполнен в очень красивом стиле, но для большей части своего контента использует шрифт SteelfishRegular, который довольно сложно читать, не говоря о быстром просмотре.
Итак, что стоит учитывать при выборе шрифта для своего контента? Конечно, вы можете использовать разные шрифты в заголовках и самом контенте. Заголовки должны быть простыми, понятными, и, обычно, не длинными. Поэтому здесь вы можете применить креативность. Только убедитесь, что вы используете и заглавные, и строчные буквы, поскольку эта разница упрощает просмотр.
Для более длинных текстов, стоит использовать более четкие шрифты sans-serif. Хотя шрифты категории serif улучшают читабельность в печатной продукции, в сети они имеют противоположный эффект. На экране буквы этих шрифтов размываются, усложняя чтение текста. Вот стандартные шрифты sans-serif, которые удобно читать с экрана: Arial, Helvetica, Trebuchet, Lucida Sans и Verdana. Шрифт Verdana был специально создан для использования в сети.
Следующими в списке идут размер шрифта и межстрочный интервал. Они также улучшают читабельность вашего контента. В наше время, вы создаете дизайны для широкого спектра устройств и разрешений экранов. Хотя фиксированный размер шрифта может хорошо смотреться на больших экранах десктопов — этот размер будет слишком большим для мобильных телефонов. Также, люди предпочитают разные размеры шрифтов в зависимости от возраста, зрения, и личных предпочтений.
Кто-то говорит, что 16px — это идеальный размер шрифта, а кто-то, что нужно использовать процентные соотношения, а не фиксированный размер. Лично я, также считаю, что современный веб-дизайн нуждается в более гибком и модифицируемом подходе. Процентные соотношения адаптируются под настройки браузера, и разные разрешения экранов. Большинство браузеров, по умолчанию, используют шрифты, размером 16рх, так, что в основном, 1em равно 16px.
Однако тот факт, что большинство браузеров предлагают 16рх в качестве дефолтного размера шрифта не значит, что он идеально подойдет вашим посетителям. Можете спокойно использовать и меньшие размеры, только помните, что обычно, люди находятся от экрана дальше, чем от книги. По сути, рекомендуемое расстояние между пользователем и монитором должно составлять 71 сантиметр.
Очевидно, что ширина строки зависит от размера выбранного вами шрифта. Однако, вы должны знать, что стандартная высота строки, обычно, слишком мала. Больше пространства — значит больше ясности, а, следовательно, больше удобочитаемости.
Еще один важный момент — это контраст между фоном и текстом. Чем лучше контраст, тем лучше читабельность. Например, стоит избегать плохих комбинаций шрифтов, таких, как синий на красном, или белый на желтом. Довольно утомительно читать текст, написанный в низком контрасте к фону, особенно, если его много.
Также, шумные фоновые изображения могут существенно снизить читаемость. При работе с фоновыми изображениями, размещайте текст только в очень смазанных местах.
А теперь, давайте посмотрим на текст, как целое. В печатных изданиях, мы не возражаем против чтения длинных строчек текста, но оптимальная длина строки в сети должна составлять50–60 символов. Если вы удлините строку, то рискуете отпугнуть пользователей, поскольку такое чтение будет похоже на работу. Кроме того, длинные строки усложняют концентрацию, и переход с одной строки на другую. Однако, если вы сильно укоротите размер строки, то взгляд читателя будет слишком часто перемещаться от начала к концу строки, нарушая ритм, и, возможно, приводя к пропуску важных слов.
Как я уже говорила, чтение с экрана очень утомительно, и отнимает на 25% больше времени, чем чтение печатной продукции. Практически 75% людей не читают вебсайт слово за словом. Они быстро его просматривают, в поисках важных частей информации. Учитывая бесчисленное множество альтернативных вебсайтов, вы захотите привлечь внимание пользователя еще до того, как он решит уйти, и продолжить просмотр в другом месте.
Короткие абзацы позволяют вашим читателям быстро просматривать контент. Если они не увидят важных ключевых слов в одном абзаце, то смогут быстро переключиться на другой.
Вам это может показаться неважным, но стоит помнить о сжатости вашего текста. Когда вы пишете для оффлайн медиа, то можете позволить себе длинные тексты, просто потому, что вы так хотите. В сети всё иначе. Ваши читатели, по крайней мере 75% из них ленивы. Они хотят быстро находить то, что ищут. И если это значит просмотр всего текста, то убедитесь, что он краток, написан по сути, и без излишков, которые вы уже где-то упоминали.
Также, простые предложения намного проще просматривать, чем длинные и сложные. Попробуйте для каждого утверждения начинать новое предложение. К этому будет сложно привыкнуть, но не волнуйтесь о том, что будете глупо звучать. Людям нравятся короткие предложения, над которыми не нужно много думать, и с их помощью можно многое выразить.
Пользователи хотят быстро просмотреть ваш сайт и определить важные аспекты. Понятное дело, что ваши знания важны для установления доверия, но их наличие не значит, что вы знаете что-то, чего другие не смогут понять. Всё как раз наоборот. Вас будут уважать за то, что вы сумеете объяснить свои знания другим.
Люди будут доверять вам, и вы им понравитесь, если не будете утрировать только для того, чтобы доказать, что вы знаток своего дела. В противном случае вы их только отпугнете, создавая впечатление, что вы не желаете иметь никаких личных контактов. Однако именно личный контакт — это то, что делает существенный вклад в ваш авторитет и долгосрочные отношения с посетителями.
На ряду с таким поведением большей части пользователей, вот кое-что, что вы могли бы использовать, чтобы помочь им успешно просматривать контент.
- Для начала, выделяйте ключевые слова, определяющие главные моменты параграфа. Имеет смысл выделять одно слово или фразу на абзац, не более.
- Во-вторых, для структурирования контента используйте списки. Списки очень легко просматривать, и они прекрасно демонстрируют то, как один элемент, связан с другим. Например, пронумерованные списки могут отлично описывать пошаговый процесс, без необходимости рассказывать всю историю.
- И последнее: изображения помогают сохранять концентрацию, и просматривать контент. Используйте связанные с вашим контентом изображения, это поможет посетителю начать чтение.
То, как вы стилизуете и структурируете ваш контент, имеет первостепенное значение в вопросе эффективности общения с посетителями. Пользователи ленивы, и только небольшой их процент действительно читает контент вашего сайта. Остальные просто просматривают его, в надежде наткнуться на важные детали. Для того, чтобы удовлетворить как небольшую группу действительно заинтересованных людей, так и ленивое большинство, вам необходимо оптимизировать читаемость вашего веб-контента.
Вы можете улучшить читаемость оптимизируя шрифт и высоту строки, используя короткие предложения, строки, и абзацы, рассказывая по сути, и предлагая достаточное количество маяков для простого просмотра.
Перевод статьи Сабины Айдлер
Какой шрифт меньше всего утомляет глаза?
От шрифта во многом зависит удобство чтения текста — как напечатанного на бумаге, так и размещенного на любом электронном носителе. Причем важен не только его размер, но и цвет, особенности начертания, уровень контрастности и даже оттенок фона, на котором набран текст.
Если в течение долгого времени читать текст, набранный «неправильным» шрифтом, это может привести к весьма негативным последствиям для глаз: они начнут быстро уставать, болеть, да и восприятие информации в таком случае ухудшится.
Какие шрифты удобнее всего для чтения с листа и с экрана?
Для чтения с бумаги наиболее комфортны гарнитуры шрифтов с засечками — тонкими штрихами, дополняющими основной контур буквы. Глаз «цепляется за них», благодаря чему символы распознаются легче и быстрее, соответственно, нагрузка на зрительные мышцы уменьшается. Самая известная и широко применяемая из подобных гарнитур — Times New Roman.
Исключение в этом случае составляют только издания для детей младшего возраста или людей, которые не слишком хорошо владеют языком, на котором написан текст: им легче распознать простые, строгие контуры букв, а засечки могут затруднять восприятие.
Для текста, который предназначен исключительно или в большей степени для чтения с экрана (это может быть статья для сайта, книга или документ в электронном виде) больше подходят рубленые шрифты, лишенные засечек. Они лучше сглаживаются на экране и не требуют задерживать взгляд на каждом символе — а значит, глаза меньше устают от чтения с монитора.
Наиболее комфортной для чтения с экрана признана гарнитура Verdana. Приближены к ней по характеристикам гарнитуры Tahoma и Arial, однако русская версия последнего имеет некоторые существенные недоработки и потому используется относительно нечасто.
Что касается размера шрифта, то и для монитора, и для бумаги оптимальным считается кегль 12 с нормальным межбуквенным расстоянием и междустрочным интервалом 12 пунктов.
В обоих случаях хуже всего воспринимаются шрифты с обилием декоративных элементов. Применять их следует по минимуму — например, только для оформления заголовков или буквиц в начале текста.
Как цвета и контрастность влияют на удобочитаемость текста?
Черный текст на белом фоне считается классическим вариантом, наиболее удобным и безопасным для глаз. Однако это не совсем верно: сочетание черного и белого цветов в чистом виде дает слишком сильный контраст, утомляющий зрение и способный привести к его ухудшению. Поэтому для бумаги оптимальным будет следующий вариант: темно-серый или черный текст, напечатанный на листе теплого сероватого, бежевого или желтоватого оттенка. Именно на такой бумаге печатается основная масса книг, кроме дорогих изданий и художественных альбомов.
Примерно те же правила действуют и при подборе цветов для размещения электронного текста: крайне нежелательно использование ярких контрастов шрифта и фона. Оптимальным считается следующий вариант: теплый светлый фон, на котором набран текст темно-серого или черного цвета.
Знаменитые дизайнеры vs научные исследования про читаемость шрифтов / Хабр
Я работаю дизайнером около 10 лет. В дизайне не очень много объективных и проверяемых законов, и когда мне нужно было что-то выяснить, я искала информацию в профессиональных книгах, блогах крутых ребят, спрашивала у знакомых арт-директоров и приставала к людям в коридорах.
А потом узнала, что ученые уже сто лет как выяснили то, про что до сих пор спорят дизайнеры.
Мы в Тинькофф сравнили мнение знаменитых дизайнеров и ученых о том, какие шрифты легче читать: антикву(с засечками) или гротески(без засечек).
Почему я вообще этим занялась
Однажды мне нужно было написать инструкцию для джунов о том, как выбрать шрифт. Я написала, что для больших текстов лучше использовать шрифты с засечками, потому что глаза меньше устают от такого шрифта и засечки помогают держать строку.
Потом пришел редактор и откомментил: «Пруфы?»
«Да это же очевидно», — подумала я и открыла «Википедию»:
Согласно общепринятому мнению [источник не указан 1902 дня], засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста. Oни способствуют связи букв в единую линию, облегчая визуальное восприятие и удобочитаемость текста.
В «Википедии» пруфов не было, и я пошла к книжному шкафу.
На мой взгляд, шрифт с засечками меньше утомляет при долгом чтении обычных, «бумажных» изданий, чем гротеск, по двум причинам. Во-первых, засечки подчеркивают окончания штрихов, становясь дополнительными «смыслоразличителями». Во-вторых, буквы с засечками несколько сложнее по форме, поэтому сильнее отличаются друг от друга, чем гротесковые. А наш читательский глаз больше нуждается в балансе индивидуальности и унификации, чем дизайнерский, который радуется зеркальной вылизанности.Юрий Гордон «Книга про буквы от Аа до Яя», Откуда взялись и зачем нужны засечки, стр. 51
Вообще, личный взгляд Юрия Гордона — это довольно веский довод, но все-таки. Я поискала в статьях Яна Чихольда:
Шрифт без засечек только кажется простейшим. Его форму специально упростили для детей, а взрослым его читать труднее, чем антикву, ведь ее засечки служат не только для украшения.Ян Чихольд «Облик книги», О типографике, стр. 21
Ян Чихольд
Ну ладно, старинные мастера опирались на чутье, но, может, кто-то посовременнее объяснит с пруфами?
Сергей Сурганов, арт-директор «Медузы», дизайнер Notion:
Используйте шрифт с засечками для длинных текстов
Когда вы оформляете любой длинный текст (статью, резюме, письмо, инструкцию), стоит использовать шрифт с засечками, то есть антикву. Считается, что длинный текст, набранный таким шрифтом, легче читать. В традиционной книжной верстке тоже используются именно антиквы, поэтому если вы делаете что-то похожее, то выбор ясен.Инструкция арт-директора «Медузы» Сергея Сурганова «Как выбрать шрифт»
Короче, у нас три довода:
«согласно общепринятому мнению»,
«на мой взгляд»,
«считается»,
…
Книги не помогли, и я попробовала разобраться с помощью научных статей, есть ли какие-то доказательства, что шрифт с засечками легче, быстрее или приятнее читать, чем шрифт без засечек. Конечно, это не полноценный научный обзор. Но лучше, чем «согласно общепринятому мнению». Ссылки на статьи есть в конце каждого раздела.
Понятия: разборчивость vs читаемость
Разборчивость (legibility) шрифта зависит от точности начертания его элементов, что обычно означает возможность распознавать отдельные буквы или слова.
Читаемость (readability) напрямую связана с оптимальной компоновкой и планом всего тела текста.
Засечки направляют взгляд по строке
«Википедия» и еще миллион дизайнерских статей говорят, что засечки направляют движение глаз вдоль строк при чтении крупных массивов печатного текста.
Тут надо знать, что глаза не движутся плавно. Когда мы читаем или ищем какой-нибудь объект в поле зрения, глаза «скачут» от точки к точке, совершая быстрые движения, которые называются саккадами.
Видео про саккады
Более того, глаза совершают саккады, даже когда человек пытается сфокусироваться строго на одной точке.
Джаред Скрюз (Jaret Screws) провел эксперимент: попросил 10 человек прочитать несколько текстов и следил за движением их глаз с помощью специального оборудования.
Измерили продолжительность фиксации взгляда, среднее количество слов между ними, амплитуду саккад и число раз, когда человек задерживался на одном и том же слове.
Все различия оказались незначительными. Ой.
Кажется, гипотеза о том, что взгляд движется легче по тексту, набранному шрифтом с засечками, не подтвердилась.
Шрифты с засечками и без засечек одинаково «держат» строку
Хотя тут есть подвох. В тесте использовался шрифт 128 pt. Это в десять раз больше, чем в обычной книге, и, возможно, исследование не очень корректно применять к обычному процессу чтения.
Quantitative Analysis of Font Type’s Effect on Reading Comprehension Jaret Screws Clemson University Clemson, United States
Детям, в отличие от взрослых, легче читать шрифт без засечек
Даже если это и не так, в это точно верят производители азбук. Попробуйте найти хоть одну азбуку с антиквой.
Детские азбуки с первой страницы Гугла
Ученые взяли 80 детей 10 лет и 80 детей на два года старше, попросили их найти в тексте нужное слово (скрининг-тест) и измерили, как быстро у детей получилось это сделать.
Контрольной группе оба раза давали одинаковый шрифт, а экспериментальной — сначала шрифт с засечками, а потом без
Различия получились статистически незначимые, и авторы говорят, что, кажется, нет никакой особенной разницы в разборчивости для детей шрифтов с засечками и без засечек.
А что насчет ребят с плохим зрением?
Исследований про слабовидящих людей и шрифт довольно много.
В Journal of Visual Impairment and Blindness было опубликован обзор 18 исследований, в которых общее количество испытуемых было более 1500 человек.
Вывод исследователей: для людей с плохим зрением шрифты без засечек, такие как Arial, Helvetica, Verdana или Adsans, более читаемые, чем шрифты с засечками.
The Legibility of Typefaces for Readers with Low Vision: A Research Review Elizabeth Russell-Minda, Jeffrey W. Jutai, J. Graham Strong, Kent A. Campbell, Deborah Gold, Lisa Pretty, and Lesley Wilmot.
Шрифты и дислексики
Людям с дислексией сложно читать. Может, удастся облегчить им жизнь с помощью каких-то шрифтов?
Страница, которая показывает текст так, как его видят люди с дислексией, на dyslexiarf.com
Ученые с помощью технологии, которая следит за движением глаз, исследовали 97 человек, у половины из которых была дислексия.
Им давали прочитать 12 похожих текстов, набранных разными шрифтами, измеряли скорость, количество и длительность остановок взгляда, понимание текста и с помощью опросников выясняли предпочтения пользователей.
На первое место по читаемости и у обычных людей, и у дислексиков вышел шрифт без засечек Arial (интересно, что схожая с ним до неразличимости Helvetica — на четвертом месте). Зато на втором месте неожиданно оказался моноширинный брусковый Courier.
Предпочтения же людей вообще однозначные: топ-3 шрифтов и у дислексиков, и у недислексиков — без засечек.
The Effect of Font Type on Screen Readability by People with Dyslexia
LUZ RELLO and RICARDO BAEZA-YATES
Эмоции и шрифты
Может, дело не в скорости чтения и разборчивости, а в особом настроении, которое создают шрифты с засечками?
В Лаборатории исследований юзабилити ПО в Wichita State University попробовали разобраться, как люди воспринимают шрифты.
Участники заполняли опросник, где указывали, какими, по их мнению, характеристиками обладают разные шрифты.
Интересно, что шрифты с засечками оказались первыми в рейтинге как формальные, «взрослые», практичные и стабильные. А шрифты без засечек оказались первыми в рейтинге… нигде. То есть у них не оказалось какого-то ярко выраженного эмоционального следа.
Perception of Fonts: Perceived Personality Traits and Uses By A. Dawn Shaikh, Barbara S. Chaparro, & Doug Fox
Для другого исследования взяли два сатирических отрывка из «Нью-Йорк Таймс»: один — о проблемах правительства, другой — о политике в образовании. Их напечатали в шрифтах Times New Roman и Arial одинакового размера и показали в случайном порядке 102 студентам университета, которые оценили их с помощью заранее заданных прилагательных.
Emotional and Persuasive perception of fonts Samuel Juni, Julie S. Gross
Скорее всего, это тот же эффект нейтральности шрифтов без засечек, что и в первом исследовании.
Значит ли это, что все шрифты без засечек — безликие? Вообще, нет, но нейтральный шрифт с засечками менее нейтральный, чем нейтральный шрифт без засечек.
Читаемость шрифтов на электронных экранах
Большинство текстов мы читаем с электронных экранов. Электронные устройства и даже разные программы на одном устройстве по-разному обрабатывают шрифты.
Разные типы сглаживания
Ученые попробовали разобраться, как влияет сглаживание на читаемость.
Сравнивали четыре шрифта, напечатанные на бумаге, на экране со сглаживанием и без сглаживания
Интересно, что самым читаемым оказался экранный шрифт со сглаживанием (а не напечатанный), и это шрифт без засечек — Arial. Второй после него — Verdana, тоже без засечек.
Зато без сглаживания лучше всего читалась Georgia — шрифт с засечками.
A STUDY OF THE READABILITY OF ON-SCREEN TEXT By Eric Michael Weisenmiller
Выводы
Я хотела проверить, действительно ли для больших текстов лучше использовать шрифты с засечками. Выяснилось, что для обычного человека отличий почти нет, а для тех, у кого есть проблемы с чтением — стариков, детей, людей с плохим зрением или дислексией , — предпочтительнее шрифт без засечек.
В статье есть обзоры всего нескольких статей. Еще пару дюжин я просмотрела, но не стала включать в статью, чтобы не делать ее бесконечной. На самом деле их еще больше. Но результат во всех примерно один и тот же: или отличия оказываются статистически незначимыми, или гротески немного обгоняют антикву.
Если вас заинтересовала эта тема, можете провести собственное исследование: поискать на scholar.google.ru по запросу типа Font readability research. Там можно найти исследования и про оптимальный межстрочный интервал, и про восприятие разных начертаний шрифта, и про различия читаемости в зависимости от размера.
Вряд ли это поможет стать принципиально более хорошим дизайнером, но добавит весомых аргументов.
Комфортный шрифт для чтения. Какой шрифт лучше
Шрифт сайта — это один из основных вопросов дизайна Вашего сайта. Правильно выбранный размер, цвет и тип шрифта может решить проблемы читабельности, красоты и эффективности ресурса в целом.
ТОП-10 самых лучших и самых используемых шрифтов
Все приведённые ниже шрифты считаются базовыми, поэтому могут быть использованы на сайте даже без загрузки файла шрифта (*.ttf) в директорию с сайтом1. Tahoma
2. Verdana
3. Arial / Arial Black / Arial Narrow
4. Times New Roman
5. Palatino Linotype / Palatino
6. Impact
7. Century Gothic
8. Helvetica
9. Georgia
10. Gill Sans MT
Дополнительно:
11. Courier New
12. Calibri
13. Trebuchet MS
14. Lucida Sans Unicode
Несколько правил использования шрифтов на сайте
1. Основа читабельного текста — заголовки. Они выступают своеобразными маяками, которые позволяют читателю сфокусировать внимание на нужной части или отрывке, не раздражая его потоком общей информации. Также старайтесь выделять ключевые слова!Первый параграф параграф
Второй параграф параграф
2. На сайте должна быть выдержана какая-то общая концепция, поэтому старайтесь использовать не более 2-3 шрифтов на сайт. Ниже приведён код CSS
Body { font: 14px/100% Tahoma, Verdana, sans-serif }
14px размер шрифта, 100% отступ между строк, Tahoma используемый шрифт
3. Текст после оформления должен быть читабельным — соблюдайте контрастность (чёрный текст на белом фоне, белый на синем и тп). Старайтесь не используйте ни для того, ни для другого яркие цвета. Есть исключения, но под стандартные практики оно не попадает.
4. При оформлении текста старайтесь не использовать более 2-3 цветов. Обратите внимание, что самые лучшие дизайны придерживаются 2-3 цветов, не более. Следуйте этому правилу и Вы
5. Текст должен быть читабельным! Старайтесь делать абзацы, отступы у подпунктов или справочной информации.
Текст первого абзаца. Длинный и интересный.
А вот текст второго абзаца со вторым сливаться не будет, так как между ними будет отступ.
Спасибо за внимание! И удачи в разработке дизайна проектов!)
Я считаю, что лучше тот шрифт, который легче читать. Однако на бумаге и экране монитора текст читается по-разному. Поэтому шрифт, который лучше всего подходит для сайта, в печати использовать стоит не всегда.
Павел ШУДНЕВ
Запомните правило: на бумаге лучше всего читается шрифт с засечками (Serif), с экрана – шрифт без засечек (Sans Serif).
Я думаю, что причина этого в том, что на бумаге и на экране монитора информация выводится по-разному. Так, в типографской печати для шрифта нормой считается от 700 dpi (dots per inch – количество точек на дюйм), а чёткость изображения на экране монитора составляет всего 72 dpi – в десять раз меньше…
Но вернёмся к нашему вопросу – какой же шрифт лучше? Однозначный ответ на него можно дать применительно к веб-сайтам: это Verdana. Причем, это не моя точка зрения, а научно доказанный факт. Этот шрифт действительно лучше всего читается с экрана! У этого шрифта довольно интересная история.
Он был разработан специально для компании Microsoft в 1996 году как шрифт, который легко читать с экрана даже при малом размере букв. Благодаря отсутствию засечек, широкому размеру символов и большому расстоянию между ними, шрифт Verdana действительно прекрасно читается!
Другое дело, что при потрясающей читабельности, он очень-то симпатичный: хочется ведь, чтобы текст было не только легко читать, но и чтобы он выглядел красиво (хотя нравится/не нравится – это уже дело вкуса). Тогда нужно искать альтернативу – благо, они есть.
Четвёрка лучших: шрифты Arial, Helvetica, Verdana и Georgia
Как показали результаты опроса 35 веб-дизайнеров журналом Smashing Magazine, первое место делят два шрифта: Helvetica и Arial. (Для общего образования скажу, что Helvetica была разработана швейцарскими дизайнерами более полувека назад, а шрифт Arial лет на двадцать моложе.) Эти шрифты – самые распространенные в интернете, а потому могут претендовать на звание лучших.
Очень популярен (и повсеместно любим) изысканный шрифт Georgia. Несмотря на то, что этот шрифт с засечками, он очень широко распространён в интернет. Его, например, используют в качестве основного шрифта в online версии журнала Forbes.
На самом деле, если посмотреть в интернете приличные веб-сайты, то можно обнаружить, что указанные выше четыре шрифта встречаются повсеместно. Другие шрифты являются скорее исключением, чем правилом. Поэтому, подводя итоги, можем резюмировать, что лучшие шрифты для сайта – это Arial, Helvetica, Verdana и Georgia.
Что же касается шрифтов для чтения с бумаги, то их настолько много (несколько тысяч), что выделить из них какие-то лучшие практически невозможно. Однако, как ни банально это прозвучит, в печати широко распространен шрифт Times New Roman и его вариации. Поэтому лавры лучшего шрифта offline оставим ему.
P.S. Кстати, Serif и Sans Serif с французского языка так и переводится: с засечками и без засечек.
В одном из дневников прочитала обсуждение о том, какой шрифт лучше всего использовать в своих записях. И вот что об этом думает профессионал с 15-летним опытом…
Я считаю, что лучше тот шрифт, который легче читать. Однако на бумаге и экране монитора текст читается по-разному. Поэтому шрифт, который лучше всего подходит для сайта, в печати использовать стоит не всегда.
Запомните правило: на бумаге лучше всего читается шрифт с засечками (Serif), с экрана – шрифт без засечек (Sans Serif).
Я думаю, что причина этого в том, что на бумаге и на экране монитора информация выводится по-разному. Так, в типографской печати для шрифта нормой считается от 700 dpi (dots per inch – количество точек на дюйм), а чёткость изображения на экране монитора составляет всего 72 dpi – в десять раз меньше…
Но вернёмся к нашему вопросу – какой же шрифт лучше? Однозначный ответ на него можно дать применительно к веб-сайтам: это Verdana. Причем, это не моя точка зрения, а научно доказанный факт. Этот шрифт действительно лучше всего читается с экрана!
У этого шрифта довольно интересная история.
Он был разработан специально для компании Microsoft в 1996 году как шрифт, который легко читать с экрана даже при малом размере букв. Благодаря отсутствию засечек, широкому размеру символов и большому расстоянию между ними, шрифт Verdana действительно прекрасно читается!
Другое дело, что при потрясающей читабельности, он очень-то симпатичный: хочется ведь, чтобы текст было не только легко читать, но и чтобы он выглядел красиво (хотя нравится/не нравится – это уже дело вкуса). Тогда нужно искать альтернативу – благо, они есть.
Четвёрка лучших: шрифты Arial, Helvetica, Verdana и Georgia
Как показали результаты опроса 35 веб-дизайнеров журналом Smashing Magazine, первое место делят два шрифта: Helvetica и Arial. (Для общего образования скажу, что Helvetica была разработана швейцарскими дизайнерами более полувека назад, а шрифт Arial лет на двадцать моложе.) Эти шрифты – самые распространенные в интернете, а потому могут претендовать на звание лучших.
Очень популярен (и повсеместно любим) изысканный шрифт Georgia. Несмотря на то, что этот шрифт с засечками, он очень широко распространён в интернет. Его, например, используют в качестве основного шрифта в online версии журнала Forbes.
На самом деле, если посмотреть в интернете приличные веб-сайты, то можно обнаружить, что указанные выше четыре шрифта встречаются повсеместно. Другие шрифты являются скорее исключением, чем правилом. Поэтому, подводя итоги, можем резюмировать, что лучшие шрифты для сайта – это Arial, Helvetica, Verdana и Georgia.
Что же касается шрифтов для чтения с бумаги, то их настолько много (несколько тысяч), что выделить из них какие-то лучшие практически невозможно. Однако, как ни банально это прозвучит, в печати широко распространен шрифт Times New Roman и его вариации. Поэтому лавры лучшего шрифта offline оставим ему.
P.S. Кстати, Serif и Sans Serif с французского языка так и переводится: с засечками и без засечек.
———
Врачи рекомендуют, что посещать стоматологов необходимо дважды в год. Но, когда встает вопрос удаление зубов цены , то тут уже не смотришь не на сроки, не на цены. Но если вы обратитесь в клинику «ESCULAP», то все будет решено на самом высоком уровне. Будьте здоровы!
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Файл TTF в ZIP-архиве
Какие шрифты использовать для сайта
Ресурсы с подборками сайтов в стиле минимализма
Минимализм — необычайно интересное искусство, сочетающее в себе огромные возможности, но при этом требующее много сил, идей и исследований для получения «яркого» результата. Заходя на такие сайты, мы часто даже не обращаем внимания на его очертания, ненавязчивый дизайн или некую легкость, которая в нем ощущается с первых страниц. Мы замечаем это лишь потом, когда заходим на эти понравившиеся нам сайты снова.
Минимализм в дизайне сайтов притягивает и все больше захватывает дизайнеров и простых пользователей, когда они находят их среди «толпы» разноцветных многостраничников. Дизайнерам начинает это нравиться и они придумывают свой минимализм, порой такой необычный, но такой классный.
Примеры сайтов и рассуждения на тему минимализма мы затрагивали в статьях из одноименной рубрики «Минимализм».
В этой статье мы собрали 8 сайтов-ресурсов с коллекциями минимализма , чтобы вы смогли черпать вдохновение и простоту, как говориться, не отходя от кассы. Наслаждайтесь!
Уроки / Разное /
Шрифт сайта — это один из основных вопросов дизайна Вашего сайта. Правильно выбранный размер, цвет и тип шрифта может решить проблемы читабельности, красоты и эффективности ресурса в целом.
ТОП-10 самых лучших и самых используемых шрифтов
Все приведённые ниже шрифты считаются базовыми, поэтому могут быть использованы на сайте даже без загрузки файла шрифта (*.ttf) в директорию с сайтом
1. Tahoma
2. Verdana
3. Arial / Arial Black / Arial Narrow
4. Times New Roman
5. Palatino Linotype / Palatino
6. Impact
7. Century Gothic
8. Helvetica
9. Georgia
10. Gill Sans MT
Дополнительно:
11. Courier New
12. Calibri
13. Trebuchet MS
14. Lucida Sans Unicode
Несколько правил использования шрифтов на сайте
1. Основа читабельного текста — заголовки. Они выступают своеобразными маяками, которые позволяют читателю сфокусировать внимание на нужной части или отрывке, не раздражая его потоком общей информации. Также старайтесь выделять ключевые слова!
Первый параграф параграф
Второй параграф параграф
2. На сайте должна быть выдержана какая-то общая концепция, поэтому старайтесь использовать не более 2-3 шрифтов на сайт.
50 крутых бесплатных шрифтов
Ниже приведён код CSS
body { font: 14px/100% Tahoma, Verdana, sans-serif }
14px размер шрифта, 100% отступ между строк, Tahoma используемый шрифт
3. Текст после оформления должен быть читабельным — соблюдайте контрастность (чёрный текст на белом фоне, белый на синем и тп). Старайтесь не используйте ни для того, ни для другого яркие цвета. Есть исключения, но под стандартные практики оно не попадает.
4. При оформлении текста старайтесь не использовать более 2-3 цветов. Обратите внимание, что самые лучшие дизайны придерживаются 2-3 цветов, не более. Следуйте этому правилу и Вы
5. Текст должен быть читабельным! Старайтесь делать абзацы, отступы у подпунктов или справочной информации.
Текст первого абзаца. Длинный и интересный.
А вот текст второго абзаца со вторым сливаться не будет, так как между ними будет отступ.
Спасибо за внимание! И удачи в разработке дизайна проектов!)
Предыдущая статья
Учим сочетания горячих клавиш!Следующая статья
Как выбрать и зарегистрировать домен?
Комментарии к статье (vk.com)
За последние годы в арсенале дизайнеров появились сотни превосходных, новых кириллических шрифтов. Мы отобрали десять самых используемых и привлекательных русских шрифтов за последнее время.
Какой шрифт лучше? Какие шрифты лучше использовать? Это зависит от задачи, которую вам предстоит решить.
1. Arkhip
Скачать шрифт Arkhip
2. Boucle
Скачать шрифт Boucle
3. Cabana
Скачать шрифт Cabana
4. Eirik Raude
Скачать шрифт Eirik Raude
5. Gogoia
Скачать шрифт Gogoia Deco
Скачать шрифт Gogoia Regular
6. Muller
Скачать шрифт Muller Thin
Скачать шрифт Muller Extra Bold
7. Nexa Script
Скачать шрифт Nexa Script Thin
Скачать шрифт Nexa Script SemiBold
Скачать шрифт Nexa Script Light
Скачать шрифт Nexa Script Regularr
Скачать шрифт Nexa Script Bold
Скачать шрифт Nexa Script Heavy
8. Nickainley
Скачать шрифт Nickainley
9. Dewberry
Скачать шрифт Dewberry Regular
Скачать шрифт Dewberry Bold
Скачать шрифт Dewberry Italic
Скачать шрифт Dewberry Bold Italic
10. Pobeda
Скачать шрифт Pobeda Bold
Скачать шрифт Pobeda Regular
Не стоит обходить вниманием и платные шрифты.
Как правило, они более тщательно проработаны чем их бесплатные аналоги, и содержат более широкий набор символов.
11. Tesla
Купить шрифт Tesla
11. Tilda
Купить шрифт Tilda
К сожалению, качественных кириллических шрифтов не так много как хотелось бы. Но отслеживается, безусловно, позитивная тенденция к росту их количества. Всё больше отечественных дизайнеров трудятся над русификацией западных популярных шрифтов, а также дают жизнь своим, не менее качественным продуктам.
Что касается использования. Универсальных шрифтов для решения любых задач не существует. Шрифт, который прекрасно смотрится на бумаге — может выглядеть ужасно в качестве основной гарнитуры на веб-сайте. Именно поэтому разнообразие шрифтов сегодня так велико, и у каждого из них своё предназначение. Например, акцидентный шрифт не стоит использовать для набора сплошного и мелкого текста, также как не стоит использовать рубленые шрифты на веб-сайтах. В обоих случаях восприятие и читабельность текста будут сильно нарушены. Например, лучший шрифт для текста на сайте — Open Sans. Читабельный и привычный глазу шрифт для работы с документами — Times New Roman.
Начинающие дизайнеры часто задаются вопросом, «какие лучшие шрифты для логотипов».
Шрифты для сайта: самые популярные и используемые
Ответ прост: читабельные. Если вы занимаетесь разработкой фирменного логотипа — не пытайтесь придать написанию какое-то конкретное художественное решение или стилистику. Например, не ищите шрифт с какими-нибудь шипами на буквах, если вы делаете логотип для цветочного магазина. Достаточно будет обратиться к ассоциациям (нежный, тонкий, изящный, в то же время достаточно контрастный, чтобы выдерживать масштабируемость).
В большинстве случаев, выбор шрифта для логотипа должен основываться на целесообразности использования той или иной гарнитуры в рамках единого композиционного решения. Например, если знак находится слева от шрифтовой части, и название достаточно длинное, скорее всего, подойдет узкий шрифт с небольшим кернингом. Если слово короткое, то напротив, можно сделать кернинг больше и шрифт выбрать более выразительный.
Вообще, нет каких-либо правил подбора шрифта. Его нужно чувствовать, и принимать адекватные решения. Например, если это медицинская тематика — вполне подойдут и антиква, и гротеск. Вряд ли подойдут рубленные. Если спортивная тематика — скорее всего динамический, наклонный шрифт, без каких либо засечек. Возможно разряженный.
Конечно, лучше всего сделать шрифтовое начертание логотипа уникальным. Это добавит логотипу оригинальности, а вам — авторитет в глазах своих коллег и своего клиента.
Как часто вы задаётесь вопросом «какой шрифт лучше использовать для сайта ?», многие на это не обращают внимания, а зря!
Каждому начинающему веб-мастеру хочется как-то выделить свой сайт, чтобы он отличался от бесчисленного множества ресурсов, сделанных по шаблону.
Одним из способов считается отбор шрифтов для сайта, диапазон выбора которых не так велик. Задача веб-мастера сделать процесс чтения информации максимально комфортным. Но использование нескольких шрифтов может отпугнуть пользователя. А применение одного сделает ресурс однообразным и серым. Многие пытаются установить уникальный шрифт на страницу, но забывают о том, что он может не отобразиться у пользователя в компьютере. Ведь он не встраивается в веб-страницу.
Поэтому, если у человека на компьютере не установлен тот или иной шрифт, отображаться он у него не будет. Во избежание проблемы следует выбирать доступные, так называемые стандартные шрифты для сайта , некоторые из которых рассмотрим ниже.
Часто используемые шрифты
Стандартные шрифты для сайта это:
- Times New Roman;
- Arial; Georgia;
- Impact;
- Trebuchet MS;
- Verdana и другие.
Они входят в группу безопасных. Рассмотрим их подробней:
Arial . Преимущество этого компактного шрифта в высоте букв.
Tahoma . Благодаря средне-широким буквам, идеально-подходящий для технических статей.
Trebuchet MS . Самый неподходящий для чтения. Даже при нормальном размере 12-14 px надо вглядываться в текст, что ведет к напряжению глаз.
Times New Roman . Самый распространенный и широко-используемый шрифт. Идеально подходит для чтения, но при размере 12 px выглядит мелким.
MS Sans Serif . Считается системным шрифтом Windows. На нем написаны все памятки и оповещения операционной системы.
Georgia . Очень похож на Times. Но в нём более широкие и резкие засечки и концы.
Comic Sans MS . Самый ненавидимый обществом. Отличается плавными округлыми очертаниями, небольшой кривоватостью букв, маленьким меж буквенным расстоянием.
Courier New . Похож на тот, которым раньше отпечатывали на пишущей машинке. Courier New выделяется четкими, хорошо читаемыми буквами, отличающимися небольшим сжатием . -Минус: ненасыщенный цвет.
Impact. Отличается сжатием между символами, толстыми штрихами и небольшим пространством в буквах. Широко применим в заголовках, так как близкое расстояние между буквами делает чтение основного текста неудобным.
Verdana . Идеальный для сайта вариант шрифта. Благодаря оптимальному расстоянию между буквами и их ширине читается комфортно.
Итак, так какой шрифт лучше всего использовать на сайте? По последним опросам среди пользователей интернета, оптимальным вариантом является сделать заголовок с помощью Verdana, а основной текст — Times New Roman. Но не исключен вариант, при котором можно весь текст сделать именно Verdana.
Бывает, шрифт не отображается на компьютере. В таком случае следует прописать не один шрифт, а несколько.
Например, Verdana, Impact, Trebuchet MS. Тогда браузер после неудачной попытки использования Verdana попытается использовать Impact, а затем Trebuchet. В случае не отображения всех заданных шрифтов, система обозначит свой — по умолчанию. Таким образом, можно легко и просто оформить сайт на свой вкус, сделать его ярким и необычным. Главное — предотвратить проблемы при отображении на компьютерах посетителей ресурса.
Нововведение от Яндекс. Размер имеет значение!
Вслед за мобильным алгоритмом «Владивосток », Яндекс сделал фактором ранжирования размер шрифта . Теперь размер текста на мобильном сайте имеет значение и его стандарт 12 см. PX (или больше). Проверить шрифт на «мобилопригодность» можно в Яндекс.Вебмастере.
Эта новость вызвала негативную критику у создателей сайтов. Ведь, например, ресурсам, сделанным с использованием flash- технологии, для того, чтобы нормально отображаться на экранах мобильных устройств, придется создавать специальное приложение. А это отнимет много времени и денег.
Часто будет получаться, что сайты, в которых тексты комфортны и удобочитаемы для пользователя, в мобильных версиях будут иметь огромный размер.
Интересно! Разные виды шрифтов обладают неодинаковым размером. Если вы хотите сделать его больше, не обязательно изменять его пиксельный размер. Можно поэкспериментировать с выбором других шрифтов. Например, если поставить размеры Times New Roman и Tahoma — 12 px — выглядеть они будут по-разному. Последний, визуально будет смотреться больше.
Пропорциональные шрифты (Uniwidth) в дизайне, подборка с 15 лучших шрифтов — UXPUB
Пропорциональные (Uniwidth) шрифты имеют большой потенциал для использования в интерактивных интерфейсах. Это краткая подборка ряда доступных вариантов шрифтов.
Как веб / интерфейс / визуальный дизайнер, я много работаю с состояниями меток (selected, unselected, active, inactive, available, out of stock). Учитывая, что вы никогда не должны использовать цвет в качестве единственной визуальной подсказки (всегда помните о доступности), я часто прибегаю к помощи веса текста. Однако, если вы когда-либо работали с точно спроектированными интерфейсами, то знаете, насколько неприятно видеть, как ваши кропотливо размещенные метки сдвигаются, когда вы меняете вес текста с обычного на полужирный.
Решение этой проблемы: пропорциональные («uniwidth») шрифты, иногда также называемые «equal-width», «duplexed» или «multiplexed». И нет, я не имею ввиду моноширинные шрифты.
Краткое пояснение: моноширинный шрифт, также называемый непропорциональным – это шрифт, буквы и символы которого занимают одинаковое количество горизонтального пространства (например, A в верхнем регистре такой же ширины, как w в нижнем регистре, или знак €). Моноширинные шрифты традиционно используются на пишущих машинках, а в наши дни – для ввода компьютерного кода.
В моноширинном шрифте, таком как IBM Plex Mono, каждая буква имеет одинаковую ширинуС другой стороны, пропорциональные (Uniwidth) гарнитуры представляют собой гарнитуры с пропорциональным интервалом, но каждый символ занимает одинаковое пространство при разном сокращении или толщине. На практике это означает, что независимо от того, какой вес вы установили для текста, он никогда не изменит его длину или не вызовет перекомпоновку.
Обычно буквы пропорциональных гарнитур имеют разную ширину и разный вес, но в пропорциональном шрифте с одинаковой шириной (uniwidth) разные веса занимают одинаковое пространствоХотя эта функция позволяет создавать несколько креативных слоев в статическом наборе, она чрезвычайно ценна для дизайна интерфейса, где, как правило, все быстро идет наперекосяк с внесением небольших изменений. Например, изменение веса отдельного пункта меню при наведении курсора обычно приводит к беспорядочным подергиваниям всего меню, когда оно пытается приспособиться к изменению. Использование пропорционального шрифта решает эту проблему легко и без необходимости в дополнительном коде.
Используя пропорциональный шрифт, можно легко анимировать вес интерактивных текстовых элементов, не затрагивая окружающий макетУчитывая также, что мы наблюдаем рост числа вариативных шрифтов, которые часто позволяют плавную интерполяцию между разными весами, пропорциональные шрифты, безусловно, чрезвычайно ценны для проектов интерактивного дизайна.
На данный момент существует не так много ресурсов о пропорциональных гарнитурах. Пока что я нашел два ресурса: список «Equal-width fonts» от Identifont и коллекцию 2015 года «Uniwidth typefaces» от Дэвида Судвикса. Оба ресурса содержат значительное количество различных вариантов.
Учитывая особые потребности интерфейса и веб-дизайна, а также распространение вариативных шрифтов в последние годы, я, тем не менее, ожидаю (и надеюсь) в ближайшем будущем увидеть гораздо больше пропорциональных шрифтов.
А поскольку никогда не бывает много вариантов шрифтов, вот еще несколько пропорциональных гарнитур, которые я недавно нашел. (Примечание: я не включаю в эту подборку моноширинные гарнитуры, поскольку они, как правило, однонаправленные, и их гораздо легче найти).
Recursive от Arrow Type
www.recursive.design
Recursive – это вариативный шрифт, созданный для «максимальной универсальности, контроля и производительности». Recursive доступен в пропорциональной и моно версии, и обе можно дополнительно контролировать по четырем осям: Weight, Casual, Slant и Cursive. Casual повторяет мягкие и изогнутые мазки кисти и добавляет немного веселья к серьезному шрифту. Recursive поддерживает широкий спектр языков, использующих латинский алфавит, включая вьетнамский. Он также содержит расширенный набор валют, символов, дробей и стрелок.
Recursive можно бесплатно загрузить с Google Fonts или Github, с открытым исходным кодом, под лицензией SIL Open Font License 1.1.
Источник: Arrow TypePT Root UI от Paratype
www.paratype.com/fonts/pt/pt-root-ui
PT Root UI – это современный, серьезный шрифт без засечек, который бывает четырех типов (Light, Regular, Medium, Bold). PT Root UI специально спроектирован для чтения с экрана, интерфейсов и веб-сайтов. Он имеет широкую языковую поддержку, включая расширенную латиницу и кириллицу (включая азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.
PT Root UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.
Источник: ParatypeGolos UI от Paratype
www.paratype.com/fonts/pt/golos-ui
Шрифт Golos UI, также от Paratype, имеет три веса (Regular, Medium, Bold), а также доступен как вариативный шрифт. Golos UI в целом похож на PT Root UI, но имеет немного суженные пропорции. Он обладает широкой языковой поддержкой, включая расширенную латиницу и кириллицу (в том числе азиатскую кириллицу), и содержит табличные цифры, знаки валюты, дроби и индексы, а также ряд стрелок и альтернативных форм.
Golos UI можно бесплатно загрузить по лицензии SIL Open Font License (OFL) на веб-сайте Paratype.
Источник: ParatypeGrandstander от Etcetera Type Company
www.etceteratype.co/grandstander
Grandstander – это игривый вариативный шрифт без засечек, вдохновленный детскими книгами, который «понравится людям всех возрастов». Буквы изогнуты и слегка вздуты, что придает ему комическую эстетику. Grandstander поставляется в статической версии с девятью весами (от Thin до Black) с соответствующим курсивом. Вариативная версия имеет две оси: Weight и Slant. Он поддерживает «широкий спектр языков, использующих латинский алфавит» и включает в себя табличные цифры, а также дроби, альтернативы и лигатуры.
Grandstander можно бесплатно загрузить на условиях OFL (Open Font License) в Google Fonts и Github.
Источник: ETCAngus от Black Foundry
black-foundry.com/fonts/angus
Angus – это современный шрифт без засечек с закругленными концами, который имеет четко выраженный моноширинный вид. У Angus пять весов (от Light до Extrabold) с соответствующим наклонным курсивом. Angus поддерживает набор латинских шрифтов и включает строчные (минускульные) и табличные цифры, дроби и индексы, лигатуры и стрелки.
Angus можно купить на сайте Black Foundry.
Источник: Black FoundryHalvar и Halvar Stencil Complete от TypeMates
www.typemates.com/fonts/halvar-and-stencil-complete
Halvar – это массивная система шрифтов, насчитывающая в общей сложности 162 стиля. Halvar и Halvar Stencil имеют три значения ширины (Wide, Normal и Condensed), а также девять весов (от Hairline до Black) с двумя вариантами курсива (Slanted и SuperSlanted). Halvar с громоздкими пропорциями и сложными формами представляет собой прагматичный гротеск. Halvar поддерживает расширенный латинский, греческий и кириллический алфавиты и имеет табличные цифры, надстрочные индексы, дроби, а также альтернативные символы.
Halvar можно приобрести на сайте TypeMate. Также доступен предрелизный вариант вариативного шрифта.
Источник: TypeMatesService Gothic от HEX
hex.xyz/Service_Gothic
Service Gothic – это незавершенный вариативный шрифт, в настоящее время доступный только в верхнем регистре. Service Gothic включает 6 статических весов от Thin до Bold.
Первую версию Service Gothic можно купить на сайте Future Fonts.
Источник: Future FontsUrby и Urby Soft от TypeMates
www.typemates.com/fonts/urby
Urby Collection призван «объединить поразительный характер с технической функциональностью». Urby и его закругленный аналог Urby Soft выпускаются в пяти вариантах веса (от Thin до Black). Их можно использовать как взаимозаменяемые, поскольку они одинаковы по ширине для всех весов в обоих семействах. Urby Collection поставляется с расширенной поддержкой латинского алфавита и включает в себя линейные и табличные цифры, надстрочные и подстрочные индексы, дроби, порядковые числа и широкий спектр полезных декоративных элементов и геометрических фигур.
Urby Collection можно приобрести на сайте TypeMates.
Источник: TypeMatesGeóso от Finaltype
finaltype.de/de/projekte/geoso
Geóso – это гуманистический шрифт без засечек с геометрическим оттенком. Этот шрифт доступен в девяти весах (от Thin до Heavy) с соответствующим курсивом и является универсальным для каждого стиля. Geóso поддерживает расширенный набор латинских шрифтов и имеет обширную и сложную систему цифр, надстрочных, подстрочных и дробных знаков. В качестве бонуса Geóso содержит неуловимую немецкую заглавную букву ß и забавный набор кастомных смайлов.
Geóso можно приобрести на сайте FrontSpring.
Источник: FinaltypeFF Kaytek family от FontFont
www.fontshop.com/superfamilies/ff-kaytek
FF Kaytek – это «свежий взгляд на канцелярские гарнитуры 90-х». Это обширное суперсемейство, состоящее из четырех стилей: Slab, Sans, Headline и Rounded. FF Kaytek Slab и Sans имеют шесть весов (от Thin до Black) плюс соответствующий курсив, в то время, как FF Kaytek Headline и Rounded имеют по семь весов (от Thin до ExtraBlack/Black). Headline and Rounded стили дополняют друг друга и имеют более компактный вид, чем Slab и Sans. FF Kaytek пропорциональный по весу и курсиву в каждом стиле.
Суперсемейство FF Kaytek поддерживает расширенный набор латинских шрифтов и имеет старые цифры, дроби, а также надстрочные и подстрочные индексы.
FF Kaytek доступен в FontShop и MyFonts.
Источник: MyFontsBahnschrift от Saja Typeworks
docs.microsoft.com/en-us/typography/font-list/bahnschrift
Bahnschrift – это оцифрованная версия шрифта DIN, известного по немецким дорожным знакам. Bahnschrift был первым вариативным шрифтом Microsoft, имеющим две оси: Weight и Width. Существует статическая версия, которая включает пять весов и три ширины. Bahnschrift поддерживает расширенную латиницу (включая вьетнамский), а также кириллицу и греческий алфавит.
Bahnschrift доступен как часть операционной системы Windows 10.
Источник: MicrosoftFF Scala family от FontFont
scalafont.com
Семейство FF Scala – это классика печати. Спроектированный в 1991 году Мартином Майором, шрифт FF Scala с засечками в старом стиле был позже расширен версией без засечек, FF Scala Sans, основанной на общем скелете. Оба семейства имеют два веса (Regular и Bold) с соответствующим курсивом и двумя сокращенными стилями. Семейство FF Scala поддерживает расширенную латиницу и включает строчные и табличные цифры, надстрочный и подстрочный индекс, дроби, порядковые числа и фирменный набор декоративных стрелок.
Семейство FF Scala доступно для покупки на веб-сайте FontShop.
Источник: FontShopПомимо обычно очень умеренных шрифтов для основного текста, есть также несколько доступных декоративных пропорциональных шрифтов:
Minérale от 205TF
www.205.tf/look/minerale
Minérale – это вариативный шрифт с необычными основами, грани которых пересекаются. Minérale «довольно сдержанный в своих самых тонких версиях, [но] становится более декоративным в более тяжелых версиях». Статическая версия шрифта имеет пять вариантов веса (от Extralight до Black) и соответствующий курсив. Все они являются пропорциональными (включая версии с курсивом). Minérale поддерживает расширенный набор латинских шрифтов и включает пропорциональные фигурные цифры, пропорциональные строчные цифры, табличные цифры, ординалы, стилистические альтернативы и стрелки.
Minérale можно приобрести на сайте 205TF.
Источник: 205TFClimate Crisis Font от Helsinki Sanomat
kampanjat.hs.fi/climatefont/index.html
Шрифт Climate Crisis Font – удивительный вариативный шрифт, который пытается пролить свет на изменения климата. Ось веса шрифта основана на данных National Snow and Ice Data Center и прогнозах, предоставленных IPCC. Самый жирный шрифт представляет минимальную протяженность арктического морского льда в 1979 году, а самый легкий представляет собой прогноз на 2050 год.
Шрифт Climate Crisis Font поддерживает основной набор латинских шрифтов и имеет ограниченный набор надстрочных знаков и дробей.
Climate Crisis Font можно бесплатно загрузить в соответствии с лицензией SIL Open Font License (OFL) от Helsigin Sanomat.
Символы шрифта Climate Crisis Font неизменно широкие, но кажется, что они «тают» при выборе более легкого веса. Источник: Helsingin SanomatHandjet от Rosetta Type
www.rosettatype.com/Handjet
Handjet – экспериментальный трехкоординатный шрифт на основе сетки. Система шрифтов Handjet содержит 23 элементарных формы (например, квадраты, клевер и сердечки), размер которых можно изменять, создавая различный вес шрифта. Кроме того, можно использовать группы из меньших элементов 2×2 вместо одного элемента. Как и следовало ожидать от Rosetta Type, Handjet поддерживает широкий спектр языков: арабский, армянский, кириллицу, греческий, иврит и расширенную латынь. Он также включает дроби и достаточно забавные маленькие украшения.
Handjet можно купить за 0 евро на веб-сайте Rosetta Type.
Источник: Rosetta TypeВывод
Возможность изменять вес и стиль текстов, не влияя на занимаемое ими пространство – это функция, которая имеет большое значение для интерфейсов. Это не только избавит дизайнеров и разработчиков от головной боли, но и откроет новые возможности для создания доступного дизайна. Поскольку выпускается все больше и больше вариативных шрифтов, я рад добавить больше пропорциональных шрифтов в свой набор инструментов проектирования интерфейса. А вы?
Для дальнейшего чтения по теме
Если вы пропустили ссылку выше, есть намного больше пропорциональных шрифтов, которые я не упомянул в этой статье, но которые собраны на этих замечательных ресурсах:
Список «Equal-width fonts» от Identifont
http://www.identifont.com/equal-width.html
«Uniwidth typefaces» от Дэвида Судвикса
https://www.fontshop.com/people/david-sudweeks/fontlists/uniwidth-typefaces
В ответ на эту статью Индра Купфершмид собрала коллекцию uniwidth/multiplexed шрифтов от Fontstand. Спасибо!
https://fontstand.com/collections/69697/ab1ddd85e26deaf6647be009be6a1337
Как правильно выбрать шрифт для диджитал | by aic blog
Статья впервые была опубликована на www.likeni.ru.
Шрифт — это удивительное изобретение человека. Являясь, по сути, рисунком букв и знаков, шрифт за всю свою историю последовательно был определен формой пера, затем — отлитым металлическим бруском, а в наше время — сотнями неделимых ячеек, или, говоря проще — пикселями. Шрифт для человека стал чуть ли не частью природы, и поэтому любая его неточность или отклонение от принятого образца кажется странной — настолько мы привыкли к канонам, порой сами того не осознавая.
Посмотрите, как сильно в восприятии отличаются друг от друга два шрифта: весьма нейтральный гротеск Graphik и экспериментальный Potexa от исследователей из Kiosk:
Шрифт Graphik. Commercial Type, type.todayШрифт Potexa. KioskА теперь представьте, как будет выглядеть длинный текст, набранный Potexa: вряд ли будет просто прочитать пару страниц такой книги. Однако постер, на котором вы увидите крупный заголовок из этих же причудливых букв, будет выглядеть эффектно. Напротив, пара десятков страниц, набранных Graphik, может быть совершенно спокойно прочитана — конечно, если условиться, что это не будет полотном из заглавных букв.
Разные шрифты имеют разное применение, как и в случае с этой парой. Как шрифт для постеров будет нелепо выглядеть в длинных текстах, так и шрифт для чтения может быть плохим выбором для отображения на экранах.
Если раньше то, как мы видим и воспринимаем шрифт, зависело от того, как в бумагу впитываются чернила, то сейчас правила устанавливает пиксель — та самая неделимая часть цифрового изображения. Из пикселей собирается всё то, что мы видим на экране, включая буквы, цифры и знаки, и это накладывает определённые ограничения.
Давайте посмотрим на то, как число 1972 в сильном приближении выглядит на бумаге и на экране:
На бумагеНа экранеВ обоих случаях у цифр есть свои недостатки. Можно заметить, как несовершенство печати заметно искажает засечку у единицы, а мелкий ворс бумаги делает неровным форму цифры 7. В варианте с экраном видно, как любые непрямые элементы цифр имеют заметную «лесенку», происхождение которой обусловлено построением изображения из квадратных пикселей.
Если мы уменьшим размер шрифта, то результат будет совсем нечитаем:
Уменьшенный размер шрифта. Для наглядности масштаб увеличенПроблема отображения шрифтов на экране заставила дизайнеров думать о том, как адаптировать существующие и создавать новые шрифты — шрифты для digital.
Так появились всем знакомые Verdana и Tahoma — шрифты, у которых толщина штрихов совпадает с размером пикселя при определённом кегле.
С развитием технологий размер пикселя становился все меньше, а их плотность — все больше, и проблема «лесенки» начала исчезать. Зато в жизни стали появляться сложные интерфейсы, что создало еще одну проблему для шрифтов — их применение в условиях постоянных ограничений по формату.
UI-дизайнерам прекрасно знакома ситуация, когда в крохотной ширине нужно разместить чуть ли не столько же информации, сколько отображается на целом экране ноутбука. Для того, чтобы удовлетворить столь сложные требования, шрифты для digital выделились в целое направление — интерфейсные шрифты.
Если раньше для большинства задач достаточно было двух видов насыщенности шрифта — нормального, Regular и жирного, Bold, — то сегодня для нас привычно искать в гарнитурах и другие градации: сверхсветлую (Ultra Light), светлую (Light), полужирную (Medium) и другие. Без них интерфейсный шрифт не будет таковым: каждая насыщенность должна закрывать ту или иную задачу.
Заметьте, что в книгах вы не встретите такого обилия разновидностей — они были попросту не нужны. Человеку, который жил на заре печатного дела, даже в голову бы не пришло, зачем нужна насыщенность Medium — ведь есть Regular и Bold.
Насыщенности шрифта GraphikОдними из самых известных интерфейсных шрифтов являются San Francisco от Apple и Roboto от Google. Эти знакомые всем владельцам iPhone и смартфонам на Android шрифты имеют не только множество начертаний, но и другие особенности, которые делают их по-настоящему интерфейсными.
Возьмем, например, особое начертание San Francisco — Compact, которое было разработано специально для отображения на крохотных экранах Apple Watch.
Сравнение начертаний шрифта San Francisco от AppleДля удобства чтения с часов — а особенно на ходу или во время пробежки — важно формировать комфортные апроши — расстояния между соседними буквами. Для этого San Francisco Compact обладает более «прямыми» буквами, чем начертание Pro Text. Это сделано для того, чтобы при сравнительно одинаковой длине строки расстояние между буквами было больше у начертания для часов, чем у начертания для других устройств.
Ещё одним наглядным примером будет сравнение культового Gill Sans, который не адаптирован для интерфейсов и схожего с ним по характеру Gerbera от Brownfox. Если в крупном кегле трудностей с чтением у Gill Sans нет, то в маленьком размере явное преимущество у Gerbera.
Сравнение Gill Sans и GerberaПри одном и том же малом кегле и насыщенности «a milliliter» читается намного лучше в исполнении Gerbera за счет хорошего контраста, равномерных внутрибуквенных просветов и бóльших апрошей.
Посмотрим поближе на разницу между шрифтами:
Сравнение деталей Gill Sans и GerberaGill Sans — более контрастный шрифт, чем Gerbera. Это означает, что штрихи — элементы, из которых состоят буквы, цифры и знаки — сильно отличаются друг от друга по толщине. Это особенно заметно на примере букв a, t и r: так называемое «плечо» у r в исполнении Gerbera более равномерное по толщине, чем у Gill Sans. А засечка у буквы t в Gill Sans более острая, чем у его «соперника». За счёт этого Gerbera лучше отображается на экранах, поскольку такая засечка вероятнее всего будет отображена целыми пикселями.
Такими деталями и определяется хороший шрифт для экранов.
Идеальным интерфейсным шрифтом является тот, который поддерживает кириллицу и символы для разных языков мира. Чтобы и знак рубля был, и буква ять: кто знает, куда уйдет ваш проект или продукт?
Шрифт должен иметь как можно больше начертаний и насыщенностей. Лучше всего, если в арсенале будет как узкое начертание, так и широкое — таким образом вы сможете закрыть все потребности в рамках одного шрифта. Это особенно полезно при проектировании дизайн-систем, когда лучше сводить количество используемых составных к минимуму.
Еще важной характеристикой интерфейсного шрифта является удобочитаемость в мелком кегле: он должен быть в меру контрастным, иметь равномерные внутрибуквенные просветы и комфортные апроши.
Конечно, шрифт должен быть качественным и обладать своим уникальным характером.
При поиске шрифтов доверяйте только профессиональным ресурсам. Самый простой и эффективный способ узнать, на нужном ли сайте вы находитесь — проверить, есть ли на нем раздел, посвященный лицензиям. И чем подробнее об этом написано, тем показательнее. Если магазин шрифтов или студия делают хорошие шрифты, то вопрос лицензирования будет раскрыт сполна.
Второй важный момент — обходить стороной сайты с подозрительными названиями наподобие «1001 шрифт» или «Все русские шрифты»: скорее всего, на таких площадках вам попадется нечто недоработанное и неправильное.
Было бы странным не упомянуть пионеров ПараТайп, подарившим всем нам PT Sans, создавшим прекрасную Circe и еще очень много чего хорошего (например, блог и ценнейший справочник), но внимание хотелось бы остановить на менее известных, но сильных командах, делающих кириллицу и современные диджитал-шрифты.
Если вы еще не слышали о type.today, то это только повод для радости: такого количества качественной кириллицы от Илья Рудермана и Юрия Остроменцкого хватит на десятки проектов вперед и подарит не меньшего количества вдохновения. Так же, как и ПараТайп, проект ведет свой полезный журнал. А недавно команда запустила новый магазин, полностью посвященный экспериментальным шрифтам — tomorrow.
Безусловно, стоит выделить талантливых дизайнеров из Brownfox, которые сделали одни из самых модных шрифтов последних лет: начиная с Formular и заканчивая свежим Antonym, умело совмещающим в себе гротеск и антикву.
Нельзя обойти стороной и The Temporary State — смелую студию, которая любит экспериментировать. Не сказать, что разработанные дизайнерами шрифты умеют решать интерфейсные задачи, но для того, чтобы украсить проект крупными заголовками — это настоящий клад.
Московская студия Contrast Foundry разработала не так много шрифтов (как хотелось бы!), но за ними определенно стоит следить: чего стоит одна CoFo Chimera.
За экспериментами — пускай и совсем не интерфейсными — точно стоит зайти в Kiosk.
Пожалуй, благодаря отечественной моде — привет бренду Гоши Рубчинского — западные студии полюбили кириллицу и перестали совсем уж обходить ее стороной. Загляните в Dynamo Typefaces за Favorit Pro или в Grilli Type за GT Pressura.
Почитать о типографике можно в журнале «Шрифт» — жаль только, что статьи выходят достаточно редко.
Делюсь прекрасным и бесплатным интерфейсным шрифтом от ПараТайпа: PT Root UI.
Он имеет одну удивительную особенность: при изменении насыщенности не изменяется длина строки. Это очень удобно при проектировании интерфейсов: дизайнеру не придется перепроверять десятки сверстанных заголовков и текстов, если было принято решение изменить насыщенность.
Как выбрать шрифты для сайта (9 советов и 5 полезных сервисов)
Нужен трафик?
Помогу найти точки роста в SEO.
Наладим стабильный трафик из поиска на Ваш сайт.
Напиши и получи бесплатный анализ.
Содержание:
Текст — основной источник информации на сайте.
Над ним работают, его затачивают под целевую аудиторию, думают о том, как он будет решать задачу, которая перед ним стоит.
А еще текст стараются сделать легким для восприятия, таким, чтобы его хотелось прочитать.
И без шрифтов в этом случае — просто никуда.
Именно хорошо подобранные шрифты помогают быстрее читать, лучше воспринимать и усваивать информацию.
А еще они меньше утомляют глаза, и это тоже важно.
Особенно для тех, кто ежедневно проводит перед монитором долгие часы.
Многие люди вообще не задумываются о шрифтах, заходя на сайт, не знают, какими они бывают и чем отличаются — это нормально.
Но при этом они поморщатся и могут даже закрыть сайт, где со шрифтами что-то не так, потому что это «что-то» воспринимается практически на уровне подсознания.
Можно сказать, что шрифт для текста — как одежда для человека.
Если прийти на собеседование в легкомысленном сарафане — эйчар вряд ли станет обсуждать этот наряд, но и работу Вы вряд ли получите.
Да и явившись на пляж в деловом костюме удовольствия Вы не получите, а вот тепловой удар ― легко.
Также и со шрифтом: он может делать тексты более убедительными и деловыми, или, напротив, легкомысленными и развлекательными.
И если подавать серьезную информацию легкомысленным шрифтом или наоборот — это будет вызывать диссонанс.
ГЛАВА 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 и будет вам счастье» дать невозможно.
Итог можно подвести только так: выбирайте шрифты, которые подчеркнут направленность сайта, помогут посетителям воспринимать контент и не утомят их.
В работе с сайтом нет мелочей — на конверсию влияет все, в том числе и грамотная работа со шрифтами.
Учитывая это, можно избежать грубых ошибок, из-за которых посетители навсегда уйдут с Вашего ресурса.
Какой шрифт легче всего читать?
Мы часто забываем, что текст — или, точнее, шрифт — это неотъемлемая часть веб-дизайна. Фактически, ваш выбор шрифта может сделать или сломать весь ваш сайт. На самом деле не имеет значения, насколько красив или легко ориентироваться на вашем сайте, если посетители с трудом читают его содержание.
Вот почему разумно выбрать один из самых простых шрифтов для чтения большей части текста в ваших проектах веб-дизайна. В этом посте мы поговорим о том, что делает шрифт разборчивым, и поделимся десятью популярными вариантами, которые стоит рассмотреть для вашего следующего сайта.
Давайте начнем!
Что делает шрифт удобочитаемым?
Есть несколько факторов, которые влияют на то, насколько легко читать шрифт. Три основные проблемы:
- Засечки. Это небольшие штрихи или ножки, которые отходят от основных линий каждого символа в определенных шрифтах. В качестве примера вы можете сослаться на «элегантный» в нашем логотипе. Принято считать, что шрифты без засечек (шрифты без засечек, подобные тому, который вы сейчас читаете) легче читать на экранах.Однако, как вы увидите в нашем списке ниже, из этого правила есть некоторые исключения.
- Расстояние. В частности, кернинг, трекинг и интерлиньяж. Эти термины относятся к тому, насколько близки друг к другу отдельные символы, слова и строки в шрифте. Если интервал слишком мал, символы становятся трудно различимыми. Если он слишком растянут, может быть трудно соединить нужные буквы вместе, чтобы образовать слова.
- Размер шрифта. Какой размер текста может затруднить читаемый шрифт.Кроме того, некоторые шрифты лучше адаптируются к меньшим размерам, чем другие.
В дополнение к этим руководящим факторам следует помнить еще о нескольких принципах. Как правило, вам следует избегать скриптовых и декоративных шрифтов, за исключением , возможно, для заголовков или другого специального текста. Настоятельно рекомендуется никогда не использовать их для основного текста. Эти шрифты, как правило, труднее читать при меньшем размере и при использовании для длинных блоков текста.
Кроме того, помните о цвете шрифта.Важно, чтобы текст и фон были достаточно контрастными, чтобы дальтоникам и пользователям с ослабленным зрением было легче разобрать слова. Однако также широко распространено мнение, что «перевернутый» шрифт (светлый текст на темном фоне) труднее читать всем.
Какой шрифт легче всего читать? (10 лучших вариантов)
В наш список наиболее читаемых шрифтов входят различные стили, подходящие для различных случаев использования в веб-дизайне. Некоторые из этих шрифтов могут быть вам сразу знакомы, поскольку они популярны в течение многих лет.Другие являются более новыми и содержат элементы, специально подобранные для удовлетворения потребностей современных цифровых устройств чтения.
Начнем со старых фаворитов.
1. Arial
Arial — стандартный шрифт для многих текстовых процессоров, таких как Microsoft Word и Google Docs. Это чистый современный шрифт без засечек, который отлично подходит для основного текста.
Благодаря своей популярности и известности, Arial легко адаптируется практически к любому стилю. Это действительно вне времени.Еще одним преимуществом его широкого распространения является то, что у вас, вероятно, не возникнет проблем с доступом к нему для использования в ваших проектах.
2. Helvetica
Еще один шрифт без засечек старой школы, который вы, возможно, захотите рассмотреть, — это Helvetica. Он ненавязчивый, содержит удобный для чтения основной текст, который не отвлекает от других аспектов дизайна вашего сайта.
Фактически, этот шрифт был специально разработан, чтобы лишить его индивидуальности. Хотя это один из самых популярных шрифтов в мире, он также вызывает большие споры.Дизайнеры склонны любить это или ненавидеть.
3. Грузия
Один из немногих шрифтов с засечками в нашем списке — Georgia. Этот шрифт выделяется своим стильным, «старинным» ощущением, который идеально подходит, если вы хотите привнести немного характера в дизайн своего сайта.
Georgia прекрасно сочетается со многими шрифтами без засечек для использования в заголовках и заголовках. Это отличное решение, если вам нравится внешний вид шрифта с засечками, но вы хотите, чтобы текст меньшего размера оставался чистым и легко читаемым.
При этом Georgia оптимизирована для удобочитаемости на экранах любого размера. Если вам нравится этот очаровательный шрифт, не бойтесь экспериментировать с ним в качестве шрифта основного текста.
4. Merriweather
Еще один вариант для дизайнеров, которых не впечатляют шрифты без засечек — Merriweather. Этот шрифт Google имеет слегка сжатые буквы, оставляющие много места между символами для удобочитаемости на экране. Он настолько хорошо выполняет свою работу, что давние пользователи WordPress будут помнить, что он использовался в предыдущих темах по умолчанию.
Merriweather прекрасно сочетается с несколькими другими шрифтами из этого списка, такими как Montserrat и Open Sans. Таким образом, используйте его как полужирный шрифт в заголовках, а затем позвольте более простому шрифту взять бразды правления в свой основной текст.
5. Монтсеррат
Монсеррат берет свое начало в городских вывесках. В 2017 году он был перерисован с меньшим весом, чтобы его было легче читать при использовании в длинных блоках текста.
Если вам нравятся чистые линии Arial и Helvetica, но вы хотите, чтобы шрифт был немного более интригующим, стоит подумать о Montserrat.Он идеально подходит для блогов, которые хотят привнести немного индивидуальности и снизить нагрузку на глаза при долгом чтении.
6. Futura
Еще одна популярная альтернатива Helvetica — Futura, которая привносит в ваш текст острый, современный вид. Он продуман до мелочей и передает много эмоций без лишних излишеств.
Futura идеально подходит для стартапов или любого бренда, который хочет выглядеть дальновидным и инновационным. Вы можете сочетать его с более светлым шрифтом без засечек, чтобы создавать привлекающие внимание заголовки, или использовать его в качестве основного шрифта без излишеств.Он также популярен как логотип.
7. Open Sans
«Открытый» в названии шрифта относится к отрицательному пространству во многих формах круглых букв. Тем не менее, многие люди считают, что эта функция также придает типу дружелюбный или «открытый» вид, создавая гостеприимный стиль и тон.
Open Sans — это идеальный шрифт основного текста, который хорошо сочетается с некоторыми из наиболее сильных персонажей в этом списке, такими как Merriweather или Futura. Кроме того, он оптимизирован для удобочитаемости на всех устройствах, что делает его отличным выбором, если у вас много длинного контента и вы ожидаете большого количества мобильных пользователей.
8. Лато
Изначально разработанный для корпоративных клиентов, Lato — идеальный тонкий шрифт для вашего бизнес-сайта. Элегантный и серьезный, этот шрифт выглядит профессионально, но не слишком скучно.
Чтобы немного украсить свой дизайн, используйте лато для основного текста сайта и сочетайте его со шрифтом с засечками для заголовков и заголовков. Это выполнит свою работу и сохранит ваши сообщения в блоге или описания продуктов доступными для чтения, при этом сохраняя индивидуальность вашего бренда.
9. Тиса
Tisa — новый шрифт, популярный среди графических и веб-дизайнеров. Несмотря на то, что он имеет отличные засечки, его аккуратный интервал позволяет читать текст даже на небольших экранах.
Этот шрифт легко адаптируется и может работать в любом контексте. Это идеальный вариант, если вы ищете не такой прогрессивный шрифт с засечками, как Georgia или Merriweather.
10. Зыбучие пески
Наш последний выбор привносит необычный характер, а также оптимизацию для мобильных устройств.Quicksand был разработан в 2008 году как дисплейный шрифт для мобильных устройств, но с тех пор стал популярным и во многих других случаях использования.
Четкие интервалы и геометрические формы делают зыбучие пески удобочитаемыми даже при небольших размерах. Он хорошо сочетается с яркими шрифтами с засечками, такими как Merriweather, а также с твердыми шрифтами без засечек, такими как Futura, что дает вам большую гибкость при сочетании его с другими гарнитурами.
Заключение
Выбор правильных шрифтов для ваших проектов веб-дизайна имеет решающее значение.Понимание того, какие гарнитуры легче всего читать, может дать вам преимущество в этой области и помочь вам обеспечить читаемость вашего веб-контента для будущих пользователей.
В этой статье мы рассмотрели десять самых простых для чтения шрифтов для веб-контента. Merriweather и Futura являются фаворитами для заголовков и заголовков, тогда как для основного текста может быть предпочтительнее более тонкий выбор, такой как Quicksand или Open Sans.
У вас есть вопросы по выбору читаемого шрифта для вашего сайта? Сообщите нам об этом в разделе комментариев ниже!
Изображение статьи предоставлено Oberon / Shutterstock.com
Лучшие шрифты для печати, Интернета и электронной почты
Посещали ли вы когда-нибудь веб-сайт, который, казалось, содержал информацию, которую вы искали, — но вы обнаруживали, что нажимаете кнопку «назад» в своем браузере просто потому, что…
… вам не понравился шрифт, который они использовали?
Есть.
Для владельца этого веб-сайта я представляю упущенную возможность — одним человеком меньше, которое потенциально может нажать на одно из их объявлений или купить один из их продуктов.
Фактически, Колин Уилдон, автор книги «Тип и макет: вы общаетесь или просто делаете красивые формы?», говорит:
«Можно поразить три четверти наших читателей, просто выбрав неправильный тип. Если вы полагаетесь на слова, чтобы продать, это должно вас глубоко обеспокоить».
Ударьте 75 процентов ваших читателей! Если вы копирайтер, который написал копию для этого сайта, это верный путь из героя копирайтинга к нулевому копирайтингу.
Итак, как копирайтер, имеет смысл убедиться, что шрифт, который вы или ваши клиенты используете, никоим образом не мешает продажам.
Чтобы помочь вам, я провел небольшое исследование лучших шрифтов для печати, Интернета и электронной почты. Начнем с:
Разница между шрифтами ‘serif’ и ‘sans serif’
Шрифтыс засечками имеют маленькие ножки и украшения на кончике и основании каждой буквы, что делает их более отчетливыми и узнаваемыми. Популярные шрифты с засечками: Times New Roman, Palatino, Georgia, Courier, Bookman и Garamond.
Почти во всех книгах, газетах и журналах используется шрифт с засечками. Принято считать, что печатные шрифты с засечками легче читать. Идея состоит в том, что засечки на самом деле заставляют буквы сливаться вместе — и, следовательно, легче для глаз.
Как видно из названия, шрифты ‘sans serif’ — это шрифты без засечек. Хотя некоторые источники говорят, что шрифты без засечек существуют с V века до нашей эры, они стали популярными только в 1920-х годах — в основном они использовались в рекламе.
Одной из причин их непопулярности было то, что типографы придерживались шрифтов с засечками, потому что считали, что их легче читать.
Говорят, что шрифты с засечками предназначены для «удобочитаемости», а шрифты без засечек предназначены для «удобочитаемости». Вот почему при печати шрифты без засечек часто используются в качестве шрифта заголовка, а шрифты с засечками используются для основного текста.
Некоторые популярные шрифты San Serif: Helvetica, Arial, Calibri, Century Gothic и Verdana.
Лучшие шрифты для печати
В своей книге Cashvertising Дрю Эрик Уитман цитирует исследование шрифтов (напечатанных на бумаге) в 1986 году, которое показало, что только 12 процентов участников эффективно понимали абзац, набранный без засечек, по сравнению с 67 процентами, которым была предоставлена версия, набранная шрифтом с засечками. шрифт.
Те, кто читал версию без засечек, сказали, что им было трудно читать текст и «им постоянно приходилось отступать, чтобы восстановить понимание».
При тестировании трех разных шрифтов, двух шрифтов с засечками (Garamond и Times New Roman) и одного без засечек (Helvetica) он обнаружил, что 66 процентов из них способны понимать Garamond; 31,5% — Times New Roman и 12,5% — Helvetica (из 1010 000 опрошенных).
Вывод таков: шрифты с засечками легче читать, когда речь идет о шрифтах на бумаге.Итак, если вы отправляете коммерческое письмо или брошюру по почте, вы, вероятно, захотите использовать шрифт с засечками (но, как упоминалось в первом пункте, вы можете использовать шрифт без засечек для своих заголовков).
Вот предпочтения трех великих авторов копирайтинга в печатных шрифтах: 1) реклама великого Джона Кейплза, который любил использовать Cheltenham Bold для заголовков; 2) легенда рекламы Дэвид Огилви предпочитал семью Сенчури, Кэслон, Баскервиль и Дженсон; и 3) гуру прямого маркетинга Гэри Халберт использовал Courier в своих коммерческих письмах.
Лучшие шрифты для онлайн
Теперь можно предположить, что то, что работает на печатной странице, будет похоже на то, что работает на экране компьютера. Но это не так.
Чтобы маленькие засечки выглядели разборчивыми, требуется высокая степень разрешения. Чем больше пикселей, тем больше деталей шрифта вы можете отобразить.
Примерно 10 лет назад лучшим разрешением экрана компьютера было 800 x 600 пикселей, что было не очень хорошо для определения тонкостей шрифта с засечками.Разрешение экрана увеличивалось с годами (разрешение 1024 x 768 пикселей или больше стало нормой). Это делает шрифты с засечками более разборчивыми, но, как правило, их не так легко читать, как шрифты без засечек.
Plus, теперь вы должны подумать, как ваш сайт или электронная почта будет выглядеть на портативных устройствах, таких как BlackBerry и iPhone. Последняя модель iPhone имеет разрешение экрана 960 х 640 пикселей. BlackBerry Bold имеет разрешение экрана 480 x 360 пикселей.
Итак, в Интернете лучший шрифт — это без засечек.
Исследование 2002 г., проведенное Лабораторией юзабилити и исследований программного обеспечения, пришло к выводу, что:
- Самыми разборчивыми шрифтами были Arial, Courier и Verdana.
- При размере 10 пунктов участники предпочли Verdana. Times New Roman был наименее предпочтительным.
- При размере 12 пунктов предпочтение было отдано Arial, а наименее — Times New Roman.
- В целом предпочтительным шрифтом был Verdana, а наименее предпочтительным — Times New Roman.
Итак, вот ваши приказы:
Для облегчения чтения в Интернете используйте шрифт Arial от 12 кеглей.Если вы собираетесь меньше 12 баллов, лучшим выбором будет Verdana с 10 баллами. Если вам нужен формальный вид, используйте шрифт «Джорджия». А для читателей постарше используйте шрифт размером не менее 14 пунктов.
Лучшие шрифты для электронной почты
Доктор Ральф Ф. Уилсон, консультант по электронной коммерции, провел серию тестов в 2001 году. Он также пришел к выводу, что шрифты без засечек больше подходят для экрана компьютера.
Некоторые из основных результатов теста заключались в том, что с 12 баллами респонденты отдали предпочтение Arial над Verdana — от 53% до 43% (при этом 4% не смогли различить их).
Две трети респондентов сочли, что Verdana с 12 пунктами слишком велика для основного текста, но Verdana с 10 пунктами был признан более читабельным, чем Arial с 10 пунктами с разницей 2 к 1.
В заключение, для лучшей читаемости шрифта используйте Arial 12 пунктов или Verdana в 10 пунктах и 9 пунктах для основного текста. Для заголовков он предлагает использовать более крупный жирный шрифт Verdana.
Выбор шрифта
Итак, в следующий раз, когда вы отправите коммерческое письмо или электронное письмо своему клиенту, было бы неплохо спросить его, какой шрифт они собираются использовать.
Если они планируют использовать шрифт с засечками в Интернете или в электронной почте, вы можете осторожно оттолкнуть их от этого и порекомендовать более легко читаемый шрифт без засечек.
Если они также планируют отправить вашу копию в свой список по обычной почте, неплохо было бы предложить им переключиться на шрифт с засечками, по крайней мере, для основного текста.
Это может означать разницу между выигрышным экземпляром и экземпляром, дающим только средние результаты.
Настольный маркетинг для успеха, независимости и дохода
Девяносто процентов владельцев малого бизнеса теряются, когда дело доходит до маркетинга.Узнайте, как вы можете помочь им добиться успеха, построив прибыльную домашнюю карьеру в качестве внештатного маркетолога по настольному маркетингу. Узнать больше »
Нажмите, чтобы оценить:
Среднее значение: 4,5
Опубликовано: 6 октября 2011 г.
самых простых для чтения шрифтов для онлайн-дизайна — Дизайн веб-сайтов в Далласе
Шрифт, который вы используете для своего контента, независимо от того, на каком носителе, может многое сказать о вас.
Фактически, исследователи обнаружили, что шрифт может напрямую влиять на восприятие контента людьми.Используйте неправильный шрифт на своем веб-сайте или в рекламных материалах, и люди могут увидеть вас в негативном свете.
Выберите правильный шрифт, и вы с самого начала произвели значительное впечатление.
Проблема в том, что существует так много шрифтов. Что следует использовать: шрифт с засечками или шрифт без засечек? А как насчет размера и веса шрифта?
Разборчивость основного текста для веб-шрифтов и общий стиль шрифта, который легче читать? Многие люди знают, что шрифт, который они выбирают, имеет большое значение, но они не знают, какие шрифты выбрать, а каких избегать.
Давайте сузим круг вопросов и дадим несколько рекомендаций, которые помогут вам выбрать идеальный шрифт для вашего следующего произведения.
Грузия
Самый читаемый шрифт для веб-дизайна.
Georgia — очень красивый гладкий шрифт, который написан очень профессионально. Это один из самых простых шрифтов для чтения на экране. Поскольку этот шрифт меньше других шрифтов, он отлично подходит для более длинных частей, где вы хотите представить большой объем информации на профессиональном уровне.Это самый простой для чтения мелкий шрифт. Если вы делаете брошюры, в которых могут быть более длинные фрагменты информации, Georgia — отличный выбор шрифта.
Блоги на профессиональных сайтах также могут извлечь большую пользу из шрифта Georgia. Он также немного меньше светится при умеренном использовании. Например, баннер с вашим бизнес-лозунгом, вероятно, выиграет от выбора другого шрифта.
Helvetica
Этот шрифт часто используется компаниями для заголовков или даже в своих логотипах.Helvetica — это профессионально, весело и, что самое главное, привлекает внимание. По возможности используйте этот шрифт для заголовков на плакатах или в веб-материалах. Helvetica особенно полезна для создания современного образа.
Если вы веб-сайт или бренд, который хочет выглядеть «передовым» или «дальновидным», то Helvetica — хороший выбор. Если ваш веб-сайт выполнен в стиле ретро, классике или традиционном стиле, вы можете выбрать другой шрифт.
Калибри
Чистый и удобный для чтения шрифт.
Есть причина, по которой Calibri является шрифтом по умолчанию для Windows. Он чистый, удобный для чтения и подходит для множества ситуаций. Это отличный шрифт для контента на вашем веб-сайте или в печатных материалах. Если вы когда-либо не уверены, какой шрифт использовать, вы не ошибетесь с Calibri. Единственным недостатком выбора Calibri является то, что он может показаться ленивым при выборе шрифта.
Некоторые люди могут подумать, что вы просто выбрали шрифт по умолчанию и не приложили никаких усилий для его выбора.Однако многие люди не узнают Calibri и сразу же могут назвать шрифт. Для большинства людей Calibri — это легко читаемый, узнаваемый и знакомый шрифт. Этот шрифт не выделит вас из массы, но иногда это хорошо.
Verdana, самый простой для чтения шрифт
Если вам нужен классический чистый вид, похожий на Calibri, но вы хотите что-то немного более оригинальное, тогда Verdana — это шрифт, который вам нужен. Как и Calibri, этот шрифт может вписаться во многие типы веб-сайтов WordPress и для печати.Популярность Verdana по сравнению с Calibri делает его немного более уникальным, чем шрифт по умолчанию, который люди видят на своем компьютере.
Его удобочитаемость делает Verdana отличным шрифтом для расширенного содержания форм. Единственным недостатком использования Verdana является то, что вас также могут рассматривать как осторожные. Опять же, большинство людей не будут создавать эту ассоциацию, но если вы работаете в индустрии дизайна или пытаетесь привлечь внимание современных потребителей, возможно, вам стоит об этом подумать.
Futura
Futura — отличный выбор шрифта для текста заголовка, логотипов и заголовков.Он чистый и жирный, что выделяет его среди других изображений и текста. Некоторые люди думают, что Futura не хватает чутья, что, вероятно, верно, но если вам нужен шрифт, чтобы выделиться и спрыгнуть со страницы или экрана, тогда не так много других вариантов, которые могут конкурировать с Futura.
Если вам нужен стиль и чутье, то этот шрифт, скорее всего, не для вас. Если вы собираетесь быть смелым и выделяться, остановитесь на выборе шрифта Futura.
Франклин Готика
Franklin Gothic — чистый современный шрифт, который отлично впишется в самые разные ситуации.Этот универсальный шрифт легко читается и привлекает внимание. В ситуациях, когда вы рассматриваете возможность использования более популярного шрифта, такого как Calibri, вы можете выбрать вместо него Franklin Gothic, чтобы придать своему контенту уникальное ощущение. «Franklin Gothic» не станет «шедевром», но он определенно выглядит хорошо и позволяет говорить о вашем контенте. Однако если вы ищете шрифт заголовка или дизайн логотипа, это может быть не лучшим выбором.
Проксима Нова
Proxima Nova — это привлекательный шрифт, который имеет немного современного чутья и классического геометрического стиля.Это очень хорошо работает в дизайне с длинной прокруткой.
Края некоторых букв острые, но есть еще какой-то стиль, о котором стоит говорить. Это фантастический текст заголовка для ваших печатных материалов, который будет выделяться и привлекать внимание.
Самое главное, этот шрифт очень читабельный.
Люди смогут быстро прочитать шрифт на расстоянии или если он включен как часть изображения.
9 самых простых шрифтов для чтения на плакатах, визитных карточках и многом другом
Каждый раз, когда вы что-то пишете — электронное письмо своему боссу, публикацию на вашей странице в Facebook, поздравительную открытку своей няне — вы, вероятно, потратите некоторое время на то, чтобы убедиться, что ваше сообщение читается.В конце концов, если ваша аудитория не может понять, что вы написали, ваше сообщение бесполезно!
Удобочитаемость особенно важна при создании деловых материалов, таких как визитки, флаеры и плакаты. Потенциальные клиенты, коллеги или клиенты ответят на ваше сообщение только в том случае, если они смогут его прочитать, поэтому простой и четкий шрифт так же важен, как и хорошо написанный текст. Каждый раз, когда вы создаете печатные материалы для своего бизнеса, важно использовать самый простой шрифт для чтения на бумаге.
Но какой шрифт легче всего читать? Ответ зависит от типа маркетинговых материалов, которые вы создаете. Давайте посмотрим на несколько вариантов удобочитаемых шрифтов.
Serif или Sans Serif?
Когда вы выбираете читаемый шрифт для своих маркетинговых материалов, вам сначала нужно решить, хотите ли вы использовать шрифт с засечками или без засечек. Какая разница?
Шрифты с засечками включают небольшие декоративные завитки (так называемые «засечки») в конце каждого штриха.Подумайте о классических шрифтах, таких как Times New Roman или Georgia; у этих шрифтов есть засечки по краям почти каждой буквы. Для сравнения, в шрифтах без засечек эти элементы отсутствуют для получения чистого минималистичного дизайна букв. Такие шрифты, как Helvetica или Arial, являются популярными шрифтами без засечек.
Выбор между шрифтами с засечками и без засечек может показаться незначительным, но эти детали могут иметь огромное значение для вашего готового продукта. Правильный шрифт может отражать идентичность вашего бренда (шрифты с засечками обычно кажутся более традиционными или сложными, а шрифты без засечек выглядят более современными).Это также может повлиять на то, насколько легко будет читать ваш документ.
Шрифты для визитных карточек
Средний размер визитки невелик (в Великобритании ширина 85 мм, высота 55 мм). Но, несмотря на небольшой размер, эффективная визитная карточка должна содержать много информации — название вашей компании, ваше имя и должность, контактную информацию и многое другое. По этой причине простые минималистичные шрифты легче всего читать в этом формате. Рассмотрите возможность использования одного из них:
Helvetica
Helvetica — это шрифт без засечек, разработанный швейцарским дизайнером шрифтов Максом Мидингером в 1957 году.Он имеет высокие тонкие буквы с небольшим интервалом, что позволяет легко читать как на расстоянии, так и на мелком печатном материале. Helvetica — это чистый и профессиональный шрифт, что делает его отличным выбором для материалов, которыми вы делитесь с коллегами.
Изображение: Wikimedia Creative CommonsGotu
Шрифтыбез засечек часто используются для визиток, поскольку их легко читать. Однако это не означает, что шрифты с засечками запрещены; Например, Gotu — отличный вариант для людей, которые хотят использовать классические шрифты на своих визитных карточках.Этот шрифт мягкий и элегантный, с малейшим намеком на засечки на каждой букве, что делает его удобочитаемым и сложным.
Изображение: FreeFontsFamily.comFutura
Futura был первоначально выпущен в 1927 году, но этот шрифт обладает вневременным качеством, что делает его очень… ну, футуристическим. Ультратонкие штрихи и большие геометрические буквы идеально подходят для визитки — ваша аудитория сможет все четко прочитать, когда вы воспользуетесь Futura.
Изображение: Wikimedia Creative CommonsШрифты для ваших листовок
В отличие от визитных карточек, у флаеров немного больше места, над которым могут работать графические дизайнеры.Фактически, дизайны флаеров могут поиграть с различными вариантами шрифтов: они могут использовать разный вес (или даже разные шрифты) для создания уникального и привлекательного дизайна. Однако, если вы хотите использовать один шрифт для всех своих печатных листовок, вам следует придерживаться чего-то, что будет универсально читаемым, например:
Готика века
Century Gothic, выпущенная в 1991 году компанией Monotype Imaging, во многом вдохновлена Futura. Как и его предшественник, этот шрифт без засечек использует широкие геометрические буквы для создания современного вида.Однако у Century Gothic есть одно преимущество перед Futura: он имеет еще большую высоту по оси x, что означает, что его строчные буквы выше, чем у других шрифтов. Это делает шрифт особенно подходящим для больших печатных материалов, таких как флаеры.
Изображение: Wikimedia Creative CommonsVerdana
Verdana был первоначально создан британским дизайнером Мэтью Картером для корпорации Microsoft в 1996 году. Этот шрифт без засечек использует высокую высоту x, как Century Gothic, но также использует более свободный интервал и широкие пропорции, что облегчает чтение.Если вы хотите, чтобы вашу копию можно было читать даже на расстоянии, это отличный выбор для ваших распечатанных листовок.
Изображение: Wikimedia Creative CommonsGeorgia
За три года до того, как Мэтью Картер создал Verdana для Microsoft, компания поручила ему создать традиционный шрифт в шотландском римском стиле, который идеально подошел бы для печатных материалов и цифровых документов. Результатом стал Georgia — шрифт с засечками с высокой высотой по оси x и тонкими штрихами, который отлично смотрится практически в любом месте! Если вам нужен шрифт, который можно использовать во всех документах компании, от дизайна веб-сайта до печатных листовок, это отличный выбор.
Изображение: Wikimedia Creative CommonsШрифты для ваших плакатов
Читаемость также важна при разработке печатных маркетинговых материалов, но когда вы создаете что-то большое, например плакат, у вас появляется гораздо больше места для творчества с шрифтами для плакатов! Дизайнеры плакатов должны выбирать шрифты, которые легко читаются и достаточно большие, чтобы заполнить отведенное пространство. Если вам нужен шрифт, который действительно выделяется для вашего следующего плаката, рассмотрите один из следующих:
Garamond
Garamond — один из старейших шрифтов, которые у нас есть, а это значит, что вы, вероятно, видели его на более чем нескольких печатных документах.Он назван в честь парижского гравера шестнадцатого века Клода Гарамонда и отличается низкой высотой по оси Х, четким контрастом штрихов и тонкими наклонными засечками на таких буквах, как «d» и «r». Garamond — это шрифт в классическом стиле, что делает его отличным выбором для любого плаката, призванного вызвать чувство изысканности, элегантности или роскоши.
Изображение: Wikimedia Creative CommonsBodoni
Хотя семейство шрифтов Bodoni было впервые разработано в конце 18 века, в наше время популярность этих шрифтов снова возросла.Вероятно, это связано с тем, что шрифт с его элегантными буквами с засечками и толстыми штрихами создает смелый вид, который обязательно привлечет внимание к печатным материалам! Однако, если вы решите использовать Bodoni в материалах своего бренда, важно помнить, что этот шрифт идеально подходит для ряда печатных материалов; на экране из-за контраста штрихов некоторые буквы могут быть труднее различимы.
Изображение: Wikimedia Creative CommonsClarendon
Clarendon был впервые выпущен в 1845 году. Этот жирный шрифт с засечками имеет классический вид, но он также обладает удобочитаемостью, чем более современные шрифты.Если вы хотите, чтобы ваша аудитория могла прочитать ваш плакат — даже через дорогу, — шрифт Clarendon может стать вашим лучшим выбором.
Изображение: Wikimedia Creative Commons. Конечно, независимо от того, создаете ли вы визитку, флаер, плакат или любые другие материалы для бизнеса, выбор шрифта — это только начало вашего пути. Благодаря Banana Print вы можете создавать документы профессионального качества, которые легко читать, красиво смотреть и экономить на вашем бюджете! Взгляните на множество вариантов, которые мы можем предложить вашему бизнесу сегодня.
Самые простые шрифты для использования на ваших сайтах
Как добавить кнопку в WordPress с нулевым знанием кода
15 октября 2020 г.Лучшие сайты о путешествиях и туризме
19 октября 2020 г.Вы когда-нибудь открывали веб-сайт и задавались вопросом: «Кто выбрал этот шрифт и о чем они думали?» Если да, то вы знаете, насколько важно выбрать шрифт, который легко читается.
Посетители используют широкий спектр устройств для доступа в Интернет.Они варьируются от очень маленьких мобильных телефонов до больших компьютерных мониторов и экранов телевизоров. Успех веб-сайта во многом зависит от того, насколько легко читать контент.
В этой статье рассматриваются 20 ненавязчивых и легко читаемых шрифтов. Предоставленная информация может помочь вам выбрать лучший шрифт для вашего сайта.
Georgia
Важно помнить, что Georgia — это шрифт с засечками. Засечки — это декоративный штрих на конце основы буквы. Шрифты без засечек («sans» означает «без») не имеют такой дополнительной детали.
При правильном выборе шрифт с засечками может быть для вас подходящим вариантом. Microsoft создала Грузию для экранов с низким разрешением. Это один из лучших вариантов для посетителей, пользующихся компьютерами или мобильными телефонами.
Merriweather
Этот шрифт идеален даже для самых маленьких экранов. Благодаря большому размеру корпуса Merriweather поддерживает высокий уровень читаемости независимо от размера, веса и стиля. Это делает его отличным выбором для заголовков, заголовков и особенно для длинных текстов. Это придаст элегантный и профессиональный вид любому контенту.
Arial
Для большинства людей стандартным шрифтом является Arial. Это один из самых популярных вариантов без засечек.
Благодаря открытым апертурам он выглядит естественно, очень четкий и читаемый. Он считается типичным шрифтом для печати, но он также подходит для веб-документов. На устройствах Windows его часто заменяют более визуально привлекательными шрифтами.
Droid Sans
Стив Маттесон из Ascender Corporation создал шрифты Droid Sans и Open Sans.
Благодаря своей прочной конструкции, открытым апертурам и высокому размеру корпуса Droid Sans сохраняет высокую читаемость.Это один из лучших вариантов для мобильных устройств.
Courier
Courier относится к группе моноширинных шрифтов. Буквы и символы занимают одинаковое пространство по горизонтали. В этом отличие от пропорциональных шрифтов.
Большинство операционных систем включают шрифт Courier в качестве стандарта. Он широко используется при написании сценариев к фильмам. Если тема вашего сайта — фильмы, шрифт Courier может придать ему более аутентичный вид.
Playfair Display
Это современный, изысканный и нежно женственный шрифт с засечками.Из-за того, что он часто используется для контента, ориентированного на женскую аудиторию. Этот шрифт может отображаться с различным начертанием. В эстетических целях наиболее популярен самый легкий вес.
Helvetica
Это широко используемый шрифт без засечек, популярный для заголовков и логотипов. Это простой, но современный шрифт, привлекающий внимание своим профессиональным внешним видом.
Helvetica — один из лучших шрифтов для придания вашему сайту динамичного и новаторского вида.
Open Sans
Этот шрифт Google является одним из наиболее часто используемых шрифтов и подходит практически для любого типа контента.
Согласно Google, этот шрифт «оптимизирован для печати, Интернета и мобильных интерфейсов и имеет отличную читаемость». Эта оптимизация в некоторой степени связана с кернингом (пробелами между символами).
Times New Roman
Times New Roman — самый стандартный шрифт с засечками для многих пользователей. Это один из самых популярных шрифтов на устройствах Windows. Это также популярный выбор для многих учреждений, таких как новостные сайты.
Futura
Futura — это шрифт без засечек, основанный на геометрических фигурах.Это придает ему перспективный, высокотехнологичный вид, сохраняя при этом высокую читаемость.
Этот шрифт обязательно привлечет внимание посетителей вашего сайта.
Calibri
Calibri — это шрифт Windows по умолчанию. Его чистый вид делает его удобным для чтения и подходит для многих сценариев. Если вы не уверены, какой шрифт выбрать, хотя это и не новаторский выбор, Calibri — безопасный вариант.
Microsoft Windows — самая распространенная операционная система на рынке ПК. Использование Calibri гарантирует, что посетители веб-сайтов смогут без проблем читать HTML-контент.
Roboto
Это популярный выбор из коллекции Google Fonts. Это очень чистый и дружелюбный шрифт с профессиональным и интеллектуальным видом. Он обеспечивает хорошую читаемость как на настольных, так и на мобильных устройствах. Google выбрал его для своей системы материального дизайна, и это шрифт по умолчанию для Android и Chrome.
Arvo
Это геометрический шрифт с засечками и толстыми блочными засечками. Создайте традиционный или современный вид, переключаясь между разными весами и стилями.Выберите обычный, полужирный, курсив или полужирный курсив. Arvo легко читается и подходит для веб-сайтов в различных отраслях.
Verdana
Этот вариант без засечек был специально создан для экранов компьютеров и обеспечивает высокую читаемость. Это свежий взгляд на простой и классический шрифт, который можно использовать для различных веб-сайтов WordPress и печати.
Эксперты по шрифтам подтверждают, что шрифты без засечек легче читать в Интернете. Это делает Verdana разумным выбором для длинных и плоских текстов.
Lato
Lato — это шрифт без засечек, который входит в коллекцию шрифтов Google.
Он имеет дружелюбный, но профессиональный вид, безобидный и легко читаемый. Буквы полукруглые, что делает его одновременно классическим и своеобразным.
ROKKITT
Несколько характерных геометрических шрифтов с засечками начала двадцатого века вдохновили на создание символьных форм этого шрифта.
Rokkitt был создан специально с учетом заголовков и заголовков.Используемый в тексте, он является хорошей альтернативой шрифтам без засечек.
Franklin Gothic
Это еще один многоцелевой шрифт, подходящий для множества различных сценариев. Он чистый, современный, легко читаемый и немного необычный. Это прекрасная альтернатива другим более распространенным шрифтам, таким как Calibri. Это не нарочито, чтобы не отвлекать читателей от вашего контента.
Courier New
Созданный изначально для пишущих машинок, Courier New теперь является одним из самых стандартных компьютерных шрифтов для Windows.Он тоньше и привлекательнее, чем Courier, и может придать вашему сайту ретро-вид.
Montserrat
Это геометрический шрифт без засечек, подходящий для больших заголовков и мелкого текста. Он имеет так называемый «городской вид», подчеркивающий красоту городской типографики. Цифровые агентства часто используют Монтсеррат, поскольку он привлекает миллениальную аудиторию.
Освальд
Освальд — это переработанная версия шрифтов Alternate Gothic. Персонажи были перерисованы, чтобы лучше работать на стандартных цифровых экранах.Это хороший шрифт для использования на компьютерах, планшетах и мобильных телефонах. Это идеальный выбор для заголовков или цитат в пробелах с ограничениями по размеру.
Завершение мыслей о самых простых шрифтах для вашего веб-сайта
В этой статье представлен обзор 20 лучших шрифтов HTML, доступных для вашего онлайн-контента.
Веб-сайт — это первое, что многие клиенты используют, чтобы узнать о вас или пообщаться с вами. Важно не только содержание. То, как представлена информация, произведет на ваших посетителей большое впечатление.Чтобы сделать ваш сайт привлекательным, ему нужен хорошо читаемый и привлекательный шрифт. Он также должен подходить для отрасли и дополнять ваш бренд и сообщение, которое вы передаете.
Если вам понравилось читать эту статью о шрифтах, которые легче всего читать, вам также следует прочитать эту статью:
Альберт lusarczyk
Как соавтор Be Theme, я твердо верю в то, что проектирование требует осторожности и терпения. Я вкладываю свою энергию, время и знания в совершенствование темы для наших более чем 230 000 клиентов.
Какой шрифт наиболее читаемый на экране?
Если есть тема, которая обязательно вызовет у дизайнеров горячие дебаты, то это проблема выбора наилучшего шрифта для чтения на экране. На протяжении большей части жизни в сети дизайнеры не обладали большой гибкостью, когда дело дошло до установки шрифта для своих сайтов, и решения о типе почти всегда сводились к выбору одного или двух веб-шрифтов (небольшая коллекция шрифтов, которые установлен на машинах большинства пользователей) и установка размеров шрифта.
CSS @ font-face в прошлом году привлекла к себе значительное внимание, поскольку браузеры расширили свою поддержку для него, и основные литейщики шрифтов начали разрабатывать веб-лицензии, что сделало возможными такие сервисы, как Typekit. Многие люди не осознают, что @ font-face не новость — на самом деле, Internet Explorer 6, головная боль каждого веб-дизайнера, поддерживал его раньше, чем все остальные.
При внедрении Microsoft было много проблем. Компания ограничила поддержку своего собственного проприетарного формата с защитой DRM, чтобы убедить литейщиков, что дизайнеры не смогут загружать шрифты в свои библиотеки, и тем самым сделать эти премиальные шрифты доступными для скрытных загрузчиков.Вместо того чтобы иметь дело с форматом Microsoft и разрабатывать резервные варианты для всех остальных браузеров, дизайнеры придерживались веб-безопасных шрифтов, а @ font-face оставалась непонятной. Что еще хуже, встроенные шрифты требуют увеличения времени загрузки страницы, и до того, как высокоскоростные соединения стали нормой, это просто не стоило компромисса времени загрузки.
Вот почему до недавнего времени веб-типографика оставалась примитивным искусством — инструментов для работы просто не было. Сейчас все изменилось, и мы можем начать исследование, выходящее за рамки споров о сравнении шрифтов с засечками и без засечек, хотя это хорошее место для начала.
С засечками или без засечек?
Существует два основных типа шрифта: с засечками и без засечек. Шрифт с засечками содержит структурные детали, которые украшают концы линий, используемых для создания буквы или цифры — эти украшения называются засечками. Шрифт без засечек — это именно то, на что он похож — шрифт без засечек.
На изображении ниже вы можете увидеть два шрифта, которые часто считаются одними из самых читаемых в Интернете. Слева — шрифт Georgia с засечками, а справа — шрифт без засечек Helvetica.
В полиграфическом дизайне нам говорят, что шрифты с засечками считаются наиболее читаемыми. Засечки якобы служат помощниками для глаз, плавно перемещая вас от одной буквы к другой. Учитывая эти вековые знания, было бы разумно предположить, что шрифты с засечками также улучшат читаемость на экране, не так ли? Но, как будто это не так, чтобы усложнять жизнь дизайнерам во всем мире.
Когда были распространены экраны с низким разрешением, стало очевидно, что шрифты, предназначенные для печати, не выглядели правильно на экране.Печатные шрифты были векторными, геометрическими инструкциями, детализирующими контур каждого символа, которые хорошо работали для принтеров, которые обычно начинали с разрешения в десять раз выше, чем у экранов компьютеров, и выше. Но когда вы взяли эти шрифты и просмотрели их на экране, способном отображать десятую часть разрешения, оказалось, что пикселей просто не хватило для естественного отображения деталей шрифта.
Чтобы решить эту проблему, дизайнеры шрифтов создали растровые шрифты. Вместо использования векторов, линий, которые можно плавно масштабировать до любого размера, растровые шрифты описывают каждый символ в сетке пикселей.Проблема с этим подходом заключалась в том, что разработчику шрифтов приходилось создавать растровые изображения для каждого размера шрифта, и когда вы пытались использовать неподдерживаемый размер, символы выглядели неровными и неровными. Точно такой же принцип работает, когда вы делаете цифровую фотографию, которая также является растровой, и увеличиваете ее сверх разрешения, с которым она была сделана.
Сегодня наши устройства могут похвастаться экранами с более высоким PPI (пикселем на дюйм), чем когда-либо прежде. На таких устройствах, как iPhone 4, дисплей настолько плотный, что исследования показывают, что отдельные пиксели больше не видны человеческому глазу.
Суть в том, что чем меньше деталей требуется шрифту для четкой передачи символа, тем более читабельным он будет отображаться на более широком диапазоне экранов. К разочарованию дизайнеров, все еще есть люди, использующие дисплеи, которым больше десяти лет, и хороший экранный шрифт не пренебрегает технологиями, которые все еще широко используются. Наши дисплеи становятся все более и более функциональными, но темпы принятия должны наверстать упущенное, прежде чем типографы смогут вздохнуть с облегчением.
Дизайнеры любят спорить на эту тему, но текущий консенсус — по крайней мере, настолько близок, насколько это возможно, — заключается в том, что шрифты без засечек по-прежнему лучше подходят для основного текста на экране, а шрифты с засечками лучше всего использовать для заголовков.Однако для многих пользователей с более новыми дисплеями разница незначительна.
Какой шрифт самый лучший?
Итак, мы знаем, какой шрифт лучше всего смотрится на экране, но как насчет лучшего шрифта для удобочитаемости? Лично я сомневаюсь, что существует какой-то один шрифт, которым можно было бы управлять всеми. Есть шрифты, более подходящие для чтения основного текста, чем другие, и из этой группы вы, вероятно, можете выбрать группу из лучших вариантов, но есть и другие факторы, которые следует учитывать, например, ситуация, в которой используется шрифт, и даже личные вкус.Очевидно, что шрифты, разработанные специально для экрана, будут работать лучше, чем шрифты без засечек, предназначенные для печати.
Как пользователь Mac, мне больше всего нравится начинать новый веб-проект с Helvetica. Часто это только отправная точка, пока я не приму решение, основанное на потребностях проекта, но оно отлично смотрится на экране. Helvetica выглядит менее лестно в Windows с использованием шрифтов по умолчанию, но это нормально — просто установите шрифт без засечек вместо определенных названий шрифтов, и пользователи Mac будут видеть Helvetica, а пользователи Windows — Arial.
Когда мы можем использовать службы @ font-face, такие как Typekit, наши возможности открываются сразу. Например, один из моих любимых читаемых шрифтов в Typekit — это Proxima Nova.
Скриншот с образца Typekit Proxima Nova.Какие гарнитуры самые лучшие? Ну ты нам расскажи.
Мы хотим знать, какие экранные шрифты вам нравятся больше всего и почему. Расскажите о них в комментариях.
18 наиболее разборчивых шрифтов для книг и длинных текстов
Читаемость является приоритетом, когда вы привыкли писать длинные эссе и статьи для своих читателей.Вы тот, кому нужно писать абзацы за абзацами, глубоко погружаться в предмет, чтобы полностью отдать должное теме. Следовательно, вы не можете позволить себе использовать шрифты, которые трудно читать, из-за чего читатель прищуривается или чувствует себя подавленным при прокрутке или перелистывании страниц. Следовательно, вам нужно использовать самые удобочитаемые шрифты для книг и длинных текстов.
Разборчивые шрифты помогают создать яркое визуальное впечатление без ущерба для легкости и легкости чтения.Есть некоторые аспекты, на которые следует обратить внимание при поиске таких разборчивых шрифтов. Во-первых, у любых разборчивых шрифтов для книг и длинных текстов были бы большие фишки. Счетчики — это формы букв, созданные внутри нескольких букв, например O, A, B и других. Пробелы внутри этих букв должны быть значительными. Во-вторых, они должны иметь большую строчную x-высоту. В-третьих, для удобства чтения вы хотите использовать шрифты с тонкими засечками, а не длинные или тяжелые.
Более того, шрифт должен работать, чтобы сливаться с ним и помогать читателям читать контент.Не используйте шрифты, которые затмевают сообщение, так как это будет иметь обратный эффект. Наконец, следует тщательно продумать кернинг шрифтов.
Теперь, когда у нас есть более четкое представление о том, что мы ищем, давайте обсудим некоторые из наиболее разборчивых шрифтов для книг и длинных текстов:
Hawking — один из самых разборчивых шрифтов с уникальными символами. Это плоский шрифт с квадратными буквами. Общий шрифт выглядит современно и рационально.Этот шрифт использует большую высоту по оси x с восходящими элементами для строчных букв, которые превышают высоту заглавной буквы. Это создает синергию между буквами, которая помогает читателям соединять их в слова.
Название соответствует своему назначению; этот шрифт изначально создавался для научных публикаций. Однако он открыт и универсален для использования с любыми книгами или длинными текстами, такими как технические, литературные или журналистские материалы. Шрифт также можно эффективно использовать для заголовков из-за его более тяжелого веса.
Как следует из названия, Vistol Sans Latin Pro — это семейство шрифтов без засечек. Этот разборчивый шрифт имеет 18 вариантов начертания. В нем используется малоконтрастный тон штрихов, что делает его идеальным для печати, заголовков, упаковки, брендинга и публикации.
Шрифт также имеет вариант курсива, чтобы при необходимости выделить определенную часть текста. Этот шрифт настолько легко читается, что его можно использовать для печати размером от 6 пунктов, и при этом его можно будет легко прочитать.
ШрифтыSans-seif, как известно, более удобны для глаз и имеют свои вариации. С другой стороны, шрифты с засечками обычно очень жесткие. Solitas Serif — одно исключение из всех других шрифтов с засечками, так как он разработан, чтобы быть более изогнутыми и более мягкими. Этот разборчивый шрифт можно с легкостью использовать для печати, упаковки и онлайн-контента.
Есть много полезных вариаций, таких как обычный, расширенный и сжатый. Эти варианты открывают перед дизайнерами больше возможностей по оптимизации пространства в соответствии с их требованиями.Этот шрифт также имеет промежуточные значения для книг и длинных текстов. Кроме того, он также имеет жирный шрифт для создания заметного и эффектного заголовка или подзаголовка. Шрифт приятен для глаз, не кажется впечатляющим, утонченным, но изящным.
Newslab — это плоский шрифт с засечками, созданный путем комбинирования трех разных гарнитур — Roble, Andres и Sanchez. Этот разборчивый шрифт гармонично сочетается с каждым элементом гарнитуры, что делает Newslab элегантным шрифтом.Этот шрифт имеет 16 вариаций, 8 значений толщины и поддерживает курсив. Идеально подходит для логотипов, плакатов и неформальных статей. Обычная и курсивная версии доступны бесплатно.
Bebas Neue Pro — это семейство шрифтов с впечатляющим набором стилей, подобранных различными крупными организациями. Они использовали его для множества проектов, от корпоративных документов до упаковки и многого другого.
Шрифт также имеет полурасширенную и расширенную версии.Шрифт начинался как бесплатный шрифт, состоящий только из прописных букв, и приобрел огромную популярность. Это привело к чрезмерному спросу на строчные буквы, которые они обновили в версии Bebas Neue Pro.
Sanchez Condensed Family — это семейство шрифтов с плоскими засечками, квадратной структурой и 12 различными вариациями, позволяющими дизайнерам найти идеальный вес для своих проектов с длинным текстом. Он очень похож на культового Роквелла. Однако у него закругленные края.Это помогает сбалансировать квадратную структуру и придает шрифту ощущение контраста. Это улучшает читаемость шрифта и делает его разборчивым. Обычная и курсивная версия этого шрифта доступна бесплатно.
Merriweather — идеальный шрифт для чтения контента на экранах. Это делает его особенно отличным выбором для шрифтов для электронных книг, таких как Kindle и других платформ. Шрифт имеет сжатые буквы и очень большую высоту по оси x. Шрифт использует современные формы; тем не менее, он по-прежнему дает ощущение традиционного дизайна.Этот шрифт легко читать даже в небольших размерах, он выглядит аккуратно и элегантно.
Pluto Sans — это чистое семейство шрифтов без засечек, основанное на архитектуре Плутона. В нем есть намек на дружеские чувства. Шрифт использует геометрические формы и формы наряду с большой высотой по оси x. Это делает шрифт идеальным для форматов длинного текста и используется для шрифтов меньшего размера, например 8 пунктов, а также для экранов. Шрифт идеально подходит для классического брендинга, логотипов, одежды, упаковки продуктов и видео требований.
SmytheSoft Pro — отличный современный шрифт без засечек. Это отличный разборчивый шрифт как для печати, так и для экрана. У шрифта закругленные концы, оптимальные интервалы и кернинг. Семейство шрифтов поддерживает символы Западной, Восточной и Центральной Европы, а также вьетнамские символы. Кроме того, шрифт имеет пять начертаний курсивом и римским шрифтом: тонкий, светлый, обычный, сверхлегкий и полужирный.
Шрифт имеет огромную высоту по оси x, экономичный, но удобный интервал для прописных букв и ловушек для чернил, что делает его подходящим для условий печати.Курсивные символы также предлагают каллиграфические символы, подобные курсиву. Шрифт имеет более легкий вес, который уменьшен по сравнению с обычным и жирным шрифтом. Это придает шрифту вертикальную перспективу, что позволяет читателям читать с контрастом и уменьшенным оптическим ослеплением.
Saya Serif — это семейство слегка сжатых и тонких шрифтов. Этот шрифт удобочитаем во всех размерах и идеально подходит как для отображения, так и для текста. Saya Serif имеет четкие формы букв и имеет шесть вариантов толщины от тонкого до черного, а также курсив.Шрифт использует сбалансированные формы для использования небольшого размера и элегантные формы для большого размера. Дизайнеры могут создавать впечатляющие дизайны журналов, логотипы и другие элементы, связанные с контентом.
Quincy CF — это шрифт с засечками средней контрастности для удобства чтения. У шрифта есть пять различных толщин и курсив. Он также имеет многоязычную поддержку латиницы и кириллицы. У персонажей высокий рост по x. Общий дизайн был изменен, чтобы сделать общий вид шрифта более плавным, плавным и унифицированным.
Miles — геометрический шрифт без засечек. Он легко читается и полезен для создания заголовков и цитат, а также коротких текстовых фрагментов. Шрифт имеет семь начертаний, символов, альтернативных глифов, а также фигур в старом стиле. Он также поддерживает внешний набор латинских символов. Дизайн шрифта современный, нейтральный и дружелюбный.
Это обычный шрифт с засечками, в котором есть угловые и изогнутые символы. Шрифт имеет четкие и хорошо сбалансированные символы, что делает его удобочитаемым как для небольших, так и для заголовков.Поставляется с четырьмя разными весами, маленькими заглавными буквами и курсивом.
Lato — это шрифт без засечек, который предлагает на выбор более 10 различных стилей. Он чем-то похож на Today Sans и Freight Sans. Идея Lato заключалась в том, что он должен выглядеть прозрачным при использовании в длинных текстах и основных текстах. Однако он также должен отображать оригинальные черты при использовании в качестве заголовков или более крупным шрифтом. В шрифте использованы классические пропорции, которые придают буквам ощущение гармонии и элегантности.Шрифт имеет полукруглые кривые, которые придают шрифту ощущение тепла. Lato имеет сильную строгость, которая усиливает серьезность и стабильность шрифта. Это делает Lato одним из самых удобочитаемых шрифтов для книг и длинных текстов.
Tisa — отличный шрифт, который очень популярен среди нового поколения и графических дизайнеров. Универсальный разборчивый шрифт лучше всего работает как в Интернете, так и в печати. Имеет большую x-высоту. Буквы хорошо разнесены, что способствует разборчивости шрифтов различного размера.Этот шрифт идеально подходит для использования в Behance и других дизайнерских проектах. Это идеальный для использования разборчивый шрифт.
Droid Sans — разборчивый шрифт для книг и расширенного текста. Он разработан с упором на создание открытых форм и нейтрального шрифта, который также выглядит дружелюбно. Шрифт оптимизирован для пользовательских интерфейсов. Следовательно, было бы легче читать на мобильных устройствах, в веб-браузерах и на любом другом дисплее.
Minion Pro имеет классический и старинный шрифт позднего Возрождения.Это была эпоха элегантного, легко читаемого и красивого дизайна. Шрифт сочетает в себе функциональные и эстетические достоинства, что повышает удобочитаемость и придает ему универсальность. Когда дело доходит до написания контента для длинного текста, существует большой типографский контроль.
Ulises — отличный разборчивый шрифт с засечками. Он был вдохновлен шрифтами Brioni, Skilar и Shift. Шрифт можно использовать как для небольшого текста, так и для заголовков, поэтому это очень универсальный шрифт. Это позволяет пользователю использовать глифы, надстрочные символы, отдельные числа, а также дроби.Семейство шрифтов имеет 9 толщин и дополнительный вариант курсива. Этот шрифт с классическими и современными засечками идеально подходит для веб-дизайна, графического дизайна, печатных публикаций и брендинга.
Это были 18 самых разборчивых шрифтов для книг и длинных текстов. Удобочитаемость важна и для небольших частей текста, но для длинного текста она имеет наибольшее значение. Легкость чтения гарантирует, что шрифт останется разборчивым и легким в обработке для читателей. Любой причудливый и сложный шрифт снизит ценность контента, а также станет ошеломляющим для читателей.Это привело бы к тому, что люди почти не просматривали контент или полностью отбрасывали его и переходили к чему-то другому. Следовательно, используя разборчивые шрифты, подобные упомянутым выше, вы можете обеспечить более активных читателей. Это также будет снова и снова возвращать их к вашему контенту, поскольку им было так комфортно читать ваш контент.