Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1

Воспри тие типогр фики
в веб-интерфейс х
ALEXANDER SHATOV
TERMINAL 42Ø
Ø

и з т и п о г р ф и к и
TERMINAL 42
º 1
В е б - д и з й н с о с т о и т н
Ø
Ø

TERMINAL 42
º 2A W W W A R D S / F W A
Ø
Ø

TERMINAL 42
º 3c r a i g s l i s t . o r g
Ø
Ø

º 5
кол-во шрифтов.
≈ 2-3 шрифта
длина строки.
< 600px
интерлиньяж.
150% от размера шрифта
Ø
Ø
ошибки

º 6
ЕСЛИ ВЫ НÈ МØЖÉТЕ
ЕГÕ ПРÔЧИТ∆ТЬ, НЕ
ИСПØЛЬЗŸЙТЕ ЕГО.
Ø
Ø
ошибки

Ø
Ø º 9
не нужно использовать
LOREM IPSUM.
ошибки

TERMINAL 42
º 1 0
цвет
контраст
выравнивание
Ø
Ø

TERMINAL 42
º 6
пример:http://www.hochburg.design/Ø
Ø

º 1 1
хороший пример.
но не используйте
HELVETICA FONT.
Ø
Ø
шрифт

Ø
Ø º 1 2
Windows: Segoe UI (or Tahoma for older versions of Windows)
macOS: San Francisco
iOS: San Francisco
Android: Roboto
шрифт

шрифтØ
Ø º 1 3
Roboto Everywhere.

Ø
Ø º 1 4
Windows:
macOS:
iOS:
Android:
Helvetica Neue
Helvetica Neue
San Francisco
Roboto
шрифт

º 1 6
оо. такой хочу на сайт.
он такой модный
красивый
молодежный
Ø
Ø
шрифт

º 1 7
Ø
Ø
H E LV E T I C A N E U E
Шрифт, который держится на пространстве
шрифт

TERMINAL 42
º 1 8
Я ведь не дизайнер.
Как сделать, чтобы
было красиво?
Ø
Ø

необходимость
º 1 9
1. простой.
2. эффективный.
3. user-friendly.
4. результативный.
5. красивый.
Ø
Ø

CSS
º 2 1
golden ratio
φ ≈1.618
Ø
Ø

º 2 2
Ø
Ø
HEADER
subheader
Let n be any integer other than 5 and you won’t ﬁnd
the same pattern of consistent differences as shown
above or the unique reciprocal and additive properties
of phi.
It just so happens that you get phi when you let n
equal 5. Let n be other integers and you get a series
of numbers whose squares (see Phi2 in table in green)
each exceed their root by a difference (see Δ in table
in blue) that increases by 0.25 for each number in the
series, as shown below.
CSS

º 2 3
Ø
Ø
http://www.modularscale.com/
CSS

º 2 4
Ø
Ø
multiple of 25px
on line-height
CSS

Ø
Ø º 2 5
ПРОСТРАНСТВО
БАЛАНС И РИТМ
practises

Ø
Ø º 2 6
ПРОСТРАНСТВО
МАСШТАБ
practises

Ø
Ø º 2 7
МАСШТАБ СЕТКА И ВЫРАВНИВАНИЯ
practises

Ø
Ø º 2 8
Taller X-Heights
Proportions
practises

º 2 9
letter-spacing: x.xxem;
word-spacing: x.xxem;
font-variant: small-caps;
text-transform: uppercase;
text-rendering: optimizeLegibility
Ø
Ø
CSS

º 3 0
TrueType
OpenType
Embedded Open Type
Web Open Font Format
Ø
Ø
Font File Types

º 3 1
convert:
https://www.fontsquirrel.com/tools/webfont-generator
http://www.font2web.com/
Ø
Ø
ресурсы

responsive
º 3 2
Ø
Ø
relative units.

º 3 3
Ø
Ø
em
rem
vw
vh
vmin
vmax
задаёт размер относительно шрифта родителя
задаёт размер относительно размера шрифта элемента <html>
1% ширины окна
1% высоты окна
наименьшее из (vw, vh)
наибольшее из (vw, vh)
responsive

TERMINAL 42Ø
Ø º 3 4
СSS-ШЛЮЗЫ

Ø
Ø º 3 5
h1 { font-size: 4vw; /* Бум! Готово. */ }
CSS-шлюзы

Ø
Ø º 3 6
ширина < 320px
20px
ширина > 960px
40px
CSS-шлюз — это особый вид вычисления CSS-значения, при котором:
• есть минимальное и максимальное значение,
• есть две контрольные точки (breakpoint) (обычно зависят от ширины
области просмотра),
• между этими точками значение меняется линейно от минимума до
максимума.
CSS-шлюзы

Ø
Ø º 3 7
h1 { font-size: 1.25rem; }
@media (min-width: 320px) {
h1 { font-size: /* Значение от 1.25 rem до 2.5 rem */; }
}
h1 { font-size: 2.5rem; }
}
CSS-шлюзы

Ø
Ø º 3 8
h1 {
font-size: calc(1.25rem + viewport_relative_value);
}
CSS-шлюзы

Ø
Ø º 3 9
CSS-шлюзы могут принимать только
числовые значения, использовать
calc() и принимать значения в
пикселях.
CSS-шлюзы

Ø
Ø º 4 0
• CSS-шлюз для свойства opacity, потому что
opacity: calc(.5+1px) является ошибкой;
• CSS-шлюз для большинства функций transform
(например, rotate: шлюз не может выполнять
вращение на основании значения в пикселях).
CSS-шлюзы

CSS-шлюзыØ
Ø º 4 1
y = mx + b
y — размер шрифта (вертикальная ось),
x — ширина области просмотра в пикселях (горизонтальная ось),
m — наклон (slope) функции (сколько пикселей мы добавляем к размеру шрифта при
увеличении ширины области просмотра на 1 пиксель),
b — размер шрифта до того, как мы начинаем увеличивать размер области просмотра.

CSS-шлюзыØ
Ø º 4 2
1.
• Общее увеличение font-size — 20 пикселей (40 - 20).
• Общее уменьшение области просмотра — 640 пикселей (960 - 320).
• Если ширина области вырастет на 1 пиксель, размер font-size
увеличится на:
20 / 640 = 0.03125 px.
2.
b = y1 - 0.03125 × x1
b = 20 - 0.03125 × 320
b = 10
y = 0.03125x + 10

CSS-шлюзыØ
Ø º 4 3
font-size: calc( 0.03125 * 100vw + 10px );
≈
h1 { font-size: 20px; }
h1 { font-size: calc( 3.125vw + 10px ); }
}
h1 { font-size: 40px; }
}

Ø
Ø SHATOV ALEXANDER
THÅNKŚ FØR
≈ ATTĒNTĮON.
WEB: WELBO.CO /// INST: @THEBEMORE
/// FB: ALEXANDER WELBO
TERMINAL 42

Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1

More Related Content

Similar to Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1

More from OdessaFrontend

Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1