что такое стиль шрифта
Размеры и стили шрифтов: обзор, особенности применения и рекомендации
Графический рисунок, который отображает буквы или цифры называется шрифтом. Такая композиция должна иметь полную стилистическую систему, набор символов с определенным размером и начертанием.
История становления шрифтов
Если говорить о рукописных шрифтах, то их история начинается еще с Древнего Египта.
В Древнем Египте появились иероглифы, которые были представлены разными знаками и символами. Изначально использовались для отображения слов, словосочетаний и предложений, а позже стали обозначать звуки. Хотя перехода на фонетическое письмо так и не произошло.
Первый такой алфавит разработали финикийцы. С ним начали работать греки, а после появился латинский и кириллический наборы символов.
Уже в XII веке стал известен готический стиль, а вместе с ним пришла текстура, бастарда, ротунда, версалы и фактура.
С появлением типографии стали известны печатные шрифты. Их стали называть по имени создателя.
Славянское развитие
Развитие европейских шрифтов не обошло стороной русские. Они развивались самостоятельно, хотя и основывались на греческом алфавите. Так появилась кириллица и глаголица.
Быстро развились формы рукописного шрифта, а за ними подоспели и первые книги, выполненные в типографии. Позже появляется гражданский шрифт Петра I, который имел свой стиль и сейчас имитируется многими специализированными программами.
Характеристики
Чтобы определить стиль шрифта, нужно смотреть на его особенности. Сначала на параметры, связанные со строением. К примеру, начертание может быть прямым или курсивным. Насыщенность бывает светлой, полужирной или жирной. Также есть ширина символов, размер или кегль, четкость, контраст и т. д.
Важным является и художественный облик гарнитуры. Тут особой классификации нет, поскольку большинство характеристик переплетаются и объединяются. Можно выделить декоративный облик, динамичный, изящный, курсив, монументальный, свободный, строгий и фольклорный.
Компьютерные шрифты
Говоря о стиле шрифтов, часто под этим понятием подразумевают именно их «электронное» начертание. Вообще, если быть точным, в этом случае имеется в виду не конкретная гарнитура, а файл, который содержит комплекс правил, описывающих «рисунки», используемые для их же отображения.
Этот тип может классифицироваться по методам отрисовки. Бывает растровое и векторное оформление.
В первом варианте знаки представлены пикселями, помещенными в узлы сетки растра. То есть условно перед нами рисунок, выполненный точками. Этот вариант не подходит для широкоформатной печати и может применяться в приложениях и консолях.
Векторный тип представляет знаки благодаря криволинейным контурам, которые формируются математической формулой. Каждый символ описывается вектором, который определяет положение основных точек. Каждый пиксель в этом случае объединен прямой или кривой линией. Этот тип шрифтов одинаково отображается как на бумаге, так и на дисплее.
Применение
Все компьютерные шрифты можно поделить на три группы:
Каждая из этих групп есть в текстовых процессорах, CSS, графическом интерфейсе и т. п. Каждый из них стоит применять в определенных случаях. Стиль и размер шрифта практически не влияют на сферу применения.
Так, моноширинные обычно удобны при отображении исходного кода и различных уведомлений. Гарнитуру с засечками обычно используют в статьях, поскольку они легко читаемые. Стиль без засечек лучше всего подходит для оформления в заголовках и логотипах.
Некоторые гарнитуры используют в своих шрифтах обозначения вышеописанных типов, чтобы не было эклектичности. При этом разные приложения имеют свои стили шрифтов по умолчанию. К примеру, CSS преображает гарнитуру группы Mono в Courier New в одном браузере, а в другом они выглядят как Liberation Mono. Но все это регулируется в настройках веб-обозревателя.
С засечками
Serif на английский язык переводится как «засечка». Речь идет о небольшом выступе, коротком штрихе у основания или верхней части символа. Эта группа включается старый, современный и египетский стили.
Старый стиль имитирует технику клинописи. Именно в нем можно встретить множество гарнитур, которые похожи на рукописное оформление. Тут же можно найти шрифт в русском стиле, хотя он же встречается и в декоративных гарнитурах.
Современный тип может называться Modern или Didone. В этом случае засечки более тонкие, линии толстые и контрастные.
Рубленый шрифт
Этот вариант также называется Sans и в переводе с французского означает «без засечек». Он более однообразен по толщине и не имеет тонких линий у основания и вверху символов.
Некоторые веб-дизайнеры отдают предпочтение этому стилю для оформления текстов. Однозначно утверждать это нельзя, поскольку многое может зависеть даже от монитора.
Рукописный шрифт
Этот тип точно не подходит для написания текста. Он может быть использован в логотипах или отдельных элементах оформления, например, в цитате. Среди рукописного шрифта часто встречаются имитации гарнитуры «под старину».
Декоративный шрифт
Все остальные стили принято относить к этой группе. У них нет конкретных схожих элементов. Гарнитуры очень разные, среди них можно найти шрифт в японском стиле либо начертание, адаптированное под китайские иероглифы.
В этой группе может быть «ковбойское», мультипликационное оформление. Могут встречаться гарнитуры, имитирующие популярные логотипы (например, «Дисней»), либо созданные специально для особых задач (оформление детского контента).
Редакторы
Стили шрифтов для «Фотошопа» очень востребованы. Их часто используют веб-дизайнеры в своих проектах. Но вот в стандартном пакете программы их немного. К тому же большинство из них обычные и ничем не выделяются среди остальных.
Поэтому многие хотят понять, как изменить стиль шрифта. Для этого можно пойти на любой портал или форум, посвященный «Фотошопу», и отыскать нужный набор гарнитур. Здесь огромное количество самых разных вариаций.
К тому же если вам нужен китайский стиль оформления символов, можно установить один файл, в котором будет сразу несколько видов, и уже из полученного подобрать подходящий.
Выводы
Стилем могут называть группы шрифтов типа Sans, Serif или Mono. Так же могут называть и специальные декоративные гарнитуры с особым оформлением: японский стиль, клинопись или иероглифы.
Cамый краткий курс по классификации шрифтов
На первый взгляд кажется, что за всю историю письменности придумано так много шрифтов, что разобраться в них просто невозможно. На самом деле все гораздо проще и все эти бесконечные вариации окружностей и палочек легко умещаются в стройную и простую систему.
Все шрифты делятся на четыре большие группы, как времена года или стороны света: 1. антиква с засечками2. гротеск без засечек3. рукописные, имитирующие человеческий почерк4. акцидентные для заголовков и плакатов.
Стиль: академический, классический, традиционный, консервативный, элегантный. Где найти: деловые газеты, научные статьи, книги, учебники, документация.
Если бы шрифты можно было бы сравнить с цивилизациями, антиква, несомненно, была бы представителем западной. Эти шрифты формальны, строги и имеют самую длинную историю. У них традиции и манеры. Особенность антиквы, как уже говорилось, засечки — накрахмаленные воротнички и манжеты букв, элементы, которые делают шрифт устойчивее, основательнее, аккуратнее. Антикве хорошо удается передавать смысл деловых документов, научных справочников и статей, больших объемных текстов. Бизнесмен с газетой скорее всего пробегает глазами антикву, студент, сдающий сессию, имеет дело с засечками.
Скругление засечек в местах примыкания к основному штриху и наклонная ось овальных элементов, умеренная контрастность. Примеры: Arno Pro, Adobe Garamond, Bembo, Dante, Stempel Garamond, Granjon, Poliphilus, Sabon.
Разница между основными и соединительными линиями в переходной антикве более явная, чем в старом стиле, но менее четкая, чем в антикве нового стиля. Примеры: Times New Roman, Baskerville, Caslon, Georgia и Bookman.
отличается более сильным контрастом между основными и соединительными линиями, строго вертикальными овалами, тонкими и длинными засечками. Примеры: Didot и Bodoni.
— брусковая антиква-
Разница между основными и соединительными линиями либо малозаметна, либо ее нет совсем, засечки мощные, прямоугольной формы. Как, например, заголовки GoDesigner:
Стиль: современный, легкий, нейтральный, функциональный. Применение: деловые, технические и электронные документы, учебная литература, архитектура, интернет и цифровые технологии.
Это, несомненно, шрифтовой север — минималистичный, четкий, функциональный и прямолинейный, как шкаф из Ikea, не терпящий никаких излишеств, как например засечки антиквы или росчерки рукописных шрифтов. Эти элементы, как атавизм, исчезли за ненадобностью. Гротескные шрифты — это новая история, конструктивизм и Баухаус, космос и компьютеры. Лента Фейсбука — гротескный Gotham. Компании Microsoft, Panasonic и даже NASA используют вездесущую Helvetica.
Переходное звено в шрифтовой эволюции от антиквы до гротеска, буквы с небольшим контрастом. Примеры: Franklin Gothic и Akzidenze Grotesk.
Самые нейтральные, одноширинные шрифты почти без контраста. Примеры: MS Sans Serif, Arial, Helvetica и Univers.
Имеют большую контрастность в толщине штрихов. И гуманистическими они названы не случайно, а потому что напоминают рукописные (пером). Примеры: Gill Sans, Frutiger, Tahoma, Verdana, Optima, и Lucide Grande.
Как ясно из названия, строятся на основе геометрических форм. Пример: Futura и Geometria.
Стиль: поэтический, художественный, декоративный. Применение: оформление приглашений, альбомов, изысканные заголовки, вывески, поздравительные открытки.
Представьте себе сосредоточенного китайского мастера, выводящего пером иероглифы. Да, рукописные шрифты прекрасны, непостоянны и изящны, как восток. Они кружат своими росчерками, как турецкие дервиши, и чаще похожи на арабскую вязь и иероглифы. В рукописных шрифтах слишком много непостоянства, поэтому они кажутся человечнее и могут служить классической поэзии (как, например, формальные) и современному уличному искусству (как неформальные). Но слишком много на них не прочитаешь — в больших объемах они становятся приторными, как халва. Рукописные шрифты легко отличить по окончанию sсript в названии.
— формальные рукописные-
чаще всего курсив, с большим количеством вензелей, эдакое шрифтовое барокко. Примеры: Kuenstler sсript.
— неформальные рукописные-
Не такие старомодные как формальные и в принципе, похожи на большинство почерков современного человека, не обладающего каллиграфическим навыком. Примеры: Mistral и Brush sсript.
Стиль: декоративный, народный, фантазийный. Применение: реклама, вывески, логотипы, заголовки.
Это все странные, стилизованные, художественные, дизайнерские и слегка ненормальные шрифты. Читать с их помощью большие объемы текста – получится едва ли. Они лишь могут обрамлять его, быть эдакой вишенкой на торте. Акцидентные не знают правил, их начертания ограничиваются только фантазией дизайнера. Их уместно сравнить с пестрым многообразием юга: экзотической флорой и фауной джунглей или магическими орнаментами африканских племен. Реклама, вывески, заголовки, логотипы, словом все, что умещается в двух-трех словах — вот ареал обитания этой группы.
Что такое стиль шрифта
Все термины типографики — полный гайд
Аудио перевод статьи
Когда специалисты по исследованиям, разработчики, дизайнеры и заинтересованные стороны совместно работают над проектом, как правило каждый из них может по-разному интерпретировать некоторые термины типографики. Этот гайд поможет вам разобраться в значении самых распространенных, а иногда и ошибочных понятиях.
Типографика — ключевой компонент практически в любой сфере цифрового взаимодействия. Ее сложность и специфическая терминология часто вызывают путаницу. Вам не нужно быть экспертом в области типографики, чтобы проектировать цифровые интерфейсы, но важно знать некоторые термины, чтобы ваши коллеги правильно вас понимали. Эффективное общение и правильная интерпретация основных понятий всеми членами команды поможет:
Мы составили список терминов в зависимости от частоты их использования в UX-дизайне и учли те, которые люди неправильно понимают и путают.
Гарнитура (Typeface, другое название — семейство шрифтов (font family)): набор букв и символов, которые предназначены для совместного отображения в виде слов и чисел.
Гарнитура — это группа, к которой принадлежит конкретный шрифт. Arial, Calibri и Helvetica — примеры гарнитур. Слово «гарнитура» имеет отношение к лицевой стороне физических буквенных блоков. Типографы устанавливали их внутрь печатных машин для создания публикаций. В рамках каждой гарнитуры у типографа был широкий выбор из буквенных блоков и подмножества шрифтов.
Некоторые гарнитуры необходимо покупать у правообладателя, другие есть в открытом доступе. При выборе гарнитуры для вашего дизайна важно учитывать, будет ли она безопасной. Если шрифт не является веб-безопасным, текст может не загружаться должным образом. Обычно это приводит к тому, что дизайнер создает изображение с использованием нужного шрифта (если нет другого выхода) для того, чтобы он отображался корректно. Это решение может быть приемлемо для некоторых элементов дизайна, например логотипов, в противном случае программы чтения с экрана не смогут распознать текст на изображениях, он не будет индексироваться поисковыми системами и учитываться в случаях, когда нужно найти конкретное слово в документе (функция CTRL+F). Это ограничивает специальные возможности сайта, ухудшает SEO и удобство использования. С безопасными веб-шрифтами таких проблем нет.
Шрифт (Font): определенный набор отдельных стилизованных букв в рамках гарнитуры, например:
Шрифт не следует путать с гарнитурой или семейством шрифтов (см. ниже). Хотя эти термины часто используются как синонимы, по сути это не одно и то же. Шрифт включает в себя определенный размер, стиль и начертание текста, которые применяют дизайнеры. Гарнитура — это группа, к которой принадлежит конкретный шрифт.
Оформление шрифта (Font decoration, или оформление текста, text decoration): создание линии над текстом, линии подчеркивания и перечеркивание текста.
Оформление шрифта отличается от понятий шрифтового эффекта (например, теней), стиля (курсив, прописные буквы и пр.), начертания (как вариант: тонкий, полужирный) и его ширины (например, узкий, растянутый).
Шрифтовой эффект (Font effect) применяется к буквам или строкам текста для создания большей наглядности.
Общие эффекты включают в себя скосы, внутренние контуры (линии внутри границ каждой буквы), внешние контуры (линии за пределами границ каждой буквы) и тени. Обычно они используются для создания декоративных слов или в тексте очень большого размера (например, в заголовках или подзаголовках).
Стиль шрифта (Font style): определенный вариант внешнего вида шрифта (например, “Roman” шрифта “Times New Roman”).
Вот некоторые примеры: регистр (прописные, строчные, малые прописные) и наклон (прямой, курсив). Эти параметры, как правило, не зависят от начертания, ширины и размера шрифта (см. ниже). Во многих случаях стиль шрифта указывается в его названии.
Засечки (Serif): небольшой крючкообразный элемент, который напоминает ступню, встречается на краях букв в некоторых гарнитурах. Шрифт с засечками (serif font) — это шрифт, в котором у каждой буквы есть засечки на краях.
До начала эры цифровых технологий считалось, что засечки значительно улучшают восприятие букв. Сейчас шрифты без засечек стоят наравне, а иногда являются даже более четкими и удобными для чтения, чем шрифты с засечками, особенно на цифровых экранах. (Дело в том, что засечки плохо отображались на экранах с низким разрешением, но, к счастью, с приходом современных компьютеров и мобильных телефонов такой проблемы больше не существует.)
Эти два стиля шрифта оказывают влияние и на тон веб-сайта. Шрифты без засечек часто характеризуют его как: современный, модный, холодный и безличный; в то время как с помощью шрифтов с засечками сайт может восприниматься как традиционный, теплый, дорогой и старомодный. Эти ассоциации могут варьироваться в зависимости от выбранного шрифта.
Начертание шрифта (Font weights): толщина линий каждой буквы.
Примеры: тонкий (thin), ультратонкий (ultrathin), легкий (light), стандартный (regular), средний (medium), полужирный (semi-bold), жирный (bold), более жирный (extra bold), очень жирный (black) и ультражирный (ultra black).
Ширина шрифта (Font width): ширина каждой буквы, определяемая самым широким расстоянием между крайними линиями этой буквы (не путать с начертанием шрифта (см. выше) или кернингом (см. ниже)).
Примеры: сжатый (condensed), сверхсжатый (extra condensed), узкий (narrow), растянутый (extended), сверхрастянутый (ultraextended) и широкий (expanded).
Ширина может быть указана в названии шрифта, но не всегда. Например, Helvetica Neue Thin сам по себе более сжатый шрифт, чем Helvetica Neue Regular, однако в названии нет слова “сжатый”. Создатели шрифтов могут целенаправленно сжимать его в стилистических целях. Например, у Helvetica Neue Condensed Bold такое же начертание, как у Helvetica Neue Bold, но он выглядит заметно более узким.
Обратный отступ (Hanging Indent): первая строка текста в абзаце находится левее, чем следующие строки.
Как правило, обратный отступ используется, чтобы выделить ключевые фразы или термины, а иногда может быть полезен при просмотре списков. Термины в данной статье являются примером обратных отступов.
Межбуквенный интервал (Letter Spacing) (другое название — трекинг (tracking)): расстояние между самыми широкими точками каждого символа (не путайте с кернингом (см. ниже)), которое чаще всего применяется ко всему слову, строке или абзацу.
Кернинг (Kerning): уменьшенное горизонтальное пространство между последовательными символами, которое часто применяется к определенной группе букв.
Иногда кернинг называют “воздухом” между буквами. В большинстве случаев у каждого шрифта есть свой стандартный интервал, однако его можно изменить, чтобы визуально текст выглядел пропорционально.
Интерлиньяж (Leading) (другие названия: высота строки (line height) или межстрочный интервал (line spacing)): вертикальный интервал между строками текста, определяемый расстоянием между базовыми линиями.
Базовая линия — это основа каждой буквы, которая не включает выносной элемент (он встречается у строчных букв, например “p” и “q”).
Лигатура (Ligature): единый символ, который образуется тогда, когда две или более буквы соприкасаются.
Лигатура может использоваться для создания фирменной символики, выполнять роль декоративного элемента или выступать в качестве буквенного символа в некоторых языках.
Гадзук (Gadzook): графический элемент или украшение, которое соединяет две буквы лигатуры.
Висячая строка (Orphan): очень короткая часть текста (обычно одно слово), которая располагается в отдельной строке после его разрыва.
Чтобы избежать такого эффекта, подумайте о разрыве строки (не разрыв абзаца (см. ниже)) в другой части предложения. В этом случае слово не будет оставаться в одиночестве, как “бедный родственник”. Текст лучше воспринимается, если в последней строке остается больше двух слов. По возможности необходимо это учитывать.
Разрыв строки (Line break): разделитель в блоке текста, который обозначает конец одной строки и начало следующей; не путать с разрывом абзаца (см. ниже).
Тэг
создает разрывы строк в HTML в качестве замены мягкого “Enter” на клавиатуре (примечание. мягкий “Enter” — это сочетание клавиш Shift+Enter, при одновременном нажатии которых происходит разрыв строки).
Разрыв абзацев (Paragraph break): разделитель в блоке текста, который означает конец одного абзаца и начало другого. Часто расстояние между двумя абзацами по вертикали больше, чем между строками текста внутри абзаца.
Разрывы абзацев часто прописываются в HTML как теги
в качестве замены жесткого “Enter” на клавиатуре (примечание. жесткий “Enter” — это клавиша Enter, при нажатии которой происходит разрыв абзацев).
Заключение
Термины типографики могут показаться трудными для понимания, но это только на первый взгляд. Поделитесь этим гайдом (и другим нашим руководством, которое называется Термины графического дизайна) со своей командой. Это поможет всем вам разобраться в понятиях типографики и улучшить коммуникацию. Такое общение приведет вас к более продуктивным обсуждениям, сокращению правок и, в конечном итоге, к лучшей реализации дизайна в целом.