Aleksei Nemov

Я бы делал через псевдо=элементы ::before или ::after

Если вы заранее знаете где будет латиница, а где - кириллица, то всё банально через CSS делается. Правда загружаться всегда будут оба шрифта.

Да, я бы тоже использовал HTML5.

Fitvids

Начните с главного: решите, что вы хотите видеть в хедере на узких экранах, как он должен себя вести. Далее исходя из этого каким-то элементам прописывайте фиксированную ширину, каким-то относительную. В некоторых случаях разумно будет поменять расположение блоков. Например, в вашем примере можно было бы сверху оставить логотип и форма авторизации, а ниже баннер.
Так же при адаптивной верстке часто помогаю такие конструкции:

width: 100%;
max-width: 1024px;