Dostosowanie czcionki do własnych potrzeb

by Sandra Wyzujak

Celem tego artykułu jest pokazanie na przykładzie pewnego problemu jak można edytować czcionkę we własnym zakresie. Umiejętność ta może przydać się np. programistom jak i zarówno grafikom.


Zapewne jeśli spytać różnych osób co wpływa na pierwsze wrażenie podczas korzystania z aplikacji moglibyśmy usłyszeć różne odpowiedzi takie jak: logo, pozycjonowanie elementów, wideo wprowadzające, przyjemna kolorystyka itd. Jednak ja zwracam uwagę na inną rzecz – na zastosowaną czcionkę. Uważam, że dobrze dobrana i ładna czcionka potrafi stworzyć dobre wrażenie. Nie jestem też jedynym, który tak uważa. Steve Jobs w mowie wygłoszonej w 2005r. powiedział:

„(…) To był pierwszy komputer z piękną czcionką. Gdybym nie zapisał się na tamten kurs jako wolny słuchacz, Mac nie miałby tylu krojów czcionek ani proporcjonalnych odstępów. (…)”

Przypomnijmy sobie teraz jak wygląda cała typografia w ekosystemie Apple. Dokładna ocena tej typografii to kwestia gustu, ale nie wydaje mi się, że można powiedzieć by była po prostu brzydka.

Oczywiście każdej osobie podoba się inna czcionka. Może to wynikać z np. gustu, przyzwyczajeń czy chociażby tego, że widzi w swojej okolicy napisy w pewnym kroju pisma, a nie w innym. Często też mamy skojarzenia, z zastosowaniem danej czcionki np.

  • konkretna aplikacja
  • memy
  • loga firm
  • znaki drogowe.

Powiedzmy teraz, że chcemy zmienić czcionkę w aplikacji nad którą teraz pracujemy. Mogliśmy na przykład szukać czcionki na stronie Google Fonts, gdzie są one dostępne za darmo, dobrej jakości oraz z open source’ową licencją. Następnie załóżmy, że spodobała nam się czcionka Catamaran. Pobraliśmy ją, osadziliśmy i może nam się zdawać że coś jest nie tak…

Dla zobrazowania pewnych rzeczy dodajmy parę pomocniczych linii:

– czerwona linia – linia wersalików (ang. cap line)
– niebieska linia – linia pisma (ang. base line)
– zielona linia – linia pokazująca wysokość cyfry „1”

Zatem teraz już dosadnie widzimy, że dla liter jest wszystko w porządku, ale cyfry nie trzymają wspólnej linii pisma i nie mają takiej samej wysokości.  Czy to problem? Dla niektórych tak, dla innych nie. Jednak moim zdaniem jeśli mamy w aplikacji dużo cyfr i nasza aplikacja zalicza się do grupy aplikacji biznesowych to nie wygląda to dobrze.

Dwa drobne wtrącenia, aby odpowiedzieć na pytania, które niektórym mogą się teraz nasuwać czyli:

  1. Czy to błąd, czy może to specjalny zabieg twórcy?

Najbardziej sensowną odpowiedź możemy znaleźć w dyskusji na Reddit pod adresem: https://www.reddit.com/r/typography/comments/4lsd7j/why_do_some_fonts_have_numbers_that_are_different/

W skrócie – tak to jest specjalny zabieg. Takiej czcionki powinniśmy używać w tytułach czy nagłówkach. Jest to obecnie rzadziej występujący w użyciu typ.

2. Dlaczego poruszam ten temat?

Temat pierwszy raz napotkałem parę lat temu podczas pracy ze specyficzną czcionką pewnego klienta. Nie mniej jednak wspomnienia wróciły po ostatniej aktualizacji interfejsu w serwisie twitch.tv. Na najważniejszym widoku aplikacji (czyli widoku gdzie ogląda się transmisje) możemy zobaczyć coś takiego:

Wracając do tematu – co możemy zatem zrobić jeśli mimo wszystko bardzo podoba nam się taki krój pisma?

Możemy spróbować „naprawić” (wyedytować) taką czcionkę. (Oczywiście o ile licencja nam na to pozwala). Przykładowa czcionka Catamaran ma licencje OFL, więc zgodnie z nią możemy ją modyfikować. Do tego celu możemy wykorzystać program FontForge (https://fontforge.org/). Po jego pobraniu i instalacji otwórzmy nasz plik z czcionką.

Po otwarciu ujrzymy wszystkie znaki, które są dostępne w danym pliku. Przyjrzyjmy się dokładnie cyfrom:

Zgodnie z tym co widzieliśmy wcześniej niektóre znaki są poniżej linii pisma. Niestety nie jesteśmy w stanie łatwo zaznaczyć znaków do poprawy i ustawić dla nich właściwych parametrów więc musimy ręcznie każdą cyfrę poprawić. Musimy zapewnić dwie rzeczy czyli:

– każda cyfra musi leżeć dokładnie na linii pisma (base line)
– każda cyfra musi mieć dokładnie taką samą wysokość

Załóżmy zatem, że chcemy aby każda cyfra miała wysokość cyfry „8”. Wchodzimy w dokładny widok podglądu znaku klikając podwójnie na ten znak.

Patrząc na ten znak możemy przypuszczać, że zaznaczona przeze mnie na żółto linia będzie linią pisma, a ta cyfra jest przesunięta w dół. Porównajmy zatem to do niektórych liter np. do dużego H i do dużego D.

Litery leżą dokładnie na tej linii. Sprawdźmy zatem jaka jest współrzędna tej linii na podstawie dużej litery H.

Nasza linia leży dokładnie na współrzędnej Y = 0.

Wróćmy zatem do cyfry „8” i ustawmy ją dokładnie na współrzędnej Y = 0. Kliknijmy dwukrotnie na nią. Sprawdźmy o ile musimy przesunąć cyfrę do góry. Najedźmy zatem kursorem na najniższy punkt na kształtcie.

Czyli cyfra „8” leży teraz na Y = -13, a chcemy aby leżała na linii Y = 0 czyli musimy ją przetransformować do oczekiwanej postaci. Moglibyśmy wziąć chwycić i przesunąć jednak taka operacja mogła by być nie dokładna. Zróbmy to przy wykorzystaniu opcji transformacji. W okienku wybierzmy z górnego menu opcje Element -> Transformations -> Transform. Pojawi się nowe okienko, w którym wybierzmy, że chcemy wybrać operację przesunięcia („Move”) o Y = 13 i kliknijmy „Apply”, aby zobaczyć zmiany, a potem „OK”, aby je zatwierdzić.

Nasza liczba leży teraz na właściwej linii, zgodnie z założeniem, że chcemy, aby wszystkie liczby były tak samo wysokie jak ta cyfra odczytajmy jej wysokość.

Zatem chcemy, aby pozostałe cyfry miały wysokość 656.

Przejdźmy teraz do przykładu cyfry, która ani nie leżała na linii pisma, ani nie miała odpowiedniej wysokości czyli np. „4”.

Widzimy zatem, że znak zaczyna się na Y = -69, a kończy się na Y = 571 co również oznacza, że ma wysokość 640. Chcemy natomiast, aby znak zaczynał się na Y = 0 i miał wysokość 656 czyli musimy zrobić dwie rzeczy:

– przesunąć znak o 69 w górę
– powiększyć go o 16

Niestety program nie pozwala na zwiększenie znaku o 16 jednostek tylko o procent zatem przeliczmy to na procent – 656/640 = 1.025 czyli 102.5 %

Przed tym jak wprowadzimy nasze powyższe założenia do okna transformacji musimy zdecydować się jeszcze na jedną opcję czyli czy chcemy zwiększyć (skalować) znak jednolicie (równocześnie wobec osi X, jak i osi Y) czy tylko wobec osi Y (czyli tylko na wysokość). Wydaje mi się, że jest to kwestia indywidualna, ale w tym przypadku wybierzemy opcję skalowania jednolitego.

Wybieramy te wartości w okienku, klikamy „Apply”, aby podejrzeć zmiany i …

… coś jeszcze nie tak. Wynika to z faktu że skalujemy oraz przesuwamy potem znak, więc w przypadku przesunięcia musielibyśmy obliczyć wartość już po skalowaniu. Wydaje się zatem że łatwiej będzie rozbić tę operację na dwie czyli najpierw przeskalować, potem sprawdzić o ile przesunąć znak i wtedy go przesunąć w tym przypadku zamiast 69 będzie to 70.724609 jednostki.

Po wprowadzeniu tej wartości i zatwierdzeniu operacji będziemy mieli idealnie położony znak.

Analogicznie (i niestety ręcznie) musimy teraz postąpić z pozostałymi cyframi.

Podsumowując celem tego artykułu było wprowadzenie do edycji czcionki w przypadku, który może spotkać osoby zajmujące się programowaniem aplikacji, w jakich nie mamy z góry narzuconych systemowo czcionek. Trzeba natomiast pamiętać, że wykorzystywany program FontForge ma dużo większe możliwości, a sama typografia jest na tyle rozległą dziedziną, że samodzielne stworzenie czcionki może być np. tematem pracy pracy magisterskiej na niektórych kierunkach studiów.


Adam, Senior JavaScript Developer

Pisał aplikacje dla biznesu w React, zanim większość programistów o nim słyszała. Wyznaje zasadę: „Done is better than perfect” (oczywiście z sensownie, dobrze ustawioną definition of done). Hobbysta.