5/5/2022 ∙ 5 minut czytania

Jak dorzucić do strony font?

Ten etap tworzenia strony dla wielu osób zapewne będzie oczywisty, ale skoro opisuję każdy krok to postanowiłem, że napiszę bardzo krótkiego posta na temat tego w jaki sposób dobierać fonty na stronę oraz jak je zaimplementować.

Mały disclaimer - font czy czcionka?

Według słownika języka polskiego:

Czcionka

«prostopadłościan z odwróconą literą lub znakiem drukarskim, dającymi w druku odbitkę tej litery lub znaku»

«kształt i wielkość liter w druku»

Font:

«rodzaj pisma dla komputera lub drukarki»

grammar-nazzi

Oczywiście w praktyce można tych słów używać wymiennie i często się tak robi, ale uznałem, że warto podzielić się tą wiedzą i znać różnice.

Jak dobrać odpowiednie czcionki fonty?

Dobór odpowiednich fontów na stronie to jedna z najważniejszych rzeczy jaką trzeba zrobić. Szczególnie gdy tworzymy bloga. Dzięki temu nasza treść staje się bardziej atrakcyjna dla czytelników.

Najważniejszy font na stronie, który będzie na niej pojawiać się przez 95% czasu to font sans serif. Przy wyborze dobrego fonta bez szeryfowego warto zwrócić uwagę na kilka rzeczy:

Należy zwrócić uwagę na języki w jakich będzie tworzona strona i wybrać taki font, który zawiera znaki specjalne występujące w danym języku. W przypadku tej stony, będą to: polski, angielski oraz hiszpański.
Czytelność - font musi być czytelny. Jeżeli chcemy przyciągnąć użytkowników do naszej strony i do czytania naszej treści, musimy wykorzystać font, który jest prosty do przyswojenia. Nie możemy wybierać fontów, które są nieczytelne

Na każdym blogu programistycznym pojawia się kod, więc warto wybrać font typu monospace. Przy wyborze tego typu fonta warto zwrócić uwagę między innymi na:

Czy font zawiera ligatury? Jest to połączenie dwóch lub więcej liter w jedną. Dla przykładu, w kodzie JS, w którym często pojawiają się 3 znaki =, możemy je połączyć i dzięki temu powstaje: ===; albo dla funkcji strzałkowej, zamiast oddzielnych znaków = oraz > można je połączyć w zgrabną strzałkę: =>.
Tutaj czytelność jest równie ważna. Czytanie kodu musi przebiegać jak najprościej. Liczą się nie tylko odpowiednio dobrane kolory, ale również dobrze dobrany font. Kod musi być czytelny.

Gdzie najlepiej dobierać fonty?

Najprostszym sposobem będzie wejście na stronę Google Fonts i posortowanie fontów po popularności.

Dla fontów typu sans, w pole do testowania tekstu, możemy wpisać zdanie / wyrażenie, które zawiera wszystkie znaki specjalne / diakrytyczne w danym języku. Dla języka polskiego mogą to być zdania:

zażółć gęślą jaźń
Pójdźże, kiń tę chmurność w głąb flaszy
Pchnąć w tę łódź jeża lub ośm skrzyń fig

Dla języka hiszpańskiego:

Whisky bueno: ¡excitad mi frágil pequeña vejez!
Extraño pan de col y kiwi se quemó bajo fugaz vaho
Quiere la boca exhausta vid, kiwi, piña y fugaz jamón
Jovencillo emponzoñado de whisky: ¡qué figurota exhibe!

dzięki temu możemy sprawdzić czy znaki dla wybranego fonta, znaki specjalne renderują się prawidłowo.

To samo możemy zrobić dla fontów typu mono, wpisując = oraz > aby sprawdzić, czy dany font ma wbudowane ligatury.

Kiedy wybraliśmy już interesujące nas fonty, należy wybrać style, którymi będziemy posługiwać się na stronie. Nie należy wybierać wszystkich styli, ponieważ wydłuża to czas ładowania strony.

Wrzucanie fontów na stronę

Po wybraniu wszystkich fontów, po prawej stronie powinien pojawić się panel z podsumowaniem naszego wyboru. W zakładce Use on the web znajdziemy link do umieszczenia fontów na naszej stronie.

Wybieramy opcję <link>, kopiujemy zawartość pierwszego pola tekstowego i przechodzimy do kodu. W projekcie zbudowanym w Remix linki osadzamy w funkcji:

export const links: LinksFunction = () => {
  return [
    // tutaj obiekty z linkami
  ]
}

Fonty najlepiej osadzić w pliku wejściowym do pozostałych ścieżek, czyli w pliku root.tsx:

export const links: LinksFunction = () => {
  return [
    { rel: 'preconnect', href: 'href="https://fonts.googleapis.com' },
    {
      rel: 'preconnect',
      href: 'https://fonts.gstatic.com',
      crossOrigin: 'true',
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital@0;1&family=Lato:wght@400;500;700;900&display=swap',
    },
    // tutaj linki do pozostałych styli
    { rel: 'stylesheet', href: styles },
  ]
}

Analizując url do fontów, można wywnioskować jakie fonty zostały użyte na mojej stronie:

?family=JetBrains+Mono:ital@0;1&family=Lato:wght@400;500;700;900&display=swap

JetBrains Mono regular + wersja italic
Lato regular + wersje o grubości: 400, 500, 700 oraz 900

W ostatnim kroku należy użyć wcześniej załadowanych fontów. Dzięki tailwind nie trzeba za dużo główkować, wystarczy w pliku tailwind.config.js ustawić odpowiednie zmienne:

module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        mono: 'JetBrains Mono',
        serif: 'Lato',
      },
    },
  },
  // ...
}

To wszystko. Proces wyboru dobrych font'ów nadających odpowiedniego charakteru naszej strony jest na pewno dużo trudniejszy od ich faktycznego dodania. Fonty oczywiście możemy zmieniać w dowolnym momencie i dostosowywać wygląd naszej strony tak, żeby była jak najbardziej czytelna i skłaniała naszych czytelników do czytania wszystkich treści.

exit

Poniżej znajdziesz więcej postów, które mogą Cię zainteresować.

Podstawowe animacje 🎬InfoShare F3 📺