WebClub - Всероссийский Клуб Веб-разработчиков
WebClub.RU » Архив » Тайп-дизайн (шрифтовой дизайн)

Тайп-дизайн (шрифтовой дизайн)


Дата публикации: 17-03-2013

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

Основные элементы текста
В тексте могут присутствовать следующие элементы:
заголовок - лучше всего выполнять более крупным, привлекающим внимание шрифтом, это может быть либо легкочитаемый шрифт с засечками (мы рассматривали подобные в предыдущем описании) либо наоборот трудночитаемый шрифт с очень яркой, запоминающейся гарнитурой. Примерами могут служить такие шрифты как Helvetica, Tahoma, Arial (шрифты без засечек), Baltica (c засечками), различные декоративные шрифты.
девиз (или цитата) - обычно делают шрифтом на 1-2 пункта меньше основного текста. Так как шрифт получается достаточно мелкий - 9-11пик то лучше воспользоваться шрифтами без засечек (Helios, Helvetica, Arial, Tahoma). Кроме того будет лучше если фраза будет набрана наклонным (itallic) шрифтом. Таким образом она будет более заметна.
основной текст - набирается размером в 10-14пик. здесь лучше использовать стандартные решения -шрифты с засечками или без, но обязательно легкочитаемые (если конечно вы не стараетесь специально сделать текст неудобочитаемым). Для веб-страниц идеально подходят шрифты Arial, Helvetica, Times Roman.
адреса, телефоны, имена авторов - обычно делаются либо на 1-2 пики больше основного текста, либо такими же по размеру, но полужирными.

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

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

картинкатекст набран шрифтом Helvetica
Данный текст вполне смотрелся бы в качестве заголовка к статье или докладу.

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

картинкаТекст набран шрифтом Impact. Этот шрифт напоминает Helvetica, но он более сжат и лаконичен. Идеально подходить для коротких фраз. Например для рекламного слогана.

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

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

Трекинг

картинкакартинка

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

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

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



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

Домен продается

Популярное

Не так давно в сети появился новый сервис, под названием Dead Man Zero. Этот сервис сделал...
Рынок социальных площадок уже давно стал стабильным. Несмотря на то, что время от времени...
Artisteer 4 – единственный в своем роде продукт, позволяющий автоматизировать работу над созданием...
Апрель 2024 (1)
Октябрь 2018 (14)
Февраль 2017 (3)
Январь 2017 (1)
Август 2016 (1)
Май 2016 (2)

Карта сайта: 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, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41

Друзья сайта



Случайная цитата

Edward V Berard:

"Ходить по воде и разрабатывать программы, следуя спецификации, очень просто… если они заморожены."

Опрос

Какой браузер Вы используете?

Internet Explorer
Google Chrome
Mozilla Firefox
Netscape Navigator
Maxthon Browser
Opera
Mozilla Suite
SeaMonkey
K-Meleon
Safari
Amaya
Avant Browser
SlimBrowser
Другой...