- •Дмитрий кирсанов
- •Глава I. Техминимум 18
- •Глава II. Основы дизайна 56
- •Глава III. Дизайн веб-сайтов 131
- •Глава IV. Веб-графика 175
- •Оглавление
- •II.1 Пространственные отношения (78)
- •II.10 Нюансировка (172)
- •V.3 Галерея (323)
- •Предисловие
- •Что здесь есть и чего здесь нет
- •Примеры
- •Соглашения
- •Сверим часы
- •Как выбрать дизайнера
- •Почему эта тема?
- •Сам себе Гутенберг
- •Глава I. Техминимум
- •Кодировки текста
- •Однобайтовые кодировки
- •Семейство 8859
- •Двухбайтовые кодировки
- •История
- •В начале был sgml
- •Прикладная философия
- •Золотой век
- •Html плюс
- •Идолы рынка
- •Бяки и буки
- •Три, четыре...
- •Синтаксис
- •Подстановки
- •Минимальный документ
- •Текстовая разметка
- •Ссылки и привязки
- •Изображения и объекты
- •Национальные особенности
- •Согласование кодировок
- •Среды и доступность
- •Доступность: таблицы
- •Как писать alt-тексты
- •Доступность: изображения-карты
- •Мета-данные и поиск
- •Мертвая зона
- •Принципы
- •Возможности
- •Модульный html
- •Режем по живому
- •Сборно-панельный сайт
- •Например
- •Синтаксис
- •Уровни соответствия
- •Конверсия
- •Надстройки
- •Графика
- •Вектор в Интернете
- •На все четыре стороны
- •Палитры
- •Системы представления цвета
- •Программирование
- •Динамический html
- •Модульные технологии
- •Динамические страницы
- •Глава II. Основы дизайна
- •Как учиться дизайну
- •Дизайн и «чужое творчество»
- •Материалы и инструменты
- •Пространственные отношения
- •Относительность размера
- •Форма и размер
- •Искусство выравнивания текста
- •Цвет и размер
- •Текстура и размер
- •Пропорции
- •Золото и пластмасса
- •Пропорций простота
- •Микропропорции
- •Размещение
- •Одноуровневые элементы
- •Разноуровневые элементы
- •Плотность
- •Пол и характер
- •Плотность текста
- •В нужное время и в нужном месте
- •Дизайн Пизанской башни
- •Прямоугольники
- •Круги и закругления
- •Кривые Безье
- •Бесформенность
- •Как устроен цвет
- •Прогулка по цветовому кругу
- •Главные цвета
- •Восприятие цвета
- •Сочетаемость цветов
- •Текст и фон
- •Текстуры
- •Плоский цвет
- •Геометрические текстуры
- •Пиксельные текстуры
- •Фотографические текстуры
- •Материальные текстуры
- •Шрифт и текст
- •Элементы шрифта.
- •Гарнитура, начертание, шрифт
- •Виды начертаний
- •Шрифты и время.
- •Переходные шрифты
- •Новая антиква
- •Кларендон
- •Новые рубленые
- •Маятник гуманизма
- •Подбор Шрифтов
- •Единство противоположностей
- •Слишком декоративные шрифты
- •Развивая тему
- •Шрифты и названия
- •Параметры Набора
- •Прописные и строчные
- •Интервалы
- •Выравнивание и отступы
- •Размещение
- •Чья случайность лучше?
- •Текст как текстура
- •Единство
- •Академический стиль
- •В полный рост
- •Размещение
- •Текстура
- •Центр масс системы
- •Правило рычага
- •Контраст
- •Контраст — это продолжение единства другими средствами
- •Одномерный контраст
- •Многомерный контраст
- •Аспекты контраста
- •Расстояние
- •Расположение
- •Текстура
- •Динамика
- •Динамика явная
- •Ветер по Гауссу
- •Динамика совсем явная
- •Динамика неявная
- •Нюансировка
- •Пространственные отношения
- •Глава III. Дизайн веб-сайтов
- •Преграды и препоны
- •От общего к частному
- •Типы сайтов
- •Первый шаг
- •В мире .Org
- •Скорей любите нас
- •Бесплатный сыр
- •Устройство сайта
- •Неупорядоченный континуум
- •Топология сайта
- •Распределение материала
- •Фреймы и окна
- •Первая страница
- •Всплеск и вскрик
- •Формат страницы
- •Заметки о полях
- •Во первых строках
- •У голубого экрана
- •Если тебе дадут линованную бумагу — пиши поперек
- •Ступеньки ригидности
- •Заглавия и заголовки
- •Заглавие
- •Заголовки: логика
- •Заголовки: дизайн
- •Разделители
- •Баннеры
- •Навигация
- •Общий обзор
- •Семантика
- •Разновидности одинаковости
- •По ту сторону кнопок
- •Символы и метафоры
- •Особые случаи
- •Динамическая навигация
- •Блоки текста
- •Коренные шрифты
- •Все шрифты ношу с собой
- •Осторожно: кириллица
- •Другие параметры
- •Правила набора текстов
- •Расстановка пробелов
- •Неразрываемые пробелы
- •Текстовые выделения
- •Спецсимволы
- •Позиционирование
- •Дурная наследственность
- •Двойное дно
- •Белое место
- •Фэйсом об тэйбл
- •Позиционирование в css
- •Глава IV. Веб-графика
- •Техника
- •Палитра и диффузия
- •Цветовые границы
- •Экранный анти-алиасинг
- •Пиксельные эффекты
- •Оптимизация
- •Взболтать и настоять
- •Чудное мгновенье
- •Функции
- •Выставочная графика
- •Как не надо делать фон
- •Прогладить с изнанки
- •Одномерные фоны
- •Одним куском
- •Логотипы
- •Диалектика формы
- •На единицу площади
- •Про что картинка?
- •Символ и слово
- •Аспекты логотипа
- •Текстура
- •Баннеры
- •Сколько натикало?
- •Форматы
- •В нужное время и в нужном месте
- •Слева при входе
- •В начале было что-то
- •Собственная гордость
- •Удар ниже пояса
- •Смена поколений
- •На килограмм живого веса
- •Рынок визуалов
- •Трехмерность
- •Император иллюзий
- •Пластмассовый призрак
- •Скульптура или барельеф
- •Искусство искажений
- •Нетекстурирующие эффекты
- •Текстурирующие эффекты
- •Логотип
- •Цветовая схема
- •Входные цвета
- •Информационные цвета
- •Первая страница
- •Карты на стол
- •Навигация
- •Логотип
- •Первая страница
- •Внутренние страницы
- •Галерея
- •15. (Книги России 1) www.Books.Ru
- •Индекс Символы.
- •А(латиница).
Элементы шрифта.
Сложность предмета этого раздела заставляет меня, прежде чем переходить к творческим, собственно дизайнерским аспектам работы со шрифтом, начать с небольшого введения, посвященного классификации шрифтов, их разновидностей и используемой при этом терминологии. Если вы уже достаточно хорошо знакомы с технической стороной шрифтового дела, можете пропустить этот раздел.
Гарнитура, начертание, шрифт
Сначала разберемся с терминами. В русской типографской терминологии гарнитурой принято называть набор начертаний одного шрифта, различающихся по толщине штрихов, ширине букв, общему рисунку (прямое или курсивное) и другим параметрам. В английском языке ему приблизительно соответствует термин font family, хотя чаще в этом смысле употребляется просто слово font. Русскому же термину начертание точнее всего соответствует английское font face или typeface.
Таким образом, собственно слово «шрифт» остается в официальной терминологии незадействованным и может использоваться для обозначения как специфической формы букв, которая может быть общей для нескольких гарнитур, так и отдельной гарнитуры или отдельного начертания внутри гарнитуры (а также для шрифтового файла на компьютере). Ко многим декоративным шрифтам, имеющим лишь одно начертание, термин «гарнитура» неприменим вообще — их можно называть только «шрифтами».
Systema naturae
Прежде чем говорить о различиях начертаний внутри одного шрифта, попробуем вкратце наметить классификацию существующих шрифтов. Система эта не может не быть весьма огульной и приблизительной; как правило, чем дальше некий шрифт отстоит от небольшого набора привычных и часто используемых гарнитур, тем сложнее подыскать для него клеточку в таблице.
Основную массу шрифтов можно разделить на две большие группы: шрифты с засечками (англ. serifs) и без засечек, или рубленые (англ. sans serifs; более подробно об исторической
125
классификации этих основных типов шрифтов мы будем говорить ниже). В отдельный класс выделяют моноширинные (fixed width) шрифты, у которых одинакова ширина всех букв и знаков (по начертанию эти шрифты обычно имитируют буквы пишущих машинок или старых матричных принтеров).
К почти всем остальным шрифтам лучше всего подходит термин «декоративные». К ним относятся всевозможные стилизации (готический, древнерусский), рукописные шрифты (каллиграфические или, наоборот, нарочито небрежные, а иногда и имитирующие почерк определенного лица), шрифты с наложением всевозможных эффектов («трехмерные», с тенями, разукрашенные цветами и листьями и т. д.) и просто «все остальные», не поддающиеся какой-либо классификации, шрифты. Кроме того, существуют шрифты, содержащие вместо букв специальные символы (математические, музыкальные), пиктограммы, декоративные элементы и даже просто тематические подборки черно-белых картинок.
Виды начертаний
Из начертаний внутри одной гарнитуры чаще всего используются прямое (англ. rотап) и курсивное (italic). Последнее призвано имитировать наклоненный вправо, более округлый и беглый рукописный почерк, сохраняющий тем не менее графические особенности прямого начертания и хорошо сочетающийся с ним. Курсивная разновидность есть у всех текстовых шрифтов с засечками и у большинства рубленых шрифтов, хотя для последних создать близкий по стилю курсивный вариант значительно труднее, и некоторые из рубленых и моноширинных шрифтов употребляют вместо курсива просто слегка перекошенное вправо (англ. oblique) основное начертание (рис. 2,7). Большинство декоративных шрифтов не имеют курсива вообще.
Вторая важная ось, по которой варьируется начертание шрифта, — это насыщенность (англ. weight), определяемая толщиной штрихов и соотношением площади белого и черного в рисунке букв. Первую ступень увеличения насыщенности иногда называют «bold face» по-английски и «жирный шрифт» по-русски, хотя правильнее называть это начертание полужирным (demi-bold). Этот параметр, в отличие от курсива, наоборот, удобнее менять у рубленых шрифтов, — многие из которых, помимо обычного и полужирного, имеют также светлое (light), жирное и даже
abcdef abcdef abcdef abcdef
abcdef abcdef
Рис. 27
Принципы построения курсива у шрифтов с засечками (Тайме), рубленых (Гельветика) и моноширинных (Курьер)
126
abcdefghijklmnopqr
abcdefghijklmnop abcdefghijklmm abcdefghijklir
Рис. 28 Рубленые шрифты обычно имеют богатый набор вариации насыщенности
сверхжирное (extra bold) начертания (рис. 28). Шрифты с засечками, как правило, ограничиваются обычным и полужирным начертаниями. Декоративные шрифты редко имеют вариации насыщенности.
С насыщенностью связана еще одна характеристика шрифта — его ширина (width). Как правило, ширина букв слегка меняется при изменении насыщенности, однако у некоторых шрифтов есть и особые варианты — сжатые (condensed) или растянутые (expanded) по горизонтали при неизменной насыщенности. Именно этими, специально разработанными вариантами нужно пользоваться, если вам требуется изменить ширину текстовой надписи. Если вы просто возьмете обычное начертание и растянете или сожмете его в графической программе, ничего хорошего не получится — относительные толщины штрихов и форма закруглений исказятся, и отторжение изуродованного шрифта перевесит в восприятии зрителя любые выгоды от изменения пропорций (см. также стр. 139).
Еще один параметр текстового набора — кегль, т. е. размер шрифта (font size). По традиции кегль измеряют в пунктах (один типографский пункт равен 0,35 мм), причем по высоте не самих букв, а так называемого «очка» шрифта, так что в шрифте кегля десять пунктов заглавные буквы имеют размер около 7 пунктов. Во времена наборщиков и метранпажей кегль нельзя было менять произвольно; существовал ряд стандартных кеглей, причем не каждый шрифт отливался во всех кеглях. Компьютерный набор оставил все это в прошлом, и теперь на варьирование кегля налагаются только ограничения эргономического (обеспечение легкости чтения) и эстетического свойства.
У некоторых шрифтов существует еще одно специфическое начертание — малые прописные, или капитель (англ. small caps), получаемое из основного начертания заменой всех строчных букв на заглавные уменьшенного кегля. Точно так же как нельзя менять пропорции шрифта простым растяжением или сжатием, не рекомендуется получать это начертание просто масштабированием заглавных букв — в настоящей капители малые заглавные всегда имеют несколько иные пропорции и относительно более толстые штрихи, чем большие.