SlideShare a Scribd company logo
O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.0]
Projektant graficzny?
−
Typograf?
Kto pracuje z tekstem?
6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72
Skala ma znaczenie!
−
Nie tylko w sprzedaży, w typografii też…
Czym jest typografia?
fi
„typografia to sztuka
kładzenia
akcentów”
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
No to projektujemy!!!
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?
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ć!!!
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ć!!!
Au
−
Złoto
(łac. aurum)
Złoty podział.
−
(łac. sectio aurea)
φ=
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
ba
φ= 1.6180339887…
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
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
#WszyscyJesteśmyGrafikami
©PhotobyCharles!onUnsplash
−
Tak wyglądają Twoje nowe farby.
Dwie sprawy.
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…
Całkiem dobre praktyki.
๏ Pracujemy według skali;
๏ złoty podział;
๏ φ=1,618;
๏ liczymy zamiast zgadywać.
Czy jest do tego wtyczka?
©PhotobyPaulHanaokaonUnsplash
TAK!!!
−
Uffffff…
O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.0]
Całkiem Sprytna Sugestia.
Całkiem Sprytna Sugestia.
๏ Wygląd ➜ Dostosuj ➜ Dodatkowy CSS
๏ plik style.css
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 */
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, small {margin-bottom: 1.618rem;} /* 1rem×1,618 */
h1, h2, h3, h4, h5 {margin-top: 1.618rem;} /* 1rem×1,618 */
Człowieku, powoli…
Dwie sprawy+coś jeszcze.
1. Wielkość fonta;
2. rytm pionowy;
3. szerokość linii.
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…
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!
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.
Wdech/wydech.
−
MocnyWeb™
Modularscale Typi
๏ github.com/modularscale/modularscale-sass ๏ github.com/zellwk/typi
Sass
: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)
body {
font-size: calc(16px + 0.618vw);
line-height: calc(16px + 1.618vw);
}
CSS (calc)+viewport
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
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ć.
©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:
©WojtekRównanek
Dzięki!
−
marcinandrzejewski.pl
linkedin.com/in/marcin-andrzejewski
fb.com/andrzejewskipl
„Gdy słowa tracą znaczenie,
ludzie tracą wolność”
−
Konfucjusz

More Related Content

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

Projektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case studyProjektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case study
Krakweb
 
Oferta partnerska do usług, waw city hub 27.02.14
Oferta partnerska do usług, waw city hub 27.02.14Oferta partnerska do usług, waw city hub 27.02.14
Oferta partnerska do usług, waw city hub 27.02.14
City Partnerships
 
Architektura serwisu gg.pl 2 przemek łącki (2)
Architektura serwisu gg.pl 2   przemek łącki (2)Architektura serwisu gg.pl 2   przemek łącki (2)
Architektura serwisu gg.pl 2 przemek łącki (2)
Cendoo
 
Co Ty wiesz o Magento?
Co Ty wiesz o Magento?Co Ty wiesz o Magento?
Co Ty wiesz o Magento?
White Ducky
 
GG.pl prezentacja nowego serwisu
GG.pl prezentacja nowego serwisuGG.pl prezentacja nowego serwisu
GG.pl prezentacja nowego serwisu
Gniewomir Świechowski
 
Prawdziwi znajomi - prawdziwe rozmowy
Prawdziwi znajomi - prawdziwe rozmowyPrawdziwi znajomi - prawdziwe rozmowy
Prawdziwi znajomi - prawdziwe rozmowy
IRCenter
 
JavaScript. Zaawansowane programowanie
JavaScript. Zaawansowane programowanieJavaScript. Zaawansowane programowanie
JavaScript. Zaawansowane programowanie
Wydawnictwo Helion
 
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
UseLab
 
Redesign Playmobile.pl - Polish IA Summit 2011
Redesign Playmobile.pl - Polish IA Summit 2011Redesign Playmobile.pl - Polish IA Summit 2011
Redesign Playmobile.pl - Polish IA Summit 2011
Paulina Rzymska
 
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
Fundacja Rozwoju Branży Internetowej Netcamp
 
C++ Builder 6. Vademecum profesjonalisty
C++ Builder 6. Vademecum profesjonalistyC++ Builder 6. Vademecum profesjonalisty
C++ Builder 6. Vademecum profesjonalisty
Wydawnictwo Helion
 
Narzędzia projektowe
Narzędzia projektoweNarzędzia projektowe
Narzędzia projektowe
AEGEE-Warszawa
 
Ensteam proposal
Ensteam proposalEnsteam proposal
Ensteam proposal
Krzysztof Serwatka
 
Biznes zerka na Sieć
Biznes zerka na SiećBiznes zerka na Sieć
Biznes zerka na Sieć
Bogdan Miś
 
Podrecznik1
Podrecznik1Podrecznik1
Podrecznik1
FilipKryczka
 
Jak wdrożyć wiki w firmie?
Jak wdrożyć wiki w firmie?Jak wdrożyć wiki w firmie?
Jak wdrożyć wiki w firmie?
Divante
 
Jak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
Jak wdrożyć wiki w firmie - Tomasz Karwatka, DivanteJak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
Jak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
Biznes 2.0
 
Komputer PC w nowoczesnej firmie
Komputer PC w nowoczesnej firmieKomputer PC w nowoczesnej firmie
Komputer PC w nowoczesnej firmie
Wydawnictwo Helion
 
Joomla a responsywność
Joomla a responsywnośćJoomla a responsywność
Joomla a responsywność
Tomasz Dziuda
 

Similar to O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.0] (20)

Projektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case studyProjektowanie stron www dla ngo i projektow eko - case study
Projektowanie stron www dla ngo i projektow eko - case study
 
Oferta partnerska do usług, waw city hub 27.02.14
Oferta partnerska do usług, waw city hub 27.02.14Oferta partnerska do usług, waw city hub 27.02.14
Oferta partnerska do usług, waw city hub 27.02.14
 
Architektura serwisu gg.pl 2 przemek łącki (2)
Architektura serwisu gg.pl 2   przemek łącki (2)Architektura serwisu gg.pl 2   przemek łącki (2)
Architektura serwisu gg.pl 2 przemek łącki (2)
 
Co Ty wiesz o Magento?
Co Ty wiesz o Magento?Co Ty wiesz o Magento?
Co Ty wiesz o Magento?
 
GG.pl prezentacja nowego serwisu
GG.pl prezentacja nowego serwisuGG.pl prezentacja nowego serwisu
GG.pl prezentacja nowego serwisu
 
Prawdziwi znajomi - prawdziwe rozmowy
Prawdziwi znajomi - prawdziwe rozmowyPrawdziwi znajomi - prawdziwe rozmowy
Prawdziwi znajomi - prawdziwe rozmowy
 
8 jaromir dzialo
8 jaromir dzialo8 jaromir dzialo
8 jaromir dzialo
 
JavaScript. Zaawansowane programowanie
JavaScript. Zaawansowane programowanieJavaScript. Zaawansowane programowanie
JavaScript. Zaawansowane programowanie
 
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
Paulina Rzymska, Marcin Piotrowski "Playmobile pl case study Polish IA Summit"
 
Redesign Playmobile.pl - Polish IA Summit 2011
Redesign Playmobile.pl - Polish IA Summit 2011Redesign Playmobile.pl - Polish IA Summit 2011
Redesign Playmobile.pl - Polish IA Summit 2011
 
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
User Experience – wpływ internetu na aplikacje enterprise - Netcamp #14
 
C++ Builder 6. Vademecum profesjonalisty
C++ Builder 6. Vademecum profesjonalistyC++ Builder 6. Vademecum profesjonalisty
C++ Builder 6. Vademecum profesjonalisty
 
Narzędzia projektowe
Narzędzia projektoweNarzędzia projektowe
Narzędzia projektowe
 
Ensteam proposal
Ensteam proposalEnsteam proposal
Ensteam proposal
 
Biznes zerka na Sieć
Biznes zerka na SiećBiznes zerka na Sieć
Biznes zerka na Sieć
 
Podrecznik1
Podrecznik1Podrecznik1
Podrecznik1
 
Jak wdrożyć wiki w firmie?
Jak wdrożyć wiki w firmie?Jak wdrożyć wiki w firmie?
Jak wdrożyć wiki w firmie?
 
Jak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
Jak wdrożyć wiki w firmie - Tomasz Karwatka, DivanteJak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
Jak wdrożyć wiki w firmie - Tomasz Karwatka, Divante
 
Komputer PC w nowoczesnej firmie
Komputer PC w nowoczesnej firmieKomputer PC w nowoczesnej firmie
Komputer PC w nowoczesnej firmie
 
Joomla a responsywność
Joomla a responsywnośćJoomla a responsywność
Joomla a responsywność
 

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

  • 3. Kto pracuje z tekstem?
  • 4. 6 7 8 9 10 11 12 13 14 16 18 21 24 36 48 60 72
  • 5. Skala ma znaczenie! − Nie tylko w sprzedaży, w typografii też…
  • 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
  • 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. 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. 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ć!!!
  • 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. ba
  • 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. 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
  • 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. Całkiem dobre praktyki. ๏ Pracujemy według skali; ๏ złoty podział; ๏ φ=1,618; ๏ liczymy zamiast zgadywać.
  • 24. Czy jest do tego wtyczka? ©PhotobyPaulHanaokaonUnsplash
  • 28. Całkiem Sprytna Sugestia. ๏ Wygląd ➜ Dostosuj ➜ Dodatkowy CSS ๏ plik style.css
  • 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. 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, small {margin-bottom: 1.618rem;} /* 1rem×1,618 */ h1, h2, h3, h4, h5 {margin-top: 1.618rem;} /* 1rem×1,618 */
  • 32. Dwie sprawy+coś jeszcze. 1. Wielkość fonta; 2. rytm pionowy; 3. szerokość linii.
  • 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. 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. 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.
  • 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. body { font-size: calc(16px + 0.618vw); line-height: calc(16px + 1.618vw); } CSS (calc)+viewport
  • 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. 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. ©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:
  • 44. „Gdy słowa tracą znaczenie, ludzie tracą wolność” − Konfucjusz