1.
−
czyli kiedy Au=1,6180339887…
O alchemii, matematyce
i typografii w WordPressie!

2.
Projektant graficzny?
−
Typograf?

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ż…

6.
Czym jest typografia?
fi

7.
„typografia to sztuka
kładzenia
akcentów”

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.
No to projektujemy!!!

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ć!!!

13.
Au
−
Złoto
(łac. aurum)

14.
Złoty podział.
−
(łac. sectio aurea)

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

17.
φ= 1.6180339887…

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

20.
#WszyscyJesteśmyGrafikami
©PhotobyCharles!onUnsplash
−
Tak wyglądają Twoje nowe farby.

21.
Dwie sprawy.

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

25.
TAK!!!
−
Uffffff…

26.
Całkiem Sprytna Sugestia.

27.
Całkiem Sprytna Sugestia.
๏ Wygląd ➜ Edytuj CSS ➜ Dodatkowy CSS
๏ plik style.css

28.
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 */

29.
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 */

30.
Człowieku, powoli…

31.
Dwie sprawy+coś jeszcze.
1. Wielkość fonta;
2. rytm pionowy;
3. szerokość linii.

32.
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…

33.
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!

34.
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.

35.
Wdech/wydech.
−
MocnyWeb™

36.
Modularscale Typi
๏ github.com/modularscale/modularscale-sass ๏ github.com/zellwk/typi
Sass

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.
body {
font-size: calc(16px + 0.618vw);
line-height: calc(16px + 1.618vw);
}
CSS (calc)+viewport

39.
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

40.
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ć.

41.
©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:

42.
©WojtekRównanek
Dzięki!
−
marcinandrzejewski.pl
linkedin.com/in/marcin-andrzejewski
fb.com/andrzejewskipl

43.
„Gdy słowa tracą znaczenie,
ludzie tracą wolność”
−
Konfucjusz