Tipografía
Una sola familia, Poppins, en pesos 400, 500, 600 y 700. La jerarquía se logra con tamaño y peso, no con mayúsculas ni con color.
Escala
.mr-h1 · 1.6rem · 700María López.mr-h2 · 1.25rem · 700Actividades programadas.mr-h3 · 1.1rem · 600NI 5º PRIMARIA.mr-body · 1rem · 400Texto de párrafo y valores de formulario.--maristas-text-base · .875remBotones, campos, tablas y menús..mr-small · .8125remEtiquetas y datos secundarios..mr-caption · .75remFechas, contadores y leyendas.--maristas-text-2xs · .7remEncabezados de grupoPesos
Aa
Regular · 400
Aa
Medium · 500
Aa
Semibold · 600
Aa
Bold · 700
Enlaces y listas
Un enlace dentro de un texto se ve así: revisar el expediente completo.
- Las listas usan el mismo tamaño que el párrafo.
- Cada elemento dice una sola cosa.
- Las listas numeradas solo se usan si el orden importa.
- Por ejemplo, los pasos de un proceso.
<div class="w-100">
<p class="mb-2">Un enlace dentro de un texto se ve así: <a href="#tipografia" class="mr-link">revisar el expediente completo</a>.</p>
<ul class="mb-2">
<li>Las listas usan el mismo tamaño que el párrafo.</li>
<li>Cada elemento dice una sola cosa.</li>
</ul>
<ol class="mb-0">
<li>Las listas numeradas solo se usan si el orden importa.</li>
<li>Por ejemplo, los pasos de un proceso.</li>
</ol>
</div>
Sí
Escribe en minúsculas con la primera letra en mayúscula (sentence case) en botones, etiquetas y títulos. Limita los párrafos a unos 70 caracteres de ancho.
No
No uses MAYÚSCULAS SOSTENIDAS para etiquetas ni para destacar. No mezcles más de dos pesos en un mismo bloque.