Not sure we can do as the title can be quite different form one language to the other.

or use icons?

sure it can be done by setting the width of the alert-heading

I like the idea of having same width and use icons, the text as sr-only.

sure it can be done by setting the width of the alert-heading

Some words in some languages are 14-15 (maybe more did not look all possibilities) letters for "Warning" in English which is 7 letters. Russian "предупреждение" is 14 letters. French "Avertissement" is 13, etc.
It would require at least width: 11rem; and we could get rid of

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;

Example

This will give something like this in English

and in Traditional Chinese

Therefore it would work, although increasing the heading width in an important way for languages using only short words.
Note: when reducing window size to mobile, using 11rem as width is not enough to keep same size when multiple messages. We would need at least 15rem. I ignore why without further research.

BUT we do have indeed an issue in the present setting for Chinese for example or any language using separate glyphs. Glyphs are displayed vertically as they are separate.

That is a bug imho.

Therefore why not icons indeed if we agree on which ones to use and test also with Monochrome

For example something like (or variants to fit with with background colors/greys and keep contrast)

Error

Warning

Message

Info

Remains to find a way to modify the js to use icons and sr-only when the layout is not used.
We have now

if (typeof title !== 'undefined') {
        titleWrapper = document.createElement('div');
        titleWrapper.className = 'alert-heading';
        titleWrapper.innerHTML = Joomla.Text._(type) ? Joomla.Text._(type) : type;
        messagesBox.appendChild(titleWrapper);
      }

In the layout it is easier
I can get for example

with code produced

Please test #30516
Closing as we have a patch