Fundamental text and font styling
In this article we’ll start you on your journey towards mastering text styling with CSS. Here we’ll go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
| Prerequisites: | Basic computer literacy, HTML basics (study Introduction to HTML), CSS basics (study Introduction to CSS). |
|---|---|
| Objective: | To learn the fundamental properties and techniques needed to style text on web pages. |
What is involved in styling text in CSS?
If you have worked with HTML or CSS already, e.g., by working through these tutorials in order, then you know that text inside an element is laid out inside the element’s content box. It starts at the top left of the content area (or the top right, in the case of RTL language content), and flows towards the end of the line. Once it reaches the end, it goes down to the next line and flows to the end again. This pattern repeats until all the content has been placed in the box. Text content effectively behaves like a series of inline elements, being laid out on lines adjacent to one another, and not creating line breaks until the end of the line is reached, or unless you force a line break manually using the <br> element.
Note: If the above paragraph leaves you feeling confused, then no matter — go back and review our Box model article to brush up on the box model theory before carrying on.
The CSS properties used to style text generally fall into two categories, which we’ll look at separately in this article:
- Font styles: Properties that affect a text’s font, e.g., which font gets applied, its size, and whether it’s bold, italic, etc.
- Text layout styles: Properties that affect the spacing and other layout features of the text, allowing manipulation of, for example, the space between lines and letters, and how the text is aligned within the content box.
Note: Bear in mind that the text inside an element is all affected as one single entity. You can’t select and style subsections of text unless you wrap them in an appropriate element (such as a <span> or <strong> ), or use a text-specific pseudo-element like ::first-letter (selects the first letter of an element’s text), ::first-line (selects the first line of an element’s text), or ::selection (selects the text currently highlighted by the cursor).
Fonts
Let’s move straight on to look at properties for styling fonts. In this example, we’ll apply some CSS properties to the following HTML sample:
Color
The color property sets the color of the foreground content of the selected elements, which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the text-decoration property.
color can accept any CSS color unit, for example:
This will cause the paragraphs to become red, rather than the standard browser default of black, like so:
Font families
To set a different font for your text, you use the font-family property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser default font. A simple example looks like so:
This would make all paragraphs on a page adopt the arial font, which is found on any computer.
Web safe fonts
Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called web safe fonts.
Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).
The list of actual web safe fonts will change as operating systems evolve, but it’s reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft Core fonts for the Web initiative in the late 90s and early 2000s):
| Name | Generic type | Notes |
|---|---|---|
| Arial | sans-serif | It’s often considered best practice to also add Helvetica as a preferred alternative to Arial as, although their font faces are almost identical, Helvetica is considered to have a nicer shape, even if Arial is more broadly available. |
| Courier New | monospace | Some OSes have an alternative (possibly older) version of the Courier New font called Courier. It’s considered best practice to use both with Courier New as the preferred alternative. |
| Georgia | serif | |
| Times New Roman | serif | Some OSes have an alternative (possibly older) version of the Times New Roman font called Times. It’s considered best practice to use both with Times New Roman as the preferred alternative. |
| Trebuchet MS | sans-serif | You should be careful with using this font — it isn’t widely available on mobile OSes. |
| Verdana | sans-serif |
Note: Among various resources, the cssfontstack.com website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.
Note: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: web fonts. This is a little bit more complex, and we will discuss it in a separate article later on in the module.
Default fonts
CSS defines five generic names for fonts: serif , sans-serif , monospace , cursive , and fantasy . These are very generic and the exact font face used from these generic names can vary between each browser and each operating system that they are displayed on. It represents a worst case scenario where the browser will try its best to provide a font that looks appropriate. serif , sans-serif , and monospace are quite predictable and should provide something reasonable. On the other hand, cursive and fantasy are less predictable and we recommend using them very carefully, testing as you go.
Тег <font> HTML параметры шрифта
Тег <font> используется для указания параметров шрифта конкретного участка текста в HTML документе.
С помощью тега font можно задать параметры шрифта: размер (size), цвет (color) и семейство шрифта (face).
Этот тег является устаревшим. В HTML5 для управления параметрами шрифта используйте группу CSS свойств font .
Синтаксис
Отображение в браузере
Пример использования тега <font> в HTML коде
Поддержка браузерами
| Тег | |||||
| <font> | Да | Да | Да | Да | Да |
Атрибуты тега <font>
RGB
HTML hex
colorname
Цвет текста. Может быть указан в любом из трех поддерживаемых форматов:
- RGB, например, «rgb(15, 92, 50)»;
- HTML hex, например, «#0F5C32»;
- colorname, например, «black».
имя семейства шрифтов
Семейство шрифтов. Можно указать несколько шрифтов через запятую. Будет использован первый доступный на компьютере пользователя шрифт.
Приоритет слева направо (если не доступен первый, проверяется второй и т.д.).
Какие существуют параметры форматирования шрифта в html документе
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов можно задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1></Н1> (самый крупный) до <Н6></Н6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=»Arial»), атрибут SIZE — размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R=»blue»). Значение атрибута COLOR можно задать либо названием цвета (например, «red», «green», «blue» и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат «#RRGGBB», где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие — интенсивность зеленого (green) и две последние — интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная — FF. Например, синий цвет задается значением «#0000FF».
Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN=»left», выравнивание по правой границе: ALIGN=»right», выравнивание по центру: ALIGN= «center».
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<Н1 ALIGN=»center»>Компьютер и ПО</Н1>
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга <HR>.
Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р></Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта «Компьютер» текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN=»left»>Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.</Р>
<Р ALIGN= «right»>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.</Р>
Таким образом, домашняя страница сайта «Компьютер» будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
WEB-дизайн
Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста.
Существует две группы тегов форматирования текста:
- Тэги физического форматирования
- Тэги логического форматирования
Физическое форматирование документа (визуальное) позволяет создавать различные виды выделения части текста по смысловому признаку. Тэги физического форматирования прямо указывают браузеру на модификацию текущего шрифта.
Под логическим форматированием подразумевается использование специальных тэгов HTML для слов и групп слов в соответствии с их значением. Тэги логического форматирования можно переопределить с использованием CSS. При использовании логических стилей автор документа не может знать заранее, что увидит на экране читатель, т.к. разные браузеры толкуют одни и те же тэги логического форматирования (логических стилей) по-разному. По возможности стоит отдавать предпочтение тегам логического форматирования документа.
Заголовки
Для удобства документ разделяют заголовками разделов с помощью тегов <Hn> и </Hn> , где n может принимать значение от 1 до 6 (заголовок первого уровня является заголовком высшего уровня). По сравнению с нормальным текстом, заголовки выделяются шрифтом — размером и толщиной букв. Заголовок первого уровня должен быть выделен тэгом <h1> .
Синтаксис:
где n — число от 1 до 6, определяющее уровень заголовка.
Атрибуты:
- align="left|center|right|justify" — способ выравнивания заголовка:
- left — выравнивание по левому краю.
- center — выравнивание по центру.
- right — выравнивание по правому краю.
- justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.
Пример:
Абзацы
Абзацы (параграфы) располагаются между тэгами <p> и </p> . Тэг <p> является блочным элементом, текст каждого абзаца всегда начинается с новой строки. Абзацы текста, идущие друг за другом, разделяются между собой отбивкой (пустой строкой).
Прерывания строк в HTML-файлах не существенны. Обрыв строки может происходить в любом месте в исходном файле, при просмотре это прерывание будет проигнорировано. Если в исходном коде два предложения находятся на двух разных строках, браузер игнорирует это прерывание строки и начинает новый абзац только, после тэга <p> .
Чтобы сохранить удобочитаемость в исходном коде HTML-файла, рекомендуется абзацы отделять пустыми строками.
Синтаксис:
Атрибуты:
- align="left|center|right|justify" — способ выравнивания текста.
Примеры:
Прерывание строки
Тэг <br> устанавливает перевод строки в том месте, где этот тэг находится. Используя тэг <br> можно перейти на новую строку, не начиная нового абзаца. В отличие от тега абзаца <p> , использование тега <br> не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега <br> можно сделать так, чтобы следующая строка начиналась ниже элемента.
Очень удобно при публикации стихов.
Пример:
Результат:
Однажды в студеную зимнюю пору
Сижу за решеткой в темнице сырой.
Гляжу — поднимается медленно в гору
Вскормленный в неволе орел молодой.Начертание текста
Начертание текста определяется следующими тэгами:
- <b> … </b> — жирный шрифт.
- <i> … </i> — наклонный шрифт.
- <u> … </u> — подчеркнутый шрифт.
- <sup> … </sup> — верхний индекс.
- <sub> … </sub> — нижний индекс .
- <S> … </S> или <strike> … </strike> — зачеркнутый шрифт.
- <font> … </font> — задает цвет, размер и гарнитуры шрифтов.
- <tt> … </tt> — фиксированный шрифт (шрифт заданной ширины).
Пример:
Результат:
Из теоремы Пифагора следует:
c 2 =a 2 +b 2Допускается совместное использование тегов задания стиля:
Однако не допускается перекрещивание стилей:
Данная запись считается неправильной, хотя некоторые браузеры покажут ее правильно.
Замечание. Тэги изменения стиля шрифтов действуют до тех пор, пока не будут отменены.
Установка параметров шрифта
Для установки параметров шрифта используется тэг <font> , который задает цвет, размер и вид семейства шрифтов для фрагмента текста. Закрывающий тэг </font> обязателен
Синтаксис:
Атрибуты:
- color ="цвет" — устанавливает цвет текста.
- face ="шрифт1, шрифт2. " — задает гарнитуры шрифтов, использующихся для текста. Список шрифтов может включать одно или несколько названий, разделенных запятой. Если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки.
- size ="число" — задает размер шрифта в условных единицах от 1 до 7. Размер может задаваться абсолютным или относительным значением от базового размера шрифта в документе. При относительном задании размера число n может принимать значения от 1 до 7 со знаками плюс (+) — увеличение или минус (-) — уменьшение размера шрифта на n пунктов по отношению к базовому размеру шрифта в документе. По умолчанию базовый размер шрифта в документе считается равным 3 в абсолютных значения.
Пример:
Результат:
Пример:
Результат:
Для задания шрифта, размера и цвета текста по умолчанию предназначен тэг <basefont> . Указанные значения будут использоваться во всем документе за исключением тега <font> , в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере <head> или <body> , причем несколько раз.
Атрибуты:
- size="число" — размер шрифта число n может принимать значения от 1 до 7.
- color="цвет " — цвет шрифта.
- face="шрифт" — гарнитура шрифта.
Пример:
Тэги BIG и SMALL, изменяют относительной размер шрифта на одну единицу отсчета от базы.
Пример:
Преформатируемый текст
<PRE> и </PRE> — между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".
Вы можете включать в гипертекстовый документ текстовые фрагменты набранные и отформатированные в каком-либо текстовом редакторе без разметки HTML, в том виде как от есть. Текст за исключением специальных символов будет выводится равноширинным шрифтом с сохранением всех пробелов и переводов строк исходного текста.
Пример:
Результат:
Тэги логического форматирования
Тэг Описание <DFN> Используется для определений, например для термина, встречающегося в тексте впервые (по умолчанию наклонный шрифт). <EM> Простое выделение слов (англ. emphasis — акцент). Обычно выводится курсивом <STRON> G Особое выделение текста (сильное выделение, от англ. strong emphasis — сильный акцент.). Обычно выводится полужирным. Является альтернативой тега физического форматирования <b> . <CITE> Выделение заголовков книг, фильмов, цитат и т.п. <CODE> Выделение программных кодов, исходных текстов программ и т.п. Изображается шрифтом фиксированной ширины. <KBD> Выделения текста, вводимого пользователем с клавиатуры (от англ. keyboard — клавиатура). По умолчанию моноширинной шрифт. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. <SAMP> Используется для машинных сообщений (от английского sample — образец). Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. Изображается шрифтом фиксированной ширины. <VAR> Используется для написания имен переменных в фрагменте кода программы (от англ. variable — переменная). По умолчанию курсив. <ABBR> Используется для описания аббревиатуры (сокращенное название, которое читается по буквам). <ACRONYM> Используется для описания акронима (сокращенное название, которое читается как слово). Закрывающийся тэг обязателен. Пример: ВУЗ Эти тэги можно применять с атрибутом title="текст" , который описывает содержимое элемента в виде всплывающей подсказки и появляется при наведении курсора на элемент. Вид подсказки зависит от браузера, настроек операционной системы.