Гид по основам типографики для начинающих и недизайнеров

Какой шрифт лучше, с засечками или без?

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

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

1. Droid Serif

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

Если вы раньше применяли PT Sans или Source Sans Pro, PT Serif и Source Serif Pro – то возьмите на заметку, это еще два универсальных шрифта с засечками и хорошим дизайном цифр.

2. Crimson Text


Размер строк с Semibold and bold немного уменьшен, иначе они были бы слишком длинными

Crimson Text – это то, что нужно для шрифтов с засечками в стиле Garamond. Перед вами популярный шрифт с засечками, с символами равными по ширине, и равными по высоте.

3. Old Standard TT

Если вы ищете классический шрифт с элегантным стилем, то Old Standard TT – то, что нужно. С двойной вертикальной линией на знаке доллара и красивой волнистой линией в цифрах «2» и «7» он, конечно создаст атмосферу старины.

4. Kameron

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

5. Copse

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

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

2

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

3

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

4

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

5

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

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

6

Размер шрифта измеряется в пунктах. Один пункт- это очень маленькая единица, равна 1/72 дюйма*.(о,3 мм), то есть шрифт в 72 пункта имеет высоту в 1 дюйм. В большинстве книг чаще всего используется шрифт размером пунктов. *Дюйм- единица длины в английской системе мер, равна 2, 54см.

8

Растровые и векторные (True Type) Растровые шрифты хранятся в виде набора пикселей, из которых состоят символы, допускают масштабирование только с определенным коэффициентом. К этому типу относятся шрифты – MS Serif, MS San Serif, Small и другие. В векторных шрифтах символы описываются математическими формулами и допускают произвольное масштабирование. К векторным шрифтам относятся шрифты – Arial, Times New Roman, Courier New и т.д.

10

Чтобы познакомиться с набором шрифтов установленных на компьютере необходимо выполнить команды Настройка – Панель управления – Шрифты.

11

Пропорциональные и непропорциональные В пропорциональных шрифтах буквы имеют различную ширину. Например, шрифт Verdana. В непропорциональном шрифте все знаки имеют одинаковую ширину. Одинаковая ширина символов достигается за счет добавления пробелов после символов, имеющих меньшую ширину. Эти шрифты гарантируют, что символы в строках располагаются строго друг под другом. Например, шрифт Courier New, шрифт Tahoma

12

Рубленные и с серифами (засечками) Рубленные шрифты имеют гладкие линии и углы, а шрифты с серифами имеют небольшие «украшения» на уголках символов. К рубленным шрифтам относится шрифт Arial, а к шрифтам с засечками Times New Roman и Courier New. Считается, что шрифты с засечками легче воспринимаются глазом, поэтому в большинстве печатных текстов используются именно они. Рубленные шрифты используются обычно для заголовков, выделений в тексте и подписей к рисункам.

13

Кроме типа шрифта ТР Word позволяет изменять размер шрифта и начертание (полужирное, курсив, полужирное курсивное). Для Форматирования шрифта необходимо ввести команду Формат – Шрифт …

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

Все символы моноширинного шрифта имеют одинаковую ширину, независимо от начертания буквы отводимое под неё пространство не меняется (рис. 3).

Рис. 3. Текст с моноширинными символами

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

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

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

К моноширинным шрифтам, применяемым на сайтах, относится шрифт Courier и его разновидности.

Расстояния между строками, словами и буквами в типографике

Интерлиньяж

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

Когда подбирают интерлиньяж, учитывают:

  • количество текста в блоке;
  • кегль шрифта;
  • характер шрифта — простой он или супердекоративный;
  • размер выносных элементов;
  • длину строки.

Простой совет: начните со значения интерлиньяжа, равного примерно 1,2 размера шрифта. Например, отрывок набран 10-м кеглем — значит, интерлиньяж 12.

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

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

Трекинг

Трекинг — это подбор расстояния между символами внутри одного слова.

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

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

Кернинг

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

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

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

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

Случаи использования

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

Если вы пользуетесь Windows, среди антикв хорошим выбором будет Georgia (такой шрифт используется на сайте The New York Times или в интерфейсах WordPress) или Garamond (классическая антиква, которая идет в комплекте с Microsoft Office). На Mac OS тоже есть Georgia, а также прекрасные Iowan Old Style (один из шрифтов в читалке iBooks), Charter (который хорошо подходит для печати в маленьком размере) и PT Serif (его можно бесплатно скачать для Windows).

Для скачиваемых веб-шрифтов можно использовать Bodoni, Playfair Display или Courier New.

Используйте шрифт без засечек для коротких текстов

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

Цвет и контраст в типографике

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

Цвет создаёт визуальный ритм, иерархию элементов и помогает расставить акценты в тексте

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

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

Шесть вариантов цветовых комбинаций для текста и фонаИзображение: Anna Haas
Контраст текста и фона на упаковке кремов практически отсутствует

Но именно в таком дизайне это эффективное решение: рядом с яркими логотипами и упаковками конкурентов эти едва видные надписи привлекут вниманиеИзображение: Oksana Paley / Jane Berezhna / omsky studio / andrew kuzmin / Behance. Подбор цвета в типографике прямо связан с теорией цвета в дизайне вообще

Начать разбираться в этой области стоит с цветового круга Иттена — одной из теоретических основ современного дизайна

Подбор цвета в типографике прямо связан с теорией цвета в дизайне вообще. Начать разбираться в этой области стоит с цветового круга Иттена — одной из теоретических основ современного дизайна.

Кроме того, есть множество онлайн-сервисов и приложений, предлагающих как механику подбора цветов, так и готовые цветовые схемы, — например, Adobe Color.

Немного теории

В 1878 году профессор Эмиль Джаваль (Emile Javal) из парижского университета установил, что взгляд при чтении не движется плавно вдоль линии текста, а совершает серию прыжков, которые он назвал саккадическими прыжками (Spencer, 1968, Rayner & Pollatsek, 1989). Засечки на знаках корректируют движение взгляда читателя, придавая ему горизонтальное направление, а отсутствие засечек способствует вертикальному направлению взгляда, т.е. перескакиванию между строками. (De Lange, 1993).

Более того, социальные исследования показали, что читатели предпочитают тексты, написанные шрифтом с засечками, называя их более разборчивыми (Tinker, 1963; Zachrisson, 1965).

Начертания шрифтов

Шрифты одной гарнитуры могут иметь самые различные начертания, их разделяют:

— по наклону очка — прямые, курсивные и наклонные начертания (курсив в определенной степени имитирует рукописный шрифт, наклонный шрифт повторяет рисунок прямого, но с наклоном основных штрихов). У шрифтов курсивного и наклонного начертания основные штрихи наклонены вправо примерно на 15%;

— по плотности очка — нормальное, узкое, сверхузкое, широкое и сверхширокое начертания (например, для кг. 10 п. плотность нормальных шрифтов — 60—80, узких — 45—60, сверхузких — менее 45, широких — 85—105, сверхшироких — более 105%);

— по насыщенности шрифта — светлое, полужирное и жирное начертания (например, для шрифта кг. 10 п. насыщенность светлого шрифта — 23, полужирного — 23—34, жирного — более 34%).

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

Различные типы шрифтов с засечками

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

Старые засечки

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

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

Переходные шрифты с засечками

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

Didone шрифты

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

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

Плита с засечками

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

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

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

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

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

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

  • Преимущества шрифтов без засечек:
  • Универсальность и нейтральность;
  • Легкость чтения на экранах;
  • Хорошее сочетание с другими шрифтами и графическими элементами.

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

Моноширинный, или непропорциональный шрифт (Monospace)

• Определяющая особенность: каждый символ занимает одно и то же горизонтальное пространство

• Основное применение: кодирование

• Примеры: FF Trixie, Incomeolata

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

Моноширинные шрифты, такие как Inconsolata, являются фаворитом для компьютерного программирования

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

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

В альбоме Аланиса Мориссетта 1995 года Jagged Little Pill использовался моноширинный шрифт печатной машинки Harting

С другой стороны, дизайнеры выбирают моноширинные шрифты, когда хотят придать тексту или надписи ретро-образ. Такие шрифты, как FF Trixie и Chapter 11, имитируют грубый результат нажатия клавиши пишущей машинки на ленту, когда остается отпечаток на бумаге. Более чистые и элегантные варианты включают Inconsolata, GT Pressura Mono и Nitti. Кроме того, доступны моноширинные версии многих популярных шрифтов, таких как Helvetica и DIN.

Пропорциональные шрифты

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

1. Montserrat

Без Montserrat список будет явно не полный. У него изящные цифры.

2. Poppins


У этого шрифта больше вариантов font weight, чем показано на этом изображении

У Poppins классный дизайн цифр. Ну да, цифра «9» немного нескладная, но в целом это отличный шрифт, у которого больше вариантов font-weight, чем у Montserrat.

Bitter – шрифт с засечками. Отличный титульный шрифт с большими цифрами. Как и Montserrat с Poppins, Bitter расходится по всему миру.

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

Мы долго решали, стоит ли включать в список Oswald, потому что многие используют его в качестве сжатого жирненького шрифта для цифр, а еще как бесплатную альтернативу FF Din. Но все таки знак доллара и цифра «4» в шрифте Oswald выглядят странновато. Поэтому мы решили добавить Fjalla One, как альтернативу.

Вот, собственно, и все. Спасибо, что вникли в наши принципы подбора шрифтов для визуализации данных и изучили все 20 крутых бесплатных шрифтов от Google для чисел. Надеюсь, эта статья вам зашла!

Понравилась статья? Поделиться с друзьями:
Setup Pro
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: