Responsive Font

Samir's response is great, but vm is not supported by some older cell phones:

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

In case your layout is probably responsive then you can reuse 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 nested.

If you need compatibility for IE8 you can try this script that has no dependencies with other javascript frameworks: link

This happens because em will take a percentage of the parent element's font size, not necessarily its own size ( height/width ), so if on mobile you do not use breakpoint to set a new font size for parent element div.logo is sure to remain the same, since your reference has not changed.

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

Look at this example ( or jsfiddle ):

  

Note: In StackSnippet, click   on the Full Page button and in jsfiddle manually change the size of the window or iframe

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 this example . Notice that I only change the source of #header .