Família i pesos carregats
Saber quines variants necessites, no només el nom
Tipografia
Quina font fa servir una web, amb la llicència i l’escala
Smart Design Inspector mostra quines fonts fa servir una web, els seus pesos, d’on es carreguen (Google Fonts, Adobe Fonts o el mateix servidor), la seva llicència i l’escala tipogràfica de la pàgina: cada estil amb mida, pes i interlineat.
Fonts, origen, llicència i escala: gratis per sempre
Fonts · yourclient.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 cursiva · 700Google FontsOFL
- JetBrains Mono400PròpiaOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Cos16 px · 300 · 1,55
- Botó15 px · 500 · 1
01
Com saber quina font fa servir una web
3 passos- 01
Instal·la Smart Design Inspector i obre la web.
- 02
Prem la icona i tria Fonts.
- 03
Veus la llista de famílies amb els seus pesos i el seu origen. Passa el ratolí per un text per veure’n l’estil exacte.
Sense extensió
Sense extensió també es pot fer: clic dret sobre el text, Inspecciona i busca font-family al panell d’estils. El problema és que font-family diu la font que es va demanar, no si es va carregar, d’on ve ni quina llicència té.
02
Prova-ho en aquesta pàgina
Sense instal·larUna web d’exemple i el panell de fonts, sense instal·lar res. Passa el ratolí per un text, o tria’l a la llista, i veuràs la família, el pes, la mida, l’interlineat, l’origen i la llicència.
Tria un element
Smart Design Inspector · Fontsh1.hero-title
- Família
- —
- Pes
- —
- Estil
- —
- Mida
- —
- Interlineat
- —
- Espaiat
- —
- Origen
- —
- Llicència
- —
Famílies de la pàgina
—
Web d’exemple · els valors es llegeixen d’aquesta pàgina
03
Més que el nom de la font
4 dadesOrigen: Google Fonts, Adobe Fonts o pròpia
Saber si la pots fer servir gratis o si l’has de comprar
Llicència
Les de Google Fonts són OFL. En les altres es llegeix la llicència que declara el mateix fitxer
Escala tipogràfica
D’H1 a H6, cos i botons amb mida, pes, interlineat i espaiat
L’escala és el que necessites per replicar l’estil, i les extensions de fonts miren lletra a lletra. Amb la Pro l’exportes a Tailwind o a variables CSS: extreure el sistema de disseny.
| Gratis0 €per sempre | Pro49 €pagament únic | |
|---|---|---|
| Fonts de la pàgina: família, pesos, mides, origen i llicència | ||
| Escala tipogràfica: cada estil de text amb font, mida, pes, interlineat i espaiat | ||
| Exportar els estils tipogràfics a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md | — | Accés anticipat gratuït |
05
El que no fa
LímitsNo descarrega fonts de pagament. T’ensenya la llicència i on aconseguir-les. Si la font té llicència lliure, la pots descarregar. Tampoc no identifica fonts a partir d’una imatge: per a això hi ha eines com WhatTheFont.
És gratis?
Sí. Veure les fonts, el seu origen, la seva llicència i l’escala és gratis per sempre.
Detecta fonts d’Adobe Fonts?
Sí. Detecta les que es carreguen des d’Adobe per l’adreça d’on vénen.
I si la web fa servir una font del sistema?
L’extensió indica que no es carrega cap font web i mostra la família declarada.
Puc fer servir la font que trobi?
Depèn de la seva llicència. Les de Google Fonts es poden fer servir en qualsevol projecte. Les comercials s’han de comprar encara que una altra web les faci servir.
Funciona amb text dins d’imatges?
No. Llegeix el text de la pàgina, no el que hi ha dins d’una imatge.
En quins navegadors i sistemes funciona?
A Chrome, Edge, Brave, Arc, Opera i Vivaldi, a Windows, Mac i Linux, des de la 1.0. Funciona igual a tots perquè l’extensió l’executa el navegador, no el sistema. El codi està preparat per portar-la a Firefox i Safari sense reescriure-la. Mentre està en desenvolupament, hi pot haver canvis.
07
Continua amb
Funcions properesColors
La paleta de la pàgina, comptagotes i contrast WCAG de cada parella de text i fons.
Colors d’una web →Sistema de disseny
Colors, espaiats i tipografia a Tailwind v4 @theme, variables CSS o DESIGN_SPECS.md.
Extreure el sistema de disseny →Inspector CSS
Passa el ratolí i veuràs el CSS calculat, la caixa, els marges i les distàncies.
Inspector CSS →Llista d’espera
Sigues dels primers a provar-lo
Smart Design Inspector està en desenvolupament. Deixa’ns el teu correu i t’avisarem el dia que surti a la Chrome Web Store, amb les 7 funcions Pro gratuïtes en accés anticipat.
Un correu el dia del llançament i pocs més · Baixa amb un clic