SlideShare a Scribd company logo
1 of 48
Download to read offline
Воспри тие типогр фики
в веб-интерфейс х
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
Ø
Ø
TERMINAL 42
º 4
Ø
Ø
º 5
кол-во шрифтов.
≈ 2-3 шрифта
длина строки.
< 600px
интерлиньяж.
150% от размера шрифта
Ø
Ø
ошибки
º 6
ЕСЛИ ВЫ НÈ МØЖÉТЕ
ЕГÕ ПРÔЧИТ∆ТЬ, НЕ
ИСПØЛЬЗŸЙТЕ ЕГО.
Ø
Ø
ошибки
º 7
Ø
Ø
@thebemore
º 8
Ø
Ø
@thebemore
Ø
Ø º 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 5
пример.
º 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. красивый.
Ø
Ø
TERMINAL 42
º 2 0
Ø
Ø
CSS
º 2 1
golden ratio
φ ≈1.618
Ø
Ø
º 2 2
Ø
Ø
HEADER
subheader
Let n be any integer other than 5 and you won’t find
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 */; }
}
@media (min-width: 960px) {
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; }
@media (min-width: 320px) {
h1 { font-size: calc( 3.125vw + 10px ); }
}
@media (min-width: 960px) {
h1 { font-size: 40px; }
}
CSS-шлюзыØ
Ø º 4 4
fuck-upsØ
Ø º 4 5
Ø
Ø SHATOV ALEXANDER
THÅNKŚ FØR
≈ ATTĒNTĮON.
WEB: WELBO.CO /// INST: @THEBEMORE
/// FB: ALEXANDER WELBO
TERMINAL 42

More Related Content

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

CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машинRoman Dvornov
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Yandex
 
презентация к уроку
презентация к урокупрезентация к уроку
презентация к урокуstarsboy
 
Программирование линейных алгоритмов
Программирование линейных алгоритмовПрограммирование линейных алгоритмов
Программирование линейных алгоритмовAndrey Dolinin
 
Макс Ширшин — Регулярные выражения
Макс Ширшин — Регулярные выраженияМакс Ширшин — Регулярные выражения
Макс Ширшин — Регулярные выраженияYandex
 

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

Изучение HTML, CSS, PHP, MySQL
Изучение HTML, CSS, PHP, MySQLИзучение HTML, CSS, PHP, MySQL
Изучение HTML, CSS, PHP, MySQL
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"Владимир Гриненко "Инструменты фронтенд-разработчика"
Владимир Гриненко "Инструменты фронтенд-разработчика"
 
презентация к уроку
презентация к урокупрезентация к уроку
презентация к уроку
 
Программирование линейных алгоритмов
Программирование линейных алгоритмовПрограммирование линейных алгоритмов
Программирование линейных алгоритмов
 
Макс Ширшин — Регулярные выражения
Макс Ширшин — Регулярные выраженияМакс Ширшин — Регулярные выражения
Макс Ширшин — Регулярные выражения
 
8 3-3
8 3-38 3-3
8 3-3
 

More from OdessaFrontend

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19OdessaFrontend
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...OdessaFrontend
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19OdessaFrontend
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...OdessaFrontend
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18OdessaFrontend
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17OdessaFrontend
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17OdessaFrontend
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17OdessaFrontend
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OdessaFrontend
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16OdessaFrontend
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16OdessaFrontend
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16OdessaFrontend
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщикаOdessaFrontend
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15OdessaFrontend
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15OdessaFrontend
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15OdessaFrontend
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15OdessaFrontend
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14OdessaFrontend
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13OdessaFrontend
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13OdessaFrontend
 

More from OdessaFrontend (20)

Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19Викторина | Odessa Frontend Meetup #19
Викторина | Odessa Frontend Meetup #19
 
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
Использование Recoil в React и React Native приложениях | Odessa Frontend Mee...
 
Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19Великолепный Gatsby.js | Odessa Frontend Meetup #19
Великолепный Gatsby.js | Odessa Frontend Meetup #19
 
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
Функциональное программирование с использованием библиотеки fp-ts | Odessa Fr...
 
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
Canvas API как инструмент для работы с графикой | Odessa Frontend Meetup #18
 
Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17Викторина | Odessa Frontend Meetup #17
Викторина | Odessa Frontend Meetup #17
 
Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17Антихрупкий TypeScript | Odessa Frontend Meetup #17
Антихрупкий TypeScript | Odessa Frontend Meetup #17
 
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
Частые ошибки при разработке фронтенда | Odessa Frontend Meetup #17
 
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
OAuth2 и OpenID Connect простым языком | Odessa Frontend Meetup #17
 
Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16Объекты в ECMAScript | Odessa Frontend Meetup #16
Объекты в ECMAScript | Odessa Frontend Meetup #16
 
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
Фриланс как профессиональная деградация | Odessa Frontend Meetup #16
 
Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16Cлайдер на CSS | Odessa Frontend Meetup #16
Cлайдер на CSS | Odessa Frontend Meetup #16
 
Современный станок верстальщика
Современный станок верстальщикаСовременный станок верстальщика
Современный станок верстальщика
 
Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15Викторина | Odessa Frontend Meetup #15
Викторина | Odessa Frontend Meetup #15
 
DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15DRY’им Vuex | Odessa Frontend Meetup #15
DRY’им Vuex | Odessa Frontend Meetup #15
 
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
А/Б тестирование: Что? Как? Зачем? | Odessa Frontend Meetup #15
 
Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15Пощупать 3д в браузере | Odessa Frontend Meetup #15
Пощупать 3д в браузере | Odessa Frontend Meetup #15
 
Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14Викторина | Odessa Frontend Meetup #14
Викторина | Odessa Frontend Meetup #14
 
Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13Викторина | Odessa Frontend Meetup #13
Викторина | Odessa Frontend Meetup #13
 
Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13Структуры данных в JavaScript | Odessa Frontend Meetup #13
Структуры данных в JavaScript | Odessa Frontend Meetup #13
 

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

  • 1. Воспри тие типогр фики в веб-интерфейс х ALEXANDER SHATOV TERMINAL 42Ø Ø
  • 2. и з т и п о г р ф и к и TERMINAL 42 º 1 В е б - д и з й н с о с т о и т н Ø Ø
  • 3. TERMINAL 42 º 2A W W W A R D S / F W A Ø Ø
  • 4. TERMINAL 42 º 3c r a i g s l i s t . o r g Ø Ø
  • 6. º 5 кол-во шрифтов. ≈ 2-3 шрифта длина строки. < 600px интерлиньяж. 150% от размера шрифта Ø Ø ошибки
  • 7. º 6 ЕСЛИ ВЫ НÈ МØЖÉТЕ ЕГÕ ПРÔЧИТ∆ТЬ, НЕ ИСПØЛЬЗŸЙТЕ ЕГО. Ø Ø ошибки
  • 10. Ø Ø º 9 не нужно использовать LOREM IPSUM. ошибки
  • 11. TERMINAL 42 º 1 0 цвет контраст выравнивание Ø Ø
  • 13. º 1 1 хороший пример. но не используйте HELVETICA FONT. Ø Ø шрифт
  • 14. Ø Ø º 1 2 Windows: Segoe UI (or Tahoma for older versions of Windows) macOS: San Francisco iOS: San Francisco Android: Roboto шрифт
  • 15. шрифтØ Ø º 1 3 Roboto Everywhere.
  • 16. Ø Ø º 1 4 Windows: macOS: iOS: Android: Helvetica Neue Helvetica Neue San Francisco Roboto шрифт
  • 17. Ø Ø º 1 5 пример.
  • 18. º 1 6 оо. такой хочу на сайт. он такой модный красивый молодежный Ø Ø шрифт
  • 19. º 1 7 Ø Ø H E LV E T I C A N E U E Шрифт, который держится на пространстве шрифт
  • 20. TERMINAL 42 º 1 8 Я ведь не дизайнер. Как сделать, чтобы было красиво? Ø Ø
  • 21. необходимость º 1 9 1. простой. 2. эффективный. 3. user-friendly. 4. результативный. 5. красивый. Ø Ø
  • 22. TERMINAL 42 º 2 0 Ø Ø
  • 23. CSS º 2 1 golden ratio φ ≈1.618 Ø Ø
  • 24. º 2 2 Ø Ø HEADER subheader Let n be any integer other than 5 and you won’t find 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
  • 26. º 2 4 Ø Ø multiple of 25px on line-height CSS
  • 27. Ø Ø º 2 5 ПРОСТРАНСТВО БАЛАНС И РИТМ practises
  • 28. Ø Ø º 2 6 ПРОСТРАНСТВО МАСШТАБ БАЛАНС И РИТМ practises
  • 29. Ø Ø º 2 7 МАСШТАБ СЕТКА И ВЫРАВНИВАНИЯ БАЛАНС И РИТМ practises
  • 30. Ø Ø º 2 8 Taller X-Heights Proportions practises
  • 31. º 2 9 letter-spacing: x.xxem; word-spacing: x.xxem; font-variant: small-caps; text-transform: uppercase; text-rendering: optimizeLegibility Ø Ø CSS
  • 32. º 3 0 TrueType OpenType Embedded Open Type Web Open Font Format Ø Ø Font File Types
  • 35. º 3 3 Ø Ø em rem vw vh vmin vmax задаёт размер относительно шрифта родителя задаёт размер относительно размера шрифта элемента <html> 1% ширины окна 1% высоты окна наименьшее из (vw, vh) наибольшее из (vw, vh) responsive
  • 36. TERMINAL 42Ø Ø º 3 4 СSS-ШЛЮЗЫ
  • 37. Ø Ø º 3 5 h1 { font-size: 4vw; /* Бум! Готово. */ } CSS-шлюзы
  • 38. Ø Ø º 3 6 ширина < 320px 20px ширина > 960px 40px CSS-шлюз — это особый вид вычисления CSS-значения, при котором: • есть минимальное и максимальное значение, • есть две контрольные точки (breakpoint) (обычно зависят от ширины области просмотра), • между этими точками значение меняется линейно от минимума до максимума. CSS-шлюзы
  • 39. Ø Ø º 3 7 h1 { font-size: 1.25rem; } @media (min-width: 320px) { h1 { font-size: /* Значение от 1.25 rem до 2.5 rem */; } } @media (min-width: 960px) { h1 { font-size: 2.5rem; } } CSS-шлюзы
  • 40. Ø Ø º 3 8 h1 { font-size: calc(1.25rem + viewport_relative_value); } CSS-шлюзы
  • 41. Ø Ø º 3 9 CSS-шлюзы могут принимать только числовые значения, использовать calc() и принимать значения в пикселях. CSS-шлюзы
  • 42. Ø Ø º 4 0 • CSS-шлюз для свойства opacity, потому что opacity: calc(.5+1px) является ошибкой; • CSS-шлюз для большинства функций transform (например, rotate: шлюз не может выполнять вращение на основании значения в пикселях). CSS-шлюзы
  • 43. CSS-шлюзыØ Ø º 4 1 y = mx + b y — размер шрифта (вертикальная ось), x — ширина области просмотра в пикселях (горизонтальная ось), m — наклон (slope) функции (сколько пикселей мы добавляем к размеру шрифта при увеличении ширины области просмотра на 1 пиксель), b — размер шрифта до того, как мы начинаем увеличивать размер области просмотра.
  • 44. 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
  • 45. CSS-шлюзыØ Ø º 4 3 font-size: calc( 0.03125 * 100vw + 10px ); ≈ h1 { font-size: 20px; } @media (min-width: 320px) { h1 { font-size: calc( 3.125vw + 10px ); } } @media (min-width: 960px) { h1 { font-size: 40px; } }
  • 48. Ø Ø SHATOV ALEXANDER THÅNKŚ FØR ≈ ATTĒNTĮON. WEB: WELBO.CO /// INST: @THEBEMORE /// FB: ALEXANDER WELBO TERMINAL 42