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

−
czyli kiedy Au=1,6180339887…
O alchemii, matematyce
i typograﬁi w WordPressie,

Projektant graﬁczny?
−
Typograf?

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 typograﬁi też…

Czym jest typograﬁa?
ﬁ

„typograﬁa 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

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ć!!!
WordUp! Kalisz
Kto to rozpoczął?

WordUp! Kalisz
Kto to rozpoczął?
Auć!!!

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

#WszyscyJesteśmyGraﬁkami
©PhotobyCharles!onUnsplash
−
Tak wyglądają Twoje nowe farby.

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

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

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

No to projektujemy liczymy.
PhotobyWimvan'tEindeonUnsplash

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;}
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 */

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;
๏ generuje CSS.

: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);}
small {font-size: var(--fs-small);}
Zmienne CSS
−
(CSS custom properties)

body {
font-size: calc(1rem + 0.618vw);
line-height: calc(1rem + 1.618vw);
}
CSS (calc)+viewport

Sass
github.com/modularscale/modularscale-sass github.com/zellwk/typi
Modularcsale Typi

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
๏ ﬁfth 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 (ale nie do końca);
๏ nadal liczymy 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/
Ten utwór jest dostępny na licencji Creative Commons Uznanie autorstwa 3.0 Unported.
Źródła:

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie O alchemii, matematyce i typografii w WordPressie, czyli kiedy Au=1,6180339887… [v1.2] (10)

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