Tipografía

Corporativo

HKGothic
A Ă Â B C Č Ć D Đ E Ê F G H I J K L M N O Ô Ơ P Q R S Š T U Ư V W X Y Z Ž
a ă â b c č ć d đ e ê f g h i j k l m n o ô ơ p q r s š t u ư v w x y z ž
1 2 3 4 5 6 7 8 9 0
‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *
HKGrotesk
A Ă Â B C Č Ć D Đ E Ê F G H I J K L M N O Ô Ơ P Q R S Š T U Ư V W X Y Z Ž
a ă â b c č ć d đ e ê f g h i j k l m n o ô ơ p q r s š t u ư v w x y z ž
1 2 3 4 5 6 7 8 9 0
‘ ? ’ “ ! ” ( % ) [ # ] { @ } / & \ < - + ÷ × = > ® © $ € £ ¥ ¢ : ; , . *

Escala

Escala tipográfica Clásica. Valores históricos.

a

a

a

a

a

a

a

a

a

a

a

72
h1

60

48
h2

36
h3

30
h4

24
h5

21

18
h6

16
body

14

12
small

Tamaños en diferentes queries.

Partimos de los tamaños definidos en la escala clásica. A partir de la query @media (min-width: 1200px) {} hacia tamaños menores, la escala será progresiva, variando para los headdings del <h1> al <h5> siguiendo las siguientes fórmulas:


$h6-font-size: 1.125rem;

$h5-font-size: 1.5rem;

$h4-font-size: 1.875rem;

$h3-font-size: 2.25rem;

$h2-font-size: 3rem;

$h1-font-size: 4.5rem;
XS SM MD LG XL
Font Role PX REM PX REM PX REM PX REM PX REM
HK Gothic Heading h1 32 2 40 2.5 48 3 55.2 3.45 72 4.5
HK Gothic Heading h2 30 1.8 34 2.1 38 2.4 43 2.7 48 3
HK Grotesk Heading h3 26 1.6 28 1.7 31 1.9 32 2 36 2.25
HK Grotesk Heading h4 24 1.4 25 1.5 27 1.7 29 1.7 30 1.8
HK Grotesk Heading h5 21 1.3 22 1.3 23 1.4 24 1.4 24 1.5
HK Grotesk Heading h6 18 1.125 18 1.125 18 1.125 18 1.125 18 1.125
HK Grotesk Body (Base) 16 1 16 1 16 1 16 1 16 1
HK Grotesk Label / Small 12 0.75 12 0.75 12 0.75 12 0.75 12 0.75

Estilo

Headingns

h1. Bkool heading

h2. Bkool heading

h3. Bkool heading

h4. Bkool heading

h5. Bkool heading
h6. Bkool heading

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>

Las clases .h1 a .h6 también están disponibles, para cuando desee hacer coincidir el estilo de fuente de un encabezado pero no puede usar el elemento HTML asociado.

h1. Bkool heading

h2. Bkool heading

h3. Bkool heading

h4. Bkool heading

h5. Bkool heading

h6. Bkool heading


<p class="h1">...</p>

<p class="h2">...</p>

<p class="h3">...</p>

<p class="h4">...</p>

<p class="h5">...</p>

<p class="h6">...</p>
Párrafo

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<p>...</p>
Elementos de texto en línea

Puedes usar el tag mark para resaltar texto.

Esta línea está subrayada.

Esta línea es pequeña.

Esta línea es negrita.

Esta línea es itálica.


<p>... <mark>...</mark></p>

<p><u>...</u></p>

<p><small>...</small></p>

<p><strong>...</strong></p>

<p><em>...</em></p>
Citas

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."

Alguien famoso Fuente de la cita

<blockquote class="blockquote">

    <p class="mb-0">""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.""</p>

</blockquote>


<blockquote class="blockquote">

    <p class="mb-0">""Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.""</p>

    <footer class="blockquote-footer">Alguien famoso <cite title="Source Title">Fuente de la cita</cite></footer>

</blockquote>
Lista
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies

<ul class="list-unstyled bkool-list-unstyled">

    <li>Lorem ipsum dolor sit amet</li>

    <li>Consectetur adipiscing elit</li>

    <li>Integer molestie lorem at massa</li>

    <li>Nulla volutpat aliquam velit

        <ul>

            <li>Phasellus iaculis neque</li>

            <li>Purus sodales ultricies</li>

        </ul>

    </li>

</ul>

Color

En el apartado color se explican los diferentes usos y clases del color.

A continuación describimos algunos usos NO PERMITIDOS del color en los textos:

Uso indiscriminado de colores
Soy un texto rosa....porque me gusta mucho el rosa
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
Mal uso de colores semánticos
Esto es un mensaje de error
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.