diff --git a/_data/layouts/theme.yml b/_data/layouts/theme.yml
index e9bba09..418f2ad 100644
--- a/_data/layouts/theme.yml
+++ b/_data/layouts/theme.yml
@@ -87,6 +87,7 @@ link_hover_color:
     en: '#0056b3'
 h1_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for first level headings'
     es: 'Altura de los títulos de primer nivel'
@@ -98,6 +99,7 @@ h1_font_size:
     en: 2.5
 h2_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for second level headings'
     es: 'Altura de los títulos de segundo nivel'
@@ -109,6 +111,7 @@ h2_font_size:
     en: 2
 h3_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for third level headings'
     es: 'Altura de los títulos de tercer nivel'
@@ -120,6 +123,7 @@ h3_font_size:
     en: 1.75
 h4_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for fourth level headings'
     es: 'Altura de los títulos de cuarto nivel'
@@ -131,6 +135,7 @@ h4_font_size:
     en: 1.5
 h5_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for fifth level headings'
     es: 'Altura de los títulos de quinto nivel'
@@ -142,6 +147,7 @@ h5_font_size:
     en: 1.25
 h6_font_size:
   type: number
+  unit: rem
   label:
     en: 'Height for sixth level headings'
     es: 'Altura de los títulos de sexto nivel'
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 256a14f..a6b3a9c 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -38,7 +38,7 @@
 {% comment %}
   Generamos una definición de variable de SASS
 {% endcomment %}
-${{ variable_name }}: {{ theme[key] | default: default_value }};
+${{ variable_name }}: {{ theme[key] | default: default_value }}{{ variable[1].unit }};
 {% endif %}
 {% endfor %}