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

типографика

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

Оказалось не все матёрые разработчики знают о ЦСС-свойстве «-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   книги   типографика   цитаты

Искусство с улиц Берлина и Дрездена

Конечно в Берлине полно стрит-арта, граффити и всякого такого. Мы же снимали особо отличившиеся творения.

Картинки на стенах


Торец дома искусств «Тахелес» на Ораниенбургер шрассе 54-56A


«Чёрная дыра» в нижнем правом углу — вход на станцию Ханзаплац


Чумовое оформление магазина на Боксхагенер штрассе


Весёлый треш на Грюнбергер штрассе


Немного магии на Торштрассе


Дальше по Торштрассе


Полное безобразие на Кляйне Розенталер штрассе


От головы до пят зарисован этот дрезденский брандмауэр, стоящий в Ойсере Нойштадте


Такого от Дрездана мы не ожидали


Круто оформленный музыкальный магазина в Дрездене на Алаунштрассе


Надписи на стенах


Вывеска на Макс-Бир-штрассе


Повернули на Линиенштрассе


Рисковые парни на Кантианштрассе. И мишка классный — с ним весь брандмауэр оживает.


Повернули голову на право и на Шёнхаузер-аллее (да-да, «Аллея красивых домов»), а смельчаки тут как тут


А этот дом стоит вообще на большом перекрёстке (на Данцигер штрассе) и виден со всех сторон, но это не помешало его приукрасить

Наклейки






Медведь


Подобных экспонатов в Берлине много. Из увиденных в живую этот особенно крут и стоит прям у готического собора.


За пределы всех рамок выходят пара следующих экспонатов


Диво-хвост на Зольмcштрассе


Китч на жалюзях собачьего магазин на Кинцераллее в Кёпенике


Чудо-аппарат не ясного назначения в дворике со студиями и магазинами и йога-центром на Хоринер штрассе


На уже упомянутой дрезденской улице Алаунштрассе стоит заведение Шойне, что в переводе «Сарай». Весь он и его окружение сплошной арт.
Ctrl + ↓ Ранее