'

Типографика

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

Типографика


Слайд 2


Слайд 3

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


Слайд 4

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


Слайд 5

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


Слайд 6

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


Слайд 7

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


Слайд 8

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


Слайд 9

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


Слайд 10

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


Слайд 11

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Шрифт</title> <style> @font-face { font-family: Pompadur; /* Гарнитура шрифта */ src: url(fonts/pompadur.ttf); /* Путь к файлу со шрифтом */ } h1 { font-family: Pompadur, 'Comic Sans MS', cursive; } </style> </head> <body> <h1>Современный элемент политического процесса</h1> <p>По сути, политическое учение Монтескье приводит континентально-европейский тип политической культуры, что получило отражение в трудах Михельса.</p> </body> </html>


Слайд 12

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


Слайд 13

Typekit https://typekit.com/


Слайд 14

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


Слайд 15

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


Слайд 16

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


Слайд 17

Google Web Font https://www.google.com/fonts


Слайд 18


Слайд 19


Слайд 20

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


Слайд 21

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


Слайд 22

Font Squirrel


Слайд 23

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


Слайд 24

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


Слайд 25

http://www.dafont.com/


Слайд 26


Слайд 27

http://weblast.ru


Слайд 28

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


Слайд 29


Слайд 30

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


Слайд 31


Слайд 32

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


Слайд 33

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


Слайд 34

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


Слайд 35


Слайд 36

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


Слайд 37


Слайд 38

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


Слайд 39


Слайд 40

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


Слайд 41


Слайд 42

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


Слайд 43


Слайд 44

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


Слайд 45


Слайд 46

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


Слайд 47


×

HTML:





Ссылка: