Красивое оформление текста css: Оформление текста css – как оформить его красиво

Оформление текста css – как оформить его красиво

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

Цвет

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

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

Цвет в css задается с помощью свойства color. Значения можно записывать в виде ключевых слов (white, brown, orange), шестнадцатеричных hex-кодов (#000, #fff, #ccc) и в режиме rgb (red, green, blue) где определяется насыщенность каждого из этих цветов в числовом значении от 0 до 255.

Сам шрифт

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Задать шрифт можно с помощью свойства font-family, а значением выступает имя или семейство. Для надежности можно записать пару вариантов через запятую. Например, так: Font-family: «Lato», Georgia, Arial, sans-serif;

Тут мы записали аж четыре варианта. Если браузер найдет шрифт Lato, то будет использовать именно его. Если же он не будет обнаружен, то следующим веб-обозреватель попытается использовать Georgia, а если и его не будет, то Arial. Этот шрифт есть на любых компьютерах с операционной системой Windows.

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

Размер шрифта

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

У некоторых html элементов размер текста определен изначально. Например, если вы заключите текст в теги h2, то он автоматически выведется большими жирными буквами. На самом деле вы легко можете изменить эту установку по умолчанию:

h2{ font-weight: normal; font-size: 50px; }

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

Тень текста

Любому текстовому фрагменту можно задать тень с помощью правила text-shadow. Давайте разберем его синтаксис на примере:

span{ text-shadow: 2px 2px 5px red; }

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Все текстовые фрагменты, заключенные в теги span, получат такую тень. Выглядит она так:

Первое числовое значение задает смещение по горизонтали, второе – смещение по вертикали, третье – размытие тени, это позволяет снизить ее резкость и насыщенность.

Если какое-то из значений вам не нужно, просто поставьте 0. Цвет записывать обязательно. Параметры тени зависят в первую очередь от размера шрифта – чем он больше, тем больше можно делать смещение.

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

Множественная тень

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

span{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua; } div{ font-size: 40px; text-shadow: 0 0 5px red, 0 0 10px orange, 0 0 15px yellow, 0 0 20px green, 0 0 25px aqua, 0 0 30px blue, 0 0 35px purple; } p{ font-size: 40px; text-shadow: 1px 1px 0 red, -1px -1px 0 orange, 2px 2px yellow, -2px -2px green; }

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

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

Другие свойства

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

Оформление при наведении

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

Интересно, что в последнее время в сайтостроении популярно делать все изменения плавно. Для этого просто пропишите нужному элементу на странице:

#header{ transition: (задержка в секундах или миллисекундах) например 1s; }

Теперь если к шапке добавить стили с псевдоклассом hover (то есть добавить изменение внешнего вида при наведении), то изменение некоторых значений будет происходить плавно, что само по себе немного красивее, по сравнению с резким переходом.

Итог

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Красивое оформление текста при CSS на сайт

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

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

1) Первый вариант Эффектная анимация с текстом плюс тени:

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

Это ставим где вам нужно.

Код

<h2>ZORNET.Ru: Сайт про uCoz</h2>

И под них стили, которые при нажатие на КЛИК появятся и можете скопировать.

2) Второй вариант на размытый текст:

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

Код

<p>ZORNET.Ru</p>

Но и небольшие стили КЛИК и копируем в CSS сайта, также их можно заключить в style ниже. И здесь также как и на первом прикреплен шрифт.

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

Источник: Dbmast.ru

15 потрясающих анимированных эффектов для текста на CSS

Красивый текст и типографика способны сделать Ваш сайт более привлекательным. В веб — дизайне CSS позволяет сделать более интересные эффекты с текстом, при этом вообще не использовать графические редакторы и скрипты.

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

Спасибо большое http://www.hongkiat.com и обязательно посмотрите следующее:

Эластичная анимация

Этот эффект делается с помощью CSS и SVG, как видите, что результат получился потрясающим.

Перейти

Глюк с SVG

Хотите, чтобы Ваш текст на сайте имел популярный глюк аналогового телевидения? Это можно сделать с помощью CSS и SVG фильтров

Перейти

Ретро логотип

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

Перейти

Эффект сдвига для текста

Как будто текст разрезали острым ножом. Этот эффект сделан с помощью 70 линий на CSS.

Перейти

Длинная тень для текста

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

Перейти

Туманный эффект для текста

Отличный туманный эффект в основном для сайтов с тёмным дизайном. Работает данный эффект только в Webkit браузерах

Перейти

Маска для текста на SVG

Перейти

Анимация для текста

Это на вид простая анимация, но она сделана только на CSS и стоит Вашего внимания.

Перейти

3d текст

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

Перейти

Текст с фоном

Вернее текст тут, как бы, получается прозрачным.

Перейти

Мигающий текст

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

Перейти

Анимированная подпись

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

Перейти

Глюк для страницы с 404 ошибкой

Совершенно необычный и красивый глюк, который можно установить на страницу с 404 ошибкой.

Перейти

Космос

Довольно интересный и хорошо продуманный логотип с анимацией, которая работает на CSS

Перейти

Загрузка

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

Перейти

Опять про красивое оформление текста|шпаргалки блогерши

Дама сдавала в багаж Диван, Чемодан, Саквояж, Картину, Корзину, Картонку И маленькую собачонку. Выдали даме на станции Четыре зеленых квитанции О том, что получен багаж: Диван, Чемодан, Саквояж, Картина, Корзина, Картонка И маленькая собачонка.

Жил человек рассеянный На улице Бассейной. Сел он утром на кровать, Стал рубашку надевать, В рукава просунул руки Оказалось, это брюки. Вот какой рассеянный С улицы Бассейном!

 Ну и ещё, к примеру, увеличим закругление углов у рамки с правой и с левой стороны. Изменим в коде свойства border-left:5px и border-right:5px. И поменяем цветовой эффект. Имеем следующее.

У старика и старухи Был котенок черноухий, Черноухий и белощекий, Белобрюхий и чернобокий. Стали думать старик со старухой: — Подрастает наш черноухий. Мы вскормили его и вспоили. Только дать ему имя забыли.

В одном сообщении можно применить несколько подобных стилей. В этом случае нужно просто поменять везде название set на set1, set2 и так далее.

Как это реализовать. При написании сообщения переходим в режим HTML и в нужном месте вставляем этот код. если предполагается многократное использование такого эффекта, то первая часть кода CSS, а именно, то что заключено в теги <style>код </style> установить непосредственно в шаблон блога. Вкладка шаблон-изменить HTML . Находим, давно полюбившуюся всем строку ]]></b:skin> и над ней этот код устанавливаем. Но уже без этих тегов <style></style>. Сохраняем шаблон. А потом, когда очень захочется что-то выделить, берём этот маленький код HTML

Как красиво оформить текст в WordPress без плагина — Узнай тут 48

Приветствую Вас на своем блоге!
В WordPress можно красиво оформить текст с помощью плагина  WP-Note или Special Text Boxes, а можно и без плагина. Как известно чем меньше плагинов установлено, тем лучше. А может кто-то вообще не любит плагины и старается все делать без них. Самый простой способ красиво оформить текст без плагина, это с помощью таблицы стилей style.css вашей темы.
Для начала нужно написать свойства стиля, как мы будем оформлять текст. Это можно сделать в текстовом редакторе notepad++ или juffed. Так сказать сделать заранее несколько заготовок, а потом их просто подставлять в нужное место

Вот пример такого кода:

/* оформление рамки блока */
.bloginfo {
    background: #eef0ed;
    border: 1px solid #c0c0c0;
    padding: 3px 5px 3px 30px;
    margin: 50px;
    text-align: justify;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px;
-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */
 -ms-filter: "progid:DXImageTransform. Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)";/*Internet   Explorer */
  box-shadow: 5px 5px 5px #ABC;/*Opera и Firefox*/
}
/* оформление заголовка блока */
.bloginfo-head {
    font-size:1.4em;
    font-weight: bold;
    color:#ed802b;
    margin: 0 0 5px 0;
}
/* оформление текста блока */
.bloginfo-txt {
    line-height: 1.3em;
    color:#0d7bb8;
    font-size:11px;
 }

Как видите наш код состоит из трех блоков — это блок общей рамки, блок заголовка и отдельно идет блок содержимого рамки.

Немного поясню, что в этом коде за что отвечает:

1 блок.

.bloginfo   — название div класса. Тут можно написать любое название, главное чтобы оно совпадало и в css и в блоге;
background: #eee url(images/img.png) no-repeat;  —  фон нашей рамки с картинкой в углу рамки, если нужна. Меняйте цвет по своему усмотрению, также можно вставить любую картинку;
border: 1px solid #c0c0c0; — окантовка нашей рамки. 1 пиксел шириной, solid-сплошная линия и цвет окантовки. Тут также все можно менять по своему вкусу;
padding: 3px 5px 3px 30px; — отступы текста внутри рамки начиная сверху, слева 30px место для картинки. Если картинка не нужна, то можно отступы сделать одинаковые;
margin: 10px; — внешний отступ рамки, расстояние между рамкой и другими блоками, тут надо экспериментировать, для разной ширины рамки делать свой отступ, чтобы было красиво;
text-align: justify; — выравнивание текста внутри рамки, сейчас стоит по всей ширине;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;   — этот код позволяет выводить закругленные края рамки, если они не нужны, то его можно удалить или за комментировать;
Этот код позволяет выводить наш блок с тенью:
-webkit-box-shadow: 5px 5px 5px #ABC;/*Google Crome и Safari */
-ms-filter: «progid:DXImageTransform. Microsoft.Shadow(color=#AABBCC,direction=125,strength=5)»;/*Internet Explorer */
box-shadow: 5px 5px 5px #ABC;/*Opera и Firefox*/

2 блок.

.bloginfo-head — название div класса;
font-size:1.4em; — размер шрифта заголовка;
font-weight: bold;  — жирный шрифт;
color:#ED802B; — цвет шрифта в заголовке;
margin: 0 0 5px 0; — отступ заголовка внутри блока;

3 блок.

.bloginfo-txt — название div класса;
line-height: 1.3em; — междустрочный интервал;
color:#2d86de;  — цвет шрифта;
font-size:14px; — размер шрифта содержимого блока;

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

Далее для оформления текста его нужно заключить в теги div блока, примерно так:

Заголовок блока
Содержимое блока

Вот несколько примеров создания таких рамок:

Заголовок

Содержимое блока

Заголовок

Содержимое блока

Заголовок

Содержимое блока

Заголовок

Содержимое блока

Заголовок

Содержимое блока с тенью

Как видите, можно создать любую рамку не прибегая к плагинам.
Если ваш блог комментируют, то рекомендую поставить на свой блог бок «Топ комментаторов», как это сделать вы можете узнать, прочитав эту статью.
На этом пока все. Удачи в оформлении блога!

С уважением, Юрий Хрипачев.

Оформление текста CSS

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, как задать размер шрифта в CSS. В данной статье я бы хотел рассказать, как задать стиль и насыщенность (по-другому называют жирность) для шрифта в CSS. В данной статье мы изучили некоторые теги, с помощью которых можно задавать стиль и насыщенность для текста на html-странице. Но это неправильно, html должен задавать только структуру сайта, всё оформление должно быть сделано с помощью CSS. Курсив мы задавали с помощью тега <i>. В CSS за это отвечает свойство font-style со значением italic. Давайте создадим тестовую html-страницу:

<html>
<head>
	<meta charset="utf-8"/>
	<link href="style. css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Первый абзац данного текста</p>
<p>Второй абзац данного текста</p>
</body>
</html>

Для абзацев в файле стилей style.css зададим стиль шрифта:

p {
font-style:italic;
}

После обновления страницы вы увидите, что шрифт стал курсивным. Другие значения для свойства font-style:
normal — стандартное начертание текста
oblique — наклонное начертание текста (не то же самое, что курсивное). Разницу можно будет заметить не для всех шрифтов.

Я всегда использовал только значение italic, других никогда нигде не использовал.

Давайте теперь зададим насыщенность или жирность для нашего текста. Делается это с помощью свойства font-weight (weight с англ «вес», так сказать вес шрифта) со значением bold:

p {
font-weight:bold;
}

Если вы запустите данную страницу, то увидите, что текст стал полужирным. Значение для насыщенности можно задавать равным от 100 до 900 с шагом 100. 100 — это самое светлое начертание, которое способен отобразить браузер, 900 — самое темное. Стандартный шрифт соответствует значению 400, полужирный (тот, который получается при значении bold — 700). Задание насыщенности в числах как-то не прижилось, и не все браузеры это отобразят (я сам тестировал в некоторых браузерах, но так и не заметил разницы между 100 и 600). Стандартную насыщенность можно задать с помощью свойства normal, что иногда требуется:

p {
font-weight:normal;
}

Следующее свойство, которое служит для оформления текста — это text-decoration. Оно служит для того, чтобы мы могли сделать текст, например, подчеркнутым (значение underline). В html для этого служит тег <u>. С помощью этого свойства мы можем также подчеркнуть текст сверху (overline) и перечеркнуть текст (line-through). Убрать декорацию текста можно с помощью значения none. Давайте создадим тестовую html-страницу и применим на ней inline-стиль для каждого абзаца:

<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
<p>Подчеркнутый абзац данного текста</p>
<p>Надчеркнутый абзац данного текста</p>
<p>Перечеркнутый абзац данного текста</p>
<p>Простой абзац данного текста</p>
</body>
</html>

Запустите данную страницу и убедитесь, что всё работает, как нужно.

Домашнее задание: в данной статье мы рассмотрено 3 свойства и у данных свойств много значений. Запомнить их все трудно, но если практиковаться, то будет намного проще. Поэтому создайте свою html-страницу и примените к ней все те свойства, которые вы изучили в данной статье.

В данной статье вы узнали как оформлять текст с помощью свойств font-style, font-weight, text-decoration.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.

Гайд по визуальному оформлению текста

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

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

Как оформлять текст

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

Оглавление

Оглавление нужно только в том случае, если материал получился длинным. Будет странно, если вы добавите его для текста на 2000 символов.

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

Оформлять оглавление нужно в виде ссылок на элементы страницы. Для этого каждому подзаголовку прописывается идентификатор, а в ссылке в оглавлении ставится якорь на него. Выглядит это так:

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

Если нажать на такую ссылку, экран пользователя переместится так, что выбранный элемент будет вверху экрана. По умолчанию нет никакой анимации – ее можно прописать через JavaScript.

Предложения и абзацы

Предложения в тексте должны быть разной длины – так у него будет ритм. Одно предложение короткое. Второе чуть подлиннее, но не слишком. А третье такое длинное, что помещается на несколько строк, а понять его могут только любители Толстого (шутка).

Каждый абзац должен содержать в себе какую-то мысль, служить какой-то цели. А обрывать его нужно тогда, когда мысль закончена. В классическом копирайтинге иногда в конце абзаца создают небольшую интригу, чтобы читатель катился по «скользкой горке».

Абзацы, как и предложения, должны быть разной длины.

Нет каких-то точных цифр, вроде: предложения должны быть по 3–5 слов, а абзацы по 350 символов или 4–5 строк. Не задумывайтесь о таких вещах – сконцентрируйтесь лучше на смысле предложений и слов.

Нумерованные и маркированные списки

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

• перечислить преимущества или свойства предмета,
• рассказать об этапах какого-нибудь процесса,
• в нескольких пунктах описать вывод из чего-либо.

Маркированные списки должны быть от 3 и более пунктов. Короткие списки выглядят нормально, только если в них несколько предложений. А вот нумерованные списки хорошо смотрятся уже от 2 пунктов.

Нумерацию можно использовать в списках типа «X советов» или пошаговых инструкциях, чтобы читатель мог вернуться к необходимому совету или шагу. То есть нумерованные списки используются, когда важна последовательность – в остальных случаях можно использовать маркированные.

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

Если пункты состоят из нескольких предложений, первое можно выделить жирным. Например, если вы составляете список рекомендаций с пояснениями:

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

Кто-то говорит, что нельзя размещать списки близко друг к другу или к подзаголовкам, но я считаю, что это допустимо. А вот заканчивать ими текст не стоит, потому что создается ощущение недосказанности.

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

• собрать информацию,
• проанализировать ее,
• проверить факты,
• написать черновик и так далее.

В остальных случаях ставится точка.

Таблицы, графики и инфографика

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

Для рытья котлована А потребовалось 5 рабочих, которые вырыли его за 2 суток. Над котлованом Б трудилось вдвое больше рабочих, которые управились за такой же срок. Котлованы равны по объему (30 м³), но роль сыграла разница в типе почвы и местности – каменистая для котлована Б и грунтовая для котлована А.

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

(Не кидайтесь тапками, я не строитель).

Одного взгляда достаточно, чтобы понять, что тут к чему.

Инфографика вообще может стать отдельным материалом, если подойти к ее созданию с той же ответственностью, что и Алексей Александров в материале про контент-стратегию.

Врезки

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

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

Изображения, аудио и видео

С помощью этих элементов можно добавить в текст наглядности. Проще один раз что-то показать, чем все время описывать. Например, Стивен Кинг рассказал о правиле № 1: «Показывайте, а не рассказывайте»:

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

Аудио и видео тоже положительно влияют на материал. Например, я добавил два файла в статью об аудиоредакторах, чтобы показать их в действии. Файлы можно загружать на свой сайт и воспроизводить при помощи HTML5 – для этого используйте тег «<audio>».

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

Полезная информация уже с 0:00

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

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

Подзаголовки

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

В этой статье подзаголовки смысловые, но вы можете добавлять интригу или какую-то важную мысль. Например, можно назвать заголовок «Как оформлять подзаголовки», а можно «X примеров оформления подзаголовков» или «Подзаголовки устарели – срочно перестаем их использовать».

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

Текст можно выделять жирным, курсивом, отмечать его маркером, зачеркивать, менять его цвет. Выделять нужно не ключи, а важные места – нельзя класть асфальт в дождь или снег. Жирным я выделяю законченную мысль или вывод.

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

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

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

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

Ссылки и акронимы

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

• Использовать анкоры – не вставляйте ссылку как текст, лучше прикрепите ее к какому-нибудь слову или предложению. И это слово должно давать пользователю понять, куда он попадет. Например: «Посмотрите наш вебинар по проверке текстов».
• Подчеркивать – сложно найти ссылку, если она не подчеркнута.
• Анимировать – при наведении мыши на ссылку, курсор должен меняться на руку с указательным пальцем (В CSS это делается так: cursor:pointer;). Это необходимый минимум, который прописан в браузерах по умолчанию, но вы можете прописать, чтобы подчеркивание исчезало при наведении.
• Прописывать атрибут title – в этом атрибуте прописывается текст, который всплывает при наведении на ссылку. В него можно добавить пояснение или что-нибудь забавное.

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

Недостаток акронимов и атрибута title в том, что для отображения его содержимого нужно навести курсор мыши на элемент. То есть на мобильных устройствах это работать не будет.

Спойлеры

Спойлеры – это элементы, за которыми можно скрыть текст. Их любят использовать на страницах F. A. Q. Выглядит это так:

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

Смайлики или эмодзи

Why so serious? 🙂 В статьях можно использовать смайлики, но нельзя ими злоупотреблять. Также они плохо подойдут тем, кто уже долго ведет блог, и ни разу не использовал смайлики – слишком резкое изменение.

Добавляйте такие элементы очень осторожно.

Посты из социальных сетей

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

У такого метода есть свои плюсы: не нужно делать скриншоты, не нужно переживать о качестве текста и так далее. Но есть и минус – нужно подключать дополнительные скрипты на сайт, а это может замедлить загрузку. А еще с постами нельзя будет взаимодействовать, если их удалят или если «упадет» социальная сеть.

В принципе, если вы добавляете 1—2 поста на страницу, разница в скорости загрузки будет несущественной.

Разные страницы

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

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

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

Есть и правила по оформлению карточек, страниц с контактами, ошибкой 404 и так далее.

Дизайн

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

• Темный шрифт на светлом фоне. Не используйте черный или белый цвета, потому что они создают слишком большой контраст – от этого быстро устают глаза. Фон лучше делать однотонным – без узорчиков и прочего.
• Размер шрифта 14—18 пикселей, межстрочный интервал примерно 150 %.
• Для мониторов лучше подходит шрифт без засечек.

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

Распространенные ошибки

Чаще всего текст вообще не оформляют. Но посмотрите, какие чудеса творит оформление:

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

Другая ошибка – перебор с оформлением. В коротких текстах появляется слишком много элементов, которые затрудняют чтение:

Кто-то забывает, что между элементами должно быть достаточно места:

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

А какие ошибки в оформлении встречали вы? Поделитесь ими в комментариях – самые интересные мы добавим в статью!

10 CSS Glow Text Effects

Коллекция отобранных вручную бесплатных HTML и CSS светящихся (неоновых) текстовых эффектов примеров кода. Обновление ноябрьской коллекции 2018 года. 1 новый предмет.

1. Текстовые эффекты CSS
2. Эффекты тени текста CSS
3. CSS 3D текстовые эффекты
4. Анимация текста CSS
5. Эффекты сбоя текста CSS

Автор

• Джордж У.Парк
• 9 октября 2018 г.

О коде

Черный зеркальный текст с потрескавшимся эффектом

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

отзывчивый: да

Зависимости: —

О коде

Мерцающий неоновый текст

Мерцающий неоновый текст на чистом CSS.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Парк Джорджа У.
• 21 декабря 2017 г.

О коде

Эффект мерцающей неоновой вывески с использованием текста CSS и тени

Это перо показывает, как свойства CSS text-shadow и box-shadow могут быть анимированы для создания эффекта мерцающей неоновой вывески. Неоновый текст и цвет границы можно индивидуально изменить, обновив соответствующие переменные CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Марк Хегган
• 23 августа 2017 г.

О коде

CSS Неон

Простой анимированный неоновый эффект, созданный с помощью CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Мэтт Смит
• 21 августа 2017 г.

О коде

Эффект неонового текста

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Йохан Жирод
• 23 марта 2017 г.

О коде

Неоновый текст, мерцающий свет

Неоновое мерцание текста с помощью HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Еще один Крис
• 1 марта 2017 г.

Сделано с

• HTML (мопс) / CSS (SCSS) / JavaScript

О коде

Bill 🚀👽 🌀 Paxton Tribute — светящийся текст

Величайший человек, сражавшийся с Терминатором, Хищником, Ксеноморфом и Торнадо F5.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор

• Беннетт Фили
• 9 августа 2016 г.

О коде

Светящийся текст

HTML и CSS светящийся текст.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Томас Тринка
• 7 июля 2016 г.

О коде

Неоновый поток

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор

• Эрик Юнг
• 28 февраля 2016 г.

О коде

Неоновый эффект тени для текста

Эффект неоновой тени для текста в HTML, CSS и JavaScript.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

10 примеров красивой CSS-типографики и как они это сделали… | Психология веб-дизайна

В последнее время меня очень интересовало, как далеко мы можем зайти в типографике только с помощью CSS. Конечно, вы можете использовать изображения или sIFR для создания очень красивой типографики, но есть что-то уникальное и особенное в использовании только CSS. Это также невероятно полезно: если вы знаете, в какой степени вы можете использовать CSS, вы получите гораздо более гибкие веб-сайты, особенно те, которые управляются CMS.

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

Есть много отличных сайтов с красивой типографикой, использующей только CSS, однако простой взгляд на них — это только половина картины. Мы хотим знать, что они сделали и как / почему это привело к красивому шрифту? ПРИМЕЧАНИЕ. Не просто крадите дизайн / код / ​​стиль, перечисленные здесь, учитесь на нем. Я видел несколько сайтов, на которых были скопированы элементы дизайна этих сайтов, и это ужасно.

1. Coudal Partners

Партнеры Coudal

малый заголовок

Большой заголовок

Маленький заголовок семейство шрифтов: Gill Sans, Verdana; размер шрифта: 11 пикселей; высота строки: 14 пикселей; преобразование текста: прописные буквы; межбуквенный интервал: 2 пикселя; font-weight: жирный; Большой заголовок семейство шрифтов: times, Times New Roman, times-roman, georgia, serif; цвет: # 444; маржа: 0; отступ: 0px 0px 6px 0px; размер шрифта: 51px; высота строки: 44 пикселя; межбуквенный интервал: -2 пикселя; font-weight: жирный;

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

Заголовки меньшего размера над ним — это все заглавные буквы с умеренным межбуквенным интервалом (2 пикселя) и либо gill sans, либо verdana. Очень чистые экранные шрифты без засечек. Непосредственная близость двух разных гарнитур и напряжение между умеренным и отрицательным межбуквенным интервалом создают очень красивую типографскую композицию. Небольшая высота строки (44 пикселя для шрифта 51 пиксель) создает тесное взаимодействие между верхними и нижними элементами шрифта.

2 + 3. Человеческая сексуальность и брачная тайна

Человеческая сексуальность и брачная тайна

Пример заголовка

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.

ЗАГОЛОВОК семейство шрифтов: Georgia, serif; цвет: # 4E443C; вариант шрифта: капители; текстовое преобразование: нет; font-weight: 100; нижнее поле: 0; ПУНКТ семейство шрифтов: «Helvetica Neue», «Lucida Grande», Helvetica, Arial, Verdana, без засечек; размер шрифта: 14 пикселей; маржа-верх:.5em; цвет: # 666; ПАРАГРАФНЫЙ НАЧАЛО семейство шрифтов: Georgia, serif; размер шрифта: .8em; font-weight: жирный; преобразование текста: прописные буквы; межбуквенный интервал: 2 пикселя;

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

3. Семенная конференция

Семенная конференция

В пятницу, 6 июня 2008 г.

Узнайте о

Lorem ipsum dolor sit amet, conctetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat.

Средний заголовок семейство шрифтов: times, Times New Roman, times-roman, georgia, serif; размер шрифта: 28 пикселей; высота строки: 40 пикселей; межбуквенный интервал: -1px; цвет: # 444; Текст абзаца семейство шрифтов: times, Times New Roman, times-roman, georgia, serif; размер шрифта: 14 пикселей; высота строки: 20 пикселей; преобразование текста: прописные буквы; цвет: # 444; Большой заголовок семейство шрифтов: times, Times New Roman, times-roman, georgia, serif; размер шрифта: 48 пикселей; высота строки: 40 пикселей; межбуквенный интервал: -1px; цвет: # 444; маржа: 0 0 0 0; заполнение: 0 0 0 0; font-weight: 100;

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

4. Витой интеллект

Twisted Intellect

Раньше об этих частях межтрубных трубок велся блог.И это было великолепно — полная бессмысленной болтовни об Apple, дизайне, типографике, CSS, веб-дизайне и тому подобном…

Мне нравится термин «Мак-человек». Думаю, я сделаю это официальным названием работы… около часа назад

ПАРАГРАФНЫЙ КОД p: first-letter { преобразование текста: прописные буквы; } п { цвет: # 424242; семейство шрифтов: «Adobe Caslon Pro», «Hoefler Text», Georgia, Garamond, Times, serif; межбуквенный интервал: 0. 1em; выравнивание текста: центр; маржа: 40 пикселей автоматически; текст-преобразование: нижний регистр; высота строки: 145%; размер шрифта: 14pt; вариант шрифта: капители; } ЗАГОЛОВОК TWITTER семейство шрифтов: «Adobe Caslon Pro», «Hoefler Text», Georgia, Garamond, Times, serif; стиль шрифта: курсив; цвет: # 424242;} {стиль шрифта: нормальный; вариант шрифта: капители; текстовое оформление: нет; цвет: #afafaf; размер шрифта: 14 пикселей; }

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

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

5. Индустрия подушек безопасности

Индустрия подушек безопасности

Заголовок 02.04.08

Я только что наткнулся на ссылку на магазин, где можно купить двухтерабайтный накопитель по цене айпода. Два. Терабайты. ! @ # $% Какого черта ?! Arrrrgggg. Подожди, ну, позволь мне войти в образ… подтянуть штаны на несколько дюймов — да, хорошо — надеть фланель и согнуться… все готово.

ЗАГОЛОВОК семейство шрифтов: Georgia, Times New Roman, с засечками; размер шрифта: 12 пикселей; font-weight: жирный; цвет: # 600; высота строки: 22 пикселя; маржа: 0; преобразование текста: прописные буквы; межбуквенный интервал: 1 пикс. ДАТА семейство шрифтов: Georgia, Times New Roman, с засечками; размер шрифта: 10 пикселей; высота строки: 22 пикселя; преобразование текста: прописные буквы; межбуквенный интервал: 2 пикселя;

Airbag Industries отлично справляется с использованием очень небольшого межбуквенного интервала, чтобы сделать заголовки меньшего размера и даты чуть большей передышкой. Если больше, то это может испортить внешний вид доски для серфинга, как у этого сайта, или меньше, и он не сохранит сетку, как ощущение всего сайта. Путем изменения веса шрифтов и цветов он создает немного больший контраст. Вы можете почти не заметить, как много мыслей было вложено в эти заголовки, почти такое чувство, как «Выглядит неплохо, но я не знаю почему».

6. Тимони

Тимони

28 марта 2008 г.

Заметки о «повышении качества»

ДАТА размер шрифта: 12 пикселей; семейство шрифтов: Georgia, Times New Roman, с засечками; цвет: # 000; выравнивание текста: центр; font-weight: 100; } БЛОК ПАРАГРАФОВ семейство шрифтов: ‘Hoefler Text’, Georgia, ‘Times New Roman’, serif; шрифт: нормальный; размер шрифта: 1.75em; межбуквенный интервал: .2em; высота строки: 1.1em; маржа: 0px; выравнивание текста: центр; преобразование текста: прописные буквы;

Timoni — еще один интересный сайт, на котором очень пристальное внимание уделяется полям и высоте строк для всех шрифтов на странице. Используя умеренный интервал между буквами и почти такое же расстояние между строками, сохраняется ощущение формальности. Если те же основные принципы шрифта (расстояние между буквами и контраст) создавали менее формальный вид / ощущение на Airbag Industries, этот дизайнер использовал больше места, чтобы сместить всю композицию.

7. Посев

Посев

Вспомогательный текст

Подстрока
Описание и содержание

Подстрока
Описание и содержание

Адрес
www.address.com

ПУНКТ маржа: 0px; отступ: 0 пикселей; размер шрифта: 11 пикселей; цвет: #fff; ясно: оба; padding-bottom: 6 пикселей; СЕРЫЙ ПАРАГРАФ дисплей: блок; цвет: # 666; размер шрифта: 9 пикселей; padding-top: 5 пикселей; ЗАГОЛОВОК маржа: 0px; отступ: 0 пикселей; дисплей: блок; шрифт: нормальный; семейство шрифтов: Arial, Helvetica, sans-serif; размер шрифта: 28 пикселей; межбуквенный интервал: -1px; цвет: #fff; высота строки: 24 пикселя;

Sroown использует подход, еще не рассмотренный в этих примерах. Использование стандартного шрифта без засечек, Arial, и применение некоторого отрицательного межбуквенного интервала, чтобы он выглядел тонким и элегантным. С первого взгляда на сайт я с трудом узнал шрифт и решил, что дизайнер использует sIFR. Благодаря малой высоте линии заголовок получается единообразным и сбалансированным. Копия поддержки просто следует простой базовой линии и не мешает более интересному типу страницы.

8. Я люблю типографику

Я люблю типографику

Sunday Тип: Эль Поль тип

В начале

ЗАГОЛОВОК семейство шрифтов: Georgia, Times New Roman, Times, serif; размер шрифта: 24 пикселя; маржа сверху: 5 пикселей; нижнее поле: 0 пикселей; выравнивание текста: центр; шрифт: нормальный; цвет: # 222; ПОДРАЗДЕЛЕНИЕ семейство шрифтов: «Lucida Grande», Тахома; размер шрифта: 10 пикселей; font-weight: светлее; вариант шрифта: нормальный; преобразование текста: прописные буквы; цвет: # 666666; маржа сверху: 10 пикселей; выравнивание текста: центр! важно; межбуквенный интервал: 0. 3em;

«Я люблю типографику» доказывает, что владелец сайта не шутит красивыми заголовками (и красивым шрифтом CSS по всему сайту). В случае с заголовками наиболее интересной и элегантной CSS-типографикой является подзаголовок. В отличие от Georgia с Lucida Sans, очень чистый шрифт без засечек (особенно, когда он состоит только из заглавных букв) — это тонкий способ отображения классов через шрифт. Большой интервал между буквами действительно подчеркивает каждую форму подзаголовка, создавая как визуальный интерес, так и визуальную коммуникацию.

9. Большой нуб

Большой нуб

8 мая 2008 г.

HOW Now Conference Cow

КАК добраться до Бостона, решать вам. КТО и ЧТО вы здесь делаете — вот в чем вопрос.

ДАТА размер шрифта: 85%; преобразование текста: прописные буквы; межбуквенный интервал: 1 пиксель; цвет: #bbb; размер шрифта: 10 пикселей; семейство шрифтов: «Lucida Grande», Verdana, Helvetica, Arial, без засечек; font-weight: 100; ЗАГОЛОВОК шрифт: жирный 34px «Школьный учебник века», Джорджия, Times, с засечками; цвет: # 333; высота строки: 90%; прибыль: . 2em 0 .4em 0; межбуквенный интервал: -2 пикселя; ЯРЛЫК цвет: # 76879b; размер шрифта: 10 пикселей; маржа: 5 пикселей; семейство шрифтов: «Lucida Grande», Verdana, Helvetica, Arial, без засечек; размер шрифта: 11 пикселей;

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

10. Quipsologies

Quipsologies

QUIPSOLOGIES, ПОДРАЗДЕЛЕНИЕ ВНУТРЕННЕГО РАССМОТРЕНИЯ,

№ 4

«Доктор. Фредрик Дж. Баур так гордился тем, что разработал контейнер для картофельных чипсов Pringles, что попросил свою семью похоронить его в одном ». Достаточно сказано. [Via Unbeige]

ВЫПОЛНЕН АрминомИюнь 02.2008

ЗАГОЛОВКИ семейство шрифтов: грузия, засечки; цвет: # 381704; размер шрифта: 10 пикселей; межбуквенный интервал: 0,1 мкм; высота строки: 200%; padding-top: 11 пикселей; КОЛИЧЕСТВО семейство шрифтов: грузия, засечки; цвет: # 3B200F; размер шрифта: 16 пикселей; font-weight: жирный; высота строки: 125%; выравнивание текста: центр; ОТДЕЛЕННЫЙ РАЗДЕЛ семейство шрифтов: грузия, засечки; цвет: # 786E69; размер шрифта: 10 пикселей; font-weight: жирный; Межбуквенное расстояние:.1em; преобразование текста: прописные буквы; padding-bottom: 3px; семейство шрифтов: грузия, засечки; цвет: # 786E69; размер шрифта: 10 пикселей; font-weight: жирный; стиль шрифта: курсив; межбуквенный интервал: . 1em; padding-bottom: 35 пикселей; ПУНКТ семейство шрифтов: грузия, засечки; цвет: # 381704; размер шрифта: 12 пикселей; шрифт: нормальный; высота строки: 150%; отступ: 0 пикселей;

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

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

Текст чистый и легко читаемый благодаря большой высоте строки и шрифту Georgia.

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

Готово!

Это примеры, которые я нашел в сети. Есть ли что-то, что я пропустил? Помните, используйте эти примеры и код, чтобы изучить приемы, которыми владеют эти дизайнеры для улучшения своей работы с помощью типографики.Не крадите его прямо сейчас. Если вы не поймете этого, уверяю вас, это будет просто выглядеть неуместно и отвлекать от дизайна, а не добавлять к нему. И есть много отличных возможностей использовать CSS и типографику для создания великолепных визуальных эффектов, не спешите переходить к sIFR или изображениям.

Основы стилизации текста CSS · Документы WebPlatform

Сводка

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

Введение

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

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

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

Печатать в Интернете?

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

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

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

Стили шрифта

CSS имеет ряд свойств, начинающихся с font- , которые позволяют вам управлять многими функциями самих текстовых символов (или глифов). Мы рассмотрим это в следующих разделах.

Выбор шрифта из font-family

font-family позволяет указать, какой шрифт или шрифты будут использовать выбранные элементы.Попробуйте добавить следующую строку CSS в правило body , затем сохраните и перезагрузите:

  семейство шрифтов: Arial;
  

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

Веб-шрифты

Существует около 11 шрифтов, которые установлены почти во всех системах, называемых веб-безопасными шрифтами , потому что они безопасны для использования на ваших страницах. В списке:

• Sans-serif : шрифты без засечек: Verdana, Arial, Trebuchet MS
• Serif : шрифты с засечками: Times new roman, Georgia
• Моноширинный : шрифты, в которых каждый глиф занимает одинаковое пространство, как в компьютерном коде: Andale mono, Courier new
• Cursive : шрифты с декоративным стилем, часто напоминающим рукописный: Comic Sans
• Fantasy : шрифты с жирным, часто орнаментальным или причудливым стилем, которые предназначены для использования в заголовках, а не в основной части: Impact

Наборы шрифтов

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

  семейство шрифтов: 'helvetica neue', arial, verdana, sans-serif;
  

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

Итак:

• Браузер ищет Helvetica neue в системе пользователя и использует этот шрифт, если находит его.
• Если Helvetica neue не найдена, браузер ищет Arial в системе пользователя и использует его, если находит.
• Если Arial не найден, мы воспользуемся Verdana.
• В крайнем случае, если ни один из шрифтов в стеке шрифтов не найден, шрифт возвращается к без засечек, который указывает браузеру использовать любой шрифт, являющийся системным шрифтом без засечек по умолчанию. Вы не знаете точно, что будет использоваться в этом случае, что является досадной потерей контроля, но, по крайней мере, это лучше, чем в конечном итоге использовать браузер по умолчанию — Times new roman, который является шрифтом с засечками.

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

Переопределение основного шрифта

До сих пор вы установили шрифты для элемента , который устанавливает значение по умолчанию для всей страницы, которое влияет на все; Теперь вы узнаете, как переопределить некоторые дочерние элементы для правильной настройки.

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

  h2, h3 {
  семейство шрифтов: влияние;
}
  

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

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

  em {
  семейство шрифтов: грузия;
}
  

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

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

Замена изображения

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

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

  h2 {
  фоновое изображение: url (myheading.png);
  высота: 55 пикселей;
  текстовый отступ: -9000px;
}
  

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

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

• Этот метод очень негибкий. Вы должны создать изображение для каждого бита текста, который хотите заменить, а затем менять их каждый раз, когда вы хотите изменить размер, цвет, формулировку или что-то еще. А представьте, что вы пытаетесь использовать замену изображения на фрагментах текста внутри абзацев, а также в заголовках? Слишком нудно.
• Текст хорошо масштабируется при увеличении масштаба; изображений нет. Если вы увеличите масштаб слишком сильно, графический заголовок начнет выглядеть зернистым и пиксельным.
• Если вы используете слишком много замены текста, дополнительные HTTP-запросы могут замедлить загрузку вашей страницы. Некоторые более сложные методы замены изображений могут еще больше замедлить работу страницы, поскольку они используют Flash (siFR) или SVG (cufon).

Веб-шрифты

К счастью, CSS3 представляет веб-шрифты, функцию, которая позволяет нам указывать наши собственные файлы шрифтов для загрузки вместе с нашими веб-страницами. Это замечательно, поскольку полностью решает проблему недоступности шрифтов на компьютерах пользователей.Чтобы указать веб-шрифт для загрузки на странице, вы ссылаетесь на шрифт в специальном блоке @ font-face , который идет вверху страницы и выглядит примерно так:

  @ font-face {
  font-family: 'Мой шрифт';
  src: url ('myfont. ttf') формат ('truetype');
}
  

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

Затем вы включаете шрифт на свою страницу точно так же, как и другие шрифты:

  font-family: «Мой шрифт»;
  

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

Выполните следующие действия:

1. Получите файл шрифта. Практически все форматы будут работать. Шрифт, который мне нравится для заголовков, называется Romantiques, я получил его на Fontspace.com. Загрузите zip-файл и распакуйте его.

2. Посетите fontsquirrel.com и выберите генератор @ font-face.

3. Нажмите «Добавить шрифты», выберите файл шрифта Romantique, который вы хотите использовать, и установите флажок «Отказ от ответственности».

4. Нажмите кнопку «Загрузить комплект». Через несколько секунд вам будет предложено сохранить набор веб-шрифтов. Сохраните его в своих файлах примеров.

5. Распакуйте комплект, и вы увидите несколько файлов. Интересующие вас файлы — это файлы различных форматов шрифтов и stylesheet.css .

6. Скопируйте все файлы шрифтов (.eot , .svg , .ttf и .woff ) в разумное место в ваших файлах примеров. Проще всего сохранить файлы в том же каталоге, что и файл HTML.

7. Откройте файл stylesheet.css и скопируйте правило CSS внутри него в начало стилей файла примера. Выглядит это так:

  @ font-face {
  семейство шрифтов: 'RomantiquesRegular';
  src: url ('romantiques-webfont.eot');
  src: url ('romantiques-webfont.eot? #iefix ') формат (' embedded-opentype '),
       url ('romantiques-webfont.woff') формат ('woff'),
       url ('romantiques-webfont.ttf') формат ('truetype'),
       url ('romantiques-webfont.svg # RomantiquesRegular') формат ('svg');
  шрифт: нормальный;
  стиль шрифта: нормальный;
}
  

• Опять же, семейство font-family диктует имя шрифта, используемое для его идентификации в коде.
• Значения src определяют расположение файлов шрифтов. Различные браузеры, сталкивающиеся с этим, продолжают просматривать список, пока не найдут формат, который они понимают, после чего они загружают этот файл шрифта и используют его на странице (хотя некоторые браузеры немного глючны и могут загружать больше, чем только тот, который они необходимость, тратя впустую полосу пропускания в процессе). IE использует версию .eot ; большинство современных браузеров будут использовать .woff , который меньше по размеру файла, чем другие; старые браузеры, отличные от IE, которые не поддерживают .woff , будут использовать файлы .ttf или .svg .
• , font-weight и font-style задают такие атрибуты, как толщина шрифта, и если он курсивный, но пока о них не нужно беспокоиться.

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

Удалите правило h2 , которое вы добавили ранее, и замените его следующим:

  h2, h3 {
  семейство шрифтов: RomantiquesRegular;
}
  

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

  цвет: # 530FAD;
  

При таком использовании пользовательских шрифтов возникают некоторые проблемы.Рассмотрим следующее:

• Размер файла : В этой статье я намеренно выбрал шрифт большого размера, чтобы выделить проблемы с размером файла. Большинство файлов западных шрифтов не такие уж большие, но файлы Romantique в основном занимали несколько сотен КБ, а SVG весил почти 1 МБ! Это большой дополнительный вес, который нужно добавить к странице, особенно для тех, кто загружает с более низкой пропускной способностью, такой как мобильные сети. И хотя западные наборы глифов обычно содержат только десятки символов, может быть, несколько сотен, если набор действительно полный, некоторые языковые наборы шрифтов (особенно CJK ) могут содержать буквально тысячи символов и иметь размер в несколько мегабайт. Будьте внимательны!
• Размер шрифта : Вы заметите, что размер шрифта намного меньше, чем в версии с заменой изображения. Различные базовые размеры шрифтов также могут сильно различаться, поэтому примите это во внимание при установке размеров шрифтов и исследуйте, насколько резервные размеры шрифтов будут соответствовать основным шрифтам, которые вы хотите использовать.
• FOUT : Это происходит, когда страница загружается, и на короткое время текст отображается без примененного веб-шрифта, прежде чем веб-шрифт завершит загрузку.Когда он загружается, страница сдвигается, чтобы показать новый шрифт, что может вызвать раздражение у посетителя. Вы можете смягчить это с помощью библиотеки, такой как загрузчик веб-шрифтов Google или FOUT-b-Gone.
• Количество глифов / качество шрифта : доступно множество бесплатных шрифтов с таких сайтов, как Font squirrel, DaFont, My Fonts и веб-шрифты Google, однако не все они высокого качества, а некоторые могут иметь очень ограниченный набор глифов, поэтому вместо символов будут отображаться ужасные пустые квадратики, если на странице есть символы, которых нет в выбранном шрифте. Это представляет гораздо большую проблему для основного текста, чем для заголовков, и вам нужно быть особенно осторожным с этим, если вы используете веб-шрифты на сайтах с пользовательским контентом, потому что вы не можете точно контролировать, какие символы вводят посетители. Некоторые шрифты также могут плохо выглядеть в определенных операционных системах (они могут плохо выглядеть в Windows, если у пользователя не включен cleartype). Единственный ответ здесь — тщательно протестировать шрифты, прежде чем использовать их в своем дизайне. Например, запятая в первом
  выглядела ужасно после того, как я установил свои шрифты на Romantique, поэтому я удалил ее.

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

Установка единиц измерения и размер шрифта

Следующее свойство CSS, на которое следует обратить внимание, — это font-size . Это позволяет вам установить размер текста внутри выбранных элементов, используя любые доступные единицы CSS, такие как пиксели, em, проценты и т. Д.

Вы также можете использовать ключевые слова размера: xx-small , x-small , small , medium , large , x-large и xx-large .Их лучше всего использовать, когда вы хотите установить размеры шрифтов относительно друг друга. Например, размер основного текста — средний , тогда вы можете установить заголовок верхнего уровня на xx-large , а затем, возможно, установить заголовок второго уровня на x-large .

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

Установка базового размера шрифта

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

  размер шрифта: 62,5%
  

Почему 62,5%? Ответ заключается в том, что размер шрифта по умолчанию для большинства браузеров составляет 16 пикселей. 62,5% от 16 равно 10, поэтому, используя этот процент, вы устанавливаете базовый шрифт для всего сайта на 10 пикселей, что упрощает последующие математические вычисления.

Установка размеров корпуса и заголовка

Затем обратите внимание на размеры шрифтов для различного контента. Базовый размер шрифта составляет 10 пикселей, что позволяет легко определить размеры остального текста страницы. Например, если вы хотите, чтобы заголовки первого уровня были размером 42 пикселя, вы можете установить размер шрифта на 420% или 4,2 пикселя. Для наших целей проценты и ems работают почти одинаково. Различия не так уж и важны, по крайней мере, на данный момент. Оба модуля устанавливают размеры пропорционально размеру родительского шрифта, и дополнительным бонусом является то, что вы также можете установить другие размеры в своем дизайне в процентах от em, такие как поля, ширина блоков содержимого и многое другое.Приятно иметь возможность контролировать весь сайт по размеру текста.

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

Пока что придерживайтесь ems при написании правил.

Добавьте к своим стилям следующие правила:

  h2 {
  размер шрифта: 5. 5em;
}

h3 {
  размер шрифта: 3em;
}
  

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

Затем установите основной текст и список, чтобы его было легче читать:

  п, ул {
  размер шрифта: 1.6em;
}
  

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

Затем установите акцент немного меньше, чтобы он выделялся еще лучше:

  em {
  размер шрифта: 0.8em;
}
  

Если вам интересно, почему вам пришлось установить его на 0. 8em, чтобы получить немного меньше, а не 1,5 или 1,4, попробуйте и убедитесь. Причина в том, что для родительских элементов (

или

  h2 + p: first-line, h3 + p: first-line {
  font-weight: жирный;
}
  

  стиль шрифта: курсив;
  

  вариант шрифта: капители;