Дизайнер: Andy Gongea;
Размеры: 64×64px;
Количество: 90;
Формат: .png;

Cкачать архив (0.2mb)

1. Ширина

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

Самым простым способом расчета ширины блока текста является метод Роберта Брингурста. <ширина текста> = <размер шрифта> *30. Т.е. если размер шрифта 10px, ширина блока будет 300px.

p {
     font-size: 10px;
     max-width: 300px;
 }

2. Межстрочное пространство

Межстрочное пространство играет большую роль для читабельности текста. Правильное разделение строк позволяет пользователю проще следить за строкой и улучшает внешний вид текста.

На межстрочное пространство влияет множество факторов: гарнитура, полнота, размер шрифта, длина строки, расстояние между словами и др. Чем длиннее строка, тем больше пространство. Чем больше размер шрифта, тем оно меньше. Правило – устанавливать межстрочное пространство на 2-5 пунктов больше, чем размер шрифта, в зависимости от гарнитуры.

Пример кода:

body { 
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 16px;
 }

3. Кавычки

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

Пример CSS:

blockquote { 
 text-indent: -0.8em;
 font-size: 12px;
 }

Отрицательный отступ будет зависеть от гарнитуры, размера шрифта и полей.

4. Вертикальный ритм

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

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

Пример:

body {
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 line-height: 15px;
 }
p {
 margin-bottom: 15px;
 }

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

5. Висячие строки

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

К несчастью, нет простого способа предотвратить висячие строки с помощью CSS. Один из способов от них избавится был описан выше, еще один — jQWidon’t, плагин для jQuery, который размещает неразрывные пробелы между последними двумя словами элемента.

6. Выделение текста

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

Примеры:

span {
 font-style: italic;
 }
  h1 {
 font-weight: bold; 
 }
 h2 {
 text-transform: uppercase;
 }
 b {
 font-variant: small-caps;
 }

Имейте в виду, что font-variant работает только в случае, если шрифт поддерживает капитель.

7. Масштаб

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

Пример типографического масштаба определенного в CSS:

h1 { font-size: 48px; }
h2 { font-size: 36px; }  
h3 { font-size: 24px; }  
h4 { font-size: 21px; }  
h5 { font-size: 18px; }  
h6 { font-size: 16px; }  
p { font-size: 14px; }

8. Рваные края

Когда создается блок текста с выравниванием по левому или правому краю, не забудьте подчистить рваные края (неровные строки) и сбалансировать текст без всяких неожиданных «дыр» или неуклюжих форм текстовых блоков. Рваные края могут отвлекать читателя. Хороший край «мягкий», равномерный, без слишком длинных, или слишком коротких строк. Нельзя контролировать это с помощью CSS, так что для получения хороших краев надо вносить в текст ручные правки.

Источник: smashingmagazine.com

Cкачать

1. Информационные сообщения

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

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

2. Сообщение об успехе

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

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

3. Предупреждающее сообщение

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

4. Сообщения об ошибках

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

Процесс

Теперь, когда мы знаем как должны выглядеть сообщения для пользователя, давайте посмотрим, каким образом реализовать это с помощью CSS.
Разметка HTML будет выглядеть так

<div class="info">Info message</div>
<div class="success">Successful operation message</div>
<div class="warning">Warning message</div>
<div class="error">Error message</div>

CSS-класс устанавливает нужные нам границы, отступы, бэкграунды, иконки для соответствующих сообщений:

body{
font-family:Arial, Helvetica, sans-serif; 
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}

Иконки я взял в коллекции, из предыдущей статьи.

Посмотреть пример Cкачать архив

Постовой:
ремонт стиральных машин ZANUSSI. Выгодные условия ремонта и обслуживания.

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

Этот пакет включается в 39 иконок в PNG, ICNS, TIFF и ICO форматах.

Cкачать

Наслаждайтесь!

Постовой:
Хотите поисковое продвижение? Предлагаю фирму – Abiatec.