Text

Learn how to work with text in Lunacy

Text is one of the key aspects of almost every design project. This section describes how to work with text layers in Lunacy.

The figure below shows the location of text-related controls in the Lunacy interface.

Text-related

  1. The Text section. Appears in the Inspector when a text layer is selected. Features all the settings that you might need when working with text.
  2. The Text menu. Includes all the settings available in the Text section of the Inspector, plus the Convert to Outlines command. This command also appears on the context menu and lets you convert text to vector shapes.
  3. The Edit Layer button. The button appears when you select a text layer. Click this button to start editing the text. Alternatively, just press Enter.
  4. In the Appearance section you deal with reusable text styles.
  5. The Generate text button. A click over the button generates a random text. A click over the down arrowhead next to the button invokes the menu with text generation options.
  6. The Advanced options button. Opens a panel with such text options as letter case, numbered and bulleted lists, etc.

Adding text layers

There are two ways of adding text layers.

Way 1. Click and type

  1. Select the Text tool on the toolbar (or press T). The pointer changes to +T.
  2. Click anywhere on the canvas to insert your text layer. Once you click, a new text layer with the Type something placeholder appears.
  3. Start typing to replace the placeholder with the text of your own.
  4. Press Esc to exit the edit mode.

Lunacy applies horizontal resize to the text added this way.

Way 2. Click and drag

  1. Select the Text tool on the toolbar (or press T). The pointer changes to +T.
  2. Click on the canvas and hold down the mouse button.
  3. Drag to create a text layer of the required size. Lunacy will add a random text to fit the size of the layer. If the auto-text exceeds the block size, you can delete the excess or leave it as is. It won’t be visible unless the text block is in the edit mode.
  4. Press Esc to exit the edit mode.

Note: You can use the Shift + R shortcut to refresh the auto-generated text.

Adding text to shapes

In Lunacy, when you need to add a text to a shape, you can do it in three simple steps:

  1. Select the required shape.
  2. Select the text tool or press T.
  3. Enter your text.

As you do it, Lunacy automatically creates a group layer with the shape and text layers. This small feature can be of great use when it comes to design of such UI elements as buttons, menus and things alike.

Editing text

To edit a text:

  1. Select the text layer in the Layer List or by clicking it on the canvas.
  2. Press Enter or click the Edit Layer missing fonts button button on the top bar to enable the edit mode.
  3. Enter a new text or edit the existing one.
  4. When done, press Esc to exit the edit mode.

When editing text settings you don’t need to select a word or the whole text to make it bold, italicized or whatever. Just set the caret inside a word or at the end of the text and apply the required setting. In the latter case, the setting will be applied to the whole text.

See also the Text settings section below.

Text settings

When you select a text layer, the Text section appears in the Inspector. The section features the basic text settings. Also, you can click the settings button at the top left corner of the section to access advanced settings.

Text controls

Text settings include:

  1. Font family
  2. Font weight
  3. Font size picker
  4. Line spacing
  5. Letter spacing
  6. Font color picker
  7. Paragraph spacing
  8. Text generation options
  9. Text block resize options
  10. Text alignment
  11. Text position
  12. Letter cases
  13. Underline and strikethrough
  14. List types
  15. Superscript and subscript

For details about each group of settings, read the sections below.

Font family

The default font in Lunacy is Inter. To select another font:

  • If you know the name of the font you need, type it in the text field of the font picker.

    OR

  • Expand the font family list and pick up the one you like.

Font picker 1

The top section of the font family list shows the three fonts that you’ve recently used. The three buttons at the top of the list allow you to quickly filter the content of the list:

  • All: Shows the full list of fonts.
  • System: Shows the list of fonts (TTF/OTF) installed on your computer.
  • Google: Shows the list of fonts available in the Google Fonts library. You don’t need to download them. Lunacy will do it automatically. Lunacy’s integration with Google Fonts will solve most of your problems with missing fonts.

The list shows font names and their samples. If a font’s name is too long and appears truncated, hover a cursor over the name to view the full name. When you hover the cursor over font samples, Lunacy will display their larger previews. Google fonts come without samples until used.

Font picker 2

Note: You might experience a slight loading delay when applying a Google font for the first time. Also, if your computer is not connected to the internet, the list of Google fonts will include only those fonts that you have already used.

Missing fonts

When you open a project received from your team or downloaded from the internet, Lunacy checks if all the required fonts are available on your computer. If some of them are missing but they are available in the Google fonts library, Lunacy will download and apply them, provided that your computer is connected to the internet. But if those fonts are not from the Google library:

  • The default Inter is applied to the text layers with missing fonts.
  • Upon selection of these layers, the name of the missing font appears in red in the font picker, as well as in the Layer list.
  • The missing fonts button appears on the top toolbar.

Missing fonts 1

A click over the button invokes a dialog box where you can select replacements for the missing fonts.

Missing fonts 2

Font weight

Each font family comes with different sets of weights (also known as font styles), which might include: Regular, Bold, Semibold, Italic, etc.

The text weight control allows you to select the required font weight. If a font has only one weight, the control appears disabled:

Font weight control

Also, you can use standard text editor shortcuts:

  • Ctrl+B/⌘ BBold
  • Ctrl+I/⌘ IItalic
  • Ctrl+U/⌘ UUnderline

Font color picker

This control is a standard color picker that lets you choose the required color:

  1. From the color field.
  2. From preset colors.

Also, you can manually enter the required color code (3).

Font color picker

Font size picker

Use this control to define the required font size in pixels. You can do it by:

  • Selecting the required size from the list.
  • Entering the required value in the edit field.
  • Using the mouse wheel.
  • Using the Ctrl + Alt + "+"/⌥ ⌘ + (increase) and Ctrl + Alt + "-"/⌥ ⌘ - (decrease) shortcuts.

Mixed font settings

Mixed settings

You can apply different font settings of the same type (fonts, colors, font sizes or weights) to a text within a layer. In such a case the respective controls in the Inspector will display Mix.

Text alignment options

Alignment buttons

Use these buttons to align and justify the text inside the text box. Alternatively, you can use the following shortcuts:

  • Ctrl + Alt + {/⌥ ⌘ { — align text to the left.
  • Ctrl + Alt + T/⌥ ⌘ T— center text.
  • Ctrl + Alt + }/⌥ ⌘ } — align text to the right.
  • Ctrl + Alt + J/⌥ ⌘ J — justify.

Line, letter, and paragraph spacing

Spacing buttons

Use these settings to adjust line, letter, and paragraph spacing. Their default values are set x, 0, and 0 respectively, where x depends on the selected font family, font weight, and size.

The default line spacing appears in grey. When you change it, the figures in the box turn black. To restore the default value, delete the current value and press Enter.

You can change spacing values in the following ways:

  • By entering the required values in the edit fields.
  • Using shortcuts:
    • Ctrl+Alt+>/⌥ ⌘ > or Ctrl+Alt+</⌥ ⌘ < — increase or decrease line spacing.
    • Ctrl+Shift+>/⌘ Shift > or Ctrl+Shift+</⌘ Shift < — increase or decrease letter spacing.
    • There is no shortcut for paragraph spacing.
  • By using the mouse wheel or dragging the mouse up and down as shown below.

See also: Tips on working with the Inspector.

Text block resize options

Resize buttons

These three buttons determine the behavior of text boxes depending on the size of the content.

  1. Horizontal resize: In this mode, the text box expands horizontally as wide as it is required to fit all the content on a single line.
  2. Vertical resize: In this mode, the text box adjusts vertically to fit all the content while the width of the box remains unchanged.
  3. Fixed size: In this mode, the size of the text box is fixed and, unlike in the above two modes, does not adjust to fit the content.

You might also find handy the auto-resize feature: double-click the borders of a text box to make it fit the text (see the demo below).

Note that a double-click over the right or left border sets the text box to the horizontal resize mode and transforms a multiline text into a single line.

Position alignment

Position alignment buttons

Use these three buttons to adjust the position of text content within the text box:

  • Align to the top border of the text box (default).
  • Center text horizontally and vertically within the text box.
  • Align text to the bottom border of the text box.

Text alignment magnets

You can also align text within text boxes using the alignment magnets that appear around the text box when you select it. They combine the functions of the text alignment and position alignment controls. The demo below shows how this nice feature works.

To disable the display of magnets, go to the View menu and uncheck the Text Alignment Magnets option.

Advanced text options

To open the panel of advanced text options, click the settings button at the top left corner of the Text section.

Advanced text options.

The panel features the following:

  • Letter case options:

    • Aa: Sentence Case (First Letter Uppercase And The Rest Lowercase).
    • AA: ALL UPPERCASE.
    • aa: all lower case.
  • Underline and strikethrough options.
  • Numbered and bulleted lists.
  • Superscript and subscript

Common layer effects

In addition to text settings, you can also apply common, non-text, styling effects to text layers which include:

  • Fills
  • Borders
  • Shadows
  • Inner shadows
  • Blurs

All these settings appear in the Inspector, below the Text section.

Common layer settings.

Combinations of layer styling effects and text settings make up text styles. You can save text styles to the document assets and reuse them across your project. Also,you can find your recent text styles on the floating panel (see below).

Note: When you edit a text whose style includes both text and common layer settings, Lunacy hides layer styling effects and shows them back once you exit the edit mode. This is for the ease of editing heavily styled texts (see the gif below).

Hiding common layer effects

More about styling properties.

Converting text to vector shapes

Lunacy enables you to convert text layers into vector shapes.

For this:

  1. Select a text layer and click Text on the menu bar or left-click over a text layer to invoke the context menu.
  2. On the displayed menu, select Convert to Outlines. Lunacy will convert letters into a group of vector shapes, which will appear in the Layer List.

Alternatively, you can use the Ctrl+Shift+O/⌘ Shift O shortcut.

Converting text to vectors

Note: Remember that the text-to-vector operation is demanding in terms of system resources. Attempts to convert large portions of text can seriously slow Lunacy down .

Text generation and text snippets

Lunacy has a nice text generation feature that solves the headache of picking up texts for your prototypes. It works both for large text blocks and short text instances such as people names, mail and email addresses, phone numbers, etc.

When you add a text block using the click-and-drag method, Lunacy automatically inserts a random text which fits or slightly exceeds the block size. If you don’t like the generated text you can refresh it.

For this:

  1. Select the text layer.
  2. Click the Generate text button in the Inspector until you get the text that you find acceptable. Alternatively, you can use the Shift+R shortcut to refresh the content.

Generate text buttons

To generate such texts as names, addresses, etc., proceed as follows.

Way 1. Selecting from the menu

  1. Select the required text block.
  2. In the Inspector, click the down arrowhead next to the Generate text button. A menu with text categories appears.
  3. Use the menu to select the required content. If necessary, use the Shift + R shortcut or the Generate text button to refresh generated content.

Generate text menu

The Auto Refresh option on the menu enables/disables text generation in duplicated text blocks. With this option selected, when you duplicate a text block with an autogenerated text, the new block will contain a new text.

Way 2. Using text snippets

In Lunacy, text snippets are short commands for generation of specific texts. Snippets always begin with a semicolon (;) followed by a full or short form of the command. For instance, to generate an email address, you should type ;email or ;em. To generate a credit card number, type ;creditcard or ;cr, and so on. You can always look up the list of snippets on the menu with text categories (see the figure in Way 1) or in the shortcuts panel.

  1. Select the required text block.
  2. Press Enter or click the Edit Layer button on the top bar to enable the edit mode.
  3. Enter the required snippet and and press Esc. Use the Shift + R shortcut to refresh generated content, if needed.

Using snippets

Fonts Embedding

You can embed fonts into your document before sharing it with other people. This ensures that text layers will look exactly as you designed them everywhere even if a computer doesn’t have all the right fonts.

To use this feature, click Text > Fonts Embedding on the menu bar. In the displayed dialog box, select the required fonts and click the Embed fonts button.

Fonts Embedding

Note: By embedding a font you confirm that you have a proper license that allows you to distribute the font.