Лаконичные шрифты: 75 лучших бесплатных шрифтов для дизайнеров — Дмитрий Оноприенко — Хайп

Зарегистрируйтесь и собирайте свою коллекцию шрифтов.

20 бесплатных минималистичных шрифтов

Ищите идеи для нового проекта? Хотите использовать Hero Header, а какой лучше всего шрифт подойдет — не знаете?

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

Кстати, также изучите 50 лучших бесплатных кириллических шрифтов 2014 года.

Universe

Автор: Vincent Labonne

Скачать шрифт Universe

Equal

Автор: Isaac Taracks

Скачать шрифт Equal

Facile Sans

Автор: Twicolabs Design

Скачать шрифт Facile Sans

Thin Line

Автор: Gatis Vilaks

Скачать шрифт Thin Line

Regina

Автор: Santino Calvo

Скачать шрифт Regina

Silent Lips

Автор: Vincent Labonne

Скачать шрифт Silent Lips

Roboto 2014

Автор: Christian Robertson

Скачать шрифт Roboto 2014

Landscape

Автор: Gita Elek

Скачать шрифт Landscape

PT Sans

Автор: Paratype

Скачать шрифт PT Sans

Fira Sans

Автор: Mozilla

Скачать шрифт Fira Sans

Fox & CatJo

Автор: Aguilar

Скачать шрифт Fox & CatJo

Niles front

Автор: Nail Husyainov

Скачать шрифт Niles front

Uni Sans

Автор: Fontfabric

Скачать шрифт Uni Sans

REN

Автор: Andreas Leonidou

Скачать шрифт REN

Rise

Автор: Benito Ruiz

Скачать шрифт Rise

Form

Автор: Blugraphic

Скачать шрифт Form

Dilem Handwritten

Автор: Dilem Akiner

Скачать шрифт Dilem Handwritten

Separator

Автор: Simon Stratford

Скачать шрифт Separator

Focus

Автор: Egidio Filippetti

Скачать шрифт Focus

Le Super Serif

Автор: SuperBruut

Скачать шрифт Le Super Serif

Related posts:

1. Бесплатные кириллические шрифты #87
2. Бесплатные кириллические шрифты #88
3. Бесплатные кириллические шрифты #89
4. Бесплатные кириллические шрифты #90

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

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

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

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

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

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

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

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

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

2. Ширина

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

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

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

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

3. Контраст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

8. Геометрия

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Резюме

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

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

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

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

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

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

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

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

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

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

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

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

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

Автор: Евгений Садко

Источник: blog.depositphotos.com

Двадцатка лучших веб-шрифтов / Хабр

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Спонсор перевода: Студия Айкен*

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

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

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

По этой причине почти каждый из двадцати ниже представленных шрифтов имеет свой платный вариант. Также представлены бесплатные версии из так называемого «шрифтохранилища» Typekit.

Добавим, что мы сосредоточили свое внимание исключительно на шрифтах, регулярно используемых в сети. Так что опрокиньтесь на спину и откройте для себя 20 шрифтов, которые вы непременно захотите использовать снова и снова…

20. Avenir

Дизайн Avenir’a разработан на основе вездесущего шрифта Futura (который был задуман как «Die Schrift für die Neue Zeit» — «Шрифт Нового времени»). Однако, по словам дизайнера Адриана Фрутигера, в шрифте Avenir заключено гораздо больше человечности. Несмотря на свою популярность в корпоративных кругах, его округлые геометрические формы и тонкая индивидуальность придадут дружественную улыбку даже самому серьезному содержимому.

Несколько лет спустя Акира Кобаяши завершила Avenir Next, шрифт, который стал усовершенствованной версией оригинала (в новую версию добавили курсив и капитель.)

19. FF Kava

Бесплатная версия шрифта вышла в свет во времена, когда поддержка браузерами правила @font-face была широко распространена, чем и заслужила свою популярность среди дизайнеров. В результате чего молодой немецкий дизайнер Янон попал в поле зрения одного из самых крупных в мире производителей цифровых шрифтов — компании FontShop FSI, что позже привело к рождению профессиональной версии данного шрифта.

18. Times New Roman

Каждый, кто создает списки на подобие нашего, не забудет об этом шрифте. Вероятно, самый распространенный шрифт. Разработан дизайнерами Стенли Морисоном и Виктором Лардентом.

17. Bree

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

Bree является одним из немногих шрифтов, которые появились на свет в результате коллективной работы двух человек: Жозе Скаглионе и Вероники Буриан, студентов факультета Полиграфического Дизайна Британского Университета Reading. Который, в свою очередь, считается одним из лучших учебных заведений мира, подготавливающий талантливых полиграфических дизайнеров.

16. FF Trixie

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

15. Centro Sans pro

Большое количество супер-семейств позволяет дизайнерам создавать смешанные виды шрифтов, где serif переплетается с sans serif. Это делается для улучшения читабельности и внешнего вида букв, одновременно. Шрифт Centro Sans pro и является одним из представителей таких супер-семейств.

14. Fedra Sans

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

Стоит заметить, что данный проект приостанавливался и запускался несколько раз: то заказчик решит отменить его, то начнет колебаться, то и вовсе украдут оборудование из офиса разработчика. Но благодаря дизайнеру Петеру Биляку удалось не только закончить, но и значительно улучшить проект. В результате чего получился во многом универсальный шрифт.

13. Museo Slab

Оригинальная версия Museo крайне популярна среди дизайнеров и является на половину бесплатной. Шрифт принадлежит к формату Opentype. Имеет поддержку большого количества языков.

12. Clarendon URW

Классический британский шрифт с засечками (slab serif), без которого не обойдется ни один подобный список. Усовершенствованный Германом Эйденбенцом, он включает в себя несколько типов плотности и начертаний.

11. Proxima Nova

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

10. FF Unit Slab

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

09. Calluna

Появился на свет в качестве эксперимента над ранней версией Museo Slab и Calluna и стал первым серьезным шрифтом в карьере дизайнера Жоса Буйвенги.

Как и другие шрифты Жоса, он наделен многими свойствами Opentype формата и имеет бесплатную версию, доступную для пользователей.

08. Ronnia Condensed

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

07. Droid Sans

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

06. FF Tisa

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

05. FF DIN

Семейство: Sans serif
Дизайнер: Albert-Jan Pool
Скачать или купить: Typekit, FontShop
Современный шрифт, разработанный голландским дизайнером. Аббревиатура «DIN», в переводе с немецкого означает «Немецкий Институт Нормирования». Изначально использовался как текст на дорожных знаках и номерах квартир. Но вот уже на протяжении многих лет его сугубо деловые геометрические формы украшают немецкий веб-дизайн. В 1995 году был обновлен Альбертом-Яном Пулом, обновление включило в себя больше стилистических вариантов, а также новый формат DIN Rounded.

04. Helvetica

Кажется, невозможно обсуждать предмет типографии без упоминания Helvetica. Шрифт заслужил статус легенды благодаря тому, что его использует чуть ли не каждый дизайнер в мире. Его имя и стиль известны общественности.

Helvetica был разработан, чтобы создать конкуренцию шрифту Akzidenz-Grotesk, и его первоначальным названием было — Die Neue Haas Grotesk. Шрифт олицетворяет Швейцарский стиль графического дизайна из далеких 1950-х. Но его широкое применение во всех формах дизайна привело к тому, что он в некоторой степени «приелся», поэтому и было разработано еще несколько его под-форм, таких как Arial. Тем не менее, он остается современной классикой.

03. Alternate Gothic No.1

Дизайнер: Morris Fuller Benton

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

Стал чрезвычайно популярен после того как Студия дизайна «The League of Moveable Type» создала его обновленную версию с открытыми исходниками.

02. FF Meta Serif

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

01. Georgia

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

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

Впервые эта подборка была опубликована в .net Issue 208

* Мало что из этих шрифтов есть для кириллицы, поэтому эта подборка больше подойдет для «аутсорсеров». Будем надеятся, что скоро появится хоть часть этих и не только шрифтов для славянских языков на кириллице.

P.S. Для кого интересны только кириллические веб-шрифты, посмотрите вот эту подборку: lyncis.info/en/post/274

15 безопасных веб-шрифтов

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

Если взять любой шрифт в Google Fonts, например Open Sans, или Droid Serif, или Лато, экспортировать код и вставить его на страницы сайта, то такая процедура займет минимум времени и будет бесплатна. Но подводные камни есть везде, и шрифты не исключение.

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

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

Устройства на базе Windows могут иметь одну группу,  MacOS — другую, а в мобильных гаджетах на Android используется вообще третья группа шрифтов.

В веб-дизайне есть понятие «безопасные шрифты». Ими могут быть все стандартные, которые установлены в операционных системах (Windows, MacOS, Android, а также Unix и Linux).

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

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

Times New Roman является стандартом для шрифтов с засечками, как Arial для шрифтов без засечек. Один из самых популярных на устройствах с Windows и представляет собой новую вариацию старого шрифта Times, использовавшегося при наборе одноименного печатного издания. Его также любят использовать для печатных текстов и многие офисные документы набраны именно им.

Эта гарнитура  не нуждается в представлении. Любимая дизайнерами, она разработана в 1957 году швейцарским типографом Максом Мидингером при помощи Эдуарда Хоффмана и изначально называлась Haas-Grotesk. Четкая и лаконичная форма шрифта подчеркивается огромной высотой знаков, что позволяет видеть надписи издалека, а также небольшим интервалом между буквами. При использовании в вебе же важна геометрическая четкость Гельветики, позволяющая строить уверенные шрифтовые композиции.

Courier New, похожий на Times New Roman, является разновидностью еще одной классики, о которой напишем ниже. Он является моноширинным шрифтом (в отличие от шрифта с засечками и без засечек, которые мы только что видели). Это значит, что все знаки шрифта имеют одинаковую ширину, которая не меняется при масштабировании. 

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

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

7. Georgia

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

Garamond — также шрифт старой школы, восходящий к стилям, использовавшихся в Париже 16 века. Эта новая и улучшенная версия была представлена ​​и включена в состав большинства устройств Windows. А Apple пошла еще дальше, и в 1984 году, для брендинга серии Макинтошей, разработала собственный вариант Гарамона под названием “Apple Garamond”.

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

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

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

Относится к шрифтам без засечек. Он широко использовался как альтернатива Arial и был шрифтом по умолчанию в некоторых  ранних версиях операционных систем, таких как Windows 2000, Windows XP и Windows Server 2003.

Ариал Блэк — это более крупная и дерзкая версия базового Arial. Как ни странно, он также имеет схожее начертание с Helvetica. Почему это важно? Чтобы получилось  использовать его вместо Helvetica и печатать, не платя за лицензию. 

14. Comic Sans MS

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

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

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

Кириллица в Google Fonts: гуманистические гротески

Эксперты

• Михаил Струков
• шрифтовой дизайнер, выпускник курса Ильи Рудермана в БВШД и Плантиновского института типографики. Сотрудничает с CSTM Fonts и агентством Samarskaya & Partners

Дисклеймер

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

Что такое гуманистические гротески?

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

Оглавление

Стив Мэттесон

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

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

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

Есть и зауженный вариант шрифта, Open Sans Condensed. Длины выносных элементов и прочие вертикальные метрики остались неизменными относительно регулярного начертания. Это удобно, если нужно сочетать начертания — но из-за этого, вероятно, не получится поставить плотный интерлиньяж, органичный для зауженного шрифта.

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

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

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

Проблемы курсива тоже проявляются в зависимости от насыщенности: с набором веса ж становится более сбалансированной, а вот ы — напротив, слишком широкой и с недостаточным объёмом овала (та же проблема и у прямых знаков). У всех курсивных начертаний — очень короткое плечо ц и щ.

В Open Sans Condensed перекочевали все перечисленные проблемы, а кое-что стало ещё хуже — например, длина свисающих элементов д.

Наш совет

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

К оглавлению

Александра Королькова, Ольга Умпелева, Владимир Ефимов

Часть общедоступной системы Public Type, шрифт поддерживает кириллицу для более чем семидесяти языков. У PT Sans есть все признаки гуманистического гротеска: тут и заметное влияние рукописных форм, и динамичные овалы. Тем не менее шрифт довольно нейтральный и универсальный.

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

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

Подсемейства PT Sans Narrow и PT Sans Caption, состоящие только из прямых начертаний, предназначены для более ёмкого набора и работы в мелких кеглях соответственно. В версии Caption выше и шире строчные знаки, более выраженные компенсаторы — это действительно улучшает читаемость шрифта в небольших размерах или при низком качестве печати.

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

Наш совет

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

К оглавлению

Эрик Шпикераман, Ральф дю Карруа

Шрифт разработан для операционной системы Firefox OS. Дизайн основан на бестселлере FF Meta Эрика Шпикерамана, но Fira шире, жирнее, строчные выше, расстояние между знаками больше, а формы лаконичнее — всё это для использования на экране, в том числе в мелких кеглях. «Мете» шрифт обязан характером — он нейтральный, и не столько из-за дизайна (достаточно яркого самого по себе), сколько из-за трёх десятилетий активного использования.

Практика Шрифт приемлемого качества, но технически небезупречный. В частности, есть вопросы к кернингу: например, в традиционном тестовом слове Hamburgefonts сочетание rge выглядит слишком тёмным, в нём не хватает воздуха.

Начертания У Fira настоящий курсив, и он тоже похож на курсив Meta.

Есть два дополнительных семейства, конструктивно и по набору начертаний идентичных основному, — Fira Sans Condensed и Extra Condensed.

Кириллица В работе над кириллицей, судя по всему, тоже вдохновлялись «Метой» — там всё тоже далеко не идеально, но в «Фире» замечания возникают практически к каждому знаку (в некоторых случаях — весьма серьёзные).

Прописной Б досталась слишком короткая верхушка. Та же проблема и у строчной б — кроме того, штрих неловко изломан, а в его окончании не хватает массы. Лл никак не может опереться на левую ногу, у которой проблемы и с формой, и с размерами. Похожие проблемы у Дд: левый штрих неудачно воткнулся контрастным местом в площадку. Очень толстая — до намёка на обратный контраст — диагональ в Ии делает знак слишком тёмным.

Непонятно, чем обусловлена разная динамика кривых в строчной и прописной Чч — ни одна из них не выглядит хорошо. Развесистая, широкая и неуклюжая ф. Тему неправильного обратного контраста продолжает кратка над Йй — это решение скопировано из «Меты», где обратный контраст также можно найти и в латинице (у).

Наш совет

При выборе шрифта имейте в виду, что Fira Sans очень похож на FF Meta, — само по себе это не хорошо и не плохо, но «Мета» очень широко используется уже тридцать лет. И, пожалуйста, не используйте кириллицу — она, к сожалению, совсем не получилась.

К оглавлению

Dalton Maag

Дефолтный шрифт операционной системы Ubuntu — гуманистический гротеск из категории «без шпор» (spurless — речь о характерном соединении арок и вертикальных штрихов в таких буквах, как m или n).

После выпуска Ubuntu (2010) критики отмечали, что шрифт похож на DTL Prokyon, вышедший десятилетием ранее. Идея таких арочных конструкций не оригинальна, она появилась ещё в эпоху ар-деко, — но сходство между этими шрифтами действительно заметно.

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

Начертания Курсив не зависит от прямого начертания, что ожидаемо для гуманистического гротеска. Кое-где соображения читабельности взяли верх над общей графической идеей: в нижней части a и u всё-таки появились «шпоры».

В отдельный шрифт выделено единственное узкое начертание, Ubuntu Condensed. В нём сохранены конструкции знаков и вертикальные пропорции, а также увеличены межбуквенные расстояния для сохранения более светлой текстуры в наборе.

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

Очень размашистым, особенно в насыщенных начертаниях, выглядит левый штрих Лл. У строчной я мелковата голова и слишком далеко отставлена нога. Далековато улетел и хвост У — такая размашистость не совпадает с характером латиницы. В светлом начертании проблемы я усугубляются, а ещё становится заметно, что коротковаты плечи у свисающих элементов д, ц, щ. С ростом насыщенности становится очевидной недостаточная компенсация диагоналей Мм: они проявляют признаки обратного контраста.

Есть проблемы в наборе на украинском языке — не учтены характерные сочетания ії и її, для которых правильно было бы модифицировать диакритику.

Наш совет

Для каждого начертания характерен свой набор недостатков в кириллице, но яркий характер Ubuntu их немного нивелирует.

К оглавлению

Пол Хант

Шрифт выпущен компанией Adobe. Автор вдохновлялся работами Морриса Фуллера Бентона (Franklin Gothic и News Gothic), благодаря этому у шрифта отчётливо американский характер.

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

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

Начертания У Source Sans настоящий курсив — благодаря простым конструкциям он выглядит даже лаконичнее прямого начертания.

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

Проблемы возникают в привычных местах: слишком большой наклон левого штриха Лл и Дд (и при этом разный у строчных и прописных букв). К тому же у Дд неуверенное положение на платформе и слишком длинные ноги — тут неудачно более-менее всё. Конструкция Кк старомодная и слишком сложная — из-за неё слишком развесистой вышла и Жж. Широковатыми для такого компактного шрифта выглядят Ыы.

Объём верхней части Ч маловат, а верхний горизонтальный штрих в Ъъ слишком длинный. Яя очень смело отставили ногу — R делает это сдержаннее. Очень контрастным и большим выглядит кириллическое бреве, даже несмотря на то что в шрифте в целом крупная диакритика.

Наш совет

Source Sans Pro подойдёт для работы в условиях дефицита места, но он очень светлый, так что будьте аккуратнее с маленьким интерлиньяжем. Кириллицу лучше обходить стороной.

К оглавлению

Google

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

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

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

Кириллица У кириллицы можно выделить типичный набор ошибок — в характере и динамике, а также в исполнении и нюансах.

Размашистая диагональ в Дд — намного динамичнее, чем то предполагает латиница. Вдобавок у этой буквы слишком длинные ноги — та же проблема у Цц и Щщ. Слишком компенсированный, маленький и ломаный овал, и ещё более ломаный и длинный верхний штрих б. Широкие cтрочные в, ы — у последней ещё и недостаточный объём полуовала (то же верно для ь, ъ). Кривая ч слишком резко уходит вверх в соединении со стойкой.

Слишком далеко влево отлетело нижнее окончание У, странные контрастные отношения штрихов в л, а взаимное расположение Ул вызывает вопросы к кернингу. Слишком толстая диагональ Ии, да и вообще эта буква слишком широкая, особенно в жирном начертании. Плохо распределены роли элементов Я: овалу не хватает объёма, а нога, напротив, отставлена слишком активно. С набором веса усугубляются проблемы Ыы.

Наш совет

Практичный Noto Sans может быть полезен для многоязычного набора, но для работы с кириллицей стоит поискать альтернативы — одни и те же ошибки повторяются во всех начертаниях.

К оглавлению

Натанаэль Гама

Развитие шрифта Exo: ко второй версии он был перерисован, расширены знаковый состав и языковая поддержка. Автор классифицирует шрифт как геометрический — но это скорее гуманистический гротеск, которому придали футуристический характер за счёт геометризации форм.

Практика В шрифте открытые знаки, что вместе с приквадраченностью — увеличенным внутрибуквенным пространством — помогает читаемости в мелких размерах. Ряд знаков демонстрирует гуманистическую динамику, например полуовалы в b или q, — при этом в o или s такого характера уже нет, будто это буквы из другого шрифта. В шрифте один набор пропорциональных цифр, несколько готовых дробей, полные комплекты числителей и знаменателей для самостоятельной сборки, есть основные лигатуры и знаки валют.

Начертания Настоящий курсив с независимыми от прямого начертания конструкциями и характерной формой овалов. Подчёркивает гуманистическую природу Exo 2 и обеспечивает хороший контраст в наборе.

Кириллица Кириллица отличается от латинской части по характеру и вносит ещё больше эклектики: она гораздо мягче и куда менее технологичная.

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

Ветвистая Кк и ещё более развесистая, широкая Жж — конструкция, часто встречающаяся в неудачных кириллизациях гротесков. У б — лёгкое и ломаное верхнее окончание. Ещё одна типичная ошибка — копирование динамики арок n и m в графику Чч: получился очень резкий угол и задранное место соединения штрихов.

Наш совет

Exo 2 хорошо оптимизирован для работы в мелких размерах. Но в кириллице не удалось передать характер шрифта — да и грубых ошибок в буквах столько, что её вряд ли можно рекомендовать к использованию.

К оглавлению

Хуан Пабло дель Перал

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

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

Начертания Курсив очень острый и тоже явно вдохновлён ренессансными образцами, с характерными треугольными формами полуовалов и арок — сильно отличается от прямого начертания рисунком и сближенными пропорциями знаков.

Капитель вынесена в отдельное семейство Alegreya Sans SC.

Кириллица Характер кириллицы совпадает с латиницей. Многих типичных ошибок удалось избежать, однако проблемы с рисунком знаков всё-таки есть.

Лл и Дд — узкие, с неоптимальным распределением контраста. Дд ещё и неустойчивая, с явным перекосом вправо. Верхний штрих б — и слишком длинный, и слишком ломаный.

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

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

В кириллической капители в роли У выступает латинская Y — результат механического копирования логики строчных знаков, где их дизайн идентичен.

Наш совет

Alegreya Sans хорошо работает в крупных и средних кеглях. Но к кириллице нужно подходить с большой осторожностью — как минимум из-за технических ошибок. Кириллическую капитель и вовсе не использовать ни в коем случае.

К оглавлению

Андрей Шевченко

У Arsenal высокий контраст, придающий характеру шрифта классический оттенок (контрастные гротески также называют ленточными антиквами). В 2011 году шрифт победил на конкурсе «Мистецького арсенала» в Киеве.

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

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

Кириллица В «Арсенале» крепкая и качественная кириллица, она выглядит естественно и соответствует латинице по характеру. Есть и болгарские варианты знаков.

При внимательном рассмотрении Ч кажется узкой, а Ю — наоборот, широкой, с недостаточно компенсированным овалом. Очень динамичная нога в Лл, а её окончание просит дополнительной массы. Впрочем, неубедительные окончания тонких штрихов, лишённых засечек, — проблема многих контрастных гротесков.

Наш совет

Действительно качественная кириллица. Более уместным выглядит использование Arsenal в заголовках и крупнокегельном наборе.

К оглавлению

SIL (Летний институт лингвистики), Виктор Голтни, Анни Олсен

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

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

Практика У «Андики» качественные кривые, большой знаковый объём и совсем нет кернинга.

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

Лл — при всей динамике шрифта, с левым штрихом всё же перебор, он улетел. Очень широкая Ии с обратным контрастом. Также перебор с ширинами ы и з. Старомодные неуклюжие Яя и Кк. Плохо выглядит ломаный хвост в б.

Обратный контраст в диагоналях Мм. Непомерно длинные свисающие элементы в Дд, Цц, Щщ и других знаках.

По какой-то причине для кириллической и латинской y используются разные конструкции, при этом в кириллице у более лаконичная (в отличие от к).

Наш совет

Латиница качественная, но кириллицу Andika лучше не использовать. Особенно для обучения чтению: читать ребёнок, конечно, научится, но заодно испортит себе вкус.

К оглавлению

Андрей Панов

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

Практика При внимательном рассмотрении становятся очевидными технические недостатки: у него вялые и ломаные контуры, не последовательна работа с контрастом и толщинами штрихов — например, они различаются в арках m.

Начертания Ещё более заметными эти проблемы становятся в курсиве — он настоящий, с выраженной динамикой, — особенно в овальных элементах. Есть вопросы к компенсациям толщин: часть штрихов при наклоне знаков стала излишне тонкой, и это не везде скомпенсировано. Очевидны проблемы с межбуквенными расстояниями: одни знаки (ge) слиплись, между другими (bu) возникли дыры.

Кириллица Не лишена странностей и кириллица — выбранные решения делают её старомодной, она отличается по характеру от латинской части шрифта.

Контрастная и очень ветвистая б, падает влево з. Строчные з, в: явно темнит соединение полуовалов. Левый штрих Лл выглядит вогнутым внутрь. Ии — слишком широкая, с обратным контрастом, также слишком широки Ыы. Огромная кратка над й. Кривая, ломаная арка в ч.

У диагоналей Мм и Уу — обратный контраст. Чрезмерна длина «полки» в твёрдом знаке. И снова проблемы с межбуквенными расстояниями — в этом примере разлетелись ъ и я.

Наш совет

Выбирайте другой шрифт, у Istok Web откровенно низкое качество — и техническое, и дизайна.

К оглавлению

Yanone

Kaffeesatz — прототип шрифта FF Kava; его жирное начертание создано под впечатлением от вывесок на кофейнях 1920-х годов. Шрифт, однако, не выглядит старомодным или историческим — это яркий узкий гротеск с арочными конструкциями «без шпор», который и сегодня найдёт себе применение.

Практика Жёсткий, выраженный ритм, диктуемый вертикалями, хорошо контрастирует с мягкими окончаниями штрихов и динамикой овалов.

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

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

Графика знаков не всегда идеальна — например, полуовалу в Я хочется добавить объёма, а Д могла бы устойчивее стоять на платформе. Но яркий характер шрифта прощает эти недостатки.

Наш совет

Yanone Kaffeesatz — яркий и качественный шрифт, который лучше всего использовать по прямому назначению — в акциденции.

К оглавлению

Кодзи Морисита

Сочетание разных письменностей в одном масштабном проекте: здесь собраны японская письменность кана, латиница и кириллица — дизайн последних описан авторами как сложный, но расслабленный.

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

Начертания Дополнительно распространяется семейство M Plus 1p Rounded — с закруглёнными окончаниями штрихов, эта версия также компактнее, чем основная.

В наборе семь насыщенностей — от Thin до Black, в каждой — набор стандартных моноширинных цифр, минимум дробей, знаков валют и лигатур.

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

З падает вправо (а строчная з — излишне широкая), полуовал я странных пропорций — широкий, но сжатый по вертикали. Проблемы есть в левых штрихах л и д — оба резко сломаны у основания, а сами знаки слишком широки. Неидеален кернинг: например, в паре уд образовалась дыра.

Прописная Д, напротив, узка, сильно опустилась ломаной формы арка в Ч, а Я опять не хватает объёма в верхней части.

Наш совет

Толковый шрифт для свободного набора и совместного использования японской письменности с латиницей — но не кириллицей, здесь она некачественная.

К оглавлению

Мариела Монсальве, Ангелина Санчес

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

Практика Шрифт сближенных пропорций, светлый и с просторными межбуквенными расстояниями. Знаки довольно узкие, особенно узкими на общем фоне выглядят овалы в строчных знаках — в частности, o. Очень крупные строчные — разница в высоте с прописными минимальна.

Начертания Шесть прямых начертаний от Normal до Black, плюс вариативный шрифт с осью насыщенности. С ростом насыщенности внутреннее белое остаётся просторным, а апроши уменьшаются — в тёмных начертаниях баланс внутреннего и внешнего белого совершенно не такой, как в средних.

Кириллица Конструктивно и по характеру кириллица в целом адекватна латинице, но в частностях и исполнении есть проблемы — качественной назвать её нельзя.

Как и в латинице, здесь видны странности в пропорциях: ряд круглых знаков выглядит узким рядом с прямыми (но). Неудачна б, у неё очевидно короткий хвост, а конструкция овала выглядит нелогичной рядом с р, где овал жёстко соединяется с вертикалью. Восходящие диагонали в к, и, у — тяжёлые, из-за этого знаки приобрели обратный контраст.

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

Б — короткий верхний штрих. Обратный контраст в кратке над Йй. Проблемы с Д, Щ и И аналогичны замеченным в строчных. Межбуквенные расстояния во всём слове выглядят случайными.

Снова ошибка в Ы с очень тонким штрихом справа. Л наследует недостатки строчного знака. Широкая Ж с толстыми восходящими диагоналями — проблемы с ними также видны в И, М и А.

Наш совет

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

К оглавлению

сжатых шрифтов занимают меньше места по горизонтали

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

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

Зачем нужны сжатые шрифты?

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

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

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

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

Невозможно перечислить всех доступных сжатых шрифтов, но вот несколько примеров:

• Myriad Pro Condensed
• Лига Готики
• Футура Конденсированный
• Конденсированный Generica
• Helvetica Condensed
• Сохо
• Avant Garde Gothic Condensed
• Фрутигер Конденсированный
• ITC Garamond Narrow
• Узкий Arial

Зачем останавливаться на сокращенном?

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

• Franklin Gothic Extra Compressed
• Проксима Нова Экстра Конденсированная
• Фасад
• Рунический
• Monotype Grotesque Extra Condensed

Спасибо, что сообщили нам!

Расскажите, почему!

12 самых читаемых шрифтов для печати, руки вниз

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

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

На что обращать внимание при выборе шрифта для печати

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

1. Serif. Шрифты с засечками имеют почти неразборчивые маленькие завитки (засечки) на буквах, которые облегчают их чтение, поскольку они очень похожи на почерк.
2. Без засечек. «Sans» означает «без», поэтому в этих шрифтах используются упрощенные, четкие буквы.
3. Скрипт. Шрифты Script — это именно те шрифты, которые имитируют рукописное письмо.
4. Дисплей. Дисплейные шрифты высокохудожественные и стилизованные, идеально подходят для заголовков или заголовков, но не подходят для больших блоков текста.

При выборе лучших шрифтов для своей самоизданной книги учитывайте следующие моменты:

• Читаемость. Самые читаемые шрифты для печати — это те, которые лучше всего смотрятся в большом блоке текста.Выбор самых простых шрифтов для чтения увеличивает вероятность того, что ваша книга будет прочитана целиком, и даже может привести к более положительным отзывам читателей.
• Аудитория. Некоторые шрифты более привычны и удобны людям разных поколений. Если вы старше, но ваша целевая аудитория — миллениалы или поколение Y, вам следует избегать шрифтов, которые воспринимаются как устаревшие или даже средневековые.
• Подходит к теме. Шрифты имеют индивидуальность.Они могут казаться причудливыми, драматичными, серьезными или комедийными по тону. Убедитесь, что вы выбрали шрифт, который лучше всего соответствует жанру или теме, изображенной в вашей самоизданной книге.
• Визуальная эстетика. Хотя эстетическая ценность вашей книги очень субъективна, разумно подумать, будут ли ваши личные вкусы хорошо резонировать с вашей целевой аудиторией. Было бы неплохо попросить нескольких друзей взвесить ваш лучший выбор шрифта, прежде чем делать окончательный выбор.

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

Лучшие шрифты для книг, одобренные читателями

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

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

Лучшие шрифты для книг:

Шрифты с засечками

• Гарамонд. Этот изящный шрифт был разработан во Франции в 16 веке и имеет классический вид.
• Грузия. Этот элегантный, но прочный шрифт был разработан в 1993 году и также является лучшим шрифтом для мелкого шрифта.
• Палантино. Этот шрифт, выпущенный в 1949 году, напоминает старомодный шрифт. Выпущен в 1949 году.
• Caslon. Этот шрифт был разработан Уильямом Кэслоном в 18 веке и имеет несколько текстурированный вид.
• Миньон Про. Считающийся одними из самых читаемых шрифтов для печати, серия шрифтов Adobe в стиле эпохи Возрождения из семейства Adobe была разработана в 1989 году.
• Мерривезер. У этого шрифта сильный, надежный вид, и он легко читается.

Шрифты без засечек

• Helvetica Neue. Этот полужирный шрифт — отличный выбор для заголовков глав.
• Мириады. Этот универсальный, гуманный и универсальный шрифт был разработан в 1990-х годах для Adobe.
• Open Sans. Несмотря на то, что Open Sans является шрифтом без засечек, он отдает дань уважения определенным элементам стилей с засечками.
• Робото. Этот четкий и лаконичный шрифт весьма универсален.

Для идеального выбора и форматирования шрифтов наймите профессиональную и опытную команду дизайнеров в Gatekeeper Press.

Доверьтесь команде разработчиков Gatekeeper Press

Если всего количества доступных шрифтов достаточно, чтобы у вас закружилась голова, почему бы не сотрудничать с командой дизайнеров Gatekeeper Press? Эти профессионалы в области издательского дела выберут шрифты, идеально подходящие для жанра и аудитории вашей книги, а также шрифты, наиболее удобочитаемые для печати.Позвоните Gatekeeper Press, позвоните сегодня!

Что такое типографика и почему она важна? [Руководство 2021]

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

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

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

Вот что мы рассмотрим:

1. Что такое типографика?
2. Почему типографика важна?
3. Различные элементы типографики
4. Как выбрать правильный шрифт для вашего сайта
5. Заключение

Готовы? Давайте нырнем!

1. Что такое типографика?

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

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

Типографика может быть датирована 11 веком, во время появления подвижных шрифтов. До цифровой эпохи типографика была специализированным ремеслом, связанным с книгами и журналами, а в конечном итоге и с общественными работами.Первый пример типографики можно увидеть в Библии Гутенберга, которая положила начало революции в типографике на западе. Интересный факт: стиль шрифта, используемый в Библии Гутенберга, теперь известен как Textura, и сегодня вы найдете его в раскрывающемся меню шрифтов в основных настольных приложениях!

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

2. Почему типографика важна?

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

Давайте углубимся в вопрос, почему типографика так важна.

Типографика повышает узнаваемость бренда

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

Типографика влияет на принятие решений

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

Типографика привлекает внимание читателей

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

3. Различные элементы типографики

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

Шрифты и гарнитуры

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

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

Контраст

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

Согласованность

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

Пробел

Пробел, который часто называют «отрицательным пространством», представляет собой пространство вокруг текста или графики. Это часто упускается из виду и обычно остается незамеченным пользователем, но правильное использование белого пространства гарантирует, что интерфейс не загроможден, а текст читабелен. Белое пространство может даже привлечь внимание к тексту и создать в целом эстетичное впечатление. Белое пространство часто принимает форму полей, отступов или просто областей без текста или графики.

Выравнивание

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

Цвет

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

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

Иерархия

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

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

4. Как правильно выбрать шрифт для своего сайта?

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

Думайте о личности

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

Отражать тон

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

Не экономьте на функции

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

Учитывайте производительность

Многие дизайнеры часто забывают о выборе шрифтов, удобных для веб-браузера. Часто используемые библиотеки шрифтов, такие как шрифты Google, предлагают файлы шрифтов в Интернете, которые можно без проблем отображать в браузере.Совет от профессионала: при загрузке веб-шрифтов никогда не загружайте больше наборов символов, чем нужно. Так вы избежите лишнего веса!

Вдохновляйтесь

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

Потратьте время на тестирование

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

5. Заключение

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

Хотите узнать больше о дизайне пользовательского интерфейса? Ознакомьтесь со следующими связанными сообщениями в блоге:

Лучшие шрифты для знаков, которые легко читать

Первый взгляд

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

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

Без чего?

Шрифты с засечками

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

Шрифты без засечек

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

Скриптовые шрифты

Гарнитура, написанная пером, кистью или карандашом от руки, является шрифтом Script.Это может добавить элегантности дизайну, но главное — умеренность. Шрифты скрипта не предназначены для основного текста или интенсивного использования. Сравните шрифт скрипта со шрифтом без засечек в этом примере. Какой из них легче читать с первого взгляда?

Самые простые шрифты для чтения

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

Futura легко читается благодаря геометрическому дизайну. Прямые линии и формы букв легко просматриваются и визуально воспринимаются. Такой геометрический дизайн и универсальность делают его отличным вариантом для современного бренда.

Adobe Garamond Pro — еще один классический шрифт, созданный из утилитарных соображений и выдержавший испытание временем.Это шрифт с засечками, который обычно зарезервирован для блоков текста; это может быть идеальным для небольшого текста на вашей вывеске. Garamond элегантен с легкими штрихами букв и открытыми отрицательными пространствами.

Bodoni — профессиональный стильный шрифт с толстыми и тонкими штрихами, которые передают отчетливую индивидуальность. Толстый и тонкий контраст букв отлично подходит для вывесок.

Упрощенный, смелый и мощный, Franklin Gothic легко передает свое послание.Ширина каждого символа мала по сравнению с Helvetica и Futura. Хотя некоторые воспринимают его как сжатый, этот стиль может хорошо подойти вашему бренду.

Некоторые дизайнеры считают, что Helvetica используется слишком часто. Тем не менее, им злоупотребляют не зря: он легко читается и хорошо … он просто работает. Семейство Helvetica теперь имеет 51 шрифт различной толщины и является «переходным» шрифтом без засечек.

Местонахождение, местонахождение, местонахождение

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

Веселые шрифты

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

Ооо, цвета!

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

Рекомендуемые действия FASTSIGNS

До

• Используйте контрастные шрифты, которые дополняют друг друга и радуют глаз

• Очень экономно используйте скрипты

• Используйте гармоничные (согласующиеся; гармоничные) шрифты для получения классического приглушенного вида

Нет

• Используйте шрифты с похожими символами и внешним видом.

• Используйте все прописные буквы в шрифте Script

• Используйте более 2–3 шрифтов в дизайне вывески

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

Как выбрать лучший шрифт для электронного маркетинга: краткое руководство

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

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

Шрифты, используемые в электронной почте

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

1. Serif
2. Без засечек
3. Курсив
4. Моноширинный

Шрифты с засечками

Шрифты с засечками, которые считаются более удобными для чтения, обычно используются в электронных письмах.У хорошо расположенных символов есть завитки на концах штрихов, а ось штрихов обычно наклонена влево. Самые популярные шрифты с засечками — Georgia и Times New Roman.

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

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

Шрифты без засечек

без засечек уступают место шрифтам без засечек.

Из-за отсутствия декоративной обводки в каждом символе этот шрифт имеет очень полуформальный вид. Самыми популярными шрифтами этого семейства являются Arial, Trebuchet MS, Verdana, Open Sans и Helvetica.

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

Это электронное письмо от Facebook производит большое впечатление шрифтом Arial, который они использовали.

Каллиграфические шрифты

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

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

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

Посмотрите, как MAC объединил простые и художественные шрифты, чтобы привлечь внимание читателя в приветственном письме.

Моноширинный шрифт

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

Проверьте это письмо от Misfit. В этом письме они использовали сочетание различных моноширинных шрифтов, включая Andale Mono, Lucida console, Courier и другие в теле письма.

Веб-шрифты или веб-шрифты — какое это имеет значение?

Веб-шрифты — это шрифты, которые корректно отображаются почти во всех операционных системах.Среди них такие шрифты, как Arial, Comic Sans, Courier New, Georgia, Impact, Palatino, Tahoma, Trebuchet MS, Times New Roman и Verdana.

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

• Собственный почтовый клиент Android;
• Outlook 2000;
Приложение
• Outlook.com;
• AOL Mail;
• Apple Mail;
• Почта iOS;
• Браузер Safari.

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

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

Выбор запасного варианта

Итак, как выбрать резервный шрифт для шрифта электронной почты? Эти факторы вам помогут:

Размер шрифта

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

Шаг

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

Предположим, вы выбрали использование Helvetica в своей электронной почте, и у вашего подписчика электронной почты есть устройство Apple. Они будут видеть ваше письмо в том виде, в котором вы его создали — в Helvetica.Однако, когда пользователь Windows откроет электронное письмо на своем устройстве, он увидит первую резервную копию, которую вы добавили в код, скажем, Verdana. Если он тоже недоступен, пользователь увидит шрифт в третьем варианте, который вы упомянули, или в зависимости от того, какой шрифт Sans Serif доступен. Итак, вот как это происходит: Пользовательский шрифт -> Веб-шрифт -> Системный шрифт.

Лучшие цвета шрифтов для электронного маркетинга

Цвет шрифта помогает выделить ваше сообщение. Тем не менее, ограничение использования цветов — лучший вариант.Три — это предел: один для заголовка, один для остального текста и один для выделения ссылок.

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

Завершение

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

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

Краткое / Тип корпуса

Concise имеет глобальный размер шрифта 16px (1em) с высотой строки 1,5 (24px) . Это применяется ко всему тексту в теге . Кроме того, все теги

получают нижнее поле , равное 24px , точно такого же размера, как высота нашей строки.

Вы можете изменить переменную $ base-font-size в файле / helpers / _variables.scss , чтобы настроить базовый размер шрифта. Кроме того, переменные $ base-font-color и $ base-link-color изменят цвет шрифта и цвет ссылки соответственно.

Предварительный просмотр

Lorem ipsum dolor sit amet, constetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. В vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Семейства шрифтов

Типографика — ключ к эффективному дизайну, поэтому Concise упрощает управление в вашем проекте.

По умолчанию Helvetica с Arial в качестве запасного варианта используется в качестве шрифта по умолчанию на немобильных устройствах. Однако для телефонов Android в качестве шрифта по умолчанию используется Droid Sans, а в качестве запасных — Helvetica и Arial.

Вы можете изменить переменную $ base-font-family в файле /helpers/_variables.scss , чтобы настроить базовые семейства шрифтов.

Вертикальный ритм

Из нашего глобального line-height 1,5 мы можем вычислить так называемое магическое число . Это позволит нам поддерживать вертикальный ритм в нашем дизайне, предоставив нам число, на котором будут базироваться все высоты линий и нижние поля. Это число можно найти, умножив размер шрифта на высоту строки как таковую: 16 × 1,5 = 24 . Учитывая это уравнение, 24px — наше магическое число.

Чтобы сохранить вертикальный ритм в наших проектах, все высоты линий и нижние поля должны быть кратны 24px .

Вы можете изменить переменную $ base-line-height в файле /helpers/_variables.scss , чтобы настроить высоту базовой линии.

Rem Размер

Я решил обрабатывать размер шрифта в Concise с помощью блока rem (блок, который был добавлен с помощью CSS3) вместо пикселей или em . Джонатан Снук написал отличную статью о rem и его преимуществах / отличиях, которые я предлагаю вам прочитать.

По сути, стилизация шрифтов в rems вместо ems позволяет всем нашим размерам шрифтов основываться на «корневом em» или размере шрифта, который был объявлен в или элемент.Это отличается от традиционного ems , поскольку ems относятся к родительским элементам. Это означает, что размер шрифта увеличивается по мере того, как вы углубляетесь в наследование HTML.

Однако для поддержки устаревших браузеров к каждому размеру шрифта в Concise был добавлен резерв пикселей .

Улучшение технических иллюстраций: краткие рекомендации по пространству, цвету и шрифтам | Мохаммад Науман

1.Введение и мотивация: Это малярийный комар, он. Взгляните на эти две фигуры. Какой тебе больше нравится? Очевидно, ответ очень и очень субъективен. Однако в целом многие люди предпочтут смотреть на эту цифру с технической точки зрения, потому что она передает информацию более четко. Приведу наглядный пример этого. Как насчет этих двоих? Тебе нравится тот, который сверху или тот, что внизу? Это зависит от ваших предпочтений. Согласитесь, эта цифра, та, что внизу, намного чище.Он намного заметнее, чем тот, что наверху. Но вы также согласитесь с тем, что большинство фигур, с которыми мы сталкиваемся, когда изучаем литературу, когда мы смотрим на диаграммы технического характера, выглядят скучно, как эта. В чем причина этого? Причина очень проста. Люди, которые проводят свое время, занимаясь технической работой, не имеют достаточно свободного времени, чтобы изучить теорию того, что хорошо, что визуально привлекает внимание. Итак, как только они закончили свою техническую работу, они просто попытались изложить идеи на бумаге любым возможным способом, а затем оставили это в покое.И именно здесь на помощь приходит этот курс. В этом курсе мы собираемся обсудить краткие рекомендации, которым вы можете следовать, которые помогут вам сделать ваши технические данные действительно хорошими без необходимости тратить время на понимание теории, лежащей в основе этого материала, или даже придумывать, какой выбор вам нужно сделать, чтобы ваши пальцы выглядели привлекательно. Мы собираемся избавиться от всей теории. Мы собираемся избавиться от всех «если» и «но». И я собираюсь обсудить с вами некоторые тематические исследования, и я собираюсь объяснить вам выбор, который вы можете начать делать прямо сейчас, не тратя бесчисленные часы на изучение 2D, чтобы ваши пальцы выглядели хорошо.Итак, вот идея этого курса. Мы не собираемся обсуждать конкретные инструменты, которые вы можете использовать. Я дам вам рекомендацию, но это будет просто рекомендация. Вы можете использовать любой инструмент, который захотите, поэтому вам не придется радикально менять способ выполнения своей работы прямо сейчас. Я собираюсь дать вам пример того, как вы можете дать своим компонентам дышать, чтобы их было легче понять и понять вашей аудитории. Мы собираемся обсудить цветовые схемы и 5-секундное правило применения цветов, которые выглядят действительно хорошо.Буквально пять секунд. Больше этого не потребуется. Мы не собираемся вдаваться в теорию триад, дополнительных цветов и прочего. Возможно, вы сталкивались с этим, если вам интересно, но вы поймете, что на самом деле это не так хорошо работает, если вы не потратите на это время. Так что мы не будем этого делать. Мы поговорим о шрифтах и ​​стилях. И снова, я собираюсь дать вам конкретные предложения о том, что вы можете сделать, чтобы снова выбрать правильные шрифты, не более чем через минуту, верно? Это все, что вам нужно.Мы собираемся обсудить полет глаза. Это займет немного больше времени, но я имею в виду около 15 минут. Идеально или около того. Не более того, мы собираемся взглянуть на различные тематические исследования. И я собираюсь объяснить на примерах, какие решения вы должны начать делать для создания визуально привлекательных, красивых фигур, не тратя время на изучение теории. Я также дам вам несколько личных рекомендаций, которые, как я видел, действительно хорошо работают.То, что вы можете сделать немедленно, не задумываясь об этом. Они будут механическими. Вы выбираете это, вы делаете это. Это всегда будет, я собираюсь поделиться видео с контрольным списком, которое вы можете применить и нанести на каждый из ваших пальцев, которые вы рисуете, чтобы они выходили действительно красиво. Здесь большой отказ от ответственности. Это не руководство по какому-либо конкретному инструменту. Это не исчерпывающий справочник. Мы не пытаемся прикрыть теорию всех вариантов, которые я здесь обсуждаю. Я просто собираюсь дать вам окончательные конечные цели, то, что вы должны делать, не обсуждая плюсы и минусы.Потому что в Интернете доступно огромное количество материалов, в которых обсуждаются плюсы и минусы. Но если вы не потратите на это месяцы, вы этого не поймете. На это уходит много времени, а у технических специалистов этого времени просто нет. Итак, этот курс разработан для создания ценности за минимально возможное время. Так что давайте сразу же приступим к изучению курса, перейдя к концепции выравнивания компонентов и интервалов. 2. Расклад и пробелы: Привет, и добро пожаловать на курс.Давайте поговорим о выравнивании и интервале. Это одна из тех концепций, которые, если вы поймете их даже немного неправильно, ваша аудитория сможет распознать это подсознательно, и воспринимаемое качество вашего рисунка фигуры значительно упадет. Итак, мы начнем с обсуждения некоторых методов, которые вы можете применить для улучшения качества ваших визуализаций. Вместо того, чтобы переваливать за 30, давайте сразу перейдем к инструменту и взглянем на него визуально. Я собираюсь использовать Google Рисунки. Если вы хотите продолжить, вы можете перейти на свой диск и нажать «Новые», «Другие рисунки Google».И вы перейдете к пустому рисунку, который вы можете использовать. Или, если вы хотите использовать другой инструмент по своему вкусу, это прекрасно. Мы собираемся обсудить инструменты в конце этого курса. Но по большей части любое обсуждение, которое у нас есть, применимо в целом ко всем инструментам, ко всем разумным инструментам там. Хорошо? Итак, начнем с создания небольшой формы. Итак, это будет прямоугольник. Итак, я рисую здесь квадрат или прямоугольник. Довольно просто. Вот как выглядит типичный прямоугольник в типичном инструменте рисования.Даже этот оттенок синего. Или этот оттенок, или этот желтоватый цвет, верно? Так что мы поговорим немного позже. А пока просто поймите, что это типичный прямоугольник, который мы получаем в инструменте рисования. Давайте продолжим и обсудим, что мы подразумеваем под выравниванием и интервалом. Большинство из этих вещей вы уже знаете интуитивно. Но когда дело доходит до применения их в реальных рисунках, люди часто забывают об этих концепциях. Итак, мы собираемся собрать их все вместе и увидеть разницу, которую они имеют.Хорошо, давайте продолжим и скопируем это. Итак, Control C, Control V, и поместите его сюда, верно? Так что немного измените форму. Допустим, это два компонента нашей диаграммы. И что я собираюсь сделать, так это попытаться убедиться, что они выровнены вверху. Хорошо, во-первых, большинство людей даже не пытаются этого делать. Они просто кладут его куда угодно. Хорошо? Так что вы должны убедиться, что их вершины совпадают. Теперь вам нужно принять решение. Вы хотите выровнять верх или вы хотите выровнять их середины? Или вы хотите выровнять их низ в зависимости от того, чего вы пытаетесь достичь.Все три верные решения. Дело в том, что если вы пытаетесь выровнять верхнюю часть, скажем, вы должны убедиться, что вершины действительно совпадают. На данный момент они выглядят так, как будто выровнены, но это может быть не так. В этом весь смысл. Вы не можете полагаться на свои глаза, чтобы отличить то, что выровнено, от того, что не выровнено. Вы должны позволить инструменту делать все за вас. Итак, если вы переместите его сюда, вы увидите, если вы посмотрите очень внимательно, вы увидите, что он не совсем выровнен. Есть небольшая разница.Вы можете подумать, ну, это не такая уж большая разница, и я не мог этого видеть, когда это было далеко. Люди могут подсознательно это видеть, и это существенно влияет на качество. Хорошо, имейте это в виду. Это будет темой всего курса. Все, что вы думаете, не имеет значения, но я говорю вам, что это имеет значение. Все эти различия будут очень незначительными сами по себе. Но когда они соберутся вместе, они доведут ваши диаграммы до очень низкого уровня качества, хорошо? Так что если вы избавитесь от 90% из них, все будет хорошо.Хорошо, это будет темой этого курса. Итак, первое, что мы хотим сделать, это убедиться, что они точно выровнены по верхнему краю. Как ты это делаешь? Вы не делаете этого сами. Если вы попытаетесь сделать это самостоятельно, вы, вероятно, переместите его сюда, а затем переместите сюда, а затем, вероятно, попытаетесь переместить его туда. Это утомительно номер один. И, во-вторых, ничего не получится, если вы захотите переместить это. Если вы хотите переместить это, теперь вам нужно сделать все это снова. Итак, вы полагаетесь на двоих.Так что есть несколько способов сделать это. В зависимости от инструмента. Мы собираемся прикрыть пару из них. И в зависимости от того, какой инструмент вы используете, у вас может быть один из них. Если ваш инструмент не предоставляет ничего из этого, вам не следует использовать этот инструмент. Хорошо? Итак, первым делом мы перейдем к View Snap. Итак, у вас будут варианты привязки где-нибудь в вашем инструменте. И вы можете сказать «привязка к гидам», хорошо? Таким образом, направляющие по умолчанию являются скрытыми элементами вашего рисунка, которые вы не видите, но они могут направлять вас.Поэтому название ориентирует. Итак, если вы сейчас возьмете это и попытаетесь переместить, вы увидите, что при перемещении появляются линии. Когда вы перемещаете его вверх, вы видите красную линию. А это значит, что он будет идеально выровнен с верхом этого другого поля, если вы его оставите. Теперь это идеально. Вам даже не нужно проверять. Он идеально выровнен. Если вы хотите выровнять середину, попробуйте немного ее сдвинуть. И как только вы прочитаете где-то около середины, он даст вам полезное руководство, к которому он привязан.Это называется привязкой, очень полезно, очень полезно. Так что вы также можете переместить его внизу. Это в одну сторону, хорошо. Возможно, в вашем инструменте нет привязки, но есть и другие способы. Допустим, вы хотите выровнять их вместе вверху, давайте выберем их обоих. Перейдите в какое-нибудь место, например, в аранжировку или что-то в этом роде, или в меню выравнивания. И вы увидите эту опцию Align. Таким образом, вы можете сказать выровнять, по левому краю, по центру, по правому краю или по верхнему краю. Итак, если вы сделаете верх, оба они будут выровнены по верхнему краю. Вы также можете сделать линию и сказать середину.И они будут выровнены по вертикали посередине. Хорошо, это один из способов выравнивания. Итак, это выравнивание вершин, оснований или середин. Здесь вы также можете использовать ту же концепцию. Таким образом, вы можете переместить его немного влево, и он защелкнется на направляющей. Вы можете переместить его в середину, и вы увидите, что он показывает вам, что он также может привязываться к середине. И то же самое для правого. Ладно, это одно. Вы можете взять все три из них и соединить их вместе. Итак, если вы переместите его сюда, вы увидите, что он привязывается к верхнему блоку, но поскольку это разные формы, он не может привязываться к среднему блоку.Хорошо, вы можете переместить его в центр, и вы увидите, что теперь линия простирается до самого верха. Итак, теперь все три из них идеально выровнены посередине, верно? Итак, если вы измените форму, вы можете снова переместить ее и идеально выровнять, верно? Так что это чрезвычайно важно. Вы выравниваете их с помощью направляющих, а не визуальных подсказок. Вы не полагаетесь на свои глаза. Вы полагаетесь на инструмент, который сделает это за вас, хорошо? Таким образом, вы можете использовать направляющие, вы можете использовать выровненную палитру. Теперь вы сразу заметите, что с этими коробками есть небольшая проблема.Они идеально выровнены по центру. Но, и это то, что очень важно, даже если вы не можете этого заметить прямо сейчас, когда я говорю вам, вы начнете замечать эти вещи. И это то, что отличает хороший рисунок от плохого. Расстояние между этими двумя не такое же, как расстояние между этими двумя. Хорошо? Так что это действительно плохо. Почему это плохо? Потому что глазу сложно уловить концепции, если они не гармоничны, а это визуальная гармония. Так как же об этом позаботиться? Опять же, есть несколько способов.Один вы можете использовать направляющие, чтобы вы могли перемещать их и сохранять интервалы сколько хотите, не так ли? Так что готово. Затем вы немного переместите это, и, когда вы приблизитесь, вы увидите, что появятся определенные новые направляющие. И это скажет вам, что интервал, если вы привяжетесь к этому положению, сделает интервал между первым вторым блоком и интервал между вторым, третьим блоком равным. Так что, если вы оставите это сейчас, интервал будет совершенно равным. Опять таки. Не делайте этого визуально. Пусть инструмент сделает это за вас.Хорошо? Это называется раздачей. Другой способ сделать это — выбрать их. Вы можете сказать «упорядочить», «распределить» и вы можете сказать «горизонтально», что будет горизонтально или вертикально. Итак, прямо сейчас мы хотим сделать это вертикальное распределение. Так что, если он был идеально выровнен, но не распределен, вы могли бы его выбрать. Вы можете перейти к расположению, распределить по вертикали, и это распределит их по вертикали. Хорошо? Итак, допустим, у вас есть еще пара коробок, так что вы можете сказать, что у нас здесь есть этот парень.Это соответствует этому. И у нас есть еще одна коробка, которая намного меньше. И этот парень выровнен по центру по центру, а по центру выровнен по полю слева. Хорошо? Или это имело смысл. Теперь они выровнены вместе. Они выровнены, и они также выровнены. Все в порядке. Давай просто убедимся, хорошо. Очевидно, это не обязательно должно иметь табличную структуру. Вы можете положить что-нибудь посередине, и готово. Но теперь, как видите, все становится немного странно. И мы вернемся к этой концепции потока позже.Как можно структурировать свои вещи, чтобы не столкнуться с такими проблемами. Так что интервал здесь не такой, как здесь. Так что, если вы попытаетесь выровнять этот прямоугольник по центру, он будет смотреть не так, как наверху. Так что это то, что требует более глубокого обсуждения, и мы вернемся к этому позже в курсе. А пока давайте избавимся от этого немного. Итак, давайте уберем этого парня и отодвинем их, сохраняя при этом выровненность. Итак, вы идете, а этот парень — очередь, хорошо, теперь у нас все в порядке.Мы собираемся соединить эти коробки вместе линиями. Опять же, это очень распространенная концепция. Итак, вы берете линию и рисуете что-то здесь, хорошо? Итак, как видите, эта линия проведена, и это конец. И вы можете снова его переместить. Я хочу, чтобы вы прямо сейчас подумали, в чем проблема с этой строкой. Если вы можете это заметить, это действительно хорошо. Вы сможете это исправить. Если вы заметили это, но не можете исправить, я расскажу, как это исправить. Если вы даже не можете определить, в чем проблема, вы можете увеличить ее.Итак, если мы увеличим масштаб, вы увидите, что это начинается немного вверху и немного внизу. Это не так уж важно, правда? Ну не совсем. Это действительно так важно, потому что наша фигура будет выглядеть действительно скучной, когда вы ее распечатаете. Когда вы смотрите на экран, ваша аудитория не будет знать, что не так, но они будут знать, что что-то не так, что-то не так с этой цифрой. И дело в том, что ваша линия не идеально горизонтальна, она немного наклонена, а вы этого не хотите.Большинство инструментов позволят вам рисовать идеально горизонтальные и идеально вертикальные линии, потому что они очень распространены. Так что, если вы возьмете любой конец этой линии и переместите его, вы сможете перемещать его свободно. Так что это хорошо, но иногда это плохо, потому что, если вы можете свободно перемещать его, у вас будет гораздо больше свободы для ошибок. Итак, что вы можете сделать, так это удерживать эту точку привязки, перемещать ее. И удерживайте Shift. Если вы удерживаете Shift и перемещаете его, он переместится под определенным углом.Так что он будет либо оставаться совершенно горизонтальным, либо двигаться под углом 30 градусов, 60 или что-то в этом роде, верно? Итак, некоторые инструменты перемещают это на 45 градусов, некоторые — на 30 градусов. Похоже, он сдвигает его на 20 градусов. Но не очень важно, какие есть степени. Важно то, что вы можете сделать его идеально горизонтальным, не полагаясь на собственные глаза. Итак, снова скопируйте точку привязки, переместите ее и удерживайте Shift. Это что-то вроде стандартного ярлыка в отрасли.Итак, если вы удерживаете Shift, он сделает его идеально горизонтальным или идеально вертикальным, хорошо. Так что вам не нужно об этом думать. Это ошибка, которую я часто вижу, и из-за нее цифры выглядят очень-очень плохими. Требуется цифра вроде девяти из 10 и вплоть до трех из 10. Верно. Так что убедитесь, что вы удерживаете shift, когда рисуете линии, хорошо? Даже если вы пытаетесь рисовать линии, которые не являются идеально горизонтальными или идеально вертикальными, вы можете удерживать Shift и перемещать его под углами, которые вы можете контролировать.Хорошо, давайте переместим это сюда. Избавимся от этого. Другая проблема, которая у нас возникает, — это, по сути, вернуть ее. Иногда, когда люди рисуют линии, они прикрепляют предметы к одному концу, а не к другому. Опять же, если вы пытаетесь рисовать как стрелку. Так что, скажем так, выглядит нормально. Это не плохо. Но это одна из тех незначительных вещей, из-за которых ваша диаграмма будет выглядеть незаконченной и неотшлифованной. Итак, что вы хотите сделать, это убедиться, что вы взяли свой якорь, который мы сделали, и приблизили его к одной из точек привязки на компоненте, на который вы пытаетесь указать стрелку t2.А потом, когда вы его оставите, он прикрепится к нему. Хорошо, поэтому вам следует попробовать прикрепить свои линии, две вещи. Теперь ваша линия тоже идеально горизонтальна. Почему? Потому что мы выровняли середину этого поля с серединой этого поля. Итак, все складывается вместе. Если вы хотите соединить объекты вместе с их средними точками привязки, вы должны выровнять их, используя их средние точки. Хорошо, надеюсь, это имело смысл. Теперь вы можете подумать, а что, если я не хочу, чтобы стрела доходила до самого конца? Я хочу, чтобы это началось понемногу и понемногу.Как я могу это сделать? Вот где проявляется сила вашего инструмента. Это называется укорачиванием линий, стрелок или соединителей. Этот инструмент, поскольку это онлайн-инструмент, он не такой мощный, у него нет такой возможности. Но позже в ходе курса мы собираемся обсудить инструменты и то, какие инструменты могут позволить вам это сделать, ту свободу, которую вы хотите, и которая в любом случае не исходит от этих маршрутов. Последняя часть истории о выравнивании и интервале — это то, что входит в коробки. Итак, допустим, у меня здесь есть какой-то контент.Скажем, для первой коробки. Теперь это выглядит ужасно. Очевидно. Уменьшим размер шрифта. Итак, поехали. Теперь это выглядит так, как будто оно выровнено по левому краю, и обычно это не значение по умолчанию. Типичные значения по умолчанию выравниваются по середине. Но если у вас есть мелодия, которая по умолчанию выравнивается по левому краю, вы должны пойти дальше и либо выбрать поле, либо текст, а затем выровнять материал по середине. Это похоже на большое «нет» в рисовании с выравниванием по левому краю. Это редкость. Это редко, если вы действительно не знаете, что делаете, вы всегда должны выравнивать все, что вы делаете, по центру, хорошо? Это большое правило.Несколько исключений, хорошо? Итак, теперь у нас есть этот парень. Он там сидит. Выглядит прекрасно. Шрифт не в порядке. Шрифт выглядит пустым. Мы поговорим о шрифтах позже в курсе. Но пока оставим шрифт и перейдем к аспекту выравнивания. Поэтому вы должны убедиться, что он идеально выровнен по центру. Кроме того, если у вас есть несколько полей, которые похожи на большие, поэтому ваш текст должен быть выровнен по низу в целом, опять же, если у вас нет причины делать это различие, выравнивая его по верху, иногда вам нужно.Так что вы можете перейти к «Выровнять» и выровнять его по верхнему краю, если хотите. Иногда это имеет смысл. Но в целом, если вы не знаете и не уверены, вам следует убедиться, что вы выровнены по центру и посередине. Таким образом, середина предназначена для выравнивания по вертикали, а центр — для выравнивания по горизонтали. Хорошо. Итак, середина и центр. Хорошо. Если у вас есть тексты, которые занимают более одной строки, давайте продолжим и напишем здесь несколько текстов. Так что напишите какой-нибудь текст, который занимает более одной строки или что-то в этом роде. Хорошо, давайте немного уменьшим размер шрифта.Так что хорошо, в этом есть смысл. Итак, обо всем по порядку, давайте выровняем это по центру, выровняем по середине. Ладно, готово. Так же, как существует интервал между двумя компонентами, существует интервал между строками текста. Итак, если у вас более одной строки, вы хотите убедиться, что межстрочный интервал правильный. Опять же, за этим стоит огромное количество теорий, касающихся человеческой психологии, удобочитаемости и многих других вещей. Но короткий вывод: если вы не уверены, что делаете, ваш межстрочный интервал в тексте обычно должен быть равен 1.21.2 означает, что если у вас шрифт размером 10 пунктов, у вас будет интервал в 12 пунктов, верно? Итак, 1, чтобы иметь это в виду, у вас почти всегда будут какие-то варианты межстрочного интервала. Здесь. Он доступен под этой строкой и между абзацами. Возможные варианты: 1, 15. Таким образом, существует небольшое расхождение между тем, является ли 1,15 лучшим или 1,2 лучшим. Я следую философии, основанной на двух принципах. Сделайте одно очко 15. Это тоже не очень заметно. Итак, вы видите незначительную разницу. Так что давайте отменим это.Посмотрите на это и повторите то различие, которое кажется незначительным, значительно улучшит качество ваших диаграмм, ваших текстов. Поэтому, даже если вы используете обычный текстовый редактор, вы должны использовать 1 для межстрочного интервала. Хорошо, это небольшое примечание. Хорошо, наконец, если у вас есть текст, который немного тесноват, так что допустим. Так что они как бы сближаются по бокам, вверху и внизу, справа. Итак, что мы можем сделать, так это изменить то, что называется отступом. Итак, если вы занимались чем-то вроде веб-разработки, вы бы знали, что такое отступы.Но на самом деле, что такое отступы, это расстояние между границей вашего компонента и содержимым компонентов. Так вот этот интервал, верно? Это называется заполнением. Итак, что вы хотите сделать, это если вы подойдете ближе, вы увидите, что вещи убегают от модели, это то, что такое отступы. Таким образом, вы можете перейти к формату и параметрам форматирования в зависимости от вашего инструмента, это может быть где-то еще. Итак, в каком-то варианте форматирования текста у вас будут эти параметры заполнения, чтобы вы могли перейти к подгонке текста здесь и увеличить привязки.Итак, давайте изменим отступ слева на 0,2. И вы увидите, что это немного отличается, и напишите 0,2, хорошо? Так что готово. Однако у нас недостаточно места вверху и внизу, чтобы увеличить отступ. И здесь на помощь приходит ваше понимание планирования. У вас не может быть этого поля и этого текста таким шрифтом и таким размером, хорошо? Поле такого размера просто не может вместить текст такой длины и такого размера. Оставаясь визуально привлекательным, вам нужно что-то с этим сделать и услышать, что исправление довольно просто.Если вы можете уменьшить textContent, просто сделайте это. Это выглядит намного лучше. Иногда это невозможно, тогда вам нужно увеличить размер коробки. Ладно, тебе это нужно. Надеюсь, это имело смысл. Вам нужна прокладка. Если вы можете использовать инструмент, чтобы исправить набивку, это хорошо. Если вы не можете, то вам нужно либо изменить содержимое, либо изменить контейнер. В любом случае, вывод — убедитесь, что у вас есть отступы вокруг вашего контента. Потому что, если у вас нет отступов, это выглядит очень плохо.Так что, если у вас есть что-то похожее, то оно слишком тесное, оно выглядит слишком близко друг к другу. Мы вернемся к интервалу позже, когда будем проводить тематические исследования. Но пока достаточно сказать, что вам нужны отступы, вам нужно выравнивание, вам нужно распределение, и вам нужно убедиться, что все ваши линии прямые. Этот уже не прямой, потому что мы увеличиваем его верхний размер. Итак, давайте переместим это и убедимся, что наши материалы снова выровнены. Хорошо? Вам нужно постоянно следить за тем, чтобы ваше выравнивание и распределение не мешали, хорошо? Что ж, в этом есть смысл.У нас есть гораздо больше, связанных со всеми этими концепциями, но мы вернемся к ним после того, как рассмотрим некоторые другие основы. И первое из них — это то, с чем многие люди борются. Какие цвета выбрать. Я дам вам несколько конкретных советов по этому поводу в следующем видео. Итак, давайте сделаем это сейчас. 3. Цвета для занятого дизайнера. Мне посчастливилось поработать с некоторыми действительно замечательными студентами. Я был наставником нескольких молодых ученых, которые создали действительно отличное программное обеспечение и самостоятельно выдвинули по-настоящему уникальные идеи.Проблема почти в обязательном порядке. Когда бы я ни просил их визуализировать свои идеи и передать их другим, они создают рисунки, рисунки и иллюстрации для этого общения способом, который, скажем так, не оптимален. И на протяжении многих лет я пытался придумать для студентов конкретные предложения по улучшению своих рисунков и иллюстраций. И после нескольких лет опыта я пришел к выводу, что если вы попытаетесь объяснить весь спектр теории цвета и все, что происходит в науке.Люди, которые просто не собираются этого делать, потому что у них нет времени оставить свою работу и выучить это совершенно разные приметы. Итак, я придумал несколько конкретных предложений о том, как выбрать цвета, которые работают в подавляющем большинстве случаев. Таким образом, они не будут работать 100 процентов времени, но они будут работать от 90 до 95 процентов времени. И если у вас есть идеи получше, конечно, пожалуйста, продолжайте их изучать. Но, как правило, то, что нравится лично вам, может не понравиться широкой аудитории.Так что вам нужно немного разобраться в теории. Таким образом, вам нужно либо понимать науку, лежащую в основе цветовых схем, а также то, как их смешивать и сочетать. Или вы выбираете цвета, которые, как вы знаете, понравятся более широкой аудитории, и просто продолжаете свою работу. Это модель, которой мы здесь будем следовать. Приведу пару примеров фигур и рисунков, которые мне не очень нравятся. А затем мы перейдем к некоторым конкретным предложениям о том, как стать перевозчиками, не теряя кучу времени.Хорошо, давайте продолжим и посмотрим на некоторые цифры, которые я не считаю лучшими. Поэтому я просто ищу в Интернете предложенную схему архитектуры, что угодно. И вот такие вещи возникают. Вы тоже можете сделать это сами. Итак, первый пример, как вы можете видеть с первого взгляда, выглядит неплохо. Это довольно чисто. Это не загромождено. Но цвета какие-то шаткие, правда? Итак, здесь есть несколько проблем, и мы рассмотрим их через минуту. Хорошо, первое, что вы можете увидеть здесь, это то, что у нас здесь действительно странный градиент.Так что это первое, с чего вам следует начать. Без градиентов. Есть способы заставить градиенты работать, но это дело настоящих профессионалов. Если вы действительно не знаете, что делаете, просто не делайте градиентов на первом этапе, хорошо. Взглянем на другой рисунок. Итак, этот парень здесь, у него всевозможные проблемы. Если вы посмотрите на него, то увидите, что в нем слишком много цветов и слишком много всего происходит. И много информации передается с помощью цветов. И один и тот же цвет иногда пытается передать информацию, а иногда просто для украшения, верно? Так что это еще одна проблема.Если вы попытаетесь передать информацию с помощью цветов, это создаст проблемы. Если номер 1, ваша фигура напечатана, потому что цвета, скорее всего, исчезнут. Что касается технических иллюстраций, иногда ваш материал будет распечатан, поэтому вы должны убедиться, что вы не используете цвета для передачи информации. Но мы вернемся к этому через минуту. Хорошо, давайте посмотрим на другой пример. Так что с этим губернатором не все так плохо. И это то, что придумывают люди, немного лучше разбирающиеся в немного лучшей эстетике, верно? Так что проблема с этим парнем не только в проблемах выравнивания.Проблема заключается в том, что слишком много внимания уделяется самому цвету, хотя цвет не передает никакой информации. Если вы посмотрите на эту фигуру и попытаетесь прищуриться, вы увидите, что видите только эти фиолетовые коробки здесь. Это означает, что ваше внимание сразу же будет сосредоточено на этих фиолетовых прямоугольниках, а не на сути того, что фигура пытается передать, а это, по сути, этот x здесь. Очевидно, вам не нужно понимать, что это за цифра. Но я могу вам сказать, что этот парень находится там, где мы хотим, чтобы фокус был сосредоточен, в то время как наше внимание сосредоточено на этих коробках, которые являются второстепенными.Еще один пример того, что не работает. А затем мы перейдем к примерам того, что действительно работает, хорошо, поэтому я уверен, что вы уже много раз видели это в прошлом, поэтому мы не будем подробно останавливаться на этом. Итак, этот парень снова здесь, как только вы это увидите, вы поймете, что ваше внимание сосредоточено именно здесь, верно? Это очень резкий, ярко-красный цвет. И ваш взгляд сразу же привлекает вот эта часть. В то время как это вроде как наименее важная вещь на этом рисунке, самое важное происходит здесь.И внимание переместилось с этого парня на этот яркий красный цвет. Ладно, это на самом деле не работает. Опять же, через минуту мы перейдем к конкретным ситуациям. Я просто показываю вам некоторые цифры, которые не работают. Теперь давайте быстро взглянем на пример хорошо выполненного рисунка, не так ли? Так что это Крис Аллах. Вы можете перейти к C o LH dot github dot IO. На сайте есть действительно, действительно потрясающие визуализации, особенно если вы интересуетесь глубоким обучением, машинным обучением или любой другой информатикой, действительно хорошие визуализации здесь, хорошо? Даже если вас не интересует сама информатика, это просто действительно хорошие цифры, на которые можно смотреть и черпать вдохновение.С этой цифрой очень мало мелких проблем, но мы вернемся к этому позже. Здесь видно, что цвета очень гармоничны. Они действительно хорошо работают вместе, и это выглядит очень хорошо, правда? И основное внимание будет уделено нужным местам, верно? Итак, еще один пример того парня, как вы можете исправить это. Мы можем исправить это, даже не внося радикальных изменений, а просто незначительные изменения в этом, и это существенно изменит это. Так что взгляните на это.Это фигура, которую мы видели ранее во вступлении к курсу. Итак, мы немного изменили цвет, поэтому все стало намного тусклее. Это, так сказать, не крик. А для некоторых это нехорошо. Но в целом очень важно, чтобы пальцы не слишком старались. Я знаю, что это немного бессмысленно, но ваши пальцы должны быть чем-то вроде команды. Они должны иметь такое же чувство срочности, как и остальные ваши тексты. А поскольку ваша техническая документация и технические презентации, что угодно, они будут иметь довольно спокойную и собранную атмосферу.Если вы не собираетесь делать что-то экстремальное, например, рекламу iPhone, у вас будет спокойная обстановка, верно? Опять же, это бессмысленно, но я надеюсь, вы понимаете. Поэтому вам не нужны вещи, которые кричат ​​на вашу аудиторию. Вы хотите чего-то крутого и спокойного. Как я сказал за пару минут до этого, следует сосредоточить внимание на этом x. Итак, вот этот парень красный, и это то, на что сразу обращают внимание, потому что это единственный шокирующий цвет во всей неудаче, верно? Итак, ваш взгляд направлен на то, что нужно, а все остальное легкое и очень успокаивающее, верно? Так что я как бы использую, так что это моя собственная фигура.Я использую ту же цветовую схему, почти те же оттенки вещей, но с небольшими изменениями. Хорошо? Да, еще один пример того, что, на мой взгляд, действительно работает. Опять же, это мое собственное. Итак, во-первых, у него очень хороший поток. Это начинается отсюда и продолжается здесь, а затем идет сюда. Таким образом, вы четко знаете, на что смотреть в любой момент времени. Опять же, цвета — это команда, и единственная яркая вещь — куда мы хотим направить наш взгляд? Наш последний пример? Этот парень здесь.Так что здесь много чего происходит. И как вы можете видеть, просто взглянув на это, вы знаете, на чем вы должны сосредоточиться, на этих цветных вещах, верно? Итак, здесь мы пытаемся передать информацию через цвет. И я только что сказал тебе, что ты не должен этого делать. Как вы заметите, цвет — не единственное, что передает информацию. Все объекты, которые неактивны, имеют однострочную границу, а у них — двойную. Таким образом, даже если вы распечатаете их, даже если вы избавитесь от цветов, то, на чем вы хотите сосредоточиться, все равно останется сфокусированным.Вот что я имею в виду, когда говорю, что не следует передавать информацию с помощью цвета. Это означает, что вы не должны использовать цвет только для передачи информации, потому что, если цвет исчезнет, ​​номер один, номер два, если у вас есть кто-то с ослабленным зрением. На номер три, если у вас есть среда, в которой цвета не очень отличаются друг от друга. Так что это вызовет проблемы. Или, если вы находитесь в очень большом зале, там тоже будет очень кстати.Хорошо. Передавайте информацию по своим линиям. Но вы всегда можете дополнить эту информацию или сделать небольшой акцент, используя цвета. Ладно, это довольно много пустяков. Теперь давайте перейдем к конкретным рекомендациям, как вы можете подойти к этому. То, что вы хотите сделать, очень просто. Вам даже не нужно об этом думать. Он полностью механический. Итак, что вы делаете, вы выбираете любые четыре угла, любые четыре цвета, которые вам нравятся, пишите это. Здесь проявляется ваше творчество, ваш выбор.Большие четыре цвета, которые вам нравятся, и вы будете работать. Но я рекомендую вам следовать основам. Красный, зеленый, синий, желтый. Сделайте фиолетовый, что-нибудь в этом роде, да? Просто придерживайтесь основ. А затем вы отбрасываете непрозрачность или легкость. Или иногда это называется значением 50, 25 или 15 процентов. Что это обозначает? Позвольте мне дать вам представление об этом. Поэтому, если вы выберете любой инструмент, который вам нравится, любой инструмент, над которым вы работаете, у вас будет что-то похожее на палитру цветов. Так выглядит примерно так.Итак, это всего лишь поиск в Google, но какой бы инструмент вы ни использовали, он покажет вам своего рода палитру цветов, которая выглядит примерно так. Допустим, вы выбрали синий цвет, и он вам действительно нравится. Если так его использовать, это очень шокирует. Он очень яркий, слишком много кричит. Итак, что вам нужно сделать, это сначала взглянуть на эти HSV или HSL, которые обычно работают с RGB. Но в этом конкретном случае мы хотим взглянуть на эти HSV или HSL, верно? Даже если у вас их нет в вашем инструменте, все в порядке.У вас будет эта коробка, и это все, что нам нужно. Итак, вы посмотрите на свой цвет и увидите, что в одном углу он очень ярко-белый. Сразу внизу. Это очень темный черный цвет. Этот угол здесь максимального цвета. И снова с самым ярким, а это максимум цвета с самым темным оттенком. Что вы хотите сделать, так это взять этот цвет и перетащить его к светлой части здесь и следить за этим зельем насыщенности здесь. Хорошо. Так что, если вы переместите это, вы заметите, что он падает.Так что вы хотите сделать это, по крайней мере, правильно. Это примерно 50 процентов. Если вы посмотрите на HSL, то яркость снизилась на 76 процентов, но этого достаточно. Хорошо? Вы также можете убрать непрозрачность. Это тоже работает, но с легкостью работать намного проще. Поэтому я рекомендую вам уменьшить его до 50 или 25 процентов, а в некоторых случаях даже до 15 процентов. Теперь вы можете подумать, что это очень, очень светло. Это не покажется. Но самое легкое, что вы можете сделать, то, что будет печатать идеально, — это 4%, верно? Так что вы можете спуститься до самого конца.Даже это будет заметно для публики. Так что не беспокойся об этом. Как видите, здесь есть разница между белым и синим, верно? Так что всего 4% работает. Так что 15 процентов — это довольно темно. Хорошо? Как видите, он выглядит довольно темным. Вы можете довести до 50 процентов, но я настоятельно рекомендую не превышать 50 процентов для большинства цветов. Для некоторых цветов вам, возможно, придется отказаться от него намного больше. Например, если вы выберете шокирующий розовый. Так что для этого вам придется отказаться от этого намного больше, не так ли? Если вы выберете очень гладкий синий.Так что вам, возможно, придется немного увеличить насыщенность. Вы можете немного поэкспериментировать с этим. Но если у вас мало времени, просто выберите 50, 25 или 15 процентов. Итак, давайте посмотрим, какими будут разные цвета, когда вы это сделаете. Допустим, у вас были эти цвета, вы выбрали эти четыре цвета. И если вы отбросите непрозрачность этого парня вот здесь, так что, кстати, у них есть заливка и обводка. Итак, обводка — это линия вокруг него, если вы не знаете, а заливка — это то, что находится внутри поля. Так что, если вы уменьшите непрозрачность для красного, он превратится в очень приятный цвет.Это очень шокирует. Это будет плохо выглядеть почти на всех рисунках и превратиться во что-то действительно хорошее. Зеленый, опять же, очень хорошо работает. Зеленый, возможно, вам придется сбросить намного больше, потому что с зеленым немного сложно работать, но вам, возможно, придется отказаться от этого немного больше. Клей действительно хорошо работает. И желтый тоже. Так что, если вы выберете желтый, вы можете его много отбросить. Опять же, с желтым немного сложно работать, но сразу же у вас есть эти четыре цвета, которые вы можете использовать практически на любой фигуре.Итак, если вы вернетесь сюда, вы увидите, что это цвета, которые были выбраны, кроме этого пурпурного. Так что это действительно хорошо работает почти во всех случаях. Итак, у вас есть серый цвет, и у вас есть эти четыре цвета, которые вы можете использовать в своих фигурах. Это так просто. Вам не о чем больше беспокоиться. Просто выберите цвет, уменьшите непрозрачность, и все. Итак, в качестве резюме, вот пара моментов, которые вы можете использовать в качестве контрольного списка. Таким образом, вы не используете более трех-четырех цветов. Очень сложно обрабатывать более трех-четырех цветов, даже если вы немного переборщите, если не знаете, как с этим справиться, просто выберите три цвета, хорошо? Не используйте очень светлые оттенки и очень нравятся менее 4%.Его не будет видно, если вы его распечатаете. И также не используйте непрозрачность более 50 процентов. Хорошо? Не используйте цвета для передачи важной информации, как мы обсуждали ранее. Обязательно используйте стили линий для передачи важной информации. Например, вот, опять же, стиль жизни, двойная граница, это действительно хорошо работает. Двойные бордюры — одна из тех вещей, которые я не видел очень часто, но они работают очень хорошо, если все сделано правильно, особенно в этой конструкции ворса. Мы вернемся к этому в самом конце курса.И, наконец, самое главное, не используйте градиенты. Просто взгляните на это, пройдите через это. Это очень просто. Как я уже сказал, вам не нужно ничего делать, чтобы ваши цвета выглядели хорошо. Это все, что тебе нужно, правда? Просто выберите непрозрачность с пониженным цветом, которая работает примерно в 90–95% случаев. Надеюсь это поможет. Наносите их на свои пальцы. Выберите любую прошлую фигуру, с которой вы работаете, примените эту простую схему и посмотрите, какие улучшения она дает. 4. Шрифты менее чем за 5 минут. После того, как вы закончите выбирать цвета для своего рисунка, следующее решение, которое вам нужно принять, будет касаться шрифтов и выбора шрифта.Как и все, что связано с дизайном и искусством, за этим стоит огромная теория. Какие формы работают, какие функции каких шрифтов работают? Что вы хотите делать? Чего вы хотите избежать? За этим стоит огромная наука, и, очевидно, у вас нет времени изучать эти вещи. Итак, я дам вам два очень конкретных правила, которым вы должны всегда следовать. Номер 1: чем больше вы возитесь со шрифтом, тем хуже вы его усложняете. Шрифты разрабатываются профессионалами, знающими, что они делают.Итак, вы оставляете шрифт, делаете то, что он должен делать, режим, в котором вы пытались его настроить, тем больше вы собираетесь его испортить. Итак, это первый руководящий принцип. Конечно, есть исключения, как всегда, если вы знаете, что делаете, это нормально. Но если вы этого не сделаете и у вас нет времени на изучение теории, лежащей в основе этого, просто оставьте шрифт B, это правило номер один. Используйте хороший шрифт, и я расскажу вам, как придумать хороший шрифт всего за минуту. Используйте хороший шрифт, пусть будет. Не возитесь с этим.Хорошо, это самое главное. Второе правило — это ваша техническая иллюстрация. Вы рисуете не в вакууме. Он будет где-то встроен. Люди увидят это либо в блоке текста, либо вы собираетесь использовать его в презентации, либо он будет на веб-сайте, где он будет окружен каким-то другим материалом. И очень важно, чтобы шрифт на рисунке соответствовал шрифту материала в его окружении, верно? Так, например, если у вас есть шрифт без засечек, вокруг него есть маленькие волнистые штрихи.Вот эти ребята, они называются засечками. Если не знаешь, это не важно. Итак, если у вас есть шрифт с засечками в вашей среде, вы хотите использовать здесь текст с засечками. Если у вас есть среда, такая как печать, в которой у вас есть засечки, вы должны использовать их и в своих рисунках. Это одна из самых распространенных ошибок, которую делают люди, потому что фигуры обычно рисуются с помощью инструмента в среде, которая отличается от всего остального. Так, например, если бы вы нарисовали этот рисунок в онлайн-инструменте, он, скорее всего, по умолчанию использовал бы шрифт без засечек.И если я попытаюсь поместить это в свою исследовательскую работу, моя исследовательская работа будет потому, что она началась с того, что она была напечатана. У него будет шрифт с засечками, и рисунок будет выглядеть неуместно. Итак, два правила. Номер 1: не возитесь с номером шрифта, чтобы убедиться, что ваш шрифт на чертеже соответствует шрифту и среде. Это единственные два правила. Когда они у вас в голове, вот как вы подберете для себя лучший шрифт. Большинство инструментов, большинство инструментов, которые вы придумаете, будут иметь шрифт по умолчанию, отправленный на что-то менее оптимальное.Например, если вы перейдете в Google Drawing, у них будет установлен шрифт по умолчанию Arial. Если вы перейдете в MS Word, их шрифт по умолчанию похож на Calibri, что на самом деле не так уж и хорошо. Многие люди будут использовать Times New Roman, но не Times New Roman. Это уже устаревшие шрифты, которым сильно не хватает. Теоретически дизайн шрифтов прошел долгий путь за последнее десятилетие или около того. Таким образом, вы всегда хотите использовать новейшие шрифты и то, как вы пытаетесь найти шрифт. Это очень просто. Все, что вам нужно сделать, это зайти в свою поисковую систему и найти это.Итак, шрифт IOS по умолчанию. Какой шрифт по умолчанию используется в iOS? Это Сан-Франциско, но не с открытым исходным кодом, верно? Так что вы не можете его использовать, это не бесплатно. Вы можете искать шрифт по умолчанию для Android, а шрифт по умолчанию для Android — Roboto. Таким образом, многие сервисы, предлагаемые Google, которыми пользуются многие люди по всему миру, используют Roboto. В настоящее время он может измениться в будущем, но если вы его поищете, вы его найдете. И, скорее всего, этот шрифт будет вам доступен. Так что все, что вам нужно сделать, это перейти в Google Fonts.Итак, это шрифты на google.com. А вы ищите шрифты. Итак, Робото, и готово. Итак, у вас есть этот шрифт. Какой бы шрифт вы ни придумали, вы можете пойти туда, скачать его и использовать, если он еще не установлен. Хорошо, это так просто. Большинство онлайн-инструментов позволят вам использовать собственный шрифт. Если дуал не позволяет вам использовать шрифт, который вы хотите, вы, вероятно, захотите изменить инструмент. В любом случае. Итак, вот как вы это выбираете. Прямо сейчас, если вы выберете roboto, это сработает.В большинстве случаев. Если вы хотите распечатать, вы можете использовать Cambria, которая используется по умолчанию в Microsoft Office. Хороший шрифт. Или вы можете просто перейти на домашнюю страницу шрифтов Google и выполнить поиск шрифта с засечками. Итак, поехали. Робото плита. Это действительно хорошо работает. Я имею в виду, что если вам нужен шрифт без засечек, выбирайте Roboto. Если вы хотите установить шрифт Roboto Slab, в большинстве случаев это сработает, если вы еще не знаете, какой шрифт будет использоваться в вашей среде, и в этом случае просто используйте этот шрифт. Ладно, вот и все.Последний совет для шрифтов: в общем, светлые варианты шрифта обычно лучше. Итак, если у вас достаточно хороший шрифт, каковыми являются большинство современных шрифтов, если вы попытаетесь его найти, вы обнаружите, что обычный шрифт с числом 408 выглядит так. Так что это нормально с точки зрения науки, мне очень нравится этот шрифт, он отлично работает. И легкий вариант этого — вот этот парень. Так что он немного светлее, светлые вариации шрифта выглядят немного современно, особенно если у вас немного крупный текст, каковым является корпус и рисунки.Так легкая публика выглядит современнее. И это вроде как нелогично. Но они были современными, цитируем без кавычек более двух десятилетий, не так ли? Потому что средний дизайнер просто не использует светлый вариант. Тем, кто делает свои схемы и рисунки, они кажутся более современными. Так что, если вы зайдете даже в Интернет, вы заметите, что многие современные дизайны используют облегченные варианты шрифтов. Так что используйте шрифт, который имеет светлый вариант. Выбирайте легкий вес. Это будет действительно хорошо смотреться в ваших пальцах.Таким образом, эти одна или две вещи могут улучшить вашу фигуру. Не используйте курсив. Так что с Алексом очень сложно справиться, если вы не будете экономно знать, пока вы их используете, просто не используйте курсив. Абсолютно. Никогда, никогда, никогда, никогда, когда под вами не подчеркивается текст. Хорошо. Это из тех времен, когда у нас были пишущие машинки, и это создает другую историю. Только не подчеркивайте текст на рисунках. Используйте доску для выделения. Вы можете экономно использовать курсив, но в целом облегченный вариант хорошего современного шрифта — это все, что вам нужно.Вот и все. Это все, что вам нужно знать о шрифтах. Для более крупного текста. Мы уже видели концепцию отступов и межстрочного интервала ранее, они уже были рассмотрены. Выбор шрифта — это всего лишь одно правило. Выберите легкий вариант хорошего современного шрифта, и пусть будет. Вот и все. Как только у вас есть выравнивание, интервалы, цвета и шрифты все на своих местах. Последнее, что осталось, — это определить ход диаграммы, то, как вы хотите, чтобы аудитория увидела вашу техническую работу. И мы расскажем об этом в следующем видео.5. Поток информации: для технической иллюстрации или всего, что вы хотите изобразить визуально, движение глаза определяет, собираетесь ли вы удерживать внимание своей аудитории и собираются ли они обращать внимание на то, что вы пытаетесь сказать. Общий принцип заключается в том, что вы должны направлять свою аудиторию, куда смотреть в вашей фигуре, не находясь на самом деле на их сайте, чтобы направлять их. Позвольте мне объяснить это на примере. Итак, на этот раз мы собираемся сначала взглянуть на положительный пример, чтобы вы могли понять, что я имею в виду.Итак, если вы посмотрите на этот рисунок, даже не понимая, о чем он пытается сказать. Ни подписей, ни пояснений. Но даже не понимая этого, вы почти сразу поймете, с чего начать, верно? Как видите, это стрелки. Так что, даже если ваш взгляд направится к какой-то точке здесь, вы все равно будете возвращены назад по этим стрелкам и к этой красной точке здесь. Обычно в англоязычном мире или у людей, знакомых с английским языком.Здесь я собираюсь автоматически перейти в левый верхний угол, потому что именно там обычно начинается контент. Хорошо, это верно для большей части мира. Даже если это не так, ваши стрелки, которые разбросаны по всему рисунку, в основном уведут вас сюда, и вам не придется сознательно думать о том, с чего начать. Когда вы окажетесь там, у вас будет очень четкое направление, куда идти. Итак, у вас есть вот эта коробка. Вы смотрите на него, и тогда у вас появляется стрелка, указывающая на следующее, на что вам нужно смотреть, верно? Итак, вы посмотрите на этот компонент, а затем у вас будет еще одна стрелка, и у вас будет еще одна стрелка к тому времени, когда вы дойдете до конца строки.Теперь вам нужен совет о том, куда двигаться дальше. И есть очень большая, очень заметная стрелка красного цвета, говорящая вам, что вам нужно идти сюда, а не сюда. Хорошо? Вот что я имею в виду под потоком. Ваш глаз будет очень естественно течь отсюда и затем сюда, и он будет приходить сюда. И к тому времени, когда вы перейдете к нижнему правому углу, вы узнаете, что просмотрели все компоненты этого рисунка, всю эту иллюстрацию, и все готово. Итак, вы сообщили все, что хотели сделать.Запомните этот основной принцип. Вы должны направлять аудиторию, и вы должны быть уверены, что все, что вы хотите привлечь внимание к глазу или потоку взгляда, попадает где-нибудь на линии. Хорошо, это общий принцип. Теперь это сделать не очень сложно, если вы осознанно думаете о своих фигурах. Итак, давайте сделаем пару примеров, а затем я расскажу вам, как вы можете подойти к этому механически, чтобы вы всегда могли убедиться, что поток движения в ваших фигурах в порядке.Хорошо, давайте взглянем на другой пример, который вроде нормально, но не так уж хорош. Так что это все мои собственные цифры, большинство за последние годы, и некоторые из них не так уж и хороши. Так что я всегда могу оглянуться назад, подумать о своих ошибках и попытаться исправить их. Итак, на этом рисунке, опять же, есть несколько стрелок, указывающих в определенных направлениях, но нет четкой отправной точки. Итак, если мы примем англоязычную метафору, мы можем перейти в левый верхний угол. Итак, у нас есть пользователь, хорошо. У нас есть четкое направление, куда двигаться дальше.Таким образом, мы можем перейти к контактам, заметкам и сообщениям. И все три из них указывают мне на мое приложение. Итак, раз я здесь, это проблемный момент. Здесь. У меня выходит одна стрела, но входят три стрелы. И я не был в том месте, откуда эти стрелы входят. Итак, подсознательно мой разум не может понять, стоит ли мне сначала пойти дальше и посмотреть на эту часть здесь и попытаться понять это, чтобы я мог понять, почему эти стрелы входят.Или другой вариант, который у меня есть, — следовать логической цепочке и просто пытаться увидеть, куда она идет. Так что если я пойду туда, я пойду сюда, а потом я пойду сюда и сюда. Теперь я вернулся к приложению. Но проблема в том, что теперь я вернулся туда, откуда начал. И, боже, я подсознательно это помню. Это не ваша аудитория, сознательно пытающаяся выяснить, где искать. Это то, что происходит подсознательно. Они не думают об этом. Я не смог указать им, куда идти на этом рисунке. Итак, эта часть здесь, теперь все осталось, верно? И теперь публика, скорее всего, просто оставит фигуру и двинется дальше.И я упустил возможность передать им эту информацию. Итак, позвольте мне нарисовать это еще раз. Поток был бы следующим: вы идете отсюда, здесь, и все готово, а затем вы двигаетесь дальше. Это то, чего мы не хотим, правда? Итак, мы рассмотрим пример того, как мы можем это решить. Но возьмем еще пару примеров. Это действительно пример потока, сделанного правильно? Итак, снова начиная с верхнего левого угла, у нас есть четкое направление, куда двигаться. Итак, мы спускаемся и поднимаемся. В любой момент времени у нас есть одно направление, по которому мы можем пойти туда, но это не очень длинный путь.Я могу пойти туда. Я вижу, что это обзор литературы, и поскольку мне больше некуда идти, мой взгляд возвращается. Если аудитория обращает внимание, и они ищут подробности, и они идут туда, возвращаются сюда, назад сюда и обратно сюда, и обратно сюда и обратно здесь, назад и так далее и так далее. Так что это работает очень хорошо, и вы можете добраться до конца фигуры, не останавливаясь. И подумайте, где вам следует искать дальше. Это идеальная ситуация. Я понимаю, что не всегда так можно сделать.Эту фигуру можно нарисовать очень хорошо. Однако бывают случаи, когда у вас такой сложный поток, что невозможно нарисовать его так визуально и чисто. Итак, вот как мы можем справиться с некоторыми из этих случаев, используя помощников в наших рисунках. Итак, давайте посмотрим на это на примере. Вот эта цифра, она довольно сложная, и, как вы можете видеть, здесь много компонентов. Опять же, вам не нужно понимать, что фигура пытается передать.Мы просто пытаемся взглянуть на поток. Итак, мы начинаем с верхнего левого угла, и у нас есть четкое направление движения вниз. У нас есть эта стрелка, но нам не нужно беспокоиться об этой стрелке прямо сейчас, потому что сразу под приложением у нас есть стрелка. Итак, у нас есть вспомогательные аннотации внутри нашего рисунка, которые говорят нам, где искать. Итак, поскольку у нас есть эти 1234, у нас есть четкое представление о том, куда нам следует смотреть дальше. Итак, один, затем два, а затем три. И тут мы знаем, что мы не должны спускаться, потому что у нас здесь четверка.Так что совершенно ясно, куда идти, не так ли? Итак, здесь есть проблема. Надеюсь, вы это видите. Если нет, мы займемся этим через минуту. Итак, у нас есть четыре, и вы идете сюда. Здесь у вас снова есть выбор, идти мне вверх или вниз. Но этот выбор очень легко решить, используя данные нам числа. Итак, шесть, у нас здесь семь преобразований. И хотя здесь есть скачок, но мы знаем, что это будет следующая стрелка, потому что у нас там есть номер. Так что это очень просто. Хорошо? Итак, мы получили от механизма оценки политики девять, затем у нас есть время и 11, и все готово.Итак, в чем проблема? Проблема в том, что вы видите две вещи, которых все еще не хватает. Ну вообще-то три. Итак, у нас есть этот парень. У нас есть этот парень, и у нас есть этот парень. Эти трое были упущены в нашем потоке. Итак, мы пошли с 123456789, 10, 11, и эти трое были пропущены. Итак, вот как вы с этим справляетесь. Если у вас есть фигура, у которой есть некоторые компоненты, которые не могут быть вписаны в поток. Вы делаете поток, вы вписываете в него столько компонентов, сколько можете. И все, что не учтено.Если это не так важно, просто оставьте это. Это можно рассматривать как украшения. Но если это важно, то вы делаете это визуально отличным от остальной фигуры. Так, например, это устройство визуально отличается от всего остального, что было замечено до этого момента. Так что все это были очень мягкие коробки, очень простые коробки, и этот парень — иконка, поэтому ваш взгляд автоматически притягивается к нему. Точно так же пользователь нарисован в визуально отличном от остального стиля стиле.Так что ваш взгляд автоматически будет обращен на это. И как только вы дойдете до пользователя, вы увидите, что есть варианты, которым он может следовать. Таким образом, пользователь может установить, настроить, указать или утвердить файл манифеста. И файл манифеста теперь связан с пользователем. Итак, мы рассмотрели все. Итак, начнем с потока. Если есть неясности, вы можете добавить к ним аннотации. Очень четкие аннотации, чтобы зрители могли понять, куда им следует смотреть. Если некоторые компоненты упущены, вы можете поместить в них визуально отличимые элементы, чтобы на них тоже было обращено внимание.Хорошо, это был положительный пример. Приведу еще один негативный пример, который мне очень не нравится. Я нарисовал это некоторое время назад визуально, это не так уж и плохо. У него довольно хорошее выравнивание и все такое. Но проблема в том, что вы начинаете отсюда. Вы идете сюда, и теперь вы не знаете, куда идти. И вы, вероятно, можете пойти туда, а затем вернуться, а затем пойти сюда, и это слишком сложно, слишком много всего происходит. Хорошо, это пример того, как не делать хорошего потока, даже если есть стрелки.Но эти стрелки не вызывают у меня головокружения. Вещи слишком перемешаны. Плюс есть еще одна проблема, которую мы видели ранее в курсе. Эти стрелки неправильно подключены к ящикам, которые они пытаются соединить. Может, мне следовало просто изогнуть вот так эту стрелку и вот так изогнуть эту стрелку вот здесь. Но в этой фигуре много неправильного, хотя визуально она не выглядит таковой. Итак, подведем итоги: вот как вы определяете форму своей фигуры.Первый. И это действительно очень важно. Сначала вы садитесь, берете лист бумаги и рисуете то, что пытаетесь передать. Как очень, очень грубый набросок того, что вы пытаетесь вставить в свою иллюстрацию. Так, например, у нас может быть коробка здесь. А это наша составляющая, правда? Мы знаем, что этот компонент будет взаимодействовать с нашим вторым компонентом. Итак, этот парень здесь, так что он может быть таким уродливым, верно? Это совсем не обязательно должно быть аккуратно. На самом деле, не рекомендуется делать его аккуратным.Просто отложите вещи и выясните, правильно ли они протекают. Так что это, вероятно, будет взаимодействовать с другим компонентом, который будет очень большим. И это будет С2 девять, что бы это ни было. И затем это связывается с 1234 различными компонентами. И это этот парень и этот парень, и этот парень, и этот парень, и этот парень, в свою очередь, общаются с этим здесь. Итак, вы откладываете все это, а затем выясняете, все ли связано. Если нет, то вы пытались добавить аннотации поверх него.Если даже это не сработает, вы попытаетесь его перерисовать. Так что, возможно, мы сможем взять их и как-то переместить, чтобы они не были равны. Сначала рисуется самое главное, потом второе и третье. Например, если они у нас есть, поэтому, если вы хотите сначала пройти по этому пути, вы сначала рисуете этого парня, а затем возвращаетесь, а затем вы немного отходите от коробки Sea 29, верно? Таким образом, это очень простое разделение пространства говорит вашей аудитории, что этот парень идет первым, а этот парень — вторым.Так что вы можете думать об этих вещах почти самостоятельно, начав рисовать их на бумаге, верно? Так что это пригодится. Позвольте мне дать вам краткое изложение контрольного списка, который у вас должен быть. Итак, вы начинаете с чернового наброска, максимум десять минут, верно? Так что неважно, насколько сложна ваша фигура, просто не тратьте на нее много времени. Сделайте это очень быстро. Сверху нарисуйте кривую потока. Так, например, если у вас есть это, вы идете дальше и рисуете кривую потока, которая показывает вам, куда вы хотите направить глаз, верно? Если не получается, попробуйте исправить, ладно, определите, какие элементы были упущены.Например, в одном из предыдущих кейсов у нас был пользователь, которого не хватало, а затем мы нашли способ включить эти оставшиеся части, либо сделали их визуально другими, либо попытались добавить к этому некоторую аннотацию, попробуйте провести мозговой штурм. И если у вас есть какие-то конкретные примеры из практики, вы всегда можете оставить их в комментариях, и мы сможем обсудить это подробно. При необходимости добавьте номера расхода. И последнее, но не менее важное: очень важно дать место элементам, чтобы они могли размножаться, верно? Это означает, что вам не следует слишком теснить вещи вместе.Так, например, даже если у вас много чего происходит на вашей фигуре, у вас все равно должны быть промежутки вокруг ваших различных компонентов, чтобы их можно было отличить друг от друга. Вы же не сжимаете все вместе, правда? Это очень важно. И это одна из тех вещей, которым трудно следовать, если вы не видели действительно хороших примеров. Итак, в следующем видео я дам вам пару рекомендаций в отношении моего личного стиля, который мне очень нравится. И я убедился, что это действительно хорошо работает с широкой аудиторией.И если вы будете следовать им, они могут быть полезны. Но на самом деле это всего лишь мои рекомендации, и то, что я видел, действительно хорошо работает. Итак, давайте сделаем это в следующем видео. 6. Персональные рекомендации. Как мы уже говорили в самом начале курса, ваше личное мнение о том, что является визуально привлекательным, не так уж важно. И причина этого в том, что вам нужны научные доказательства, некая теория, лежащая в основе визуальных элементов, чтобы вы знали, что это понравится широкой аудитории, верно? Однако, учитывая, что за эти годы я видел некоторые вещи, которые нужны действительно с хорошими техническими показателями.И я видел, что большому количеству потенциальной аудитории эти вещи действительно нравятся. Я назову это личными предпочтениями, но они не совсем личные. Просто есть альтернативы, которые тоже работают. Но это тот выбор, который я сделал, и который действительно хорошо мне служил на протяжении многих лет. Итак, я хотел поделиться ими здесь. Хорошо. Но отнеситесь к ним с недоверием. Если я скажу, что этот стиль мне нравится, это просто то, что понравится большинству людей, но они могут не понравиться вам.И будет часть специалистов по визуальному представлению, которые не согласятся с этим. Так что относитесь к ним с недоверием. Итак, начнем с моего личного результата. И это очень хорошо служило мне долгое время. И это концепция закругленных углов. Например, взгляните на этого парня здесь. Итак, это прямоугольник со скругленными углами. А углы были настолько закруглены, что это похоже на таблетку. Это называется парным дизайном, и он очень хорошо работает на технических схемах.Это как бы смягчает образ того, что вы пытаетесь передать. Это уменьшает сухость пальцев и делает их более доступными. Если вы доведете его до крайности, вы превратите свои квадраты в круги. А круги — одна из тех вещей, которые люди не часто используют в своих технических диаграммах. И я лично убедился, что они действительно хорошо работают, если вы можете с ними справиться. И действительно способ обработки кругов — это дать им место. Просто разложите их, и они выглядят очень странно. Так что это одна фигура, которая мне очень нравится.Он использует концепцию кругов и другую концепцию, которая является личным фаворитом. И он работает очень хорошо, потому что не полагается на цвет для передачи акцента. Он использует то, что действительно хорошо работает на экране и в печати. И это концепция двойных границ. Итак, сразу же посмотрев на свою фигуру, вы увидите, что это попытка сделать акцент на ней, не пытаясь придать ей слишком большого значения, верно? Это очень тонко, но на самом деле акцент делается на том компоненте, который вы хотите выделить.Итак, общий принцип здесь — концепция закругленных углов. Если вы постоянно используете их в своих диаграммах, они будут выглядеть действительно красиво. Давайте посмотрим на другой пример этого. Я повторял это снова и снова, мне очень нравится эта фигура. Если я сам так скажу. Общий принцип здесь — концепция светлых тонов и дизайн сборки. Итак, это две главные вещи. Кроме того, у меня есть еще один личный фаворит — идея использования серого с черным.Таким образом, пунктирные линии также выглядят серыми для глаз, хотя на самом деле они черные. Они выглядят серыми, а это черные линии. Этот текст здесь отличный. Таким образом, сочетание серого и черного работает очень хорошо, потому что оно видно на экране и на печати, вы можете различать серый и черный даже на печати. И на экране это выглядит действительно хорошо. Так что, если вы возьмете эту серо-черную комбинацию, вы можете использовать ее для создания действительно хороших вещей. Примером этого является вот эта цифра. Итак, опять же, на нем есть кое-что, что действительно приятно.Как видите, у нас здесь много сложных связей. Если вы попытаетесь сделать их всех черными, это превратится в большой беспорядок, и никто не сможет увидеть, что здесь происходит. Но мы взяли концепцию серо-черного комбо. Черные линии — это те линии, которые мы хотим выделить. А серые придают нашей неудаче акцент, глубину и завершенность. Даже если вы не понимаете, что пытается сказать фигура, вы можете видеть, что это основная связь. К тому же у нас есть еще несколько вторичных связей, которые переходят от этого парня к этому парню.И у нас есть некоторые элементы, переходящие от этого парня к этому парню здесь. Точно так же все подключается отсюда, а также подключается через накладные расходы. То же самое. Все эти компоненты связаны с этим парнем, но они также связаны с этим парнем и с этим парнем, с этим парнем и с этим парнем. Итак, вы видите, как это визуальное представление переводится в текст. Все эти компоненты подключены к этому компоненту 3. Итак, это наша основная коммуникация. Но они также связаны с этим.И поскольку они вторичны, что обозначено словом «также», они неактивны. Вы используете комбинацию серо-черного цвета, чтобы акцентировать внимание на своей основной концепции. И вы можете добавить глубины или слоев к своим техническим фигурам, используя элементы, выделенные серым цветом. Хорошо? Итак, у нас есть три важных концепции на этом рисунке. Одна из них — идея использовать пространство для группировки. Итак, вы можете видеть, что здесь есть три основные группы. Итак, у нас есть эта группа, которая здесь заканчивается. Затем у нас есть немного места, а затем у нас есть эта группа.А потом у нас есть еще немного места. Затем у нас есть еще одна группа, одна веревка и другая группа. И третье правило, у нас есть три группы, и они просто немного отделены друг от друга каким-то пространством, которое даже не пусто. Но если вы посмотрите на это, я уберу линии, чтобы вы могли посмотреть. Итак, если вы посмотрите на это, теперь, когда вы знаете, что искать, вы увидите, что это три разных компонента. Таким образом, даже если вы визуально не узнаете, что происходит, ваш разум подсознательно собирается сгруппировать их вместе, используя концепцию пространства, представленную здесь.Таким образом, вы можете использовать пробелы для группировки. Вы также можете использовать скобки, верно? Так что эти гонки, лично я, опять же, это личное предпочтение. Мне очень нравится, когда они выделяют материал. Итак, эта скобка здесь, по сути, объединяет все эти вещи в одного человека, хорошо? Точно так же все эти три сгруппированы вместе с помощью этой скобки. И они также сгруппированы вместе с помощью скобок. Так что мне очень нравится концепция подтяжек, потому что они не мешают вам. Вам не нужно смотреть на них, если вы этого не хотите.Так что, если ваша аудитория даже не обращает внимания на подтяжки, это все равно будет работать, но подтяжки добавят глубины и еще один уровень понимания вашим фигурам. И последнее: вы можете использовать пунктирные границы вокруг прямоугольников, чтобы выделить элементы. У меня их здесь нет, но вы можете нарисовать здесь рамку, сделать ее пунктирной рамкой и придать ей очень светлый, например, 5%, 6-процентный серый фон. И он выделит эту вещь как единый компонент, чтобы это можно было сделать.Проблема, с которой сталкиваются люди, заключается в том, что они делают эти границы или эти блоки компонентов очень темными. Если вы собираетесь наложить границы вокруг объектов и попытаться сгруппировать их вместе, вы должны убедиться, что границы и фон очень светлые, очень, очень светлые. Это должно быть еле видно, правда? Он по-прежнему будет служить своей цели, верно? Так что попробуйте. Надеюсь, взглянув на эти примеры, вы выберете правильный цвет. Если вы не помните, вернитесь к видео, и вы поймете, что я имею в виду.Так что позволь мне избавиться от всего этого. Оставляю вам одну из самых важных рекомендаций, которые я могу дать. Все эти фигуры, которые вы видели здесь, все эти фигуры, которые я нарисовал. Этот, этот, этот парень здесь, на этой фигуре, этот, кто угодно, этот. Все это было нарисовано с помощью инструмента, который мне очень, очень нравится, как я сказал в начале курса. Сам по себе этот курс не требует от вас использования определенного инструмента. Однако выбор правильного инструмента действительно облегчает вашу жизнь.Например, в самом начале курса мы обсуждали выравнивание и распределение. Если вы воспользуетесь этим инструментом, который я порекомендую через минуту, проблема выравнивания и распределения будет решена автоматически. Вам не о чем беспокоиться. Я сказал, что вам нужно выбрать правильные цвета. Вы должны сделать цвета согласованными. Инструмент сделает это для вас чрезвычайно простым. Мы обсудили концепцию правильных шрифтов. Вы получаете это бесплатно, верно? Так что все эти вещи, этот очень качественный рисунок фигуры, вы получаете почти бесплатно.Но не совсем бесплатно, а почти бесплатно, если вы однажды изучите этот инструмент. Поэтому я рекомендую, чтобы для рисования подобных фигур вам действительно, действительно, действительно нужно потратить некоторое время на изучение LTAC. Пожалуйста, используйте позже. Это изменит то, как вы все делаете. Позже можно использовать для создания ваших простых одностраничных документов. Вы можете использовать его для написания исследовательских работ. Вы можете использовать его для написания служебных записок. Вы можете использовать его для создания экзаменационных работ, заметок и даже пальцев, верно? Итак, все эти фигуры были нарисованы с использованием латекса.Вам не нужно заниматься литикой. Но если вы находитесь под номером 1, если вы занимаетесь информатикой, у вас не возникнет проблем с обучением позже. Даже если вы не занимаетесь компьютерными науками, я видел людей, имеющих образование в области математики, естественных и гуманитарных наук, психологии и всех этих областей. Это не так уж и сложно. У него очень плохая репутация сложного. Но если вы все сделаете правильно, это очень просто, и это может привести к действительно очень качественному результату практически для всего, что вы делаете.Поэтому я очень рекомендую вам его использовать. У меня есть курс по литике. Вы можете использовать это. Или вы можете использовать любой бесплатный источник, доступный в Интернете. Есть много голов на будущее. Это бесплатно. Вы можете начать изучать это. И если вы потратите на это не больше недели, это будет действительно хорошо. Это моя последняя рекомендация. Надеюсь, вам понравился курс. Теперь ваш проект будет заключаться в том, чтобы взять некоторые из ваших фигур, либо передать триггеры, либо нарисовать новую, а затем применить эти концепции, загрузить их и сообщить мне, где их найти, чтобы я мог предоставить некоторые отзывы по ним, чтобы вы можете учиться на практике.Поскольку это дизайн, вы должны применить эти концепции, просто просмотра видео будет недостаточно. Так что удачи в проекте, пожалуйста, напишите мне, и мы посмотрим, как мы можем помочь вам улучшить его еще больше.