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.

O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.2]

2,403 views

Published on

Ewaluacyjna wersja prezentacji wygłoszonej na konferencji WordCamp 2019 w Łodzi 24.11.2019 roku.

Dlaczego niektóre teksty są po prostu ładne i czytelne a inne nie? Czy wszystko złoto co się świeci i czemu używać kalkulatora zamiast ołówka do projektowania treści naszych witryn internetowych? Jak sprawić, żeby moje treści były czytelniejsze? Dlaczego #WszyscyJesteśmyGrafikami, jeśli tylko potrafimy myśleć? I czy, na Thora, JEST DO TEGO WTYCZKA?

Na te i kilka innych pytań odpowiedź da Ci prezentacja, po której typografia w WordPressie będzie twoim sprzymierzeńcem. Bez znaczenia czy jesteś twórcą bloga, projektujesz wygląd witryn czy je kodujesz. Pamiętaj, by łamać zasady, trzeba je najpierw poznać. Tym razem poznasz jedną. One ring to rule them all!

Published in: Internet
  • Be the first to comment

  • Be the first to like this

O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.2]

  1. 1. − czyli kiedy Au=1,6180339887… O alchemii, matematyce i typografii w WordPressie,
  2. 2. Projektant graficzny? − Typograf?
  3. 3. Kto pracuje z tekstem?
  4. 4. 6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72
  5. 5. Skala ma znaczenie! − Nie tylko w sprzedaży, w typografii też…
  6. 6. Czym jest typografia? fi
  7. 7. „typografia to sztuka kładzenia akcentów”
  8. 8. ab ab ab ab ab ab ab ab ab ab ab ab ab abababab6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72 +1 +2 +3 +12
  9. 9. No to projektujemy!!!
  10. 10. WordUp! Kalisz • Sprawdź naszą oficjalną grupę na MeetUp • Zobacz nasz profil na Facebooku • Sprawdź naszą stronę na LinkedIn Jesteśmy społecznością! Społecznością, która skupiła się wokół WordPressa. Organizujemy cykliczne spotkania entuzjastów WordPressa w Kaliszu i chcemy pomóc sobie nawzajem w korzystaniu z tego największego systemu zarządzania treścią na świecie. Dołączysz? Jest nieformalną grupą różnych ludzi, którzy w swoim życiu mają styczność z WordPressem i są zakochani w jego możliwościach, filozofii jaką ze sobą niesie i chcą dzielić się wiedzą! Każdy z nas jest inny, każdy z nas używa WordPressa inaczej. Czym jest WordUp! Kalisz? Kto to rozpoczął? Każdy z nas jest inny. Ponieważ ktoś musiał zacząć, czworo kompletnie różnych osób postanowiło zorganizować WordUp! Kalisz. Trochę dla siebie, trochę dla lansu ;), trochę z nudów… no dobra, w to nikt nie uwierzy ;), a tak naprawdę dla Ciebie!
  11. 11. Auć!!! WordUp! Kalisz • Sprawdź naszą oficjalną grupę na MeetUp • Zobacz nasz profil na Facebooku • Sprawdź naszą stronę na LinkedIn Jesteśmy społecznością! Społecznością, która skupiła się wokół WordPressa. Organizujemy cykliczne spotkania entuzjastów WordPressa w Kaliszu i chcemy pomóc sobie nawzajem w korzystaniu z tego największego systemu zarządzania treścią na świecie. Dołączysz? Jest nieformalną grupą różnych ludzi, którzy w swoim życiu mają styczność z WordPressem i są zakochani w jego możliwościach, filozofii jaką ze sobą niesie i chcą dzielić się wiedzą! Każdy z nas jest inny, każdy z nas używa WordPressa inaczej. Czym jest WordUp! Kalisz? Kto to rozpoczął? Każdy z nas jest inny. Ponieważ ktoś musiał zacząć, czworo kompletnie różnych osób postanowiło zorganizować WordUp! Kalisz. Trochę dla siebie, trochę dla lansu ;), trochę z nudów… no dobra, w to nikt nie uwierzy ;), a tak naprawdę dla Ciebie!
  12. 12. WordUp! Kalisz • Sprawdź naszą oficjalną grupę na MeetUp • Zobacz nasz profil na Facebooku • Sprawdź naszą stronę na LinkedIn Jesteśmy społecznością! Społecznością, która skupiła się wokół WordPressa. Organizujemy cykliczne spotkania entuzjastów WordPressa w Kaliszu i chcemy pomóc sobie nawzajem w korzystaniu z tego największego systemu zarządzania treścią na świecie. Dołączysz? Jest nieformalną grupą różnych ludzi, którzy w swoim życiu mają styczność z WordPressem i są zakochani w jego możliwościach, filozofii jaką ze sobą niesie i chcą dzielić się wiedzą! Każdy z nas jest inny, każdy z nas używa WordPressa inaczej. Czym jest WordUp! Kalisz? Kto to rozpoczął? Każdy z nas jest inny. Ponieważ ktoś musiał zacząć, czworo kompletnie różnych osób postanowiło zorganizować WordUp! Kalisz. Trochę dla siebie, trochę dla lansu ;), trochę z nudów… no dobra, w to nikt nie uwierzy ;), a tak naprawdę dla Ciebie! Auć!!!
  13. 13. Au − Złoto (łac. aurum)
  14. 14. Złoty podział. − (łac. sectio aurea)
  15. 15. φ= a+b a a b= podział odcinka na dwie części tak, by stosunek długości dłuższej z nich do krótszej był taki sam, jak całego odcinka do części dłuższej. ba
  16. 16. ba
  17. 17. φ= 1.6180339887…
  18. 18. #WszyscyJesteśmyGrafikami ©PhotobyCharles!onUnsplash − Tak wyglądają Twoje nowe farby.
  19. 19. ab ab ab ab ab ab ab ab ab ab ab ab ab abababab6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72 +1 +2 +3 +12
  20. 20. ab abababaab ab ab ab ab ab ab ab ab ab ab ab ab abababab6 7 8 9 10 11 12 13 14 16 25,89 41,89 67,77 109,66 177,42 ×1,618 (6,11) (9,89) ÷1,618
  21. 21. Dwie sprawy.
  22. 22. ab ab abababaWordCamp jest konferencją, która społeczności WordPressa 
 daje możliwość raz w roku na wymianę aktualnych trendów, 
 nowych rozwiązań technologicznych oraz kontaktów. 
 Do społeczności nie należą tylko i wyłącznie osoby, które na co dzień zajmują się rozwojem programistycznym systemu. 1. Wielkość fonta 2. Rytm pionowy To również użytkownicy, czyli blogerzy, właściciele dużych i znaczących serwisów informacyjnych, managerowie, designerzy…
  23. 23. Całkiem dobre praktyki. ๏ Pracujemy według skali; ๏ złoty podział; ๏ φ=1,618; ๏ liczymy zamiast zgadywać.
  24. 24. Czy jest do tego wtyczka? ©PhotobyPaulHanaokaonUnsplash
  25. 25. TAK!!! − Uffffff…
  26. 26. Całkiem Sprytna Sugestia.
  27. 27. Całkiem Sprytna Sugestia. ๏ Wygląd ➜ Edytuj CSS ➜ Dodatkowy CSS ๏ plik style.css
  28. 28. No to projektujemy liczymy. PhotobyWimvan'tEindeonUnsplash
  29. 29. body {font-size: 100%;} /* 16px */ Wielkość fontów. − (font-size) h5 {font-size: 1.618rem;} /* 1rem×1,618 */ h4 {font-size: 2.618rem;} /* 1rem×1,618×1,618 */ h3 {font-size: 4.236rem;} /* 1rem×1,618×1,618×1,618 */ h2 {font-size: 6.854rem;} /* 1rem×1,618×1,618×1,618×1,618*/ h1 {font-size: 11.089rem;} /* 1rem×1,618×1,618×1,618×1,618×1,618 */ small {font-size: 0.618rem;} /* 1rem ÷ 1,618 */
  30. 30. body {font-size: 100%; line-height: 1.618;} /* 1×1,618 */ Rytm pionowy. − (line-height, margin) h5 {font-size: 1.618rem;} h4 {font-size: 2.618rem;} h3 {font-size: 4.236rem;} h2 {font-size: 6.854rem;} h1 {font-size: 11.089rem;} small {font-size: 0.618rem;} p {margin-bottom: 1.618rem;} /* 1rem×1,618 */ h1, h2, h3, h4, h5 {margin-top: 1.618rem;} /* 1rem×1,618 */
  31. 31. Człowieku, powoli…
  32. 32. Dwie sprawy+coś jeszcze. 1. Wielkość fonta; 2. rytm pionowy; 3. szerokość linii.
  33. 33. ab ab abababaWordCamp jest konferencją, która społeczności WordPressa 
 daje możliwość raz w roku na wymianę aktualnych trendów, 
 nowych rozwiązań technologicznych oraz kontaktów. 
 Do społeczności nie należą tylko i wyłącznie osoby, które na co dzień zajmują się rozwojem programistycznym systemu. 1. Wielkość fonta 2. Rytm pionowy 3. Szerokość linii To również użytkownicy, czyli blogerzy, właściciele dużych i znaczących serwisów informacyjnych, managerowie, designerzy…
  34. 34. 1,618≠1,618 ๏ Idealna długość tekstu dla 16px to 544px/76 znaków; ๏ im dłuższy tekst, tym większa line-height; ๏ nawet nie pytajcie, jak to się wylicza!
  35. 35. grtcalculator.com ๏ 6 wielkości fonta według skali; ๏ 6 powiązanych z nimi wartości line-height; ๏ 6 wartości odstępów pomiędzy wierszami; ๏ uwzględnia szerokość lini; ๏ oraz korekcję x-height; ๏ generuje CSS.
  36. 36. Wdech/wydech. − MocnyWeb™
  37. 37. :root { --fs-1: 1rem; --fs-2: 1.618rem; --fs-3: 2.618rem; --fs-4: 4.236rem; --fs-5: 6.854rem; --fs-6: 11.089rem; --fs-small: 0.618rem; } body {font-size: var(--fs-1);} h5 {font-size: var(--fs-2);} h4 {font-size: var(--fs-3);} h3 {font-size: var(--fs-4);} h2 {font-size: var(--fs-5);} h1 {font-size: var(--fs-6);} small {font-size: var(--fs-small);} Zmienne CSS − (CSS custom properties)
  38. 38. body { font-size: calc(1rem + 0.618vw); line-height: calc(1rem + 1.618vw); } CSS (calc)+viewport
  39. 39. Sass github.com/modularscale/modularscale-sass github.com/zellwk/typi Modularcsale Typi
  40. 40. Całkiem Sporo Skal. ๏ phi 1:1.618 ๏ golden 1:1.618 ๏ double-octave 1:4 ๏ major-twelfth 1:3 ๏ major-eleventh 3:8 ๏ major-tenth 2:5 ๏ octave 1:2 ๏ major-seventh 8:15 ๏ minor-seventh 9:16 ๏ major-sixth 3:5 ๏ minor-sixth 5:8 ๏ fifth 2:3 ๏ augmented-fourth 1:√2 ๏ fourth 3:4 ๏ major-third 4:5 ๏ minor-third 5:6 ๏ major-second 8:9 ๏ minor-second 15:16
  41. 41. Bardzo dobre praktyki. ๏ Pracujemy według skali (no chyba, że nie); ๏ złoty podział (ale niekoniecznie); ๏ φ=1,618 (ale nie do końca); ๏ nadal liczymy zamiast zgadywać.
  42. 42. ©WojtekRównanek − marcinandrzejewski.pl/o-alchemii-matematyce-i-typografii-w-wordpressie ๏ https://grtcalculator.com/ ๏ https://github.com/modularscale/modularscale-sass ๏ https://github.com/zellwk/typi ๏ https://grtcalculator.com/math/ ๏ https://www.modularscale.com/ ๏ https://type-scale.com/ ๏ https://www.kevinpowell.co/article/typographic-scale/ ๏ https://gregrickaby.com/2013/05/using-the-golden-ratio-and-rems/ ๏ https://typecast.com/blog/contrast-through-scale ๏ https://www.slideshare.net/jontangerine/web-type-80-science-20-art ๏ https://www.imarc.com/blog/using-the-golden-ratio-with-typography ๏ http://spencermortensen.com/articles/typographic-scale/ ๏ https://alistapart.com/article/more-meaningful-typography/ ๏ https://zellwk.com/blog/why-vertical-rhythms/ ๏ https://pearsonified.com/golden-ratio-typography-intro/ ๏ https://www.mypinkplum.pl/2016/04/dobieranie-typografii-na- bloga.html ๏ http://webtypography.net/toc/ ๏ http://matejlatin.github.io/Gutenberg/ ๏ https://www.madebymike.com.au/writing/precise-control-responsive- typography/ ๏ https://www.codementor.io/ricardozea/100-responsive-typography- system-using-a-modular-scale-s5rhft58g ๏ https://zellwk.com/blog/modular-scale/ ๏ http://www.thismanslife.co.uk/projects/phiculator/ ๏ https://pl.wikipedia.org/wiki/Z%C5%82oty_podzia%C5%82 ๏ http://collegiumpapricum.com/2010/03/typografia-na-stronach- internetowych/ Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa 3.0 Unported. Źródła:
  43. 43. ©WojtekRównanek Dzięki! − marcinandrzejewski.pl linkedin.com/in/marcin-andrzejewski fb.com/andrzejewskipl
  44. 44. „Gdy słowa tracą znaczenie, ludzie tracą wolność” − Konfucjusz

×