Czcionki

Czcionki, których używa canva.com

canva.com składa nagłówki i tekst w czcionce Canva Sans. Canva Sans to licencjonowana czcionka, którą strona serwuje sama. Najbliższy darmowy zamiennik z Google Fonts: Inter.

Zmierzono na canva.com 4 dni temu.

Rodziny czcionek

Czcionki: 1
Canva Sans
Użycie
h1, h2, h3, body, button
Źródło
Własny hosting
Darmowy zamiennik
Inter

CSS do odtworzenia

Zmienne czcionek z darmowym zamiennikiem w stosie, więc ten sam CSS działa z licencjonowaną czcionką i bez niej.

:root {
  --font-heading: "Canva Sans", "Inter", sans-serif; /* Inter stands in for Canva Sans */
  --font-body: "Canva Sans", "Inter", sans-serif; /* Inter stands in for Canva Sans */
  --font-size-base: 18px;
}

Jak składany jest tekst

headline-displayQuick brown foxCanva Sans / 84px / 400 / lh 89.04px / -1.5px
headline-lgQuick brown foxCanva Sans / 56px / 400 / lh 61.6px / -0.56px
headline-mdQuick brown foxCanva Sans / 28px / 500 / lh 35px / -0.28px
body-mdThe quick brown fox jumps over the lazy dogCanva Sans / 18px / 400 / lh 25.2px
label-mdThe quick brown fox jumps over the lazy dogCanva Sans / 13px / 400 / lh 1.4
buttonThe quick brown fox jumps over the lazy dogCanva Sans / 14px / 600 / lh 22px
Używane rozmiary czcionek
1013141624283264

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

curl -s https://stylepack.ai/packs/canva.com/DESIGN.md

Pytania

Jakiej czcionki używa canva.com?

canva.com używa Canva Sans. Nagłówki są złożone w czcionce Canva Sans, a tekst w czcionce Canva Sans; zmierzono to na stronie tak, jak się renderuje, a nie odczytano z jej arkusza stylów.

Czy czcionka canva.com jest darmowa?

Nie. Canva Sans to licencjonowana czcionka, którą canva.com serwuje sam. Najbliższy darmowy zamiennik to Inter, dostępny w Google Fonts. CSS na tej stronie wstawia go do stosu czcionek jako zastępstwo.

Jak uzyskać w projekcie taką samą typografię jak canva.com?

Pobierz pakiet designu canva.com ze Stylepack: zawiera stos czcionek, skalę typograficzną, każdy styl tekstu i zrzuty ekranu w formie, z której agent AI do kodowania, taki jak Claude Code czy Cursor, może budować.