1. Хорошая типографика как
залог успешности вашего сайта
Бондаренко Александр

2. Как мы читаем?

3. мы не читаем текст отдельно по словам

4. мы не читаем текст отдельно по словам

5. мы не читаем текст отдельно по словам

6. Что собой представляет чтение? Это достаточно сложный механизм
восприятия графической информации. Четкого определения,
отражающего суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение — это процесс
понимания буквального и скрытого смысла, заложенного в тексте
автором, с использованием глаз и сознания. Частично это так.

7. Что собой представляет чтение? Это достаточно сложный механизм
восприятия графической информации. Четкого определения,
отражающего суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение — это процесс
понимания буквального и скрытого смысла, заложенного в тексте
автором, с использованием глаз и сознания. Частично это так.

8. ЧТО СОБОЙ ПРЕДСТАВЛЯЕТ ЧТЕНИЕ? ЭТО ДОСТАТОЧНО
СЛОЖНЫЙ МЕХАНИЗМ ВОСПРИЯТИЯ ГРАФИЧЕСКОЙ
ИНФОРМАЦИИ. ЧЕТКОГО ОПРЕДЕЛЕНИЯ, ОТРАЖАЮЩЕГО СУТЬ
ПРОЦЕССОВ, ПРОИСХОДЯЩИХ В МОЗГУ ЧЕЛОВЕКА, НЕ
СУЩЕСТВУЕТ. НЕКОТОРЫЕ УЧЕНЫЕ СЧИТАЮТ, ЧТО ЧТЕНИЕ —
ЭТО ПРОЦЕСС ПОНИМАНИЯ БУКВАЛЬНОГО И СКРЫТОГО
СМЫСЛА, ЗАЛОЖЕННОГО В ТЕКСТЕ АВТОРОМ, С
ИСПОЛЬЗОВАНИЕМ ГЛАЗ И СОЗНАНИЯ. ЧАСТИЧНО ЭТО ТАК.

9. ЧТО СОБОЙ ПРЕДСТАВЛЯЕТ ЧТЕНИЕ? ЭТО ДОСТАТОЧНО
СЛОЖНЫЙ МЕХАНИЗМ ВОСПРИЯТИЯ ГРАФИЧЕСКОЙ
ИНФОРМАЦИИ. ЧЕТКОГО ОПРЕДЕЛЕНИЯ, ОТРАЖАЮЩЕГО СУТЬ
ПРОЦЕССОВ, ПРОИСХОДЯЩИХ В МОЗГУ ЧЕЛОВЕКА, НЕ
СУЩЕСТВУЕТ. НЕКОТОРЫЕ УЧЕНЫЕ СЧИТАЮТ, ЧТО ЧТЕНИЕ —
ЭТО ПРОЦЕСС ПОНИМАНИЯ БУКВАЛЬНОГО И СКРЫТОГО
СМЫСЛА, ЗАЛОЖЕННОГО В ТЕКСТЕ АВТОРОМ, С
ИСПОЛЬЗОВАНИЕМ ГЛАЗ И СОЗНАНИЯ. ЧАСТИЧНО ЭТО ТАК.

10. Что собой представляет чтение? Это достаточно сложный механизм
восприятия графической информации. Четкого определения,
отражающего суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение — это процесс
понимания буквального и скрытого смысла, заложенного в тексте
автором, с использованием глаз и сознания. Частично это так.

11. Что собой представляет чтение? Это достаточно сложный механизм
восприятия графической информации. Четкого определения,
отражающего суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение — это процесс
понимания буквального и скрытого смысла, заложенного в тексте
автором, с использованием глаз и сознания. Частично это так.

12. line-height: 1.5;

13. Что собой представляет чтение? Это достаточно
сложный механизм восприятия графической
информации. Четкого определения, отражающего
суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение —
это процесс понимания буквального и скрытого
смысла, заложенного в тексте автором, с
использованием глаз и сознания. Частично это так.

14. Что собой представляет чтение? Это достаточно сложный механизм восприятия графической
информации. Четкого определения, отражающего суть процессов, происходящих в мозгу человека, не
существует. Некоторые ученые считают, что чтение — это процесс понимания буквального и скрытого
смысла, заложенного в тексте автором, с использованием глаз и сознания. Частично это так.

15. Оптимальная длина строки 65 символа.

18. Настало время увеличить размер шрифта:

22. @media screen and (device-pixel-ratio: 1.5)
and (device-width: 683px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1.5)
and (device-width: 400px)
and (orientation: portrait)
@media screen and (device-pixel-ratio: 1)
and (device-width: 1024px)
and (max-device-height: 600px)
and (orientation: landscape),
screen and (device-pixel-ratio: 1)
and (device-width: 600px)
and (max-device-height: 1024px)
and (orientation: portrait)

24. Не доверяйте font-face!
@font-face {
font-family: 'typeName';
...
font-weight: normal;
font-style: normal;
}
a {
font-family: 'typeName', serif;
font-weight: bold;
font-style: italic;
}

25. Не доверяйте font-face!
@font-face {
font-family: 'typeName';
src: url('typeName-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'typeName';
src: url('typeName-Italic-bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}

29. http://www.typograf.ru/

30. Плагин для решения проблемы

31. http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/ (скрипт для текста)
http://daneden.me/baseline/ - скрипт для картинок.

33. Сочетание шрифтов

39. Перспективы типографики в web

43. Хорошая типографика как
залог успешности вашего сайта
Бондаренко Александр