Responsive typography - text too small

css, font-size, media-queries, typography

Solution

Size gets too small because it's 90% and 80% of 16px (browser default font size). If you put your baseline font-size in `body` element it gets overwritten when media query kicks in.

Do it like this:

html {font-size: 1.375em;  /* 22px */}

body {
    font-size: 100%;     /* flexible baseline */
    line-height: 1.4;
}

If you set your root element (`html`) to desired baseline size you can use percentage values on body tag to resize text in various media queries.

Problem

I'm trying to make my typography responsive but I think I'm doing something wrong. Why is the text-size so small at 90% and 80%? ``` body { font-size: 100%; /* flexible baseline */ font-size: 1.375em; /* 22px */ line-height: 1.4; } @media (max-width: 899px) { body { font-size: 90%; } } @media (max-width: 480px) { body { font-size: 80%; } } ``` 100% 90% 80%

Original source