CSS-уроки: как сделать заголовок двухстрочным

Готовясь к написанию цикла статей по созданию дизайна страницы с нуля, который Вы увидите уже на этой неделе, я столкнулатсь с проблемой: как с помощью CSS вывести заголовок двумя строчками, причем для каждой строки задать разные настройки шрифта. Погуглив, ответа я не нашла. Поэтому пришлось включать логику и имеющиеся знания. И у меня получилось.Делюсь с Вами своими результатами. Возможно, Вы предложите другой вариант. А так же выкладывайте ссылки, где Вы попробовали повторить мои настройки, любопытно посмотреть.Итак. Код html самый обычный:
Код<h1>Наш заголовок</h1>
А вот настройки CSS:
Код
h1 {
color: #EE1E72;
width: 100px;
overflow: visible;
padding-left: 50px;
text-indent: -50px;
font-size: 30px;
font-style: italic;
line-height: 30px;
}
h1:first-line {
color: black; 
font-size: 50px;
font-style: normal;
}

В результате я получила то, что Вы видите.
А фокус в следующем. В CSS нет псевдоэлемента first-word. Есть только first-line. Поэтому выделить первое слово заголовка явным образом невозможно.
Но можно использовать first-line,  ограничив ширину блока так, чтобы помещалось только одно слово (width: 100px;), а чтобы подстраховаться от слова, которое не сможет в эту ширину поместиться, мы добавляем: overflow: visible;
А чтобы в тексте вторая строка отступала правее мы использовали
padding-left: 50px;
text-indent: -50px;
Наш заголовок
Вот и все.
Жду Ваших вариантов реализации такой задачи.