14 заметок с тегом

типографика

26 августа   видео   типографика

Сглаживание шрифтов

Оказалось не все матёрые разработчики знают о ЦСС-свойстве «-webkit-font-smoothing», которое сглаживает шрифты. Есть ещё разные хаки, но тут просто свойство с тремя значениями:

none
«...вопреки общепринятому мнению не теоретизирование — это действие, тогда как теоретизирование может соответствовать отсутствию осознанной деятельности, быть „выбором по умолчанию“.

subpixel-antialiased
Непросто изучать (и запоминать) факты, воздерживаясь от суждений и отметая всяческие объяснения.

antialiased
Тяга к теоретизированию с трудом поддается контролю: она, подобно анатомическим характеристикам, входит в наше биологическое устройство, и борьба с ней — это борьба с самим собой.»

Значение «none» бесполезно, а «subpixel-antialiased» и «antialiased» одинаково хороши, но подходят для разных случаев. Для Гельветики лучше «antialiased», а для Гарамона, который на сайте лаборатории — «subpixel-antialiased».

Добавлено позже: на Андройде и Виндоус свойство не работает. В других случаях будет так:

2016   типографика   ЦСС

«Модульные системы в графическом дизайне» Йозефа Мюллера-Брокманна

Читая, понимал, что знаю почти все описанные правила вёрстки и типографики, и пользуюсь ими. Дочитав, понял, что книга хорошо собирает правила в систему. Поэтому полезна даже тем, кто знает советы о вёрстке наизусть. Книгу стоит читать в паре с «Настольной книгой газетного дизайнера» Тима Харровера, которая помогает с сутью модульности, и только потом переходить к Чихольду или Брингхерсту.

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

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

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

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

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

В-третьих, кратность и сетка избавляют от нестыкующихся элементов:

Все плоскости иллюстраций должны совпадать со строками шрифта использованных кеглей.

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

Примеры того, как сетка работает, определены модой 80-х. Они не раскрывают всего потенциала системы. Если отбросить «швейцарский дизайн», система продолжит работать. Как минимум она будет учить аккуратности (очень полезной в больших проектах).

Цитаты о шрифтах:

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

О полях:

При маленьких полях сразу заметно, что страница обрезана криво.
Если поля слишком малы, <...> пальцы касаются полос текста и иллюстраций, это вызывает безотчётную негативную реакцию.

О кеглях:

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

О сути дизайна:

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

Модульная система — мощный инструмент, но он не спасёт слабое содержание:

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

Дополнения

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

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

Понравилось определение «иллюстрации со свободным контуром». Обычно такие иллюстрации называют так, как подсказывает контекст беседы. Определение Мюллера-Брокманна от контекста не зависит.

P. S. C ноября заметки о дизайнерском росте, типографике, подаче информации, интерфейсах, ведении проектов и городской среде читайте в блоге Кирилла Беляева (подробнее о переезде).

2014   вёрстка   книги   типографика

«Образцы шрифтов» Яна Чихольда

Читал в епубе, формат не помешал восприятию альбома. В книге 248 страниц, из которых около 3/5 — иллюстрации. Читается за вечер.

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

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

Выделяет шрифты старого и нового стилей. Вторые — это наборные шрифты, первые — все им предшествовавшие.

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

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

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

Цитаты о сути шрифта:

Шрифт — это нечто исторически сложившееся. <...> Гораздо разумнее <...> не поддаваться ошибочному убеждению, будто шрифт должен нести «отпечаток индивидуальности». Это заблуждение во многом является причиной того, что нас окружают такие безобразные шрифты. <...> Для хорошего шрифта важно как раз противоположное тому, что проповедовалось до недавнего времени: не отпечаток индивидуальности (как правило, скромной), а полная самоотдача, даже самоотречение, в служении правильно понятой задаче. <...> Прежде чем использовать шрифты, нужно развить хороший вкус. Вкус, хороший вкус, может развиться только благодаря изучению наилучших образцов. Никто не рождается с хорошим вкусом. Он всегда является результатом образования.

О конструкции букв:

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

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

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

О разрядке в прописных:

Нельзя укоротить L. Придвинуть L и А друг к другу тоже нельзя. Это означает, что по крайней мере прописные буквы не должны стоять очень плотно. <...> ...ритм хорошо построенного слова никогда и ни в коем случае не получается при помощи равномерных линейных отрезков между буквами. Принимается в расчет только вся плоскость пространства между буквами. Оно, а не расстояния между буквами должно быть всюду равномерным. Дело в том, что наш глаз, а не линейка определяет правильные размеры пространства между буквами, как вообще обо всем зримом судит наш глаз, а не рассудок. Труднее всего сделать равномерную разрядку в шрифте без засечек, в гротеске.»

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

Об интерлиньяже в наборе прописными:

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

О сторочных:

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

...измеримое расстояние между словами должно быть примерно вдвое шире трети от высоты буквы n.

О шрифте в архитектуре:

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

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

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

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

О количестве шрифтов в композиции:

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

2014   книги   типографика   Чихольд

Выбор гарнитуры и цветность набора

Эрик Шпикерман в книге «О шрифте» просто и понятно пишет про разницу между шрифтами для длинных и коротких текстов:
Выбор гарнитуры — тоже важный момент. Шрифт, приглашающий вас к долгому чтению, должен быть незаметным и скромным, подтверждая наши сложившиеся представления об удобочитаемости. Выборочное чтение небольших сообщений предполагает более энергичный шрифт. Он не должен быть таким сложным, как декоративный шрифт на этикетке или плакате, но и чрезмерная скромность здесь неуместна.
В той книге есть пара прекрасных аргументов против выключки:
Одно из лучших способов удерживать внимание читателя на содержании текста — сохранять цветность набора. Газетчики этим приемом почти не пользуются, полагая, что даже в узких колонках набор должен быть выключенным. <...> ...Иногда чередование более темных и светлых строк, вызванное тем, что никто не потрудился скорректировать пробелы, может навести читателя на мысль о некотором тайном замысле: может быть, разреженные строки важнее, чем более плотно набранные?
2012   типографика   цитаты

Ясность

В книге «Новая типографика. Руководство для современного дизайнера» Ян Чихольд пишет:
Ясность — суть Новой типографики. Этим она отличается от старой типографики, основанной на «красоте» и не стремившейся к предельной ясности, необходимой сегодня.

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

Мнемоники в ХТМЛ, «Наун проджект» и «Гет кавер»

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

1. В Фотошопе мне часто не хватает закладки «Глифы» (Glyphs), которая есть и в Иллюстраторе и в Индизайне. Почему её нет в Фотошопе, не понятно? Конечно, часто используемые символы (например, «ёлочки» или длинное и среднее тире) я набираю с Alt-кодами, но есть ещё какой-нибудь копирайт или «не равно». Для этих целей я использую страничку в Википедии про мнемоники в ХТМЛ (в дополнение к ней страничка про все кавычки) — я просто копирую и вставляю символы.

Мнемоники в HTML, «Ноун проджект» и «Гет ковер»

Типографской раскладкой Ильи Бирмана я не пользуюсь, потому что у меня дурацкое сочетание Виндоуса и Маковской клавиатуры, драйвера которой делают их несовместимыми.


2. «Наун проджект» (The Noun Project) — большая коллекция бесплатных пиктограмм. Правда, хороши не все.

Мнемоники в HTML, «Наун проджект» и «Гет кавер»


3. «Гет кавер» (Get Cover) — сервис подготавливающий макеты сайтов к презентациям. Он мощнее «Сафаризатора», так как знает Хром, Фаерфокс, ИЕ плюс умеет «одевать» макет в продукты компании Эпл. Минус — нет загрузки фавиконки.

Мнемоники в HTML, «Ноун проджект» и «Гет ковер»
2012   веб   графдизайн   инструмент   ссылки   типографика

Про кегль для длительного чтения и интерлиньяж

Продолжаю публиковать цитаты из «О шрифте» Эрика Шпикермана (начало).

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

Дальше всё просто: чем больше слов в строке, тем больше должен быть интерлиньяж. Можно так же совсем чуть-чуть увеличить пробелы между буквами (трекинг) по мере удлинения строк.
Про кегль для длительного чтения:
Шрифт для продолжительного чтения должен быть не мельче кегля 9 пунктов, но не крупнее 14 пунктов. (Кегль шрифта — довольно условное понятие (...), поэтому приведённые выше рекомендации годятся только для «нормальных» книжных гарнитур — шрифты с очень крупным или мелким очком строчных надо рассматривать отдельно).
2012   типографика   цитаты

Про инструкцию

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

Начну с Эрика Шпикермана. Да-да, «О шрифте» для начинающих, это только вершки, но и тут есть 3-4 цитаты, полезные в тупиковой ситуации или при аргументации своего мнения.

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

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

«Новая типографика» Яна Чихольда

Для меня самое интересное в этой книге — взгляд на дизайн (и не только) человека, который 85 лет назад занимался делом, которым я занимаюсь сейчас. Это маленькая машина времени для дизайнеров.

Цитаты:
Она (новая живопись) обращена прежде всего к зрителю и отказывается от пошлых подмен, которые заставляют нас плакать или смеяться. Эти чувства относятся к личной сфере и должны быть отделены от высшей гармонии картины, которая является продуктом коллективной духовной сферы.
Это мой любимый абзац. Не потому что дал инструмент или хорошо описал близкую мне мысль, а потому что открыл перспективу, которой я не видел.
Графическое оформление рекламной продукции сильно зависит от качества рекламного текста. Текст всегда должен писать специалист по рекламе, потому что реклама сегодня стала наукой и непрофессионалу в этой области нечего делать. Плохой текст может испортить всю работу.
Как сегодня написано — актуальные вопросы всё те же.
2012   книги   типографика   цитаты
Ctrl + ↓ Ранее