180

I am trying to build a responsive layout using bootstrap and currently am defining some of the titles with font-size:3em;

But when the layout is shrunk down this is too big. How can I responsively reduce the size of the text?

8
  • Have you tried using percentages for the font-size? Jan 26, 2013 at 14:06
  • 24
    This is not a duplicate of the indicated answer. This question is specific to Bootstrap as is the answer below. There is a subtle but important difference. Bootstrap defines variables in LESS to be used in your media queries. I would urge @kapa to remove the inaccurate duplicate designation. Oct 2, 2015 at 20:57
  • 1
    @DaveJensen I don't agree. The solution does not depend on Bootstrap. The answers are also almost exactly the same under the two questions. It does not make a difference whether the screen size comes from a LESS/SASS variable, or simply hard coded.
    – kapa
    Oct 4, 2015 at 16:30
  • 1
    Bootstrap 3.3.5 only changes font size in response to media queries for carousel glyphicons - so you cannot do this with bootstrap - you need to create your own media queries as described in other answers (to this and other questions). Oct 24, 2015 at 5:45
  • The Bootstrap 4 documentation specifically addresses this Bootstrap question: getbootstrap.com/docs/4.0/content/typography/… Aug 11, 2018 at 19:55

2 Answers 2

159

Simplest way is to use dimensions in % or em. Just change the base font size everything will change.

Less

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4rem;
}       

Look at all the ways at https://stackoverflow.com/a/21981859/406659

You could use viewport units (vh,vw...) but they dont work on Android < 4.4

6
  • 1
    I tried this but it makes Adobe Dreamweaver to crash the moment I enter @screen-sm
    – Kolja
    May 17, 2015 at 18:56
  • not sure why. does dreamweaver support less May 18, 2015 at 5:32
  • This makes the body font fairly unreadable. It should really just be for titles. Jul 10, 2015 at 19:23
  • 4
    Nope you need to use appropriate font sizes not 10px ;) Jul 13, 2015 at 9:42
  • Wrong. You can't mix up units. You get this Incompatible units: 'px' and 'em'.
    – Green
    Feb 23, 2017 at 4:20
66

Well, my solution is sort of hack, but it works and I am using it.

1vw = 1% of viewport width

1vh = 1% of viewport height

1vmin = 1vw or 1vh, whichever is smaller

1vmax = 1vw or 1vh, whichever is larger

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}
5
  • 1
    Better use media queries till viewport units are supported in most mobile devices, see e.g. quirksmode.org/mobile/tableViewport.html
    – pors
    Jan 5, 2014 at 19:40
  • 7
    It's already well supported caniuse.com/#feat=viewport-units Sep 15, 2014 at 15:52
  • 1
    It's well supported, but the responsive breakpoints in Bootstrap mess up the layout. This is a cool idea for a non-breakpoint responsive framework. Aug 9, 2018 at 5:47
  • Viewports units will never take off even if they are supported because we generally need font sizes to be specified in percent width and height of the container, not the viewport.
    – kloddant
    Aug 16, 2018 at 21:23
  • 5
    You should not use this for font sizes. It disables the users ability to change the text size using zoom.
    – ViktorMS
    Aug 29, 2018 at 10:33

Not the answer you're looking for? Browse other questions tagged or ask your own question.