Marchio — scelta

Sei varianti del lockup.

Ogni variante abbina un simbolo e un trattamento tipografico specifico. Sono mostrate su crema, bianco e fondo scuro per confrontarle nel loro contesto reale.

La struttura del lockup resta comune: per adottare una variante basta applicare il relativo blocco CSS e il relativo file del simbolo.

Si possono anche provare direttamente sul sito: in testata, alla voce Logo, si cambia variante e la scelta resta memorizzata. Al momento il sito parte con V6.

V0 — Claim compatto

Usa il simbolo vettoriale M3-logo-2.svg. Il nome è a 24px · peso 600; il descrittore viene sostituito dal claim “Precisione. Cura. Vicinanza.” a 17px.

È la versione più compatta del lockup e privilegia il claim rispetto alla denominazione descrittiva.

Claim sotto i 18px
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su crema
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su bianco
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su scuro

HTML da tenere

copiato
<a href="#main" id="logo" class="logo-lockup" aria-label="M3 Studi Dentistici">
  <img src="M3-logo-2.svg" alt="" class="logo-icon" loading="eager">
  <span class="logo-text">
    <h3 class="logo-name">M3 Studi Dentistici</h3>
    <span class="logo-mini-deco">Odontoiatria e Implantologia</span>
  </span>
</a>

CSS da tenere

copiato
.logo-lockup{--logo-name-size:24px;--logo-mini-deco-size:14px;--logo-text-gap:0}
.logo-lockup .logo-icon{content:url("M3-logo-2.svg");width:43.5px;height:71px;transform:translateY(-2px)}
.logo-lockup .logo-name{font-family:"Noto Sans",sans-serif;font-weight:600;line-height:1.15;color:#1F4C73}
.logo-lockup .logo-mini-deco{display:none}
.logo-lockup .logo-mini-deco-alt{display:block;font:500 17px/1.1 var(--sans)}

V1 — Monogramma M3

Usa M3-logo-7.svg: le lettere M3 sono composte da circa 200 piccoli simboli — fiore, foglia, goccia, onda, croce, scudo, scintille e il nastro del marchio — tutti nello stesso blu navy #004b8d. Sotto, “Studi Dentistici” in Gudea #51657F, largo quanto M3: a questa dimensione equivale a un corpo di circa 19px.

Nell'HTML non serve testo: il logo è la sola immagine (125×90px). Nel file ogni simbolo è disegnato una volta sola e poi riusato con <use>; le lettere del descrittore sono tracciate, quindi il file non dipende da nessun font. I due elementi hanno un id (m3, studi-dentistici) per poterli ritoccare.

Rispetta il minimo di 18px
M3 Studi Dentistici su crema
M3 Studi Dentistici su bianco
M3 Studi Dentistici su scuro

HTML da tenere

copiato
<a href="#main" id="logo" class="logo-lockup" aria-label="M3 Studi Dentistici">
  <img src="M3-logo-7.svg" alt="" class="logo-icon" loading="eager">
</a>

CSS da tenere

copiato
.logo-lockup .logo-icon{content:url("M3-logo-7.svg");width:125px;height:90px}

V3 — Testo marcato

Usa M3-logo.svg. Il nome adotta il trattamento forte del sistema: 25px · peso 800 · tracking −.035em; il descrittore resta a 16px.

È la proposta più tipografica: il peso del nome dà al lockup una presenza netta e coerente con i titoli del sito.

Descrittore sotto i 18px
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su crema
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su bianco
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su scuro

HTML da tenere

copiato
<a href="#main" id="logo" class="logo-lockup" aria-label="M3 Studi Dentistici">
  <img src="M3-logo.svg" alt="" class="logo-icon" loading="eager">
  <span class="logo-text">
    <h3 class="logo-name">M3 Studi Dentistici</h3>
    <span class="logo-mini-deco">Odontoiatria e Implantologia</span>
  </span>
</a>

CSS da tenere

copiato
.logo-lockup{--logo-name-size:25px;--logo-mini-deco-size:16px;--logo-text-gap:3px}
.logo-lockup .logo-name{font-weight:800;line-height:1.1;
  letter-spacing:-.035em;color:var(--navy)}
.logo-lockup .logo-mini-deco{font-weight:500;line-height:1.2;color:var(--muted)}

V4 — Marchio originale

Usa il PNG originale M3StudiDentistici-logo.png a 60px. Il nome è a 28px in peso 400 con line-height 1.25; il descrittore “Odontoiatria e Implantologia” è a 19px.

È la versione di riferimento del marchio esistente: conserva il simbolo e la gerarchia tipografica originali, con una dimensione del segno più compatta.

Rispetta il minimo di 18px
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su crema
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su bianco
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su scuro

HTML da tenere

copiato
<a href="#main" id="logo" class="logo-lockup" aria-label="M3 Studi Dentistici">
  <img src="M3StudiDentistici-logo.png" alt="" class="logo-icon" loading="eager">
  <div class="logo-text">
    <h3 class="logo-name">M3 Studi Dentistici</h3>
    <span class="logo-mini-deco">Odontoiatria e Implantologia</span>
  </div>
</a>

CSS da tenere

copiato
.logo-lockup{--logo-name-size:28px;--logo-mini-deco-size:19px;--logo-text-gap:2px}
.logo-lockup .logo-icon{content:url("M3StudiDentistici-logo.png");width:60px;height:60px}
.logo-lockup .logo-name{font-weight:400;line-height:1.25;
  letter-spacing:-1px;color:#1F4C73}
.logo-lockup .logo-mini-deco{font-weight:400;line-height:1.2;color:var(--muted)}

V5 — Mosaico blu

Parte dalla tipografia di V3 — nome a 25px · peso 800 e descrittore a 16px — e sostituisce il simbolo con il nuovo mosaico M3-logo-4.svg.

Il nuovo segno è composto solo dai rombi blu della versione fornita, senza sfondo; mantiene quindi l'impronta tipografica marcata di V3 con un simbolo più leggero e geometrico.

Descrittore sotto i 18px
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su crema
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su bianco
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su scuro

CSS da tenere

copiato
.logo-lockup{--logo-name-size:25px;--logo-mini-deco-size:16px;--logo-text-gap:3px}
.logo-lockup .logo-icon{content:url("M3-logo-4.svg");width:32px;height:65px}
.logo-lockup .logo-name{font-weight:800;line-height:1.1;letter-spacing:-.035em;color:#77d8a3}
.logo-lockup .logo-mini-deco{font-weight:500;line-height:1.2;color:#01498a}

V6 — M3 in alto default

Parte da V5 — nome in verde menta #77d8a3 — ma il nome si divide su due righe: M3 in alto a 43px · peso 800 e Studi Dentistici sotto a 16px, nel blu navy del mosaico #004b8d; il descrittore “Odontoiatria e Implantologia” non compare.

Il simbolo è M3-logo-5.svg (45×86px): il mosaico di V5 in cui un rombo diventa una piccola croce in rilievo, verde come il nome (#77d8a3) e con i fianchi che sfumano verso un verde più scuro — un richiamo discreto all'ambito medico, senza arrivare a un dente.

Le due righe sono ravvicinate e il blocco resta centrato in verticale rispetto al simbolo.

Seconda riga sotto i 18px
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su crema
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su bianco
M3 Studi DentisticiOdontoiatria e ImplantologiaPrecisione. Cura. Vicinanza. su scuro

HTML da tenere

copiato
<a href="#main" id="logo" class="logo-lockup" aria-label="M3 Studi Dentistici">
  <img src="M3-logo-5.svg" alt="" class="logo-icon" loading="eager">
  <span class="logo-text">
    <strong class="logo-name">M3<span class="logo-name__rest"> Studi Dentistici</span></strong>
  </span>
</a>

CSS da tenere

copiato
.logo-lockup{--logo-name-size:28px;--logo-mini-deco-size:16px}
.logo-lockup .logo-icon{content:url("M3-logo-5.svg");width:45px;height:86px}
.logo-lockup .logo-name{font-weight:800;line-height:1.1;letter-spacing:-.035em;color:#77d8a3;font-size:43px}
.logo-lockup .logo-name__rest{display:block;margin-top:-3px;font-size:var(--logo-mini-deco-size);font-weight:700;line-height:1.2;letter-spacing:normal;color:#004b8d}

Distanza e dimensione, indipendenti

Il PNG del marchio ha del vuoto trasparente dentro il proprio riquadro: misurato sul file, 13,24% a sinistra e 12,28% a destra. A 63px sono 8,3px e 7,7px che non si vedono ma occupano spazio. Con gap:13px la distanza reale fra il cerchio e il testo era quindi circa 21px: è quello il "troppo spazio".

Adesso il CSS sottrae quel vuoto, quindi --logo-gap vuol dire davvero la distanza che si vede, e cambiare --logo-size non la tocca. Prova i due slider qui sotto: agiscono su tutte le varianti della pagina in una volta.

/* assets/site-def.css, blocco :root */
--logo-size:63px;   /* dimensione del segno  */
--logo-gap:10px;    /* distanza VISIBILE segno -> testo */
10px
63px
Trovato il valore giusto, riportalo in :root di assets/site-def.css.