Strony WWW z SystemFlow: Jednostki w Typografii

SystemFlow 1.0+

0:00Pomówmy teraz o jednostkach, które

0:01stosujemy w System Flow dla wszystkich fontów i całej typografii.

0:04Font size jest tutaj przedstawiony jako 38

0:07pikseli, ale przelicza się to na 2, 3, 7, 5 rema.

0:11Limit jest podany również w ramach i jest to 1 kropka 25 gamma.

0:15Jeśli wejdziemy do konkretnego nagłówka i edytujemy go, to możemy zobaczyć, że te

0:20wartości rzeczywiście są nadane i SID jest tutaj stworzony w ramach

0:25dwukropka 3 7.5, natomiast Time height jest ustawione na 1.25.

0:29Ponadto jednostki marginesów również są ustawione w ramach.

0:34Mamy tutaj 1m marginesu na dole.

0:36Co to znaczy tak naprawdę?

0:39Żeby to zrozumieć, musimy cofnąć się do body naszego dokumentu.

0:42Jeśli wejdę do nawigatora i zaznaczę body.

0:45To możemy sprawdzić tutaj domyślny taki base font size.

0:49Dla całego dokumentu jest to 1.

0:52No i co to tak naprawdę znaczy 1?

0:54Odnosi się to bezpośrednio do wielkości

0:56tekstu, który ustawiony jest jako domyślny w przeglądarce.

1:00Nowoczesne przeglądarki mają ustawiony rozmiar 16 pikseli jako domyślny.

1:05W związku z tym 1 równa się w system 16

1:09pikseli i taką wartość, taką zależność można przyjąć.

1:13W związku z tym tutaj mamy odpowiednio przeliczone

1:15jednostki na remis, czyli 38 pikseli to będzie 2 375.

1:20A dlaczego?

1:21Dlatego, że gdybyśmy skalkulowane to i podzielili 38 na 16, który jest domyślną

1:27wielkością funta, to wyjdzie nam właśnie 2.

1:313 7.5.

1:32I teraz jak przeliczyć sobie takie

1:34jednostki jeśli pracujemy w filmie, skeczu czy xD na jednostkach w pikselach?

1:39Bo projektujemy w skali 1 no i mamy wtedy rozmiar 38.

1:44Jak to sobie łatwo przeliczyć, żeby nie używać kalkulatora?

1:47Otóż jest kilka rozwiązań.

1:49Jednym z nich jest strona Pixel kalkulator i jako bazę, czyli ten

1:54podstawowy rozmiar mamy tutaj w pikselach 16 i to zostawiamy.

1:59Natomiast teraz pytanie na jakie

2:02rozmiary chcemy to przekształcić i możemy po przecinku podać wszystkie rozmiary,

2:06które znajdują się w naszym dokumencie, w firmie czy w x D w pikselach

2:10i wtedy kliknąć taki lajt i nam to ładnie wyliczy.

2:12Czyli przykładowo 16 pikseli to będzie 1, czyli bez 32 piksele to będą dwa kremy.

2:19A wszystko pośrodku mamy ładnie wyliczone.

2:21Jeśli więc masz jakieś inne rozmiary w Twoim dokumencie, wystarczy, że je tutaj

2:25wpiszesz i będziesz miał przekalkulować całą tą tablicę, dzięki czemu będziesz

2:31mógł te odpowiednie rozmiary już w ramach przełożyć np.

2:34na właściwe nagłówki.

2:36Jeśli wyjdzie Ci z kalkulacji, że ten

2:38nagłówek powinien mieć 32 piksele, to 32 akurat łatwo policzyć 16 razy, 2 to

2:43jest 32, więc to będą 2, ale jeśli będzie to 17

2:47to skorzystasz z tej tabeli i zobaczysz ile to jest 17 pikseli.

2:51Jeśli by to było akurat trzeba było je dopisać.

2:54Czyli tutaj trzeba by było wpisać jeszcze

2:5717 pikseli, wybrać całkowite i mamy 17 pikseli to 1 kropka 0.6 3cm a

3:03i taką wielkość użył byś jako wielkość nagłówków.

3:07Dlaczego w ogóle korzystamy z memów?

3:09Przede wszystkim dlatego, aby nasza typografia była responsywna.

3:12To, że zarówno marginesy, jak i wielkości fontów i linie są określone w ramach

3:17determinuje to, że cały font i wszystko dookoła niego jest elastyczne.

3:22To znaczy, że jeśli zmienili byśmy ten

3:25base font size 16 pikseli domyślnych dla przeglądarki np.

3:31na 32, to wtedy automatycznie powiększymy

3:34dwa razy wszystkie fonty na naszej stronie.

3:36Kiedy może się to przydawać?

3:38Zwłaszcza w przypadku tak zwanej responsywnej typografii?

3:41To znaczy, że dla tabletu czy telefonu ten

3:45największy nagłówek mógłby być odrobinę za duży.

3:47W związku z tym chcielibyśmy trochę go zmniejszyć, np.

3:51na telefonie w widoku Landscape.

3:53Chcielibyśmy, żeby ten nagłówek nie miał 38 pikseli, tylko np.

3:5834 czy 33.

4:00I w takiej sytuacji możemy zostawić wartości w ramach.

4:04Czyli ten nagłówek cały czas będzie miał 2 kropka 7 5 rema,

4:09ale sam bass font size zmienimy na odrobinę mniejszy niż 16, czyli te 2

4:15kropka 3, 7 5 rema będzie liczone nie od 16, a np.

4:20od 14 pikseli.

4:22Gdybyśmy chcieli to przeliczać, to okaże się, że licząc od np.

4:2614 pikseli zamiast 16 jako base font size

4:29i mnożąc to przez 2 375 a mamy rozmiar 33 piksele, a nie tak jak wcześniej 38.

4:38To samo będzie z marginesem,

4:40ponieważ jeśli mamy 1.25 no i 1.25 pomnożymy razy 14 to będzie to oczywiście

4:47mniejsza wartość niż 1.25 pomnożone razy 16.

4:51Stąd naszą strategią jest możliwość zmiany tego podstawowego base font size i wtedy

4:56automatycznie, jako że jednostki są do niego relatywne.

4:59Będziemy mieli treści mniejsze czy większe.

5:02Gdybyśmy zachowali sztywne wartości w

5:03pikselach, na przykład 38, to to, że byśmy zmienił na 14 czy 16 nie miałoby żadnego

5:10znaczenia, ponieważ są to jednostki absolutne.

5:12Jeśli powiemy TV, że chcemy mieć 38 pikseli, to będzie to zawsze 38 pikseli.

5:18Natomiast 1 25 jest liczone do bazy.

5:20I teraz gdzie jest ta baza?

5:22Baza znajduje się w takiej sekcji Custom Cold.

5:25Ta sekcja custom kod musi być na każdej stronie i jeśli do niej wejdziemy, to są

5:30tutaj przydatne skrypty, które pomagają działać framework owi.

5:34Są one naprawdę proste, więc można sobie wszystkie przeklikać i obejrzeć.

5:37Na przykład znajduje się tutaj responsive typografii MBT.

5:40Jeśli przejdziemy do ustawień, a następnie

5:42otworzymy edytor, to zobaczymy, że właśnie tutaj jest ustalony nasz base font size.

5:47Czyli to jest podstawowa jednostka.

5:50I tak przy okazji, jeśli zdecydowalibyśmy,

5:52że chcemy również w widoku desktopowe mieć np.

5:55większe fonty odrobinę, to moglibyśmy

5:58spokojnie to zrobić właśnie ustawiając większy base font size.

6:02Nawet jeśli już zrobimy całą naszą stronę i klient np.

6:05chce, abyśmy trochę wszystko powiększyli,

6:07to możemy zrobić to również dla bazowego break point.

6:11Następnie mamy break point table, czyli od 991 pikseli.

6:16I mamy ustawione

6:17na 15, czyli będziemy liczyć od odrobinę mniejszej bazy 15 razy dwa.

6:22Kropka 3, 7, 5.

6:23Będzie to trochę mniej niż 16.

6:25Czyli na tablecie już odrobinę zmniejszamy nasze nasze fonty.

6:30Teraz kolejna rzecz to jest Media Query, w

6:33którym mamy mobile landscape, którym aktualnie się znajduje.

6:36I tutaj już liczymy od bazy 14.

6:38Więc te fonty są odpowiednio mniejsze.

6:40Zobaczcie co by się stało, gdybym zrobił tutaj jakąś drastyczną zmianę i np.

6:43z 14 zrobił 10.

6:45Zapisze bez zamykania.

6:46A Ty zobacz jak zmienią się wszystkie fonty.

6:49W tym momencie wszystkie fonty nam się zmniejszyły.

6:52Ale dzięki temu, że zachowaliśmy tutaj proporcje w kontekście zarówno lite

6:56site jak i marginesów, no to cały układ strony będzie stabilny.

7:00Także wróćmy tutaj do 14.

7:02No i 13 mamy domyślnie w tym najmniejszym widoku telefonu i też możemy to zmienić.

7:07Naturalnie możesz robić swoje własne media query i adresować konkretne

7:10rozdzielczości, w których fonty mają się zmieniać.

7:13My uznaliśmy, że te trzy wartości są w porządku, aczkolwiek proszę pamiętać, że

7:17nie jest to uniwersalny sposób, bo zależy też od tego, jakiego font dobierzesz.

7:21Niektóre fonty mogą być troszkę mniejsze, niektóre trochę większe, jak również.

7:26Jakiego typu stronę robisz i dla kogo ją robisz?

7:28Jeśli przykładowo strona jest przeznaczona dla osób starszych, to możliwe, że warto

7:33ten base break point dla mobilny też powiększyć i zrobić np.

7:3715 czy nawet 16 pikseli po to, żeby fonty

7:40było odpowiednio większe i bardziej czytelne.

7:42Także nie sugeruj się proszę tymi konkretnymi ustawieniami, a raczej spróbuj

7:46zadecydować co będzie najlepsze dla Twoich użytkowników.

7:49Jednak takie podejście i użycie kremów

7:51jako jednostek kreatywnych odnoszących się do tej podstawy Base 16 pikseli

7:56pozwala nam właśnie w ten sposób zarządzać wielkością wszystkich fontów na stronie z

8:00poziomu jednego miejsca, którym jest ten custom MBT i responsive typografii.

8:05Mam nadzieję, że to lepiej obrazuje nasze podejście do fontów i typografii.

8:09No i oczywiście dzięki temu te fonty są bardziej elastyczne.

8:12Czy jest to korzystne z punktu widzenia accessibility?

8:15Jak najbardziej, bo możemy manipulować tym base font size.

8:18Natomiast pixele szczerze mówiąc nie są też wcale gorsze.

8:21Po prostu nie mamy tej możliwości zmiany

8:24jednym parametrem wszystkich fontów na stronie.

8:26I to tyle.

8:27Natomiast z punktu widzenia accessibility dalej można powiedzieć, że piksele również

8:32są bezpieczną jednostką, jeśli chodzi o typografię.

8:35No i jeżeli chcesz, możesz oczywiście

8:37przemieszać różne wartości i nie musisz korzystać z naszego frameworka.

8:40Jest to tylko jakaś wytyczna.

8:42Natomiast Ty możesz stwierdzić, że chcesz

8:44jednak ustalić wielkości fontów w pikselach i nikt Ci tego nie zabrania.

8:48Możesz przerobić nasze wartości na wartości w pikselach np.

8:51referencyjnych, które mamy lub je zmienić

8:53i odpowiednio zrobić sobie referencję do swoich rozmiarów.

8:56Pamiętaj, że jeśli będziesz zmieniał sekcje typografii, czyli zmieniał

9:00konkretne nagłówki, warto tutaj zaktualizować te wartości.

9:03My nie jesteśmy w stanie tego robić dynamicznie, przynajmniej na razie.

9:06Warto tutaj sobie zmienić po prostu na te wartości, zwłaszcza jeśli później będziesz

9:09publikować dokumentację i będzie ona dostępna również dla innych osób.

9:13To wszystko jeśli chodzi o skalowanie.

9:15No i mogę jeszcze pokazać Ci, jak to wygląda w takim praktycznym projekcie.

9:19Mamy typografię desktopową, która jest dosyć duża.

9:22Natomiast jeśli przejdziemy do widoku mobilnego np.

9:27to zobaczysz, że ten tekst jest znacznie

9:28mniejszy na przykład w tej recenzji niż tutaj.

9:32No i właśnie wynika to z tego, że

9:33odpowiednio ustawiona jest ta sekcja custom cut i responsive typografii.

9:38Tutaj akurat zdecydowaliśmy, że dla tego mobile portret zastosujemy również 14, a

9:42nie 13 pikseli, bo 13 było troszeczkę za małe.

9:46Więc tak wyglądają ustawienia tekstu jeśli chodzi o jednostki.

9:49Mam nadzieję, że jest to jasne i pomoże Ci w Twojej pracy System Flow.