Style your paged HTML document
Start by changing fonts and headings.
🇪🇸 Este post está escrito en inglés y español. Puedes encontrar el texto en español más abajo.
🇺🇸 Now that you have an engaging outline, let’s take a look at the design of your document. Hit the knit button to render the document and explore the PDF:
Although this is a good starting point, the document does not look pretty. Ask yourself:
What design elements can I improve to help my audience engage with the findings?
📋 List everything that comes to mind (team or company branding, headings, page breaks, etc.) and let’s tackle the easiest changes first.
Below, you’ll start learning about how to improve the styling of your document via CSS. If you have never heard of CSS , you can think about it as the programming language that makes websites look pretty. It’s the language that allows you to change fonts, embed images, add background colors, and so much more.
Getting started
The first step is to create a CSS file and save it in the same folder as your R Markdown document:
💡This video shows that you need to add your CSS file in the YAML of your R Markdown document. You add it to the YAML to tell R that you want to override the CSS file that comes with the template (it’s hidden). Once you create the CSS file, you can start improving the style of your documents.
Fonts
The easiest improvement you can make is to change the font used in the body of your document (aka paragraphs). When choosing fonts, keep in mind that some fonts are easier to read than others. In this example, let’s use Helvetica, a font that is easy to read for many.
In your CSS file, you can define what the body of your document looks like by using the following code:
body {
font-family: Helvetica;
font-size: 12pt;
}Now save your changes, knit your document, and check that the changes worked. Isn’t it amazing? Let me know how it went in the comments 👇 .
Headings
Changing the style of headings in your documents is another easy improvement you can implement right away. The code looks really similar here; the main difference is that you need to use h1, h2, h3, etc. to refer to each heading level. For example, if you only want to use two heading levels, you would add the following code to your CSS file:
h1 {
font-family: Helvetica;
font-size: 30pt;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 20pt;
font-weight: bold;
}Again, save your changes, knit the document, and check that the changes worked. Your document should look like this:
Did you notice how the document looks very different now? Since I’m using my own CSS file now, a lot of the formatting rules we saw in the first video don’t apply anymore.
In the next few posts, you’ll learn how to improve the style of your document even more. You’ll start by learning how to design pages, including front and back covers, background images, and page numbers. And after that, you’ll learn about formatting plots, tables, and much more!
🇪🇸 Ahora que tienes un esquema atractivo, echemos un vistazo al diseño de tu documento. Haz clic en el botón knit para renderizar el documento y explorar el PDF:
Aunque este es un buen punto de partida, el documento no se ve bonito. Pregúntate a ti mismo:
¿Qué elementos de diseño puedo mejorar para ayudar a mi audiencia a interactuar con los hallazgos?
📋 Enumera todo lo que se te ocurra (marca del equipo o de la empresa, encabezados, saltos de página, etc.) y comencemos con los cambios más sencillos.
A continuación, comenzarás a aprender cómo mejorar el estilo de tu documento a través de CSS. Si nunca has oído hablar de CSS, puedes pensar en él como el lenguaje de programación que hace que los sitios web se vean bonitos. Es el lenguaje que te permite cambiar las fuentes, insertar imágenes, añadir colores de fondo, y mucho más.
Empezando
El primer paso es crear un archivo CSS y guardarlo en la misma carpeta que tu documento R Markdown:
💡Este video muestra que necesitas añadir tu archivo CSS en el YAML de tu documento R Markdown. Lo añades al YAML para decirle a R que quieres anular el archivo CSS que viene con la plantilla (está oculto). Una vez que creas el archivo CSS, puedes empezar a mejorar el estilo de tus documentos.
Fuentes
La mejora más sencilla que puedes hacer es cambiar la fuente utilizada en el cuerpo de tu documento (es decir, los párrafos). Al elegir las fuentes, ten en cuenta que algunas fuentes son más fáciles de leer que otras. En este ejemplo, vamos a usar Helvetica, una fuente que es fácil de leer para muchos.
En tu archivo CSS, puedes definir cómo se ve el cuerpo de tu documento utilizando el siguiente código:
body {
font-family: Helvetica;
font-size: 12pt;
}Ahora guarda tus cambios, teje tu documento y comprueba que los cambios funcionaron. ¿No es increíble? ¡Déjame saber en los comentarios 👇 cómo te fue!
Encabezados
Cambiar el estilo de los encabezados en tus documentos es otra mejora sencilla que puedes implementar de inmediato. El código se ve realmente similar aquí; la principal diferencia es que necesitas usar h1, h2, h3, etc. para referirte a cada nivel de encabezado. Por ejemplo, si sólo quieres usar dos niveles de encabezado, agregarías el siguiente código a tu archivo CSS:
h1 {
font-family: Helvetica;
font-size: 30pt;
font-weight: bold;
}
h2 {
font-family: Helvetica;
font-size: 20pt;
font-weight: bold;
}De nuevo, guarda tus cambios, teje el documento y comprueba que los cambios funcionaron. Tu documento debería verse así:
¿Notaste cómo el documento se ve muy diferente ahora? Como estoy usando mi propio archivo CSS ahora, muchas de las reglas de formato que vimos en el primer video ya no se aplican.
En los próximos posts, seguirás aprendiendo cómo mejorar el estilo de tus documentos. Comenzarás por aprender cómo diseñar páginas, incluyendo la portada y contra-portada, imágenes de fondo y números de página. Después de eso, aprenderás a darle formato a gráficos, tablas y mucho más.