Типографика презентация

Содержание

Типографика

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

Слайд 2Типографика

Слайд 4Граница веб-страницы в окне браузера.
Центральный блок макета ("обертка", wrapper).
Строка текста -

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

Слайд 5Шрифт является неотъемлемой частью веб-дизайна, придаёт сайту выразительность и узнаваемость, выражает

характерный стиль сайта и непосредственно связан с восприятием текстов.

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

Слайд 6Если на компьютере уже установлен специфический шрифт, то в стилях достаточно

добавить строку.

Значением свойства font-family выступает название гарнитуры шрифта, она будет применяться ко всем заголовкам 

.

h1 { font-family: SuperPuperFont; }

Слайд 7Но что увидят посетители сайта, у которых наш эффектный и редкий

шрифт не установлен?

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

Слайд 8Первое что сразу же приходит в голову — это организовать загрузку файла

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

Слайд 9Текст легко добавлять и править.
В браузере можно пользоваться поиском и находить

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

Слайд 105. Текст можно выделить и скопировать в буфер, а также перевести

на другой язык.
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-face {

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

Слайд 14Typekit
https://typekit.com/

Слайд 15Typekit — самый популярный сервис по выбору шрифта. Он был одним

из первых игроков на этом рынке, благодаря чему обслуживал таких клиентов как New York Times и Twitter.

В 2011 году он был приобретен компанией Adobe.
Сегодня Typekit платный сервис, но он также имеет и бесплатные опции, но с некоторыми ограничениями.

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

от признанных мастеров.
Быстрая скорость работы с сервисом благодаря серверам Adobe.
Широкая совместимость с различными браузерами.

Слайд 17Недостатки:

Ограничение по количеству используемых шрифтов на одном сайте.

Ограничение по количеству просмотров

страниц в месяц.

Водяной знак (только на бесплатном тарифе).

Слайд 18Google Web Font
https://www.google.com/fonts

Слайд 21Google Web Font — бесплатный сервис по выбору шрифтов от Google.



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

Слайд 22Преимущества:
Все шрифты распространяются бесплатно.
Простота в использовании.
Документация и API для работы со

шрифтами.
Подключение шрифта через сервера Google.
Таблица символов.
Предварительный просмотр текста.

Недостатки:
Отсутствует графический маркер (dingbat).

Слайд 23Font Squirrel

Слайд 24Font Squirrel позволяет выбрать необходимый шрифт среди большого количества категорий.

В его

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

Слайд 25Преимущества:
Все шрифты бесплатны и для коммерческого использования.
Большой выбор категорий и стилей

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

Слайд 26http://www.dafont.com/

Слайд 28http://weblast.ru

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

Слайд 31Создание правильной иерархии
Создать иерархию можно различными способами, например, с помощью веса,

размера, цвета или контраста.

Ее главная цель — установить на странице правильную структуру, благодаря которой текст будет прост для восприятия и чтения.

Слайд 33В примере:

в левом блоке текст одного размера и одного веса, поэтому

провести различия между заголовком и основным текстом достаточно трудно.

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

Слайд 34Слишком мелкий текст
Не каждый имеет 100% зрение, поэтому очень важно убедиться,

что ваш текст подходит для всех пользователей и его удобно читать.

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

Слайд 35Использование простого шрифта для основного текста
Многие дизайнеры любят добавлять на сайт

нестандартные шрифты. Это хорошая практика, но использовать ее нужно с умом.

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

Посмотрите на пример приведенный ниже, и вы заметите, насколько труднее наш мозг разбирает слова на левом блоке по сравнению с правым.

Слайд 37Не используйте много шрифтов на одной странице
Это правило частично дополняет предыдущее.

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

Слайд 39Добавляйте больше места между строками
Отсутствие пробелов между строками может сильно ухудшить

восприятие. Однако эта проблема легко решается путем увеличения высоты строки (line-height).

Главное не переусердствовать т.к. слишком много места, как и его отсутствие, может негативно сказаться на читаемости.

Слайд 41Не используйте верхний регистр
Люди не привыкли к чтению текста набранного заглавными

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

В связи с этим, перед использованием Caps Lock подумайте, а так он нужен и можно ли обойтись без него, выделив текст жирным?

Слайд 43Ограничивайте длину строки 50-60 символами
Если строка слишком длинная у пользователя возникнуть

проблемы с переходом на другую строку.

Если ли она слишком короткая, можно нарушить ритм т.к. «перескакивание» по строкам будет очень частым.

Слайд 45Не используйте выравнивание по центру очень часто
Центрированный текст труднее читать, т.к.

края каждой строки неровные и у нас нет так называемой отправной точки.

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

Слайд 47Достаточный контраст между текстом и фоном
Контрастность — еще один из аспектов

типографики, который может повлиять на читабельность.

При выборе цвета для шрифта убедитесь, что он не сливается с фоном и «виден» на странице.

Так же помните, что настройки контрастности на мониторе пользователя могут отличаться от ваших.

Похожие презентации

Тема 8 ТЕХНОЛОГИЯ ПРИГОТОВЛЕНИЯ ВТОРЫХ ГОРЯЧИХ БЛЮД ИЗ РЫБЫ И НЕРЫБНЫХ ПРОДУКТОВ 339
Эмоции – дело вкуса! 320
Технологии искусственного интеллекта в дизайне 390
Веб 2.0 346
История дизайна,науки и техники 468
План исследовательской работы 278

Обратная связь

Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое ThePresentation.ru?

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

Для правообладателей

Яндекс.Метрика