ТРИДЦАТЬ ПЯТЫЙ УРОК

Свойства шрифтов

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

Напишем следующий код:

<html lang="ru"> <HEAD> <TITLE>Реклама сайта</TITLE> <STYLE TYPE="text/css"> H2 { font-family: Garamond, "Times New Roman", Bodony, serif; font-size: x-large; font-style: normal; font-weight: bold; font-variant: small-caps } H4 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 30px; font-style: italic; font-weight: 600; font-variant: normal } </STYLE> </HEAD> <BODY> <H2>Дикая Правда</H2> <H4>на "www.dikarka.ru"</H4> </BODY> </HTML>

Честно говоря, это не совсем хорошая запись, в CSS можно спокойно сделать и сокращенную запись, например такую:

<html lang="ru"> <HEAD> <TITLE>Титульный лист</TITLE> <STYLE TYPE="text/css"> H2 { font: bold x-large normal small-caps Garamond, "Times New Roman", Bodony, serif } H4 { font: italic 600 30px Arial, Verdana, Helvetica, sans-serif } </STYLE> </HEAD> <BODY> <H2>Дикая Правда</H2> <H4>на "www.dikarka.ru</H4> </BODY> </HTML>

В обоих случая результат будет одинаков:

Как видим, к свойствам шрифта font можно отнести 5 пунктов:

  • font-family, отвечающий за гарнитуру шрифта;
  • font-size, который определяет размер шрифта;
  • font-style, который задает стиль шрифта - обычный, наклонный или курсивом;
  • font-weight, отвечающий на сколько жирненьким получится шрифт;
  • font-variant, указывающий на вариант начертания буковок - должны ли они быть все маленькими прописными или просто нормальными

Вот и рассмотрим подробно каждый этот пунктик.

Font-family

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

К нашему с вами счастью все шрифты решили разделить на пять семейств: семейство с засечками (serif), семейство без засечек (sans-serif), семейстов шрифтов с буквами одинаковой ширины (monospace), семейство рукописных шрифтов (cursive) и, последнее семейство вычурных шрифтов, которые вообще редко у кого есть (fantasy)

Семейство "serif"

Одни шрифты - с засечками и называются они семейством serif.

Из латинских шрифтов к этому семейству относятся такие шрифты, как Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit . Из кирилицы можно выделить шрифты Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst. Есть еще и другие - и арабские, и японские и еврейские... , но я сомневаюсь, что все они установлены на ваших компах, дай бог, чтобы треть вышеперечисленных были под рукой...

Хотя... чего там выделываться и строить из себя слишком умную... Пользуйтесь шрифтами Times New Roman, Bodoni, Garamond и не ломайте себе и другим головы! Поэтому напишем просто:

<html lang="ru"> <HEAD> <TITLE>Семейство "serif"</TITLE> <STYLE TYPE="text/css"> P { font-family: serif } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И в окне браузера это будет выглядеть так:

А можем написать и так:

<html lang="ru"> <HEAD> <TITLE>Семейство "serif"</TITLE> <STYLE TYPE="text/css"> P { font-family: Garamond } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И результат будет немного другой, но шрифт все равно с засечками!!!

Ну, и напишем еще вот так:

<html lang="ru"> <HEAD> <TITLE>Семейство "serif"</TITLE> <STYLE TYPE="text/css"> P { font-family: Garamond, "Times New Roman", Bodony, serif } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И такая вот запись: {font-family:Garamond, "Times New Roman", Bodony, serif} для браузера будет означать - "Эта... как иво... напиши-ка мне все шрифтом "Garamond", а если его нету, то хоть "Times New Roman" аль Bodony, а если и их нету, то хоть што-нибудь, но с засечками плиииииииииииииииииз!!!"

И будьте уверены, браузер внемлет этим воплям и в лепешку разобьется, но найдет вам ваши засечки!

Прошу обратить внимание что "Times New Roman" я поставила в кавычки - это не потому что он такой вот особенный, а просто... если название больше одного слова - то кавычки нужны. Правило такой. А если слово всего одно, то кавычки необязательны. Но если вас так распирает на кавычки - ставьте. Все равно это никто не заметит. Возни только больше.

И еще... само обозначение семейства ставьте в конец строчки!

Семейство "sans-serif"

Теперь пойдем в другой лагерь и познакомимся с семейством sans-serif. Это ребята простые как правда. Нет в них никаких таких засечек. Кстати, "sans" - означает "без". Без засечек. Про эти шрифты говорят, что они рубленые. К этому семейству относятся такие латинские шрифты как Arial, Verdana, Helvetica, Tahoma, Futura. Вставим же в следующем примере строчку font-family:sans-serif:

<html lang="ru"> <HEAD> <TITLE>Семейство "sans-serif"</TITLE> <STYLE TYPE="text/css"> P { font-family: sans-serif } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И сразу же увидим результат:

И моя правда стала тоже простой, без всяких изысков. Так сказать Правда и только Правда.

Семейство "cursive".

Примером этого семейства может служить шрифт "Caflish Script", "Zapf-Chancery"

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

Семейство "monospace"

К этому семейству можно отнести шрифт "Courier New", Prestige, Everson Mono. К достоинством этого шрифта можно отнести то, что все буковки по ширине одинаковы. Читать такой текст, конечно, не очень удобно. Но если в тексте важна каждая буковка, скажем, как в моих описаниях кодов, тогда этот шрифт как нельзя более кстати.

<html lang="ru"> <HEAD> <TITLE>Семейство "sans-serif"</TITLE> <STYLE TYPE="text/css"> P { font-family: Courier New, monospace } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

Ну, и посмотрим, что же получилось...

Семейство "fantasy"

К этому семейству можно отнести шрифт "Alpha Geometrique", "Western"

Все, что не подошло к предыдущим семействам решили свалить в одно семейство fantasy. Они весьма декоративны, а некоторые из них так и вовсе представляют собой иконки или картинки. Так что особо не переусердствуйте с ними.

Font-size

Ну, с этим дело пойдет веселее, и выбор тут тоже довольно богатый! И задать размеры можно несколькими способами!

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

Но и это не все! Шрифт можно задавать и в пунктах (pt), и в пикселях (px), и в дюймах (in), и в миллиметрах (mm), сантиметрах (cm), пиках ( pc) и просто в процентах (%)!

Но и это не все! С помощью слов smaller или larger можно уменьшить или увеличить отдельные слова по сравнению с основным, родительским текстом.

Font-style

Это свойство еще легче. Оно отвечает за стиль шрифта, и указывает каким ему быть - прямым normal, наклонным oblique или курсивным italic. Если вы думаете, что наклонный и курсивный - это одно и то же, то глубоко заблуждаетесь! Курсив имитирует письмо, написанное "от руки", а наклонный... это просто слегка завалившийся вправо текст.

Font-weight

Это свойство определяет толщину шрифта, или правильней, насыщенность начертания. Тут можно и поэкспериментировать. Можно написать просто:

<html lang="ru"> <HEAD> <TITLE>Полужирный шрифт</TITLE> <STYLE TYPE="text/css"> P { font-weight: bold } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И у нас получится вот что:

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

<b>"ДИКАЯ ПРАВДА" на www.dikarka.ru</b>

И результат был бы такой же, разве что код раз в пять короче... И, знаете, я с вами соглашусь. Но не совсем. Потому как кроме bold можно написать и bolder (толще) и lighter (тоньше) и это не предел!!! Можно указать насыщенность не только словами, но и числами от 100 до 900!. Правда не все числа можно использовать, а только кратные 100. А число 400 равно bold. Так что в вышеприведенном примере я могла запросто написать

P {font-weight:400}

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

Font-variant

И, последнее, чем я хочу вас помучить в неравной борьбе со шрифтами - это вообще глупость какая-то. Потому как этому свойству можно подобрать только два варианта. Причем один из них - нормальный, а второй - ненормальный. Ненормальный - это small-caps. Это когда маленькие буквы пишутся как заглавные, но оставаясь при этом маленькими. То есть маленькими прописными. Вот и примерчик:

<html lang="ru"> <HEAD> <TITLE>Хоть и маленькие, но прописные!!!</TITLE> <STYLE TYPE="text/css"> P { font-variant: small-caps } </STYLE> </HEAD> <BODY> <P> "ДИКАЯ ПРАВДА" на www.dikarka.ru </P> </BODY> </HTML>

И вот он - результат! Любуйтесь!

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

В конце концов, решила не запудривать вам мозги и написать все коротко. На сколько это удалось, судить вам. Ну, а на последок, все-таки дам вам несколько советов. Хотя, не столько советов, сколько раздумий. Прислушиваться к ним или нет - ваше дело. В конце концов - решающее слово за вами. Итак...

Дикие советы

  • Жестких правил, диктующих, какой и когда выбрать шрифт - не существует. Это зависит от вашего опыта и мастерства. Хиппи выбрал бы один шрифт, учитель русского языка - другой, предприниматель - третий, а человек, влюбленный в историю - четвертый. Однако, если вы хотите, чтобы ваш текст читался с вниманием, необходимо, чтобы он легко читался, гармонировал с остальными элементами сайта, ну и был уместен вообще. :))
  • Шрифты с засечками читаются легче. Взгляд как бы скользит от одной буквы к другой.
  • Буквы без засечек лучше читаются в крупных заголовках, а также в очень мелком тексте.
  • Легче читается текст прямой, светлый, средней плотности. Хуже - курсивный или наклонный, жирный или очень светлый.
  • Для выделения пользуются наклонным или курсивным шрифтами.
  • Если ваш сайт - для детей, то лучше использовать покрупнее и пожирнее текст. То же относится и для слабовидящих. Так что учитывайте и свою аудиторию.
  • Для чтения лучше подходят шрифты от 9 до 12 кегля.
  • Лучше ограничить число шрифтов до одного. Для удобочитаемости это превыше всего. Хотя, как сказал типограф Э. Гилл "практически удобочитаемо все, к чему привыкли".
  • На удобочитаемость влияет и ширина строки, это примерно 50-70 знаков.
  • Также важны расстояние между словами, между строчками и между абзацами, но об этом мы поговорим в следующем уроке.
  • Важно также и цвет шрифта, а также фон, на котором он написан. Хотя стоит иметь в виду также и насыщенность цветов. Так что лучше всего экспериментировать и экспериментировать... пока не найдете "то самое", после чего все ахнут и скажут... "ну какой же красивый шрифт!"

Так что, выбирая шрифт, вы не должны не только учитывать его "красивость", но и принять во внимание и аудиторию и то, о чем рассказываете, и многое-многое другое... Удачи вам!

К списку всех уроков

(В. Ахметзянова, 2005 г)