Понедельник, 25 Марта 2013 21:01

Типографика и ее значение

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

Типографика (от греч. τύπος — «отпечаток» и γράφω — «пишу») — художественное текстовое оформление, осуществляющееся путем набора и верстки.

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

Давайте разберемся с понятием «типографика» на примере шаблона студии RocketTheme.

Это типографика текста, который размещается между тегами text

Также обязательно создаются правила для отображения текста по умолчанию (если не задан отдельный класс для текста)

.body {}

Не забудьте об оформлении ссылок, абзацев и др.

К типографике также относится выделение внутри текста при помощи стандартных тегов:

Выделение курсивом

cursiv

Выделение уменьшением шрифта

Выделение приданием жирности

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

warning

Так будет выглядеть текст, которому присвоен класс "success" или "warning".

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

Заметки, цитаты, пометки (например, указание авторства) в этом шаблоне могут выглядеть так:

И еще приведу пример возможных оформлений списков:

 

Я мог бы привести еще кучу примеров, но мы здесь для знакомства с понятием «типографика», поэтому подведем некоторые итоги, а с типографикой шаблона, из которого взяты примеры, Вы можете ознакомиться здесь (шаблон Cerulean).

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

  1. Выбор шрифта — дизайн шрифта определяет настроение, передает «характер».
  2. Размер шрифта — немаловажна величина главной части текстового материала. Размер заголовка определяется вашим личным выбором, но основной текст должен комфортно восприниматься, поэтому рекомендуют устанавливать его размер в рамках 12-16 px.
  3. Набор стилей – не желательно отдавать предпочтение одним и тем же шрифтам, поскольку мало приятного в прочтении серой массы. Формируйте систему стилей в отношении подзаголовков и заголовков, главного текста, цитат и подобного. Выбирайте разность размеров шрифтов, вариаций его начертания. В качестве контрастного может подойти дополнительный шрифт, применимый для цитат или заголовков.
  4. Акцент – важные места в тексте обозначайте курсивом или жирным.
  5. Интерлиньяж (Leading) — междустрочные промежутки. Если использовать маленькое значение — текст сольётся, большое — тоже ничего хорошего. Это значение лучше подбирать отдельно в каждом конкретном случае. Рекомендуемые значения: от 1,5 до 3,5.
  6. Цвет и контраст — чтобы текст читался без проблем — в нем должна присутствовать контрастность. Лучший вариант — классическое черно-белое решение. Другие решения следует применять с особой осторожностью. Не совершите одну из типичных ошибок, когда цвет текста сливается с фоном.
  7. Общая структура страницы — на всем ресурсе применяйте общие стили и правила, которые Вы изначально продумали.
  8. Белое пространство — не следует располагать элементы предельно близко — оставляйте какую-то часть белого пространства. Это существенно упростит восприятие Вашего сайта.

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

Последнее изменение Понедельник, 25 Марта 2013 22:30
Бесплатные консультации по созданию и продвижению
сайтов, тем кто зарегистрируется в хостинге www.timeweb.ru указав партнерский ID 4496

10 лет опыта в создании и продвижении сайтов.

Подробнее информация по телефону:

8 (905) 778-52-44

(Билайн Москва)

и в скайпе nportalru

В закладки

Мы в социальных сетях

button_play_red sna_twitter sna_vkontakte sna_facebook
©2010-2012 Документация Joomla CMS: компоненты joomla, шаблоны joomla, joomla 2.5, обучение joomla