Большие шрифты – Шрифты без засечек | Шрифты онлайн

11.10.2019 Разное

Содержание

лучшие из лучших / ua-hosting.company corporate blog / Habr

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

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

Serif fonts

1. Droid Serif

Семейство шрифтов Droid Serif в первую очередь предназначено для удобного чтения на небольших экранах.

2. Butler

Это микс семейств шрифтов Dala Floda & Bodoni. Был создан для того, чтобы немного модернизировать шрифты с засечками. Отлично подходит для плакатов, большого размера книг. В общей сложности семейство Butler содержит 334 символов.

Ссылка для скачивания

3. Arvo

Arvo — это семейство шрифтов, которое подходит как для вывода на дисплей, так и для печати. Разработано Антоном Коовитом для чтения, Arvo в каталоге Google Font — бесплатный открытый шрифт (OFL).

4. Crimson Text

Бесплатное семейство шрифтов, созданное специально для книжного производства с нотками старинных шрифтов Garamond-esque. Crimson Text — разработан немецким дизайнером, проживающим в Торонто, Себастьяном Кош. Crimson — прекрасная альтернатива традиционному Garamond-esque, с выразительным курсивом, прекрасно сочетается с геометрическими засечками, такими как Futura или Avenir.

5. Aleo

Aleo — полукруглый с гладкой структурой шрифт, придающий нотки индивидуальности, но при этом удобочитаемый. Бесплатное семейство шрифтов, которое включает в себя шесть стилей, 3 насыщенности шрифта / weight (Light, Regular и Bold) с соответствующим курсивом. Шрифт был разработан Alessio Laiso.

6. Cormorant

Cormorant — это экстравагантный шрифт с засечками, наследие исторических шрифтов французского пуансониста и издателя Клода Гарамона. Был нарисован вручную Кристианом Тальманом. «Острые резкие засечки, опасно гладкие кривые», такой шрифт лучше всего использовать для заголовков или в текстах больших размеров (плакаты). Читабелен как при выводе на экран, так и в печатном виде. Cormorant поддерживает кириллицу, каждый из стилей представлен в пяти насыщенностях Light, Regular, Medium, Semibold, Bold.

7. Brela

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

Скачать Brela Regular

8. Libre Baskerville

Libre Baskerville — это веб-шрифт, созданный американской фирмой ATF (American Type Founders 1941 год). Шрифт с высокой x, ему свойственна меньшая контрастность, что позволяет использовать его для чтения на экране.

9. Jura

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

10. Fenix

Fénix — это шрифт с засечками и грубыми штрихами, он прекрасен для чтения, для текстов с небольшим размером кегля. Шрифт под названием птицы счастья — работа Фернандо Диаса, дизайнера уругвайского литейного завода TipoType.

11. Luthier

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

Free sans-serif шрифты

12. Aganè

Шрифт Aganè — это чистый без засечек шрифт, разработанный швейцарским графическим дизайнером, специалистом UI Данило де Марко. Свободный для персонального и коммерческого пользования, Aganè — это результат вдохновения такими шрифтами как Noorda Font, FF Transit и Frutiger. Оптимизированный для удобочитаемости даже при небольших размерах кегля. Доступен в 4 насыщенностях: light, regular, bold и extra bold. Aganè является лауреатом премии IF Design 2017 года.

13. Titillium Web

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

14. League Gothic

League Gothic — это сжатый без засечек, вдохновленный классическим шрифтом Alternate Gothic # 1, шрифт изначально был разработанным Моррисом Фуллером Бентоном для American Type Founders Company в 1903 году. Это возрождение старой классики, новая версия забытого старого.

15. Chivo

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

16. Comfortaa

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

17. Noto Sans

Noto Sans (от «No more tofu») относится к семейству бесплатных шрифтов, которое охватывает более 800 языков и оперирует свыше 110 тыс. символами, не пропущен ни один из символов, заложенных в системе Юникод.

18. HK Grotesk Hanken

HK Grotesk — шрифт без засечек, создание которого — продукт вдохновения классическими гротескными шрифтами, такими как Akzidenz Grotesk, Univers, Trade Gothic и Gill Sans. Он был разработан Hanken Design Co с целью создания дружественного и удобочитаемого шрифта, который подходил бы для текста с небольшим кеглем. Недавно была добавлена кириллица.

19. Aileron

Aileron — это универсальный нео-гротескный шрифт без засечек, что-то между Helvetica и Univers. Был создан Sora Sagano, дизайнер компании Tipotype. Он призван обеспечить читателям высокий уровень визуального комфорта.

20. Ubuntu

Этот бесплатный шрифт был специально создан компанией Dalton Maag по заказу Canonical в дополнение к операционной системе Linux для использования в персональных компьютерах, планшетах и смартфонах.

21. Clear Sans

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

22. Source Sans Pro

Выпущенный в 2012 году, Source Sans Pro был первым семейством шрифтов с открытым исходным кодом для Adobe, его популярности можно позавидовать. Это классический гротескный шрифт с простым, непритязательным дизайном разработан дизайнером компании Adobe Паулом Хантом.

Handwriting fonts

23. Nickainley

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

24. Pacifico

Pacifico — это удобный забавный рукописный шрифт, вдохновением послужила американская серф-культура 1950 годов. Этот шрифт с открытым исходным кодом разработан покойным дизайнером Верноном Адамсом, который скончался в прошлом году. Вернон закончил магистратуру по дизайну шрифтов в Университете Рединга и жил в Калифорнии.

25. Cute Punk

Cute Punk — это яркий, молодежный и полностью современный подход к рукописным шрифтам. Это работа Флоу, дизайнера и иллюстратора из Братиславы, Словакия.

26. Futuracha

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

27. Yellowtail

Yellowtail — классический рукописный шрифт, старая школа 1930 годов, таких как Gillies Gothic и Kaufmann. Разработан был типографическим институтом Astigmatic, смесь связующих и несвязанных буквенных форм придает ему уникальный внешний вид и в то же время обеспечивает удобочитаемость.

Винтажные и ретро шрифты (vintage and retro fonts)

28. Cheque

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

29. Bauru

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

30. LOT

LOT — один из самых толстых, крутых, ретро-бесплатных шрифтов. Стилизованные надписи в блогах и рекламе, на плакатах и в журналах в стиле 1970, 1980 годов. LOT — гладкий новый винтажный стиль с коллекцией толстых геометрических букв. Располагает 78 символами, бесплатный шрифт LOT хорош для разработки логотипов, для заголовков.

31. Streetwear

Окунутся в ретро атмосферу? Запросто! Шрифт Streetwear — крутой, смелый шрифт в стиле ретро-моды и -спорта 1960, 1970 годов. Универсальный и веселый одновременно. Подходит для логотипов, плакатов, упаковки и дизайна футболок.

32. Paralines Font

Paralines Font — шрифт в ретро-футуристическом стиле. Здесь своеобразно использованы параллельные линии, такая техника вдохновляет дизайнеров, шрифт подходит для любого проекта, передает настроение 1970 начала 1980 годов.

33. Hamurz

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

Brush fonts

34. Leafy

Leafy — бесплатный ручной работы шрифт. Содержит более 90 символов, нарисован Крисиджанисом Мезулисом. Идеально подходит для любого дизайна.

35. Playlist

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

36. Sophia

Бесплатный шрифт Sophie для декоративного оформления, легкий, дружелюбный и безмолвно-веселый. Рукописный шрифт со сладким декоративным бонусом)

37. Reckless

Reckless — шрифт для поднятия настроения, включает прописные латинские символы. Хорош для создания эффекта акварельных красок для печати и для веб проектов. Был создан российским дизайнером Надей Спасибенко.

38. Kust

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

39. Brux

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

Шрифты в стиле тату (tattoo fonts)

40. Betty

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

41. Angilla

Angilla — чрезвычано свежий и стильный tattoo шрифт, работа шведского дизайнера Måns Grebäck.

42. Serval

Бесплатный шрифт Serval — это жилистый, колючий зверь со своеобразным дизайном.

43. MOM

MOM — это шрифт, в стиле американской старой школьной татуировкой, дань уважения великим художникам-татуировщикам прошлого.

44. Original Gangsta

Бескомпромиссный стиль в каждом символе шрифта Original Gangsta. Нет милосердию, Gangsta — это жесткий шрифт для брутальных надписей.

Шрифты в стиле графити (graffiti fonts)

45. Ruthless Dripping One

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

46. Urban Jungle

Трафареты — это фокус современного уличного искусства. В Urban Jungle смешаны традиционные трафареты с добавлением текстуры, что мгновенно окунает в атмосферу улицы, яростной улицы.

47. Blow Brush

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

48. Sister Spray

Бесплатный шрифт Sister Spray по красивому грязный шрифт с распылителя: буквы, цифры и кучу брызг, пятен и штрихов.

49. Tag Type

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

Необычные шрифты (unusual fonts)

50. Gilbert

Шрифт назван в честь дизайнера-создателя радужного флага Гилберта Бейкера, который умер в 2017 году, он был активистом LGBTQ и художником, известен тем, что создал знаковый флаг радуги. Gilbert доступен в стандартном векторном формате, цветном формате OpenType-SVG и анимированной версии.

51. Jaapokki

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

52. Carioca Bebas

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

53. Le Super Serif

Шрифт Le Super Serif — это редкая вещь: типографский эксперимент голландского дизайнера Тийса Янссена. Модный заглавный шрифт на современный западный лад. Шрифт имеет 88 лигатур и несколько «специальных» альтернативных символов.

54. Pelmeshka

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

55. Tiny Hands

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

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

На правах рекламы.Акция! Только сейчас получите до 4-х месяцев бесплатного пользования VPS (KVM) c выделенными накопителями в Нидерландах и США (конфигурации от VPS (KVM) — E5-2650v4 (6 Cores) / 10GB DDR4 / 240GB SSD или 4TB HDD / 1Gbps 10TB — $29 / месяц и выше, доступны варианты с RAID1 и RAID10), полноценным аналогом выделенных серверов, при заказе на срок 1-12 месяцев, условия акции здесь, cуществующие абоненты могут получить 2 месяца бонусом!

Как построить инфраструктуру корп. класса c применением серверов Dell R730xd Е5-2650 v4 стоимостью 9000 евро за копейки?

habr.com

Поиск «Золотой Середины» / WAYUP

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

Теперь представьте, что было бы, если текст на упаковках был на треть мельче.

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

Но ведь достаточно часто мы реально видим на сайтах мелкий шрифт. И им пишут целые статьи, а не просто оформляют подписи или инфоблоки. Так почему же в веб-дизайне мы так часто ищем способы и возможности уменьшить шрифт? Почему приходится почти каждую страницу принудительно увеличить в масштабе в браузере? Как ко всему этому относятся крупные компании? Где искать «золотую середину»? Много вопросов…много…

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

Большой объем контента

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

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

Но вот что занятно. Хотя это и визуально уменьшает объем содержания, это совсем не означает, что пользователь прочитает от начала и до конца. Считается, что при первом визите на сайт посетители читают в среднем только 28% всего контента, а если читать трудно лично для них, то и того меньше. И это особенно важно учитывать при работе над целевыми страницами, над Landing Page, над целостным содержанием.

Для примера посмотрим на проекты Omegario2016.sport, Longines, Сила граната, Gradprogroup. Каждый из них использует разный подход к размерам шрифта и, соответственно, не все материалы удобно читать. Например, при разрешении 1080р буквы крупные, но строчки настолько близко друг к другу, что приходится концентрироваться и слегка «напрягаться». Если уменьшить размер окна браузера, то размер шрифта тоже скалируется и становится мелким до безобразия. Иные примеры, напротив, обладают статическим размером и типографика более удобна и красива в целом.

Стремление к мобильности

С каждым днем мы осознаем все большую и большую необходимость создавать дизайн сайтов для любителей мобильных устройств. И это еще одна из причин почему шрифт становится в веб-дизайне все меньшим и меньшим. Происходит своеобразное игнорирование создания уникальной типографики для разных по размеру экранов устройств. Иными словами – упрощение, единый вариант для всех. Разумеется, что для тегов «h» и «p» диапазон 20px и меньше для мобильных экранов может показаться привлекательным, но на настольных системах его уже можно с трудом различить.

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

Для наглядности: при большом разрешении и 100% масштабировании окна браузера сравните, как выглядят страницы на Ria.ru, Вести, RBC и Izvestia.ru. Поначалу вы можете сказать: «Они похожи». Когда же начнете читать материалы, смотреть заголовки, осознаете визуальную разницу, влияющую на восприятие и скорость поиска нужного.

Размер – вершина айсберга

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

Высота строки, стили шрифта, кернинг и толщина – каждый из параметров играет свою важную роль в сочетании с выбранным размером шрифта. И дизайнерам приходится уделять время тому, чтобы убедиться в слаженной их работе, в способности шрифта и типографики в целом обеспечить наилучший пользовательский опыт. Подробно на моменте типографики останавливаться не будем, но обратим внимание на проекты Gradprogroup, Polyus, Storyteller, Shiftage, 9r.ru. Все они обладают разной типографикой, которая весьма хорошо «усваивается». Более того, несмотря на то, что иногда шрифт мал по размеру, текст удобно читать ввиду большой ширины между строк, расстоянию между буквами, выбранного стиля.

Крупный шрифт и читаемость

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

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

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

Нужен ли крупный шрифт?

У большого размера шрифта есть явные преимущества. Он увеличивает скорость чтения (исследования IBM/Google и Университета Пайаме Нур). А еще считается, что и на эмоции положительно воздействует. Но так или иначе, крупные, четкие и понятные взору заголовки позволяют быстрее классифицировать спектр разделов для чтения. Люди приходят на новостной портал или блог и ищут что-то конкретное. Если заголовки мелкие, то поиск будет осуществляться утомительно долго. Проекты Новости Яндекс, Политика сегодня, Росбалт, Взгляд яркие примеры того, как крупный шрифт не вредит ни главной странице, ни внутренним.

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

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

Какой он – хороший размер шрифта

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

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

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

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

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

Еще один новостной проект Wired. Стоит уделить ему внимание хотя бы потому, что шрифты используются по-разному. То заголовок создан обычным крупным шрифтом, то жирным и из другого семейства, а иногда заголовок выглядит не крупнее основного материала. Что же мы видим, перейдя на статью? Её удобно читать в разрешении 1080р. Можно просто откинуться на стуле/кресле и читать про Оби-Вана, даже без увеличения масштаба страницы. Более того, выделения созданы другим шрифтом, а потому взгляд концентрируется на этом и весь контент не сливается.

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

Не менее интересны будут сайты: The New York Times, Chekotin, Otpbank, RD Construction, Kerama-orel, Бикод, Crossproduction. Все они в той или иной степени обладают тем размером шрифта, которым удобно читать разным людям.

Выводы

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

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

Универсального рецепта нет и быть не может. Но «золотая середина» найдётся там, где дизайн будет органичен и лаконичен. Там, где любой из ваших знакомых скажет: понятно, четко, я увидел и с первого раза понял, что и где находится.

wayup.in

Руководство по 10 качествам шрифтов и их применению в дизайне

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

1. Насыщенность

Жирность (Weight) шрифта мы замечаем в первую очередь и в любых условиях. Основные типы насыщенности: светлый, нормальный и жирный. Нормальные начертания (Regular) эмоционально нейтральны, на них меньше всего влияют оптические искажения или плохая резкость. Лучше всего распознается графема, поэтому нормальная насыщенность идеальна для чтения. Более эмоционально значимыми являются светлые и жирные начертания, передающие гамму ощущений от робкой деликатности до настойчивой грубости.

Начертания Thin, Regular, Black гарнитуры Kazimir Text.

Тонкие начертания (Thin, Light) приятно рассматривать как линейный рисунок. Такая надпись не привлечет внимания, если вы сами этого не захотите, ее можно «выключить» просто отведя взгляд. Отсюда ощущение деликатности и бережности. Не удивительно, что такие начертания распространены в косметической отрасли и во всем, что близко к телу, от белья до носимых гаджетов.

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

Жирные начертания (Bold) созданы для привлечения внимания к коротким надписям. Читать их не очень удобно, но у вас нет выбора. Ведь уделив много внимания предмету, ваш мозг узнает о нем как можно больше.

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

2. Ширина

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

Сверхузкий шрифт – Reforma Grotesk Medium, шрифт нормальной ширины – Pragmatica Book, сверхширокий шрифт – Europe Extended.

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

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

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

3. Контраст

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

Неконтрастный шрифт – Stem, шрифт со средним контрастом – PT Serif, максимальный контраст – DietDidot.

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

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

4. Высота строчных

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

Низкие строчные – шрифт Metropol, средние строчные – шрифт Orbi Sans, высокие строчные – шрифт Hermes.

При среднем отношении (от 2/3 до 3/4) буквы верхнего и нижнего регистра сохраняют баланс сходства и различия, что позволяет легко находить начало предложения, но не отвлекает от чтения. Эта умеренность, вместе с другими свойствами, делает шрифт удобным для работы в тексте.

Маленькая высота строчных (1/2 и меньше) создает серьезное различие между буквами внутри одного шрифта. Шрифт становится в два раза разнообразнее и интереснее, чем его аналог со средним значением. Чем больше эта разница, тем лучше передается экстраверсия, музыкальность, артистизм. Эти качества отлично подходят для небольших личных или художественных текстов: стихов, поздравлений, приглашений, афиш.

Крупные строчные (Больше 3/4) делают шрифт более однородным (большие и маленькие буквы похожи между собой), таким шрифтом можно набрать больше текста. За счет более мелких заглавных и незначительных выносных элементов, строчки текста мало взаимодействуют с окружающим пространством. Это шрифты-интроверты, несущие ощущение стабильности, защищенности, но им иногда не хватает дружелюбия.

5. Скругление углов

Пересечения и соединения штрихов неизбежно образуют углы. Прямые, как в T, H, E, или острые, как в A, V, Z, N. Также конец любого штриха имеет свое очертание: заостренное, прямоугольное или скругленное. Углы, пересечения и края являются естественными визуальными раздражителями. Каждый угол нужно заметить и сфокусироваться, без этого навыка наши предки постоянно натыкались бы на острые камни и ветки. Поэтому, чем острее углы в надписи, тем легче она привлекает внимание.

Заостренные углы – шрифт Acsioma, прямые углы – шрифт TT Souses, скругленные углы – шрифт Sans Rounded.

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

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

6. Засечки и бруски

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

Вогнутые засечки – шрифт Lazurski, линейные засечки – шрифт Petersburg, брусковые засечки – шрифт Pragmatica Slabserif.

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

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

Шрифт Trajan в кино

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

7. Курсив и наклон

Курсивные и наклонные начертания часто встречаются в современных шрифтовых семействах в дополнение к прямым. При этом они имеют различные функции и смысл.

Курсивное начертание – шрифт Kudryashev Italic, наклонное начертание – шрифт Pragmatica Italic.

Курсивные начертания (Italic) отличаются от прямых более рукописной формой, потому что они произошли от распространенного итальянского почерка эпохи Возрождения. С XVI века и до наших дней, италик используется для выделений в тексте. Наклон указывает на смену интонации при чтении. Кроме того, в рукописной форме букв меньше прямых линий и больше изящных изгибов, что придает выделенной фразе приятный вежливый характер. Все, что напоминает почерк, кажется более личным и доверительным, чем ровные «печатные» буквы, поэтому в большинстве поздравлений и приглашений используются рукописные шрифты или близкие к рукописным курсивные начертания шрифтов с засечками.

Наклонные начертания (Oblique) получаются путем скоса прямых букв и служат в основном для придания надписи ощущения скорости, но иногда и для выделений в тексте. После скоса все вертикальные линии становятся наклонными, даже круглые формы под наклоном теряют часть уникальности. Более монотонная надпись, как бы покосившаяся от ветра, воспринимается как нечто быстрое и стремительное. Поэтому наклонные шрифты – отличный выбор для спортивной или автомобильной тематики.

8. Геометрия

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

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

Гуманистический гротеск – шрифт Leksa Sans, геометрический гротеск – шрифт Futura PT, модульный шрифт – Robotesqa 4f.

Геометрическое построение с нуля, вопреки опыту и традиции, характерно для XX века. Первые геометрические шрифты появились в 1920-1930 годах под влиянием конструктивизма. Все буквы строились из простых геометрических форм: круга, квадрата, треугольника. Чаще всего это были шрифты без засечек, или засечки заменялись брусками. Сегодня их называют геометрические гротески и геометрические брусковые.

Идеи научного прогресса, стандартизации, упрощения, неизбежно привели к созданию новой формы шрифта. Простой чертеж способен полностью заменить рукописное и словолитное наследие, даже общепринятые очертания букв (графемы) могут измениться. Например, круглые О, С, D могут стать квадратными и весь шрифт может строиться из универсальных модулей. При этом форма букв потеряет влияние на читабельность и образ. Все будет зависеть от формы модуля: дуги, многоугольника, квадрата. Например, модульные шрифты эпохи Звездных Войн, Терминатора и Робокопа, своей нерукотворной формой изображают фантастическое будущее, с космическими полетами, умными машинами и прочими технологиями, которыми так увлечены люди с середины XX века.

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

Геометрические гротески в современных логотипах

Геометрические гротески актуальны и сегодня, взять хотя бы логотип Google 2015 года. Шрифтовая культура 2010-х повторно обращается к опыту модернизма, переосмысливая его. Возвращается мода на геометрические шрифты, которые, благодаря высокому разрешению экранов и гладкости бумаги, выглядят идеально точными, лаконичными и читабельность сохраняется. Такие шрифты хорошо решают задачи глобальных корпораций, СМИ и даже большой политики.

9. Статика и динамика

Рисунок букв шрифта может быть статичным или динамичным. Чем больше горизонтальных и вертикальных линий в строке, тем более статичным является шрифт. А линии и дуги, не совпадающие с горизонталью строки, придают шрифту динамичности. На динамику влияют: наклон оси наплыва у букв o, e, c, p, b, d, наклон перекладины е, окончания штрихов букв s, c, a и форма засечек. Все эти элементы могут быть прямыми, диагональными или изогнутыми. Курсивное или наклонное начертание делает рисунок еще более динамичным.

Статичный рисунок – шрифт Din PT, динамичный рисунок – шрифт Venetian, максимум динамики – шрифт Diana.

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

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

10. Открытость

Разомкнутые буквы, например c, могут быть сильно открыты, умеренно открыты, или практически закрыты. Открытость (апертура), влияет на форму букв: c, a, e, s, з, э, є. Очень открытые буквы компактнее, чем закрытые, от их ширины во многом зависит емкость шрифта. Частотный анализ языков показывает, что буквы e, a, s, c составляют более 30% английского языка, а буквы е, а, с, з – это почти 25% русского. Поэтому, за счет большей апертуры и легкого спрямления овальных элементов: о, p, d, b, q можно получить очень компактный шрифт, который не будет выглядеть сжатым и сохранит хорошую читабельность, например как PT Sans.

Открытый шрифт – PT Sans, средняя апертура – шрифт Textbook New, закрытый шрифт – Helvetica.

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

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

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

Резюме

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

Если собрать все шрифтовые качества в одном списке, то получится что-то вроде меню в голландском баре:

Насыщенность влияет на уровень принуждения к контакту: от нежной деликатности (Thin) до грубой настойчивости (Black).

Ширина влияет на срочность сообщения: от кричащего заголовка (Extra Condensed) до долгожданного появления из-за горизонта (Extra Expanded).

Контраст регулирует уровень артистизма высказывания: от синтезатора речи (Нулевой контраст) до актрисы Большого Театра (Максимальный контраст).

Высота строчных связана с желанием впечатлить зрителя: от любовного письма (мелкие строчные) до равнодушной таблички “Перерыв” (крупные строчные).

Скругление углов влияет на уровень нежности: от спящих младенцев (Сильное скругление) до шумных подростков (Заострение).

Засечки и бруски создают культурный контекст: от идеализма вечной классики (Засечки) до прагматизма заводской штамповки (Бруски).

Курсив и наклон просит минутку внимания: чтобы вежливо уточнить (Italic) или срочно сообщить (Oblique).

Геометрия отражает жизненные ценности: от уважения к особенностям человека (Гуманистические шрифты) до восхищения футуристическими машинами (Геометрические и Модульные шрифты).

Статика и динамика передают индивидуальность и богатство внутреннего мира: от нейтральной Гельветики (Статичный рисунок) до старостильных антикв, содержащих пафос своего времени и страны (Динамичный рисунок).

Открытость влияет на общительность и прогрессивность: от либерального экстраверта (Открытые шрифты) до консервативного защитника границ (Закрытые шрифты).

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

Подписывайтесь на наш блог

Получайте лучшие статьи по фотографии и бонусы доступные только подписчикам