Minimal-mistakes: Can I set the font and font size?

Created on 15 Nov 2017  ·  5Comments  ·  Source: mmistakes/minimal-mistakes

  • [ ] This is a question about using the theme.
  • [ ] This is a feature request.
  • [ ] I believe this to be a bug with the theme.

    • [ ] I have updated all gems with bundle update.

    • [ ] I have tested locally with bundle exec jekyll build.


Environment informations

  • Minimal Mistakes version:
  • Jekyll version:
  • GitHub Pages hosted: yes/no
  • Operating system:

Expected behavior

Steps to reproduce the behavior

Support

Most helpful comment

Yes. Edit the following variables in _sass/_variables.scss.

/* system typefaces */
$serif                        : Georgia, Times, serif !default;
$sans-serif                   : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace                    : Monaco, Consolas, "Lucida Console", monospace !default;

/* sans serif typefaces */
$sans-serif-narrow            : $sans-serif !default;
$helvetica                    : Helvetica, "Helvetica Neue", Arial, sans-serif !default;

/* serif typefaces */
$georgia                      : Georgia, serif !default;
$times                        : Times, serif !default;
$bodoni                       : "Bodoni MT", serif !default;
$calisto                      : "Calisto MT", serif !default;
$garamond                     : Garamond, serif !default;

$global-font-family           : $sans-serif !default;
$header-font-family           : $sans-serif !default;
$caption-font-family          : $serif !default;

/* type scale */
$type-size-1                  : 2.441em !default;  // ~39.056px
$type-size-2                  : 1.953em !default;  // ~31.248px
$type-size-3                  : 1.563em !default;  // ~25.008px
$type-size-4                  : 1.25em !default;   // ~20px
$type-size-5                  : 1em !default;      // ~16px
$type-size-6                  : 0.75em !default;   // ~12px
$type-size-7                  : 0.6875em !default; // ~11px
$type-size-8                  : 0.625em !default;  // ~10px

All 5 comments

Yes. Edit the following variables in _sass/_variables.scss.

/* system typefaces */
$serif                        : Georgia, Times, serif !default;
$sans-serif                   : -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
$monospace                    : Monaco, Consolas, "Lucida Console", monospace !default;

/* sans serif typefaces */
$sans-serif-narrow            : $sans-serif !default;
$helvetica                    : Helvetica, "Helvetica Neue", Arial, sans-serif !default;

/* serif typefaces */
$georgia                      : Georgia, serif !default;
$times                        : Times, serif !default;
$bodoni                       : "Bodoni MT", serif !default;
$calisto                      : "Calisto MT", serif !default;
$garamond                     : Garamond, serif !default;

$global-font-family           : $sans-serif !default;
$header-font-family           : $sans-serif !default;
$caption-font-family          : $serif !default;

/* type scale */
$type-size-1                  : 2.441em !default;  // ~39.056px
$type-size-2                  : 1.953em !default;  // ~31.248px
$type-size-3                  : 1.563em !default;  // ~25.008px
$type-size-4                  : 1.25em !default;   // ~20px
$type-size-5                  : 1em !default;      // ~16px
$type-size-6                  : 0.75em !default;   // ~12px
$type-size-7                  : 0.6875em !default; // ~11px
$type-size-8                  : 0.625em !default;  // ~10px

Thanks

Is this still the preferred method for modifying the size of font for the body of a post? Adjusting the variables does change the font size for some elements, like the title, but not the main body text. When I inspect a section of rendered text it appears that the font size is hardcoded at _1em_:

From __page.scss_:

.page__content {
  h2 {
    padding-bottom: 0.5em;
    border-bottom: 1px solid $border-color;
  }

  p,
  li,
  dl {
    font-size: 1em;
  }

@PingTrip See #1219, you don't want to mess with the .page_content font-sizes directly.

The base font-size scales up and down depending on the viewport size. You'll want to modify these values so all of the type across the entire page scales proportionally with each other.

I'm having the same issue. After seeing 3 different threads about changing the font-size, it's still unclear to me what I should do.

I would like to reduce the main body fonts on large screens (ideally while proportionally reducing headers, code, etc. as well), everything else can stay.

Changing the "type-size" variables doesn't change anything for me, and changing the breakpoints in _reset.scss makes everything smaller, which I don't really want.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

floatingpurr picture floatingpurr  ·  3Comments

justinrummel picture justinrummel  ·  3Comments

satwikkansal picture satwikkansal  ·  4Comments

lgyjg picture lgyjg  ·  5Comments

muhasturk picture muhasturk  ·  3Comments