Основы типографики

1. Основы типографики

Тетюшева С.Г.
старший преподаватель
кафедры ИТ и МПИ КГУ

2.

Гарнитура
Arial
Шрифт
Arial Black
Arial Narrow
2

3. Варианты одной гарнитуры:

3

4. Разные гарнитуры, совпадающие по внешнему виду:

4

5. Классификация шрифтов:

5

6. 1. Шрифты с засечками (англ. serif):

6

7.

7

8. 1. Шрифты с засечками (англ. serif):

Подтипы:
А) Old Style («Старый стиль»,
гуманистическая антиква)
Та часть символа, которая расположена
под наклоном, делается тонкой
Использовались еще в 1400-х гг.
(Bookman Old Style)
8

9.

9

10.

10

11.

11

12. 1. Шрифты с засечками (англ. serif):

Подтипы:
Б) Modern serifs
(антиква нового стиля)
Имеют сильный контраст между толстыми
и тонкими частями символов.
Использовались после 1700-х годов.
(Didot и Bodoni)
12

13.

13

14.

14

15.

15

16.

16

17. 1. Шрифты с засечками (англ. serif):

Подтипы:
В) Transitional serifs (переходная антиква)
Разница между толстыми и тонкими частями
букв более заметна, чем у Old Style,
но менее заметна, чем у Modern.
Использовались в 1700-х годах.
(Times New Roman, Georgia)
17

18.

18

19.

19

20. 1. Шрифты с засечками (англ. serif):

Подтипы:
Г) Slab
serifs (брусковые шрифты)
Имеют одинаковую толщину всех линий
и крупные засечки на концах.
20

21.

21

22.

22

23.

23

24.

24

25. 2. Шрифты без засечек (англ. Sans Serif) (рубленые шрифты)

25

26.

26

27.

27

28.

28

29.

29

30.

30

31.

31

32.

Times New Roman
Arial
Book Antiqua
Verdana
Garamond
Century Gothic
32

33.

33

34. 2. Шрифты без засечек (рубленые, гротески) (англ. Sans Serif):

Подтипы:
А) Старый гротеск
Похожи на шрифты с засечками,
но без засечек
34

35.

35

36.

36

37.

37

38. 2. Шрифты без засечек (рубленые, гротески) (англ. Sans Serif):

Подтипы:
Б) Новый гротеск
Имеют упрощённый, по сравнению
со старыми гротесками, вид.
(MS Sans Serif, Arial)
38

39.

39

40.

40

41. 2. Шрифты без засечек (рубленые, гротески) (англ. Sans Serif):

Подтипы:
В) Гуманистический
Более каллиграфичны, чем все остальные
рубленые шрифты (у них изменяется
толщина линий). Их часто используют
в наполнении тела сайта.
(Tahoma, Verdana, Optima, Lucide Grande)
41

42.

42

43.

43

44. 2. Шрифты без засечек (рубленые, гротески) (англ. Sans Serif):

Подтипы:
Г) Геометрический
Основаны на правильных фигурах,
например, «О» – это круг, и т.п.
(ITC Avant Garde Gothic, Erbar Grotesk, Eurostile,
Futura, Kabel, Metro, Neuzeit Grotesk, Rodchenko,
Spartan)
44

45.

45

46.

46

47. 3. Рукописные (Script):

Базируются на почерке:
47

48.

48

49.

49

50. 3. Рукописные (Script):

Подтипы:
А) Формальные (Formal)
Как будто написаны от руки.
Некоторые шрифты основаны на почерках
известных мастеров.
Не подходят для основного текста страницы.
50

51.

51

52. 3. Рукописные (Script):

Подтипы:
Б) Неформальные (Casual)
Менее формальны, часто с жирной
обводкой и с эффектом мазков кисти.
(Mistral, Brush Script)
52

53.

53

54. 4. Декоративные шрифты (Display)

Не пригодны для написания текста.
Чаще всего они выполняют роль акцента.
54

55.

55

56.

56

57.

57

58.

58

59.

59

60.

60

61.

61

62.

62

63.

63

64.

64

65.

65

66.

66

67.

67

68.

68

69. 5. Неалфавитные шрифты (Dingbats):

Не содержат букв, но содержат символы
и орнаменты.
69

70.

70

71. Моноширинные шрифты

71

72. Толщина

По толщине бывают шрифты: light, thin,
regular, medium, bold, heavy, или black.
72

73. Стиль

Есть три стиля шрифтов — italic, oblique,
small caps.
Small caps обычно используются
для заголовков.
73

74. Шрифтовое оформление сайта

74

75.

1. Рекомендуется использовать
одну гарнитуру шрифта для заголовков и
подзаголовков и другую гарнитуру
шрифта для основного текста.
Часто рекомендуется для заголовков
использовать шрифты с засечками,
а для основного текста - без засечек.
75

76.

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

77.

4. Обеспечивать достаточный контраст
между фоном и основным текстом.
5. Заголовки визуально должны отличаться
от основного текста.
6. Исключается растягивание основного
текста на всю ширину экрана с помощью
текучей компоновки.
77

78.

Методы хорошей верстки:
• Ширина блока с текстом должна
составлять 40 - 50%.
• Расстояние между абзацами – не больше
1,5 величины шрифта.
• Разница между яркостью фона и текста –
75-90%.
• Межстрочный интервал – 140-150%
величины шрифта.
78