Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Воспри тие типогр фики
в веб-интерфейс х
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: Rob...
шрифтØ
Ø º 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 ...
º 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: o...
º 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
задаёт размер относительно шрифта родителя
задаёт размер относительно размера шрифта элем...
TERMINAL 42Ø
Ø º 3 4
СSS-ШЛЮЗЫ
Ø
Ø º 3 5
h1 { font-size: 4vw; /* Бум! Готово. */ }
CSS-шлюзы
Ø
Ø º 3 6
ширина < 320px
20px
ширина > 960px
40px
CSS-шлюз — это особый вид вычисления CSS-значения, при котором:
• есть м...
Ø
Ø º 3 7
h1 { font-size: 1.25rem; }
@media (min-width: 320px) {
h1 { font-size: /* Значение от 1.25 rem до 2.5 rem */; }
...
Ø
Ø º 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-шлюз для большинства ф...
CSS-шлюзыØ
Ø º 4 1
y = mx + b
y — размер шрифта (вертикальная ось),
x — ширина области просмотра в пикселях (горизонтальна...
CSS-шлюзыØ
Ø º 4 2
1.
• Общее увеличение font-size — 20 пикселей (40 - 20).
• Общее уменьшение области просмотра — 640 пик...
CSS-шлюзыØ
Ø º 4 3
font-size: calc( 0.03125 * 100vw + 10px );
≈
h1 { font-size: 20px; }
@media (min-width: 320px) {
h1 { f...
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
Upcoming SlideShare
Loading in …5
×

of

Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 1 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 2 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 3 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 4 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 5 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 6 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 7 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 8 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 9 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 10 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 11 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 12 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 13 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 14 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 15 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 16 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 17 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 18 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 19 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 20 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 21 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 22 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 23 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 24 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 25 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 26 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 27 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 28 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 29 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 30 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 31 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 32 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 33 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 34 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 35 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 36 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 37 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 38 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 39 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 40 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 41 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 42 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 43 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 44 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 45 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 46 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 47 Восприятие типографики в web-интерфейсах | Odessa Frontend Meetup #1 Slide 48
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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

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

Views

Total views

157

On Slideshare

0

From embeds

0

Number of embeds

0

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×