Fonty marki vsqool i zasady ich używania.
Uwaga: sekcja wymaga potwierdzenia z osobą odpowiedzialną za projekt strony. Poniżej szablon do uzupełnienia konkretnych nazw fontów używanych na vsqool.pl.
[NAZWA FONTU — np. Inter / Manrope / DM Sans]
Używany w nagłówkach, tekście podstawowym, UI.
- Źródło: [Google Fonts / Adobe Fonts / własny]
- Licencja: [SIL Open Font License / Adobe / inna]
- Pobierz: [link]
| Waga | Wartość | Zastosowanie |
|---|---|---|
| Regular | 400 | Tekst podstawowy, paragrafy |
| Medium | 500 | Wyróżnione fragmenty, podtytuły |
| Semibold | 600 | Mniejsze nagłówki, przyciski |
| Bold | 700 | Główne nagłówki, hero, ważne CTA |
| Element | Rozmiar | Line-height | Waga |
|---|---|---|---|
| Hero (H1) | 56-72px | 1.1 | 700 |
| Section (H2) | 36-48px | 1.2 | 700 |
| Subsection (H3) | 24-28px | 1.3 | 600 |
| Body large | 18-20px | 1.6 | 400 |
| Body | 16px | 1.6 | 400 |
| Small | 14px | 1.5 | 400 |
| Caption | 12px | 1.4 | 500 |
[NAZWA — np. JetBrains Mono / Fira Code / IBM Plex Mono]
Używany w blokach kodu, fragmentach danych, dashboardach gdzie liczby muszą się wyrównywać kolumnowo.
✅ Maks. 2 fonty na materiał — sans-serif + monospace dla danych
✅ Liczby w danych zawsze monospace lub tabular-nums — żeby kolumny się wyrównywały
✅ Język: treści po polsku — sprawdź czy font ma pełne wsparcie polskich znaków (ą, ę, ł, ó, ś, ź, ż)
❌ Nie mieszaj wielu wag w jednym akapicie
❌ Nie używaj fontów dekoracyjnych (Comic Sans, fancy script) — vsqool to marka B2B, profesjonalna
❌ Nie justuj tekstu w długich akapitach — używaj wyrównania do lewej
<!-- Przykład dla Inter z Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-variant-numeric: tabular-nums;
}