We are translating our application to Spanish. This has caused some text to auto hyphenate on one of the buttons. I know the current implementation isn't ideal,but i'm not sure what the best solution is. Do I:

  • Leave the word hyphenated?
  • Shrink the text size and cause inconsistencies with other buttons?
  • Remove the icon when viewing the application is Spanish?

Some of these options make the experience different from when viewing the application in English.

  • How much freedom do you have in this environment? Can you add a larger image that shows this button in context? Commented Mar 2, 2016 at 16:28
  • Without seeing context, in this case I would put the icon above the text, and use slightly smaller or more condensed type.
    – ghoppe
    Commented Mar 2, 2016 at 16:58
  • Mute is a universally understood concept, and the icon itself should suffice. You don't need to label it.
    – invot
    Commented Mar 2, 2016 at 20:00

4 Answers 4


Have you thought about changing the name of the (English) label. You could change the label to 'silent', 'mute', 'off' etc. This should translate well and leave you with space for the icon without dramatically increasing the depth of the button. The icon will already give the user a good idea about the function the button serves.

  • Suggestions: CESAR; cease, stop, end, terminate, break, disable. APAGAR: turn off, put out, blow out, turn out, douse, mute. SILENCIAR: silence, hush, shush. Commented Mar 2, 2016 at 17:30

You can try one of the following options :

  • Use abbreviation in Spanish i.e. Bocina Desact.
  • Increase button size in both English and Spanish
  • A combination of the above, increase the size a little and use a longer abbreviation i.e. Bocina Desactiv.
  • Use only the icon. In the example you give, the icon is very descriptive, the text is redundant

I'm working with an application that supports five languages, incl. Spanish and German (notorious for long words), here are some best practices we follow to accommodate all languages.

  • Translators are encouraged to keep strings short. Often when a translator is inexperienced they try to translate the English copy literally. We ask them to look at the context and express the copy in a way that makes sense in their language. Often this shortens the text. This often also helps with the UX because a user is more likely to read a shorter string.

  • UI is designed and written as dynamic as possible. The most important click target (often a button) usually stretches across the full width (with some margins on the side) so it can fit short and longer strings. But we do not allow to have two lines of text. If that is the case, we go back to the translator and ask them to shorten the string. Elements are composed in a way that pieces that will likely vary in size in different languages have space to expand if necessary.

  • Wherever possible use universally understood icons instead of copy.

When adding your first language after the primary, this is an upfront cost but it will make your life so much easier down the road. If you start introducing special cases for a certain language you will have to go back to all these points when adding your next language and update them for the new language.

I would not shrink the font size, on small devices that might get so small that it's hard to read and it changes the visual experience. In my opinion it's not a long term solution.


I think it's OK to shrink the text size, of course you should see if it harms the visual consistency with the other buttons. If it's an option, you can shrink the text on the other buttons in this screen.

My answer is based on the Translation app of google that can translate signs in real time.

They adjust the translated text according to the sign it's written on.

enter image description here

Your Answer

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