Как задавать размеры шрифта в вёрстке — Журнал «Код»
Продолжаем говорить о размерах в CSS. Мы уже разбирали пиксели, проценты и зависимость от окна браузера, а теперь посмотрим на особенности размеров шрифтов.
Коротко о том, что уже было: пиксели и высота экрана
Самый простой способ задать размер чего-нибудь на веб-странице — указать его в пикселях:
font-size: 16px;
Также можно указать размер в виде пропорций от ширины или высоты браузера. Например, чтобы размер шрифта был 1/10 от высоты окна. Необычно, но может быть интересно:
font-size: 10vh;
Проценты и шрифты
Ещё есть проценты, но с ними сложнее: нужно знать размеры родительского элемента, чтобы процентам было от чего отталкиваться. Например, если мы просто напишем font-size: 50%;, то браузер сделает так:
- Поищет в стилях, есть ли где-то точное указание размеров шрифта для этого или родительского элемента.
- Если есть — возьмёт 50 процентов от них.
- Если нет — возьмёт стандартный размер шрифта для этого элемента из своих настроек и уже от них посчитает 50%.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Размеры шрифтов</title>
<style type="text/css">
/*задаём общие параметры для всей страницы*/
body {
text-align: center;
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 40px;
}
</style>
</head>
<body>
<p>Привет, это журнал «Код»!</p>
</body>
</html>Браузер взял размер шрифта 40 пикселей из общих настроек для всей страницы.p {
font-size: 50%;
}
А вот что будет, если мы удалим размер в пикселях из стиля body{} и дадим браузеру самому разобраться с размером:
Так как мы не задали точные размеры, то браузер взял какой-то свой размер абзаца по умолчанию и посчитал 50% от этого стандартного размера.
Получилось мелко и нечитаемо.
Em — относительный размер шрифта
Если неохота считать проценты или нужно, чтобы шрифт точно был в 2 раза больше или в 0,7 раз меньше обычного шрифта, используют em. Это то же самое, что проценты: font-size: 100% — это как font-size:1em .
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Размеры шрифтов</title>
<style type="text/css">
/*задаём общие параметры для всей страницы*/
body {
text-align: center;
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<!-- текст с основным размером шрифта -->
<p>Привет, это журнал «Код»!</p>
<!-- эта строка будет иметь шрифт в 2 раза больше -->
<p>А это — статья про размеры шрифтов</p>
<!-- а эта — в 0,7 раза меньше, чем основной шрифт-->
<p>И здесь всё постоянно меняется</p>
</body>
</html> Так же, как и с процентами, em — это относительные значения.
Всё зависит от родительского элемента. В этом примере родительским элементом был общий размер для всей страницы, заданный в body{}. Но что, если мы вложим с помощью блоков абзацы друг в друга?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Размеры шрифтов</title>
<style type="text/css">
/*задаём общие параметры для всей страницы*/
body {
text-align: center;
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<!-- текст с основным размером шрифта -->
<p>Привет, это журнал «Код»!</p>
<!-- меняем размер текста относительно предыдущего блока -->
<div>
<!-- эта строка будет иметь шрифт в 2 раза больше предыдущего блока -->
<p>Делаем шрифт побольше предыдущего</p>
<!-- снова меняем размер текста, но уже относительно предыдущего блока -->
<div >
<!-- эта строка будет в 0,7 раза меньше, чем в предыдущем блоке-->
<p>А этот — поменьше своего предыдущего</p>
</div>
</div>
</div>
</body>
</html> Размеры в эмах удобно использовать для вёрстки разных иерархических элементов, где каждый вложенный уровень должен по размеру быть меньше предыдущего.
Чтобы каждый раз не считать размеры вручную, можно использовать одно и то же значение в em — а браузер сам уменьшит шрифт пропорционально вложенности.
👉 Em считается относительно текущего размера шрифта и пересчитывается при изменении размеров родительского шрифта. Это можно использовать для адаптивной вёрстки.
Кроме em есть ещё rem — она считает размеры шрифта только относительно тех, которые заданы в блоке стилей html{}. Если этого блока нет или в нём ничего не написано — rem посчитает размер шрифта от стандартного значения в браузере. Отличие от em в том, что даже при вложенности друг в друга все значения будут считаться не относительно предыдущего блока, а относительно значения в html{}.
Межстрочный интервал
Помимо размера самих букв у текста есть параметр межстрочного интервала — это расстояние между нижними краями текста на каждой строке.
Стандартное значение межстрочного интервала — normal. Это значит, что браузер спросит у шрифта, какое межстрочное расстояние тот предпочитает.
Вам ни о чём думать не нужно:
p {font-size: 1em; line-height: normal}
Интересно, что вся строка выше в целом бессмысленна, потому что она говорит браузеру «у текста абзацев должен быть стандартный размер и стандартный межстрочный интервал». На что браузер справедливо скажет: «Да я и так бы их сделал стандартными, не учи меня жить».
Иногда мы используем нестандартные шрифты, в которых браузер не знает стандартного межстрочного интервала. Или он его знает, но нас этот интервал не устраивает. Тогда интервал можно задать во всех тех же единицах: пикселях, емах, процентах.
p {line-height: 22px;}p {line-height: 1.3em;}p {line-height: 130%;}
Как адаптировать размер текста под размер экрана
Допустим, дизайнер поручил нам сделать так, чтобы заголовки на странице меняли размер в зависимости от ширины экрана. Если экран широкий, то и заголовок должен быть большим.
Если экран узкий — пусть будет компактным.
Делаем сами: адаптивный сайт
Самый прямолинейный способ это сделать — задать размер в единицах vw. Например, 1vw — это 1% ширины экрана; 10vw — 10% ширины экрана. Если экран шириной 1000 пикселей, то 20vw — это 200 пикселей.
Звучит неплохо, но может плохо выглядеть: смартфоны обычно очень узкие, а экраны компьютеров очень широкие, и разница в размере шрифта будет в 5–6 раз. И если, например, основной текст фиксированного размера, а заголовки должны менять размер, то на широких экранах заголовки будут мельче, чем основной текст.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Размеры шрифтов</title>
<style type="text/css">
/*задаём общие параметры для всей страницы*/
body {
text-align: center;
margin: 10;
font-family: Verdana, Arial, sans-serif;
}
h3 {
/*заголовок будет фиксированного размера*/
font-size: 40px;
}
p {
/*а размер текста будет зависеть от ширины экрана*/
font-size: 5vw;
}
</style>
</head>`
<body>
<div>
<!-- заголовок, размер которого зависит от размера экрана -->
<h3>Привет, это журнал «Код»!</h3>
<!-- основной текст, который не зависит от размера экрана -->
<p>Этот текст зависит от ширины экрана. Чем больше ширина — тем больше размер этого текста</p>
</body>
</html>На телефоне с узким экраном всё выглядит нормально.А на широком экране компьютера текст стал больше заголовка.
Чем больше ширина — тем больше размер этого текста</p>
</body>
</html>Тогда мы можем просто задать размеры стандартных экранов смартфонов и прописать нужные размеры текста для каждого, и всё будет выглядеть идеально.
@media screen and (min-width: 601px) { h3 {font-size: 110px;}}@media screen and (max-width: 600px) { h3 {font-size: 40px;}}
Текст:
Михаил Полянин
Редактор:
Максим Ильяхов
Художник:
Даня Берковский
Корректор:
Ирина Михеева
Вёрстка:
Кирилл Климентьев
Соцсети:
Олег Вешкурцев
Параметры шрифта и фона | Контейнеры
Начнем изучение возможностей языка CSS. Сначала рассмотрим атрибуты стилей, задающие параметры шрифта и фона элементов Web-страниц. Затем мы изучим новый элемент Web-страницы — встроенный контейнер — и соответствующий ему HTML-тег, который нам в дальнейшем весьма пригодится.
Заметим сразу, что все атрибуты стиля, описанные в этой главе, применимы к любым элементам Web-страниц — и блочным, и встроенным. Есть, правда, одно исключение, о котором мы предупредим особо.
Начнем с атрибутов стиля, задающих параметры шрифта, которым набран текст. Ведь текст на Web-страницах — всему голова.
Атрибут стиля font-family задает имя шрифта, которым будет выведен текст:
Имена шрифтов задаются в виде их названий, например, Arial или Times New Roman.
Если имя шрифта содержит пробелы, его нужно взять в кавычки:
P { font-family: Arial }
h2 ( font-family: «Times New Roman» }
Если данный атрибут стиля присутствует во встроенном стиле, кавычки заменяют апострофами:
<P>
Если указанный нами шрифт присутствует на компьютере посетителя, Web-обозреватель его использует. Если же такого шрифта нет, то текст выводится шрифтом, заданным в настройках по умолчанию. И наша Web-страница, возможно,будет выглядеть не так, как мы задумывали. (Впрочем, шрифты Arial и Times New Roman присутствуют на любом компьютере, работающем под управлением Windows.)
Можно указать несколько наименований шрифтов через запятую:
P { font-family: Verdana, Arial }
Тогда Web-обозреватель сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, потом третий и т. д.
Вместо имени конкретного шрифта можно задать имя одного из семейств шрифтов, представляющих целые наборы аналогичных шрифтов.
Таких семейств пять: serif (шрифты с засечками), sans-serif (шрифты без засечек), cursive (шрифты, имитирующие рукописный текст), fantasy (декоративные шрифты) и monospace (моноширинные шрифты):
h3 { font-family: Verdana, Arial, sans-serif }
Особое значение inherit указывает, что текст данного элемента Web-страницы должен быть набран тем же шрифтом, что и текст родительского элемента. Говорят, что в данном случае элемент Web-страницы «наследует» шрифт от родительского элемента. Это, кстати, значение атрибута стиля font-family по умолчанию.
Атрибут стиля font-size определяет размер шрифта:
font-size: <размер>|xx-small|x-small|small|medium|large|x-large|
-xx-large|larger|smaller|inherit
Размер шрифта можно задать в абсолютных и относительных величинах. Для этого используется одна из единиц измерения, поддерживаемая CSS (табл. 8.1).
Обозначение выбранной единицы измерения указывают после самого значения:
P { font-size: 10pt }
STRONG { font-size: 1cm }
EM { font-size: 150% }
Отметим, что все приведенные в табл.
8.1 единицы измерения подходят для задания значений других атрибутов стилей CSS.
Кроме числовых, атрибут font-size может принимать и символьные значения. Так, значения от xx-small до xx-large задают семь предопределенных размеров шрифта, от самого маленького до самого большого. А значения larger и smaller представляют следующий размер шрифта, соответственно, по возрастанию и убыванию. Например, если для родительского элемента определен шрифт размера medium, то значение larger установит для текущего элемента размер шрифта large.
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же размер шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.
Атрибут стиля color задает цвет текста:
color: <цвет>|inherit
Ранее мы упоминали, что цвет можно задать так называемым RGB-кодом (Red, Green, Blue — красный, зеленый, синий). Он записывается в формате
#<доля красного цвета><доля зеленого цвета><доля синего цвета>,
где доли всех цветов указаны в виде шестнадцатеричных чисел от 00 до FF.
Зададим для текста красный цвет:
h2 { color: #FF0000 }
А теперь серый цвет:
ADDRESS { color: #CCCCCC }
Кроме того, CSS позволяет задавать цвета по именам. Так, значение black соответствует черному цвету, white — белому, red — красному, green — зеленому, а blue — синему.
Пример:
h2 { color: red }
Полный список имен и соответствующих им цветов можно посмотреть на Web-странице http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx.
Значение inherit указывает, что данный элемент Web-страницы должен иметь тот же цвет шрифта, что и родительский элемент. Это значение атрибута стиля fontsize по умолчанию.
ВНИМАНИЕ!
Значение inherit поддерживают практически все атрибуты стиля CSS. Оно говорит Web-обозревателю, что элемент Web-страницы, к которому привязан стиль, «наследует» значение соответствующего параметра у родительского элемента. У всех атрибутов это значение по умолчанию.
В дальнейшем мы не будем описывать данное значение у каждого атрибута стиля; если же какой-то атрибут стиля не поддерживает его, мы специально об этом упомянем.
С помощью атрибута стиля color мы можем, например, задать цвет горизонтальной линии HTML.
Атрибут стиля opacity позволяет указать степень полупрозрачности элемента Web-страницы:
opacity: <числовое значение>|inherit
Значение полупрозрачности представляет собой число от 0 до 1. При этом 0 обозначает полную прозрачность элемента (т. е. элемент фактически не виден), а 1 — полную непрозрачность (это обычное поведение).
Вот пример задания половинной прозрачности (значение 0,5) для текста фиксированного форматирования:
PRE { opacity: 0.5 }
Отметим, как мы указали дробное число — вместо символа запятой здесь используется точка.
НА ЗАМЕТКУ
Полупрозрачность обычно целесообразна только для создания специальных эффектов. В обычном тексте применять ее не рекомендуется, т.
к. это может обескуражить посетителя.
Атрибут стиля font-weight устанавливает «жирность» шрифта:
font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|
-700|800|900|inherit
Здесь доступны семь абсолютных значений от 100 до 900, представляющих различную «жирность» шрифта, от минимальной до максимальной; при этом обычный шрифт будет иметь «жирность» 400 (или normal), а полужирный — 700 (или bold). Значение по умолчанию — 400 (normal). Значения bolder и lighter являются относительными и представляют следующие степени «жирности» соответственно в б?льшую и меньшую сторону.
Пример:
CODE { font-weight: bold }
Атрибут font-style задает начертание шрифта:
font-style: normal|italic|oblique|inherit
Доступны три значения, представляющие обычный шрифт (normal), курсив (italic) и особое декоративное начертание, похожее на курсив (oblique).
Атрибут стиля text-decoration задает «украшение» (подчеркивание или зачеркивание), которое будет применено к тексту:
text-decoration: none|underline|overline|line-through|blink|inherit
Здесь доступны пять значений (не считая inherit):
— none убирает все «украшения», заданные для шрифта родительского элемента;
— underline подчеркивает текст;
— overline «надчеркивает» текст, т.
е. проводит линию над строками;
— line-through зачеркивает текст;
— blink делает шрифт мерцающим (на данный момент не поддерживается Safari).
ВНИМАНИЕ!
Не следует без особой необходимости задавать для текста подчеркивание. Дело в том, что Web-обозреватели по умолчанию выводят гиперссылки подчеркнутыми, и подчеркнутый текст, не являющийся гиперссылкой, может обескуражить посетителя.
Атрибут стиля font-variant позволяет указать, как будут выглядеть строчные буквы шрифта:
font-variant: normal|small-caps|inherit
Значение small-caps задает такое поведение шрифта, когда его строчные буквы выглядят точно так же, как прописные, просто имеют меньший размер. Значение normal задает для шрифта обычные прописные буквы.
Атрибут стиля text-transform позволяет изменить регистр символов текста:
text-transform: capitalize|uppercase|lowercase|none|inherit
Мы можем преобразовать текст к верхнему (значение uppercase этого атрибута) или нижнему (lowercase) регистру, преобразовать к верхнему регистру первую букву каждого слова (capitalize) или оставить в изначальном виде (none).
Атрибут стиля line-height задает высоту строки текста:
line-height: normal|<расстояние>|inherit
Здесь можно задать абсолютную и относительную величину расстояния, указав соответствующую единицу измерения CSS (см. табл. 8.1). При ее отсутствии заданное нами значение сначала умножается на высоту текущего шрифта и затем используется. Таким образом, чтобы увеличить высоту строки вдвое по сравнению с обычной, мы можем написать:
P { line-height: 2 }
Значение normal этого атрибута возвращает управление высотой строки Web-обозревателю.
Атрибут стиля letter-spacing позволяет задать дополнительное расстояние между символами текста:
letter-spacing: normal|<расстояние>
Отметим, что это именно дополнительное расстояние; оно будет добавлено к изначальному, установленному самим Web-обозревателем.
Здесь также можно задать абсолютное и относительное расстояние, указав соответствующую единицу измерения CSS (см.
табл. 8.1). Расстояние может быть положительным и отрицательным; в последнем случае символы шрифта будут располагаться друг к другу ближе обычного. Значение normal устанавливает дополнительное расстояние по умолчанию, равное нулю.
Атрибут стиля letter-spacing не поддерживает значение inherit.
Вот пример задания дополнительного расстояния между символами равного пяти пикселам:
h2 { letter-spacing: 5px }
Текст, набранный такими символами, будет выглядеть разреженным.
А здесь мы задали отрицательное дополнительное расстояние между символами равным двум пикселам:
H6 { letter-spacing: -2px }
Эти два пиксела будут вычтены из изначального расстояния, в результате символы сблизятся, а текст станет выглядеть сжатым. Возможно, символы даже налезут друг на друга.
Аналогичный атрибут стиля word-spacing задает дополнительное расстояние между отдельными словами текста:
word-spacing: normal|<расстояние>
Пример:
h2 { word-spacing: 5mm }
Ну, 5 мм, пожалуй, многовато.
.. Хотя это всего лишь пример.
И напоследок рассмотрим атрибут стиля font, позволяющий задать одновременно сразу несколько параметров шрифта:
font: [<начертание>] [<вид строчных букв>] [<«жирность»>]
[<размер>[/<высота строки текста>]] <имя шрифта>
Как видим, обязательным является только имя шрифта — остальные параметры могут отсутствовать.
Задаем для текста абзацев шрифт Times New Roman размером 10 пунктов:
P { font: 10pt «Times New Roman» }
А для заголовков шестого уровня — шрифт Arial размером 12 пунктов и курсивного начертания:
H6 { font: italic 12pt Verdana }
Текст | HTML Собака
Вы можете изменить размер и форму текста на веб-странице с помощью ряда свойств.
семейство шрифтов
Это сам шрифт, например Times New Roman, Arial или Verdana.
Браузер пользователя должен быть в состоянии найти указанный вами шрифт, что в большинстве случаев означает, что он должен быть на его компьютере , поэтому нет смысла использовать малоизвестные шрифты, которые находятся только на вашем компьютере .
Есть избранные» безопасные ” шрифты (наиболее часто используются Arial, Verdana и Times New Roman), но можно указать более одного шрифта, разделенные запятыми . Цель этого состоит в том, что если у пользователя нет первого указанного вами шрифта, браузер будет просматривать список, пока не найдет тот, который у него есть. Это полезно, потому что на разных компьютерах иногда установлены разные шрифты. Таким образом, семейство шрифтов : arial, helvetica, serif сначала будет искать шрифт Arial, и, если браузер не сможет его найти, он будет искать Helvetica, а затем обычный шрифт с засечками.
Примечание: если название шрифта состоит из более чем одного слова, оно должно быть заключено в кавычки, например, font-family: "Times New Roman" .
Вы можете использовать более широкий выбор, чем «безопасные» шрифты, используя несколько методов, описанных в расширенном руководстве по CSS, но если вы только начинаете осваивать CSS, мы предлагаем пока придерживаться этого базового стандартного подхода.
размер шрифта
размер шрифта устанавливает размер шрифта. Будьте осторожны с этим — такой текст, как заголовки, не должен быть просто абзацем HTML ( p ) крупным шрифтом — вы все равно должны использовать заголовки ( h2 , h3 и т. д.), хотя на практике вы можете сделать размер шрифта абзаца больше, чем у заголовка (не рекомендуется для здравомыслящих людей).
Реклама здесь! На давно известном, хорошо читаемом и уважаемом ресурсе веб-разработки.
вес шрифта
font-weight указывает, выделен ли текст полужирным или нет. Чаще всего это используется как font-weight: bold or font-weight: normal but other values are bolder , lighter , 100 , 200 , 300 , 400 (same as normal ), 500 , 600 , 700 (то же, что и полужирный ), 800 или 900 .
font-weight , font-style , font-variant и text-transform . Поэкспериментируйте с этими значениями толщины шрифта, если вы хотите увидеть их эффект, но имейте в виду, что некоторые старые браузеры немного путаются с чем-то другим, кроме жирный и обычный , поэтому мы предлагаем придерживаться их, если вы не ниндзя типографики.
стиль шрифта
font-style указывает, выделен ли текст курсивом или нет. Это может быть стиль шрифта : курсив или стиль шрифта : обычный .
текстовое украшение
text-decoration указывает, есть ли в тексте линия, проходящая под ним, над ним или через него.
-
text-decoration: underlineделает то, что вы ожидаете. -
text-decoration: overlineпомещает строку над текстом. -
text-decoration: line-throughвставляет линию через текст («перечеркивание»).
Это свойство обычно используется для украшения ссылок, и вы можете не указывать подчеркивание с помощью text-decoration: none .
Подчеркивания должны использоваться только для ссылок. Это общепринятое веб-соглашение, которое заставляет пользователей ожидать, что подчеркнутый текст будет ссылкой.
преобразование текста
text-transform изменит регистр текста.
-
text-transform: capitalizeпревращает первую букву каждого слова в верхний регистр. -
text-transform: uppercaseпревращает все в верхний регистр. -
text-transform: нижний регистрпревращает все в нижний регистр. -
text-transform: noneЯ оставлю вам возможность поработать.
Итак, некоторые из этих вещей, используемые вместе, могут выглядеть так:
тело {
семейство шрифтов: arial, Helvetica, без засечек;
размер шрифта: 14px;
}
ч2 {
размер шрифта: 2em;
}
h3 {
размер шрифта: 1. 5em;
}
а {
украшение текста: нет;
}
сильный {
стиль шрифта: курсив;
преобразование текста: верхний регистр;
}
5em;
}
а {
украшение текста: нет;
}
сильный {
стиль шрифта: курсив;
преобразование текста: верхний регистр;
}
Расстояние между текстом
Прежде чем мы перейдем от этого введения к стилизации текста, кратко рассмотрим, как разместить текст на странице.
Расстояние между текстом Свойства letter-spacing и word-spacing предназначены для интервалов между буквами или словами. Значение может быть длиной или обычным .
Свойство line-height задает высоту строк в элементе, например в абзаце, без изменения размера шрифта. Это может быть число (которое указывает кратное размеру шрифта, поэтому, например, «2» будет в два раза больше размера шрифта), длина, процент или обычное .
Свойство text-align выравнивает текст внутри элемента по левому краю, правому краю, по центру или по ширине.
Свойство text-indent задает отступ первой строки абзаца, например, до заданной длины или процента.
Этот стиль традиционно используется в печати, но редко в цифровых медиа, таких как Интернет.
п {
межбуквенный интервал: 0.5em;
интервал между словами: 2em;
высота строки: 1,5;
выравнивание текста: по центру;
}
Пошаговое руководство по форматированию текста в HTML и CSS
Пошаговое руководство, показывающее, как структурировать текст в HTML и форматировать с помощью CSS. Это соответствует веб-стандартам создания веб-страниц.
Форматирование текста в HTML и CSS направлено на улучшение представления ваших страниц. Во-первых, вы должны понимать, что структурирование текста осуществляется в HTML, а форматирование выполняется в CSS, за исключением некоторых случаев, когда некоторое форматирование может быть выполнено в HTML.
Сначала мы рассмотрим теги, которые можно использовать для работы с HTML-текстами. Эти теги используются для структурирования и форматирования текста.
Другие теги также работают с текстом, но в другом контексте.
Теги
,
,
,
,
,
Это теги, используемые для создания заголовков, где
— самый большой заголовок, а
— самый большой. самый маленький. По умолчанию эти теги выделяются полужирным шрифтом, а размер шрифта больше, чем у обычного текста.
Примеры:
Пример текста с h3
Пример текста с h4
Пример текста с h5
Пример текста с H5
Пример текста с H6
Теги
абзацы, текст в строке и перенос строки используется для создания текста в абзацах. Пример Этот текст представляет собой абзац Этот текст будет выделять слово, в котором используется интервал В этом тексте будет разрыв строки Форматирование HTML возможно, хотя и не рекомендуется. Примеры: Этот текст содержит несколько жирных слов Этот текст выделен курсивом в два слова Этот текст содержит слова уменьшенного размера < / p>
используется для создания разрыва строки в абзаце.
Эта часть текста уже будет на следующей строке Теги формата:
Однако правильно использовать CSS для форматирования. Структурирование текста с помощью HTML