R23 Typography

Font family

Il redesign R23 prevede unicamente il font Halifax. (Vedi \FerragamoR17SAS\css\Custom\r17\src\base\fonts.less e @font-regular-r19 in \variables.less).

Nel caso sia necessario è possibile usare il mixin .fontRegularR19() per forzare il font in un determinato contesto css.

Nota: sebbene il font-face sia unico (per regular titoli, semibold, bold e italic), sono state lasciati i seguenti mixin per retrocompatibilità: .fontSemiboldR19(), .fontTitleR19().

Font styles

Per definire lo stile del font usare i seguenti mixin o le relative classi di utility (.regular, .bold, .italic):

.Regular()
.Bold()
.Italic()

Nota: per retrocompatibilità è stato lasciato anche il mixin .Semibold() (.semibold), che di fatto equivale a .Bold().

Type sizes

Per definire le dimensioni del testo (font-size, line-height, letter-spacing) usare i seguenti mixins: (Vedi \FerragamoR17SAS\css\Custom\r17\src\base\typography.less)

.typeSizeBig(): 24px/24px
.typeSizeDefault(): 18px/24px (applicato al body)
.typeSizePrimary(): 18px/21px
.typeSizeSecondary(): 15px/18px
.typeSizeSmall(): 12px/14px

Nota: l'attuale design non prevede dimensioni o stili differenti per i titoli (es: H1, H2 etc) che useranno .fontRegularR19() e .typeSizeDefault(), come il body.

Link mixin

Per applicare gli stili da link (sottolineato nero, azzurro all'hover) ad un elemento usare il mixin .typeLink();

Text content

La classe .text-content denota un contenuto di tipo testuale (es: paragrafi con link) a cui viene già applicato .typeSizePrimary(), .typeLink() e margini verticali ai paragrafi.
Questo può tornare utile per il corpo principale della pagina (es: pagina About) o quando è presente un testo proveniente da Rich Text Editor.
Per modificare la dimensione del font sono disponibili i seguenti modifier:

.text-content--type-size-big
.text-content--type-size-secondary
.text-content--type-size-small

Esempi

Voluptate aliqua voluptate voluptate qui irure commodo ex in ipsum enim mollit. Ullamco proident in nulla ex nisi aute ipsum commodo ea ullamco ex. Sunt ex mollit elit commodo proident deserunt nisi sint tempor. Non anim esse sint minim tempor aliquip id commodo. Aliquip reprehenderit pariatur ex nisi sit consectetur commodo in anim voluptate. Aliquip fugiat ipsum aliquip do voluptate nostrud nulla dolore excepteur deserunt eu. Reprehenderit veniam quis enim voluptate velit magna pariatur ipsum non.

Non quis voluptate proident sit nulla culpa do officia ex occaecat. Do eiusmod adipisicing occaecat nisi aute. Consectetur culpa eiusmod dolore quis ut velit nulla ipsum id. Pariatur esse enim esse est qui est est laborum labore occaecat est aliquip ea. Incididunt dolor anim proident nisi nulla nisi ullamco adipisicing ex ad in occaecat.

Titolo H1 con link

Titolo H2 con link

Titolo H3 con link

Titolo H4 con link

Titolo H5 con link

Titolo H6 con link

Strong and Bold text

 [...] 

Quando superò i primi colli dei Monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città, la headline del villaggio Alfabeto e la subline della sua stessa strada, il vicolo Riga.

Emphatize and Italic

 [...] 

Quando superò i primi colli dei Monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città, la headline del villaggio Alfabeto e la subline della sua stessa strada, il vicolo Riga.

Sub and Sup

 [...] 

Quando superò i primi colli dei Monti Corsivi_{2 * sotto}, si voltò a guardare un’ultima volta la skyline di Lettere^{2 * sopra}, la sua città, la headline del villaggio Alfabeto e la subline della sua stessa strada, il vicolo Riga.

Blockquote

<blockquote> [...] </blockquote>

Quando superò i primi colli dei monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città.

Cite

<cite> [...] </cite>

Quando superò i primi colli dei monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città.

Pre

<a class="button"> [...] </a>

Quando superò i primi colli dei Monti Corsivi, si voltò a guardare un’ultima volta la skyline di Lettere, la sua città, la headline del villaggio Alfabeto e la subline della sua stessa strada, il vicolo Riga.

Code


                        <code>

                        function() {
   alert("Esempio");
}

                        </code>

Unordered List

<ul> [...] </ul>

Quis autem iure reprehenderit
Et harum cum link!
Temporibus autem quibusdam et aut officiis debitis
- Quis autem iure reprehenderit
- Et harum cum link!
- Temporibus autem quibusdam et aut officiis debitis

Ordered List

<ol> [...] </ol>

Quis autem iure reprehenderit
Et harum cum link!
Temporibus autem quibusdam et aut officiis debitis
1. Quis autem iure reprehenderit
2. Et harum cum link!
3. Temporibus autem quibusdam et aut officiis debitis