Дополнительное образование

Модульная типографика

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

Сетка строится в горизонтальном и вертикальном направлениях. Универсальный вариант — 12-колоночная сетка. Макет получается гибким и позволяет верстать блоки практически любой ширины, потому что 12 делится на 12, 6, 4, 3, 2, 1. Исходя из ширины 1200 пикселей удобно рисовать без интервалов между колонками: получается 12 колонок с шириной 100 пикселей. Если контент не позволяет верстать блоки встык, удобно сделать 24 колонки и работать с ними так же, отступая полную колонку (50 пикселей), что создает «воздух», то есть свободное пространство.

Дисциплина сеток в типографике:

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

Шрифты

Со знаками разобрались, теперь о понятии шрифта. Здесь я приведу только основные определения, как правильно использовать шрифты, читай в заметке про подбор шрифтов.Шрифт — комплект литер, предназначенных для набора текста. Литера — та штука, про которую я рассказывал выше, металлический брусочек с буковкой. Грубо говоря шрифт — это комплект таких металлических буковок, предназначенных для работы текста.

Гарнитура — набор шрифтов, которые имеют единый стиль и оформление. Естественно у них должно быть схожее начертание. Например, гарнитура PT Sans состоит из различных начертаний шрифта: Bold, Italic и другие. Все начертания в совокупности, дают нам гарнитуру PT Sans.

Начертания шрифта — это графическая разновидность шрифта в пределах одной гарнитуры. Например, PT Sans имеет тонкое, жирное, полужирное и другие начертания. Обычно в Фотошопе оно пишется на английском.

Интерлиньяж — расстояние между базовыми линиями соседних строк.

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

Выравнивание текста или выключка

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

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

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

Интервалы

Теперь переходим к интервалам и отступам. Какова идеальная величина нижнего маргина для заголовка первого уровня? А для абзаца?

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

  1. Устанавливаем базовое значение (), например, 24px.
  2. Создаем набор кратных значений.
  3. Используем их для создания согласованных интервалов.

CSS

:root {
—baseline: 24px;

/* spacing values */
—space-sm: calc(var(—baseline)/2);
—space-md: var(—baseline);
—space-lg: calc(var(—baseline)*2);
—space-xl: calc(var(—baseline)*3);
}

h1 {
margin-bottom: var(—space-lg);
}

h2 {
margin-bottom: var(—space-md);
}

p {
margin-bottom: var(—space-sm);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

:root {

—baseline24px;

/* spacing values */

—space-smcalc(var(—baseline)/2);

—space-mdvar(—baseline);

—space-lgcalc(var(—baseline)*2);

—space-xlcalc(var(—baseline)*3);

}
 

h1 {

margin-bottomvar(—space-lg);

}
 

h2 {

margin-bottomvar(—space-md);

}
 

p {

margin-bottomvar(—space-sm);

}
 

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

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

CSS

:root {
/* spacing values */
—space-xxxs: 0.25em;
—space-xxs: 0.375em;
—space-xs: 0.5em;
—space-sm: 0.75em;
—space-md: 1.25em;
—space-lg: 2em;
—space-xl: 3.25em;
—space-xxl: 5.25em;
—space-xxxl: 8.5em;
}

h1, h2, h3, h4, form legend {
margin-bottom: var(—space-xxs);
line-height: var(—heading-line-height);
}

.text-container {
h2, h3, h4 {
margin-top: var(—space-sm);
}

ul, ol, p {
margin-bottom: var(—space-md);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

:root {

/* spacing values */

—space-xxxs0.25em;

—space-xxs0.375em;

—space-xs0.5em;

—space-sm0.75em;

—space-md1.25em;

—space-lg2em;

—space-xl3.25em;

—space-xxl5.25em;

—space-xxxl8.5em;

}
 

h1, h2, h3, h4, form legend {

margin-bottomvar(—space-xxs);

line-heightvar(—heading-line-height);

}
 

.text-container {

h2, h3, h4 {

margin-topvar(—space-sm);

}

ul, ol, p {

margin-bottomvar(—space-md);

}

}
 

Интервалы (_spacing.scss) и типографику (_typography.scss) можно разделять по разным файлам, но это необязательно.

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

Правильный выбор шрифта

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

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

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

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

Разборчивость 

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

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

Информативность

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

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

Размещение и размеры 

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

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

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

Все зависит от важности. Другими словами, нужно создать иерархию слов

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

Цвет

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

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

Выбор размеров шрифта

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

Размер для обычного текста — 16-22 px. При этом длина строки не должна превышать 75 символов. Если текста мало, то его делают крупнее, а для статей и длинных записей — мельче.

Правильно подобранные размеры заголовков помогают создать контраст с основным текстом на странице. Для расчета пользуются коэффициентом из золотого сечения — 1,6.

Чтобы узнать размеры заголовков, кегль основного текста умножают на 1,6.

Нормальный текст: 18px

Заголовок 4: 18х1,6 = 27px.

Полученный результат умножают на 1,6 еще раз, чтобы узнать размер заголовка следующего уровня:

Заголовок 3: 27х1,6 = 40px.

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

Не сводите межстрочное расстояние к минимуму

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

Правильное межстрочное расстояние способствует лучшей читабельности текста. Фото:

По словам Дмитрия Фадеева, правильно подобранное расстояние между абзацами увеличивает понимание прочитанного на 20%. Умение дизайнера работать с белым пространством позволяет пользователям усваивать содержание текста целиком без упущения каких-либо деталей.

Слева: Текст написан практически вплотную. Справа: Правильное межстрочное расстояние способствует читабельности текста. Фото: Apple

Абзацы

11. Выравнивание по левому краю

Да. Если вы не уверены, как правильно выставлять пользовательские межсловные пробелы — не ставьте выключку. Просто выровняйте всё по левому краю. Рваный правый край — это хорошо. Намного легче читать, когда глазам есть, за что зацепиться в конце строки. Вы можете попробовать выключку по центру, если в строке больше 60 знаков. Но не забывайте включать переносы, а вручную проверяйте, чтобы всё смотрелось хорошо. Вы же не хотите целое нашествие переносов.

12. Избегайте переносов

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

13. Обойдитесь без отступов

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

14. Подписи

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

15. Висящие знаки пунктуации

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

16. Вдовы и сироты

Widow — вдова. по англ.

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

17. Не переусердствуйте с межсловным пробелом

Shift+enter требуется только для того, чтобы начинать новую строку. Нажимайте кнопку «enter» для начала нового абзаца. Всё просто.

Основная информация

Тип школы
с углублённым изучением
Классы
с 1 по 11
Места в рейтингах
Рейтинг школ Москвы Департамента образования — 2018 — 97-е место
Результаты «ВсеРосс» — 2019
Предмет Победители Призеры
немецкий язык 1 2
французский язык 2
Общий результат ЕГЭ
более 220 баллов за 3 предмета — 35,9% выпускников;
более 160 баллов за 3 предмета — 35,9% выпускников
Средний результат ЕГЭ
английский язык — 67,0
биология — 66,0
география — 65,0
информатика и ИКТ — 56,0
история — 59,0
литература — 69,0
математика — 55,0
немецкий язык — 66,0
обществознание — 67,0
русский язык — 74,0
физика — 62,0
французский язык — 76,0
химия — 65,0
Программа обученияв начальной школе
«Начальная школа XXI века», «Перспектива», «Школа России»
Профиль обученияв средней школе
кадетский класс, языковой
Профиль обученияв старшей школе
социально-экономический, гуманитарный, кадетский класс, медицинский, инженерный, языковой
Профильные классы при вузах
распределенный лицей НИУ ВШЭ; медицинский класс при ПМГМУ имени Сеченова; инженерный класс при МГТУ имени Баумана
Условия поступления
регистрация в 1-ый класс через портал госуслуг
Иностранные языки
французский язык, немецкий язык, английский язык
Кружки и секции
Юный техник; Лего-конструирование; Робототехника; Образовательная робототехника; Основы конструирования и схемотехники; Военное дело; Инженерия космических систем; Популярная электроника; Мой английский; Основы медицинских знаний; Решение качественных и расчетных задач по химии; Деловой английский; Огневая подготовка; Китайский язык; Киностудия; Корейский язык; Грузинский язык; Мой французский; Театральная студия; Поют кадеты; Грузинские танцы
Виды спорта
баскетбол, волейбол, плавание, спортивная гимнастика, футбол, художественная гимнастика, шахматы
Дополнительно
заочное обучение, бассейн
Сотрудничество с вузами
Национальный исследовательский университет «Высшая школа экономики»,Первый Московский государственный медицинский университет им. И.М.Сеченова,Московский государственный технический университет им. Н.Э. Баумана (национальный исследовательский университет)
Стоимость обучения
бесплатно
Факты о школе
— В 2016/2017 учебном году в школе 4 победителя и призера Всероссийской олимпиады школьников по французскому языку.

Зачем использовать крупную типографику?

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

Привлечение внимания

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

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

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

Провоцирование чувств

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

Если вы вызовите эмоциональную реакцию посетителя, вам будет проще построить с ним отношения и заставить вернуться на сайт

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

Усиление посыла

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

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

Создание иерархии

Стив Круг в своей книге сказал: «Люди не читают страницы. Они их сканируют». Использование крупной типографики в дизайне сайтов — это отличный способ создать понятную визуальную иерархию контента. А это в свою очередь позволит пользователю легче сканировать контент и взаимодействовать с ним. Элементы, создающие иерархию должны быть размещены по всему сайту, причем так, чтобы пользователь не успевал потерять нить или заскучать. В идеале процесс сканирования должен провести посетителя по всему сайту без перерыва.

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

Правила типографики: какие кавычки выбрать?

Дальше – кавычки (рис.4). В русском языке у нас есть два типа кавычек – это «елочки» и «лапки».

Рис.4 Кавычки

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

В общем, запомните, что основные кавычки у нас вот такие – «елочки».

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

Все эти символы можно запросто найти на типографской клавиатуре Ильи Бирмана. Это раскладка клавиатуры есть и для MAC-а, как у меня здесь на скриншоте (рис.5), так и для Windows. Она скачивается, ставится в настройках системы. И довольно просто найти здесь и минус, и короткое тире, и плюсы и еще ряд на самом деле других, довольно удобных знаков. Кавычки, лапки, стрелочки, очень удобные значки копирайта и так далее.

Рис.5 Типографская клавиатура http://ilyabirman.ru/projects/typography-layout

В общем, очень удобная штука. Ссылка есть. Я думаю, что добавлю в описание. Идем дальше.

Понятие шрифта и его характеристики

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

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

Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.

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

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

Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).

Слова

18. Kёрнинг

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

19. Трекинг

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

20. Акценты в тексте

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

Этот текст нечитаем…

Причина проста: разрядка в прописных мешает читаемости.

22. Ставьте разрядку в прописных

Ставьте бОльшую разрядку между прописными. Читаемость всегда улучшается благодаря большему пространству между прописными. Значение в 10% отлично подойдёт.

Основные правила типографики

Строчные и заглавные буквы шрифтаСтрочные буквы — буквы принятые для сплошного набора текста.Прописные (заглавные, в народе “большие”) буквы используются для прописных знаков, с них начинается предложение или имя собственное.

Дефис и тире
Важная особенность, которую упускают новички

Дефис и тире — разные знаки, это важно знать.Дефис — короткая черточка для разделения слов и переносов. Ничем не отбивается от слов

Пробелы перед ним и после него НЕ ставятся.Короткое тире ставится для обозначения числовых диапазонов, обычно, тоже не отбивается пробелами.Длинное тире — это знак препинания, используется в предложениях и отбивается пробелами.
Дефис, короткое тире и длинное тире отличаются по длине самого знака. Еще есть знак минус, он короче всех. Вот небольшая подсказка. Сохрани картинку себе, чтобы помнить что к чему.
Чтобы набрать длинное тире на PC зажмите клавишу alt и на дополнительной цифровой клавиатуре (у вас блок справа) набери 0151, получится длинное тире. Короткое тире: alt + 0150.
Если забыли сочетание, то наберите в поисковике «длинное тире» найдите статью на википедии и скопируйте тире от туда.

Кавычки
Важно помнить, что в России принято использовать кавычки-ёлочки «». Чтобы их набрать используй alt + 0187

Некоторые используют в качестве кавычек удвоенный знак минут “, но лучше использовать  кавычки-лапки “ ”: alt + 0147.
Комбинация клавиш Shift + 2 в кириллической раскладке клавиатуры вызывает на экран привычный всем знак “. Он обозначает совсем не кавычки (как принято считать), а секунды: 68° 13′ 22″ или дюймы: монитор с диагональю 17”.
В издании нужно использовать один рисунок кавычек, кроме «случаев „цитаты в цитате“».

Смыслы, образы и типографика

Если вы любите работать с ассоциациями, визуальными образами, смыслами, культурным кодом — попробуйте силы в графическом дизайне, иллюстрации или типографике. Это, пожалуй, самое старое направление дизайна: началом графического дизайна можно считать издание первой печатной книги «Алмазная сутра». Ее издали в Китае в 868 году.

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

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

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

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

Сергей Попков

преподаватель

Ты обращаешь внимание на шрифт, когда читаешь книгу, смотришь афишу или изучаешь сайт?

Игорь Суханов

выпускник

Да!

Сергей Попков

преподаватель

Тогда тебе возможно будет интересно попробовать себя в типографике. 

Сергей Попков

преподаватель

Обращаешь внимание на баннеры на улицах и вывески магазинов, насколько они понятны и привлекательны? Отмечаешь про себя, куда бы зашел, а куда — нет?

Иван Затеев

студент

Да, всегда так делаю.

Сергей Попков

преподаватель

Тогда стоит попробовать свои силы в наружной рекламе или UX-дизайне — помогать людям с навигацией.

Сергей Попков

преподаватель

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

Леонид Репиновский

студент

Да, даже пару десятков могу назвать сходу. 

Сергей Попков

преподаватель

Ого! Скорее всего тебе будет интересно создавать логотипы и шрифты.

В Skillbox есть курс «Графический дизайнер с 0 до PRO» для веб-дизайнеров, иллюстраторов и графических дизайнеров. Вы научитесь разрабатывать фирменный стиль для компаний и продуктов, создавать айдентику — логотипы, брендбуки и полиграфию. Узнаете, как выстраивать правильную коммуникацию с клиентом, сформируете качественное портфолио для получения заказов.

Курс «Графический дизайнер с 0 до PRO»

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

  • Живая обратная связь с преподавателями
  • Неограниченный доступ к материалам курса
  • Стажировка в компаниях-партнёрах
  • Дипломный проект от реального заказчика
  • Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Правила типографики в веб дизайне: кернинг и трекинг

Дальше. Есть кернинг, есть трекинг (рис.12).

Рис.12 Трекинг и кернинг

Кернинг – это расстояние между буквами. Между каждой конкретной буквенной парой. Есть трекинг в типографике– это какой-то коэффициент, который мы говорим, что все расстояния между буквами мы умножим на какой-то вот этот коэффициент.

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

У меня специально умышленно кернинг стоит такой нарушенный – просто чтоб вы увидели разницу, что между «К» и «е» расстояние такое, между «р» и «н» оно слиплось. Между «н» и «и» оно тоже чуть больше, чем нужно. Да, вот это расстояние нужно было бы по идее подвинуть.

Трекинг  обычно используется для… Увеличенный трекинг для заглавных букв. Вот как у меня здесь написано (буквы заглавные) – довольно часто для этого стоит использовать так называемую разрядку – увеличено у нас расстояние между этими буквами.

В Фотошопе кернинг находится вот здесь, трекинг находится вот здесь (рис.13).

Рис.13 Кернинг и трекинг

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

Рис.14 Запрещенные приемы

Плющить – это масштабировать их по вертикали (в плюс или минус) и сжимать – это как-то масштабировать буквы по горизонтали (плюс или минус).

Технические начертания тоже нельзя использовать. Что это такое? Есть начертания, которые в шрифте проработаны автором. То есть, у нас есть Regular, есть Bold, есть Italic. Мы видим, что… На самом деле на Italic-е больше всего заметно, что у нас начертание изменилось. На самом деле буква «е» совершенно по-другому. Буква «а» — гораздо заметней буква «а» — видим, что она совершенно разная. Буква «т» — тоже, она здесь такая – здесь такая.

Если мы используем техническое начертание – это просто Фотошоп искусственно наклоняет буквы. Да, мы видим, что разницы такой принципиальной – ее нет. «Т» та же самая осталась, «а» и «е». Видим, что здесь разница гораздо больше в «т» и в «е».

В общем, в Фотошопе технические начертания находятся – вот это «т» и «т-курсивно» — их использовать не стоит. Используйте начертания, которые у нас есть вот здесь, которые заданы автором шрифта (рис.15).

Рис.15 Начертание

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

Блок текста. Тоже довольно часто встречающаяся ошибка –  это неправильная работа с блоками текста. (рис.6).

Рис.6 Блок текста: плохо

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

Гораздо удобнее, когда дизайнер по типографике этот блок делает компактнее (рис.7). 50-80 символов плюс-минус довольно комфортный для человека размер текстового блока.

Рис.7 Блок текста: лучше

Дальше в чем проблемы еще здесь? В том, что у нас есть вот такие вот союзы, местоимения, предлоги и так далее. В принципе, все то, что длиннее трех символов… Вот это вот тоже, в принципе, потому что для этого – тут три символа и пять символов. В общем, все короткие слова, которые 3 плюс-минус один символ нужно переносить на следующую строку.

Что я и сделал. Видим, как гораздо аккуратнее стал правый край (рис.8). Если в этом случае оно неравномерно выглядит, то в этом случае стал довольно аккуратным.

Рис.8  Блок текста: хорошо

Иконки, пиктограммы.

Для чего нужны иконки на сайте?

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

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

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

Спасибо за внимание! Я надеюсь статья “Основы веб-типографики” вам понравилась

День 2. Конструкция



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

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


Закрыть границей другого модуля. Можно использовать плашку или линейку. Самое крутое — добавить пространства.
Взять в рамку или поставить на плашку. Можно линейки.
Закрепить углы. Якорные объекты должны быть контрастны. Тут разговор только о формате.
Коснуться каждой из сторон

Неважно, касается обреза или поля.
Собрать все элементы в центре.

Сетка. Модульность — это не сетка. Сетка для выравнивания. Сетка не делит макет по смыслу.


Комбинаторика. Есть семь способов, как расположить много объектов по сетке:

  1. Заполнить модули сетки не до конца.
  2. Покрасить в разные цвета.
  3. Заполнить элементами разных видов.
  4. Объединить модули.
  5. Выйти за пределы модуля.
  6. Добавить новый слой.
  7. Соблюсти баланс порядка и хауса.

Верстка по форме. Существует три вида:

  1. Текст повторяет форму.
  2. Текст ссылается на форму.
  3. Текст создает форму.
Ссылка на основную публикацию