Fonts and fontsizes

Theme Cosmo fonts

Fonts in the Cosmo theme cosmo.scss file:

cosmo.scss
$font-family-sans-serif:    "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
  • -apple-system and BlinkMacSystemFont are aliases for the default fonts on new macOS and iOS computers.
  • If the first font is not available on the user’s system, the browser will try the next one, and so on.
  • Segoe * from Microsoft, used on Windows
  • I use the default font "Source Sans Pro". See also here the Google font: Source Sans 3

I can change the font in the _quarto.yml file

_quarto.yml
format:
  html:
    theme:
      - cosmo
      - theme_custom.scss
    css: styles.css
    mainfont: "Helvetica Neue"

Only small difference between “Arial” and “Helvetica Neue”.

HTML Fontsizes

Bootstrap defines over 1,400 Sass variables that control fonts, colors, padding, borders, and much more. You can see all of the variables here: bootstrap/scss/_variables.scss

_variables.scss
$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
  • 1em -> 16px
  • 1.1em -> 17.6px
  • 1.2em -> 19.2px
  • 1.3em -> 20.8px

When I have fontsize: 1.1em in my quarto.yaml file and I define a new fontsize in my qmd files, I will keep same fontsize with 1rem and increase fontsize with 1.1remfrom 17.6px x 1.1 to 19.36px.

Compare HTML fontsizes and fonts

font-size: 1rem; font-family: ‘Source Sans Pro’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1rem; font-family: ‘Helvetica Neue’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1rem; font-family: ‘Arial’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1rem; font-family: ‘Roboto - downloaded’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

NO CHANGE in font-size, font-family: ‘Roboto - downloaded’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.1rem; font-family: ‘Source Sans Pro’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.1rem; font-family: ‘Helvetica Neue’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.1rem; font-family: ‘Arial’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.1rem; font-family: ‘Roboto - downloaded’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.2rem; font-family: ‘Source Sans Pro’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.2rem; font-family: ‘Helvetica Neue’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.2rem; font-family: ‘Arial’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.2rem; font-family: ‘Roboto’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.3rem; font-family: ‘Source Sans Pro’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.3rem; font-family: ‘Helvetica Neue’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.3rem; font-family: ‘Arial’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.

font-size: 1.3rem; font-family: ‘Roboto’
Quarto Websites are a convenient way to publish groups of documents. Documents published as part of a website share navigational elements, rendering options, and visual style.
G - Website navigation can be provided through a global navbar, a sidebar with links, or a combination of both for sites that have multiple levels of content. You can also enable full text search for websites.