2

I would like to know what is the better way to deal with the following issue:

A website supports multiple languages; some of them fit on one line of a container, while others do not.

Is it better to reduce the font size on those which don't fit (which might ruin the user experience), or keep the font size but break to a new line?

Improve this question
2
  • What assumptions are you making about the size of screen, window, font, &c the user might be viewing your site with?  How do you know that the container will be both one line high and fully visible in any language?
    – gidds
    Jul 20, 2021 at 20:20
  • Is it one language at a time? For some reason I thought it was multiple languages displayed at once, but now I'm not so sure
    – Chris H
    Jul 21, 2021 at 6:49

2 Answers 2

Reset to default
9

I recommend a line-break. Imagine how the website would look like with so many different font sizes. Not only would it be "ugly" (although that might be subjective) it would also be difficult to understand the hierarchy of different website elements. What if a headline becomes smaller than the text under it? Is a smaller text less important or was it just too long?

Another issue that comes to mind is accessibility: At some point (for very long texts) the font would become so small that it is no longer legible. For people suffering from visual impairments, this will become a problem even sooner. In a worst case scenario your website might become entirely unusable.

Improve this answer
2
  • 2
    Your description makes me think of the old wanted posters - or the one I put on the other side of the lab door, on which "knock" and "go away" are legible from the other side of the room, the "if there's no answer" in between rather less so
    – Chris H
    Jul 20, 2021 at 15:28
  • 1
    Funnily enough, I saw a similar thing at the doctor's office yesterday: There's a shelf full of different leaflets and because of Covid, they put a sign next to it saying "Don't put it back, take it with you". Of course with that kind of highlighting they're sending out a rather different message
    – QWERTZdenker
    Jul 21, 2021 at 6:03
0

Languages that have accents in their alphabet will benefit from an increase in line-height. When you have a lot of accents they can get 'caught' with descenders of the glyphs above.

Second of all, some languages that are not latin based, for instance Arabic will benefit from a slightly bigger font size. This will then dictate your line-height.

Remember the so called typographic triangle where the measure (the number of characters per line) competes with the font size and it's line-height. Plus you have to take into account the typographic hierarchy; so headers (H1-H6), paragraphs, lists etc.

Finally when you have a responsive website it gets even more complicated with device width. Smartphones will benefit from a slightly bigger font than desktop so this will feed into the measure and line height. There are lots of solutions out there, mostly SASS/SCSS based but it takes some work.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.