_headline.html.twig

1. Klasse .headline bei Überschrift-Elementen ergänzen (Achtung das wirkt sich nicht auf Überschriften in Modulen aus - dafür wird block_searchable.html5 angepasst)
2. Filter raw hinzufügen, um HTML in Überschriften zu erlauben

component/_headline.html.twig

{% use "@Contao/component/_headline.html.twig" %}

{#
    Adjust how any blocks of parent or used component templates are rendered.
    Try typing "block" or "use" to get autocompletion for available options.

    1. Block headline_attributes: Jede Überschrift bekommt die Klasse .headline - ev. wird das mal unnötig, wenn :heading in CSS kommt
    2. Block headline_inner: um HTML in Überschriften zu erlauben, wird der Filter |raw ergänzt.
#}

{% block headline_attributes %}
{%set headline_attributes = attrs()
    .addClass('headline')
    .mergeWith(headline.attributes|default)
  %}
  {{ headline_attributes }}
  {{ parent() }}
{% endblock %}

{# HTML in Überschriften erlauben: Der Block headline_inner wird um die nötigen Filter ergänzt. #}

{% block headline_inner %}
    {{ headline.text|insert_tag_raw|raw }}
{% endblock %}

headline-extended

Erweiterte Headlines kann man auf verschiedene Arten machen:

• ein <span> innerhalb einer Headline
• mit <hgroup> + <h1> + <p>

Was ist besser? Für die Schriftgröße von <span> kann man z.B. font-size: 0.5em verwenden, dann ist die Größe automatisch halb so groß wie die der Überschrift. Wenn <span> dann noch ein display: block bekommt, rutscht es automatisch in die nächste Zeile.
letter-spacing für Display-Schriften funktionieren auch mit em besser, weil der Abstand mit der Schrift mitskaliert!

{% if headline is defined and headline is not empty %}

<hgroup>
  {%if subheadlinePosition == 'top' and subheadline %}
    <p class="subheadline subheadline-top">{{ subheadline }}</p>
  {% endif %}
  <{{ hl }} class="{{ class }}" {{ cssID|raw }}>
    {{ headline }}
  </{{ hl }}>
  {%if subheadlinePosition == 'bottom' and subheadline %}
    <p class="subheadline subheadline-bottom">{{ subheadline }}</p>
  {% endif %}
</hgroup>

{% endif %}