Skip to main content

​
Font Family

The application uses a simple, accessible sans-serif font stack: 
body {
    font-family: Arial, Helvetica, sans-serif;
}
This font family is also explicitly set on form elements to ensure consistency: 
.campo-formulario input,
.campo-formulario select,
.campo-formulario textarea {
    font-family: Arial, Helvetica, sans-serif;
}

.botones-formulario a,
.botones-formulario button {
    font-family: Arial, Helvetica, sans-serif;
}

​
Font Sizes

​
Headings

ElementFont SizeLocationUsage
Section headings (h2)1.3remseleccionar-cita.css:19Form section titles
Summary headings (h3)1.25remresumen.css:63Summary section headings
Success state heading1.5remresumen.css:32Appointment confirmation heading
Responsive adjustments: 
/* Mobile (≤768px) */
.seccion-resumen h3 {
    font-size: 1.1rem;
}

/* Small mobile (≤480px) */
.estado-cita h2 {
    font-size: 1.3rem;
}

​
Body Text

ElementFont SizeLocationUsage
Buttons (primary/secondary)15pxindex.css:42Call-to-action buttons on index
Form buttons16pxseleccionar-cita.css:120Form navigation buttons
Action buttons14pxresumen.css:122Summary page action buttons
Form inputs16pxseleccionar-cita.css:54Input fields, selects, textareas
Confirmation code (strong)1.2remresumen.css:43Appointment code display
Confirmation code (label)1.1remresumen.css:37Appointment code label
Responsive adjustments: 
/* Small mobile (≤480px) */
.tabla-resumen {
    font-size: 14px;
}

.botones-accion a {
    font-size: 16px;
}

.codigo-cita {
    font-size: 1rem;
}

.codigo-cita strong {
    font-size: 1.1rem;
}

​
Font Weights

WeightValueUsage
Normal400Default body text, table data
Medium500Table labels, emphasized text
Semi-bold600Form labels, headings, button text
Bold700Primary button text (iniciar-solicitud)

​
Font Weight Applications

/* Form labels */
.campo-formulario label {
    font-weight: 600;
}

/* Button text */
.botones-formulario a,
.botones-formulario button {
    font-weight: 600;
}

/* Section headings */
.seccion-resumen h3 {
    font-weight: 600;
}

/* Table labels */
.tabla-resumen td:first-child {
    font-weight: 500;
}

/* Primary action buttons */
.opcion-identificacion > a {
    font-weight: 700;
}

​
Line Height

Line height is used sparingly for improved readability: 
.info > div > p {
    line-height: 1.6;
}

​
Text Colors

Typography uses the color system defined in the design tokens. See the Colors page for complete color documentation.

​
Common Text Color Applications

/* Primary headings */
#titulo > h1 {
    color: var(--primary-blue);
}

/* Section headings */
.seccion-formulario h2 {
    color: var(--primary-blue);
}

/* Descriptive text */
#titulo > p {
    color: var(--text-gray-light);
}

/* Form labels */
.campo-formulario label {
    color: var(--text-gray);
}

/* Strong emphasis */
.tabla-resumen strong {
    color: var(--primary-blue);
    font-weight: 600;
}

​
Text Utilities

​
Text Wrapping

/* Default */
footer > #copyright {
    text-wrap: balance;
}

/* Mobile override */
@media (width <= 480px) {
    footer > #copyright {
        text-wrap: initial;
    }
}

​
Text Decoration

/* Remove default link underline */
a {
    text-decoration: none;
}

/* Add underline on header link hover */
header a:hover {
    text-decoration: underline;
}

​
Typography Best Practices

Accessibility

The 16px minimum font size for form inputs ensures better readability and prevents automatic zoom on mobile devices.

Consistency

Always use the Arial, Helvetica, sans-serif font stack for all text elements, including form controls and buttons.

Hierarchy

Maintain visual hierarchy using font sizes: 1.5rem for primary headings, 1.25-1.3rem for section headings, and 14-16px for body text.

​
Example Usage

<!-- Page title -->
<div id="titulo">
    <h1>Cita Previa DNI</h1>
    <p>Descriptive text using text-gray-light color</p>
</div>

<!-- Form section -->
<div class="seccion-formulario">
    <h2>Datos Personales</h2>
    <div class="campo-formulario">
        <label>Nombre</label>
        <input type="text" placeholder="Ingrese su nombre">
    </div>
</div>

<!-- Action button -->
<button class="btn-continuar">
    Continuar
</button>

Build docs developers (and LLMs) love

Get started for freeTalk to us