Help Center
New to VisionScaper?
Start here
Help Center › Admin screens, field by field › Settings → Appearance & layout: Text and Shape & spacing tabs
Settings → Appearance & layout: Text and Shape & spacing tabs
Every control for font, text size, line height, corners, borders, shadow, spacing, icon size and animation speed.
Open Settings → Business → Appearance & layout, then the Text tab or the Shape & spacing tab. Text controls the font and how big and heavy words are. Shape & spacing controls corners, borders, shadows, spacing, icon size and animation speed. Every value is limited to a safe range so a screen cannot break.
Before you start
- Pick your scope under Change the look for (Just me, My business or Whole site).
- A group may be locked by the site owner (Fonts and text; Corners, borders and icons; Spacing; Motion). Locked groups show a lock note.
Fields: Text tab
| Field (exact label) | What it does for VisionScaper | What to enter and example | Default / notes |
|---|---|---|---|
Font type.font |
Chooses the typeface used across the app. Only fonts that stay readable at every size are offered. Atkinson Hyperlegible was designed for people with low vision. | Tap one: Rounded (default), System, Inter (clean), Nunito (friendly), Lato (classic), Atkinson Hyperlegible (easiest to read), Source Serif (premium). | Default Rounded. Web fonts load only when chosen. |
Text size type.size |
Makes all text, buttons and labels grow or shrink together. | Drag the slider. Range 90% to 130%, steps of 5%. | Default 100%. |
Line height type.lh |
Space between lines of text. | Drag the slider. Range 1.30 to 1.65, steps of 0.05. | Default 1.45. |
Letter spacing type.ls |
Space between letters, in em. | Drag the slider. Range -0.010 to +0.040 em, steps of 0.005. | Default 0. |
Heading weight type.hw |
How bold headings are. | Drag the slider. Range 600 to 900, steps of 100. | Default 800. |
Button text weight type.btnw |
How bold button words are. | Drag the slider. Range 600 to 800, steps of 100. | Default 700. |
| Preview (card) | A sample heading, paragraph and “Send quote” button that shows the result. | Look at it after each change. | Display only. |
Fields: Shape & spacing tab
| Field (exact label) | What it does for VisionScaper | What to enter and example | Default / notes |
|---|---|---|---|
Buttons shape.btn |
Corner style of all buttons. | Tap one: Pill, Rounded, Square. | Default Pill (fully rounded). |
Card corners shape.card |
How round card corners are. | Slider 0% to 160%, steps of 10%. | Default 100%. |
Field corners shape.input |
How round text boxes and drop-downs are. | Slider 0% to 160%, steps of 10%. | Default 100%. |
Other corners shape.rad |
Corner rounding of everything else. | Slider 0% to 160%, steps of 10%. | Default 100%. |
Border thickness shape.bw |
Thickness of outlines in pixels. | Slider 1 px to 2 px, steps of 0.5 px. | Default 1 px. |
Shadow / elevation shape.shadow |
How strong shadows under cards are. | Tap one: None, Soft, Medium, Strong. | Default Medium. |
Spacing & density density |
Space between and inside cards. Buttons and fields never get smaller than a finger. | Tap one: Compact, Comfortable, Spacious. | Default Comfortable. Locked if the site owner locked Spacing. |
Icon size icons |
Size of icons on squares and menus. | Slider 85% to 130%, steps of 5%. | Default 100%. |
Motion: Animation speed motion |
Speed of animations. Devices set to “reduce motion” always get calm animations. | Tap one: Normal, Faster, Slower, Off. | Default Normal. Locked if the site owner locked Motion. |
Steps
- Open the Text tab. Choose a Font.
- Move Text size up if people find the app small. Check the Preview card.
- Adjust Line height, Letter spacing, Heading weight and Button text weight only if you need to.
- Open Shape & spacing. Pick Buttons corner style and set the three corner sliders and Border thickness.
- Choose a Shadow / elevation level and a Spacing & density setting.
- Set Icon size and Motion.
- Use Preview on devices to check phone and tablet widths, then save or publish.
Tips
- For a crew that works in sun, try Large text (a ready-made look on the Look tab) or Atkinson Hyperlegible with text size 115%.
- Compact spacing fits more on a phone screen; Spacious is easier to tap with gloves.
- A slider drag shows the value next to it. The change is applied when you let go.
If something goes wrong
- Slider will not go further. Values outside the range are limited to the nearest safe value on purpose.
- Controls greyed out. The site owner locked that group.
- My font looks the same. Web fonts load when chosen. Wait a moment and check again.