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…

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