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… [beginers]

1,133 views

Published on

Prezentacja w wersji dla początkujących, wygłoszona 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… [beginers]

  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. Czym jest WordCamp? • dzień 1 – Contributor Day i warsztaty • dzień 2 – otwarcie konferencji, prelekcje i after party po całym dniu konferencyjnym • dzień 3 – prelekcje i zamknięcie konferencji WordCamp 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. To również użytkownicy, czyli blogerzy, właściciele dużych i znaczących serwisów informacyjnych, managerowie, designerzy, pracownicy licznych firm z branży IT, którzy na co dzień opierają produkty tworzone dla swoich klientów właśnie o WordPressa. WordCamp to w dużej mierze prelekcje i warsztaty, dzięki którym dzielimy się swoją wiedzą i pomysłami. To również networking, który daje możliwość specjalistom na nawiązanie nowych kontaktów i pozyskanie ciekawych pracowników lub klientów. Jak wygląda ramowy plan konferencji?
  11. 11. Czym jest WordCamp? • dzień 1 – Contributor Day i warsztaty • dzień 2 – otwarcie konferencji, prelekcje i after party po całym dniu konferencyjnym • dzień 3 – prelekcje i zamknięcie konferencji WordCamp 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. To również użytkownicy, czyli blogerzy, właściciele dużych i znaczących serwisów informacyjnych, managerowie, designerzy, pracownicy licznych firm z branży IT, którzy na co dzień opierają produkty tworzone dla swoich klientów właśnie o WordPressa. WordCamp to w dużej mierze prelekcje i warsztaty, dzięki którym dzielimy się swoją wiedzą i pomysłami. To również networking, który daje możliwość specjalistom na nawiązanie nowych kontaktów i pozyskanie ciekawych pracowników lub klientów. Jak wygląda ramowy plan konferencji? Auć!!!
  12. 12. Czym jest WordCamp? • dzień 1 – Contributor Day i warsztaty • dzień 2 – otwarcie konferencji, prelekcje i after party po całym dniu konferencyjnym • dzień 3 – prelekcje i zamknięcie konferencji WordCamp 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. To również użytkownicy, czyli blogerzy, właściciele dużych i znaczących serwisów informacyjnych, managerowie, designerzy, pracownicy licznych firm z branży IT, którzy na co dzień opierają produkty tworzone dla swoich klientów właśnie o WordPressa. WordCamp to w dużej mierze prelekcje i warsztaty, dzięki którym dzielimy się swoją wiedzą i pomysłami. To również networking, który daje możliwość specjalistom na nawiązanie nowych kontaktów i pozyskanie ciekawych pracowników lub klientów. Jak wygląda ramowy plan konferencji? 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. 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
  19. 19. 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
  20. 20. #WszyscyJesteśmyGrafikami ©PhotobyCharles!onUnsplash − Tak wyglądają Twoje nowe farby.
  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
  28. 28. Całkiem Sprytna Sugestia. − plik style.css
  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.
  36. 36. Wdech/wydech. − MocnyWeb™
  37. 37. Modularscale Typi ๏ github.com/modularscale/modularscale-sass ๏ github.com/zellwk/typi Sass
  38. 38. :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)
  39. 39. body { font-size: calc(16px + 0.618vw); line-height: calc(16px + 1.618vw); } CSS (calc)+viewport
  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 (a właśnie że nie); ๏ liczymy projektujemy 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/ Ź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

×