Технология сетевого дизайна и ее программное обеспечение Лекция 6 (часть 2) Типографика. - презентация

1 Технология сетевого дизайна и ее программное обеспечение Лекция 6 (часть 2) Типографика

2

3

4 1. Граница веб-страницы в окне браузера. 2. Центральный блок макета ("обертка", wrapper). 3. Строка текста - ФИО студента: источник шрифта сервис google.com/fonts 4. Произвольная строка текста: шрифт загружается из папки в которой находится html страница, каллиграфический шрифт 5. Произвольная строка текста: шрифт sans-serif, строка имеет тень, источник шрифта сервис google.com/fonts 6. Произвольная строка текста: моноширинный шрифт, строка имеет тень, источник шрифта сервис google.com/fonts

5 Шрифт является неотъемлемой частью веб- дизайна, придаёт сайту выразительность и узнаваемость, выражает характерный стиль сайта и непосредственно связан с восприятием текстов. Хорошо подобранный шрифт может не замечаться, но без него не будет той изюминки, придающей дизайну сайта завершённость.

6 Если на компьютере уже установлен специфический шрифт, то в стилях достаточно добавить строку. Значением свойства font- family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам. h1 { font-family: SuperPuperFont; }

7 Но что увидят посетители сайта, у которых наш эффектный и редкий шрифт не установлен? Подобная ситуация наиболее вероятна, так что если браузер не распознаёт заявленный шрифт, он будет использовать шрифт по умолчанию, к примеру в Windows это Times New Roman.

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

9 1. Текст легко добавлять и править. 2. В браузере можно пользоваться поиском и находить желаемые фразы. 3. В настройках браузера можно уменьшать или увеличивать размер шрифта добиваясь комфортного просмотра. 4. Поисковые системы хорошо индексируют содержимое документа.

10 5. Текст можно выделить и скопировать в буфер, а также перевести на другой язык. 6. Параметры текста вроде межстрочного расстояния, цвета, размера и тому подобное легко менять с помощью свойств CSS. 7. К тексту опять же через CSS просто добавлять разные эффекты, например тень.

11 @font-face { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } h1 { font-family: Pompadur, 'Comic Sans MS', cursive; } Пример. Подключение TTF

12 { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } h1 { font-family: Pompadur, 'Comic Sans MS', cursive; } Современный элемент политического процесса По сути, политическое учение Монтескье приводит континентально- европейский тип политической культуры, что получило отражение в трудах Михельса.

13 Бесплатные сервисы по выбору шрифта для дизайна Typekit (от Adobe) Google Web Font Font Squirrel Dafont Weblast

14 Typekit

15 Typekit самый популярный сервис по выбору шрифта. Он был одним из первых игроков на этом рынке, благодаря чему обслуживал таких клиентов как New York Times и Twitter. В 2011 году он был приобретен компанией Adobe. Сегодня Typekit платный сервис, но он также имеет и бесплатные опции, но с некоторыми ограничениями.

16 Преимущества: Большое количество профессиональных и высококачественных шрифтов. Постоянное добавление в коллекцию новых шрифтов от признанных мастеров. Быстрая скорость работы с сервисом благодаря серверам Adobe. Широкая совместимость с различными браузерами.

17 Недостатки: Ограничение по количеству используемых шрифтов на одном сайте. Ограничение по количеству просмотров страниц в месяц. Водяной знак (только на бесплатном тарифе).

18 Google Web Font

19

20

21 Google Web Font бесплатный сервис по выбору шрифтов от Google. В настоящее время в его библиотеке свыше 600 шрифтов различных стилей, в том числе с засечками, без засечек, рукописных и кириллических.

22 Преимущества: Все шрифты распространяются бесплатно. Простота в использовании. Документация и API для работы со шрифтами. Подключение шрифта через сервера Google. Таблица символов. Предварительный просмотр текста. Недостатки: Отсутствует графический маркер (dingbat).

23 Font Squirrel

24 Font Squirrel позволяет выбрать необходимый шрифт среди большого количества категорий. В его функционал включен сервис для создания недостающих форматов (cpb, ttf, woff и svg), которые обеспечат поддержку шрифта во всех браузерах.

25 Преимущества: Все шрифты бесплатны и для коммерческого использования. Большой выбор категорий и стилей (каллиграфические, готические, для комиксов, ретро и другие). Предварительный просмотр текста. Графический маркер (dingbat). Сервис для создания недостающих форматов. Недостатки: Шрифт размещается на собственном сервере, что может существенно снизить скорость загрузки и производительность сайта. Лицензии некоторые шрифтов слишком «размыты». Перед использованием убедитесь, что пользовательское соглашение отвечает вашим требованиям.

26

27

28

29 Рекомендации по использованию шрифтов

30

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

32

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

34 Слишком мелкий текст Не каждый имеет 100% зрение, поэтому очень важно убедиться, что ваш текст подходит для всех пользователей и его удобно читать. Необходимо учитывать тот факт, что размер шрифта при просмотре можно изменять (регулировать масштаб). В связи с этим желательно избегать большого «разброса» в размерах шрифтов разных текстовых блоков, чтобы при увеличении одного блока до «нормального» другой блок не стал «гигантского размера».

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

36

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

38

39 Добавляйте больше места между строками Отсутствие пробелов между строками может сильно ухудшить восприятие. Однако эта проблема легко решается путем увеличения высоты строки (line- height). Главное не переусердствовать т.к. слишком много места, как и его отсутствие, может негативно сказаться на читаемости.

40

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

42

43 Ограничивайте длину строки символами Если строка слишком длинная у пользователя возникнуть проблемы с переходом на другую строку. Если ли она слишком короткая, можно нарушить ритм т.к. «перескакивание» по строкам будет очень частым.

44

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

46

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

48