FIELD GUIDE · 6 MIN READ
Design names for narrow screens and long sessions
Use full forms, short forms, and stable labels without making readers decode the interface.
Define the display contexts
List the actual places where a name appears: a phone card, a menu, a journal heading, a subtitle, or a printed map. Each has a different amount of space and surrounding explanation. A long title may work in an introduction but fail in repeated selection. Keep the role visible in plain text where it matters. A creative name does not remove the need for an informative action label such as Open, Copy, Save, or Return to tool.
Separate identity from title
Maela can appear as a large name with Echo Registrar on a second line. This preserves the relationship without shrinking both into a compressed single line. Establish the full form once, then use the short form consistently in repeated contexts. If two characters share a given name, choose a deliberate distinguishing form rather than letting automatic truncation decide. Keep the complete form available in an ordinary visible view, not only in a hover behavior that a touch or keyboard user may never reach.
Prefer wrapping before extreme shrinking
Allow a reasonable line break when the component can grow. Check whether the first line still distinguishes the entry from its neighbors. If a fixed layout requires truncation, compare the truncated forms themselves. Two distinct titles can become identical when only the same opening phrase survives. Do not keep reducing font size to protect decorative wording. A shorter approved form may serve the task better while the full ceremonial title remains available in a heading or detail view.
Keep the words available as text
Essential names and instructions should be selectable text rather than writing embedded only in a PNG illustration. A PNG logo can have an appropriate text alternative, while the page heading remains ordinary text. Decorative category icons should not carry the only explanation of a category. Use visible labels for controls and useful alternatives for meaningful images. This supports copying, search, translation tools, and assistive technology without requiring the artwork itself to become an information system.
Check keyboard and zoom contexts
Move through the actual interactive controls with a keyboard and inspect the focus indication. Read the page at a larger text size and a narrow viewport. Watch for horizontal page overflow, clipped buttons, and names that cover other content. A horizontally scrollable comparison table can be appropriate if it is contained within the page and the surrounding labels remain clear. A whole page that becomes wider than the device usually needs a layout revision rather than smaller lettering.
Preserve continuity during a rename
Keep the stored internal reference stable while changing the visible label. Update the full form, short form, dialogue references, search labels, metadata, and screenshots together. If a public product is renamed, explain continuity where readers need it. Avoid leaving old and new labels mixed without context. For a local writing notebook, a brief change log can be enough: what changed, why it changed, and which files or scenes still need revision.
A focused screen exercise
Choose the longest important candidate in the project. Put it beside the nearest two names at the narrowest intended width. Try wrapping, a two-line title, and a short form. Compare the same task in all three versions. Keep the version that preserves identity and readability with the least explanation. Document the result as an editorial check unless you have actually conducted a suitable user study. Read the final version aloud too; visual and spoken ambiguity can be different problems.
PUT IT INTO PRACTICE
Try the method on a fresh name.
Open the related naming toolCreative drafts. Check suitability and existing uses before publication.