Resizing headlines

1

What would be best practice for resizing H*'s, .lead etc for smaller screen sizes (screen-sm) with roots/bootstrap?

2

Since Bootstrap 3 is mobile first you’ll want to make sure the base font-size is what you’d like for the smallest device. From there, here’s an example of increasing the sizes as the device size increases:

h1 {
  font-size: 24px;
}

@media (min-width: @screen-sm-min) { 
  h1 { 
    font-size: 26px;
  }
}

@media (min-width: @screen-md-min) { 
  h1 { 
    font-size: 28px;
  }
}

@media (min-width: @screen-lg-min) { 
  h1 { 
    font-size: 30px;
  }
}
3

Also, if you’re using REM’s it’s a lot easier. Here’s an example from what we use on the Roots website:


html {
  font-size: 16px;
}
body {
  line-height: 1.5;
}

h1,
h2,
h3,
h4 {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}
h1 {
  font-size: 2.4rem;
  line-height: 1.2;
}
h2 {
  font-size: 1.8rem;
  line-height: 1.2;
}
h3 {
  font-size: 1.4rem;
  line-height: 1.2;
}
h4 {
  font-size: 1.2rem;
  line-height: 1.2;
}

p,
ul,
ol,
blockquote,
time,
pre,
.list-group {
  margin-bottom: 1.5rem;
  font-size: 1rem;
}
blockquote p {
  font-size: 1rem;
  line-height: 1.5;
}
blockquote small {
  font-size: 0.85rem;
}
label {
  font-size: 1rem;
}

.btn,
.form-control {
  font-size: 1rem;
}

@media (min-width: @screen-sm-min) {
  html {
    font-size: 16px;
  }
}

@media (min-width: @screen-md-min) {
  html {
    font-size: 18px;
  }
}

@media (min-width: @screen-lg-min) {
  html {
    font-size: 20px;
  }
}
4

You can also do this so you don’t have to repeat the H1.

   h1 {
  font-size: 24px;
  margin-bottom: 10px;
  @media (min-width: @screen-sm) {
    font-size: 26px;
    margin-bottom: 20px;
  }
  @media (min-width: @screen-md) {
  font-size:28px;
  margin-bottom: 24px;
  }
  @media (min-width: @screen-lg) {
  font-size:30px;
  margin-bottom: 30px;
  }
}
1 Like