Isso acontece porque o `em` vai pegar, no caso, uma porcentagem do tamanho da fonte do elemento pai, e não necessariamente o seu próprio tamanho (`height/width`), então se no mobile você não usar um *breakpoint* para definir um novo tamanho de fonte para o elemento pai a `div.logo` está certa em permanecer da mesma forma, já que sua referência não mudou. Dessa forma, você pode usar o `vw` *unit* no elemento pai ou na própria `div`. Explico mais sobre essa unidade [**aqui**](http://pt.stackoverflow.com/questions/106962/quais-as-diferen%C3%A7as-entre-as-unidades-de-tamanhos-de-fonte-vw-em-e/107092#107092). Olhe esse exemplo([ou jsfiddle](https://jsfiddle.net/rs0tLs60/)): > **Nota:** No StackSnippet clique em no botão <kbd>Página toda</kbd> e no jsfiddle modifique manualmente o tamanho da janela ou do iframe <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> 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'; } <!-- language: lang-html --> <div id="header"> <div class="logo"> <p>Font responsiva.</p> </div> </div> <!-- end snippet --> Ou você pode criar os breakpoints que disse antes. Veja [esse exemplo](https://jsfiddle.net/j1xebttd/). Repare que mudo apenas fonte do `#header`.