Font Responsiva

Question

I’m making a theme for wordpress and put the font with the size of 5em what’s around 80px, but when I test on my cell phone with 320px wide, the font gets broken and ugly, I wanted something that made the font automatically stay in the required size.

My css is like this currently:

#header .logo {
    height: 120px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 30px 0 0 0;
    color: #FFF;
    font-size: 5em;
    font-weight: bolder;
    text-transform: uppercase;
    font-family: 'Raleway';
}

Answer 1

Samir’s answer is fine, but the measure vm is not supported by some older phones:

• Androids older than 4.4 (such as 4.2 and 4.3)
• iOS7, IE11 and Edge only have partial support

_{(Source: http://caniuse.com/#feat=viewport-Units)}

In case your layout is probably also responsive, so you can repurpose your existing media queries, for example:

@media (max-width: 768px){
    elemento {
        font-size: [MEDIDA DESEJADA];
    }
}

@media (max-width: 1024px){
    elemento {
        font-size: [MEDIDA DESEJADA];
    }
}

Note that media-query does not work in some browsers when used them nested.

If you need pro compatibility IE8 can try this script which has no dependencies with other javascript frameworks: https://github.com/scottjehl/Respond

Answer 2

This happens because the em will take, in this case, a percentage of the source size of the parent element, and not necessarily its own size (height/width), so if in mobile you don’t use a breakpoint to set a new font size for the parent element a div.logo is right to remain the same, as your reference has not changed.

That way, you can use the vw Unit in the parent element or in the parent element itself div. I explain more about this unit here.

Look at this example(or jsfiddle):

Note: In Stacksnippet click on on the button Whole page and jsfiddle changes the window or iframe size manually

html, body {
    margin: 0;
    padding: 0;
}
#header{
    font-size: 2vw;
}
#header .logo{
    height: 180px;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    padding: 30px 0 0 0;
    color: #666;
    font-size: 5em;
    font-weight: bolder;
    text-transform: uppercase;
    font-family: 'Raleway';
}

<div id="header">
  <div class="logo">
    <p>Font responsiva.</p>
  </div>
</div>

Or you can create the breakpoints you said before. See that example. Notice that I change only the source of #header.