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.

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

64 views

Published on

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

Published in: Design
  • Be the first to comment

  • Be the first to like this

Восприятие типографики в web-интерфейсах | OdessaFrontend 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

×