Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Maintain a constant label size
  • Fine-tune the scaled label size

Was this helpful?

Edit on GitHub
  1. Frequently Asked Questions

How do I control label size while scaling element size?

PreviousHow do I copy a map to another project?NextHow do I control text wrapping?

Last updated 21 days ago

Was this helpful?

If you're using a quantitative value to , your labels might sometimes be too big or much too small for some elements. When that happens, you can follow this guide to have more precise control over your label size.

Maintain a constant label size

If you used the Size by tool in the Basic Editor to create your size decoration, your element labels will have varying sizes:

Open the Advanced Editor, and find the code that looks similar to this:

@settings {
    element-scale: scale("Field", 1, 10);
}

In your code, Field will be replaced by the name of the field you sized by, and the 1 and 10 will be replaced by the numbers you set when creating the decoration. At this point, you need to change the element-scale property to element-size, like so:

@settings {
    element-size: scale("Field", 1, 10);
}

Then, you'll need to change the numbers inside the scale() function to create the proper visual effect. This is because the element-scale property interprets the numbers as size multipliers, while the element-size property interprets the numbers as actual, precise element sizes.

Try starting with numbers like this:

@settings {
    element-size: scale("Field", 20, 200);
}

Then, change the 20 and 200 until you see a visual effect on your map that you like.

At this point, your label will maintains a constant size, but if you want to change that size, you can use the element-font-size property in the @settings block:

@settings {
    element-size: scale("Field", 20, 200);
    element-font-size: 20;
}

Change the 20 to any number to find a label size that works for you.

Fine-tune the scaled label size

If you like the look of scaled label sizes, but you don't quite like the way Kumu has scaled them, you can use the Advanced Editor to fine-tune the label size scaling. This is particularly useful when you've aligned element labels to be in the center of the elements, and you want to make sure each labels fits inside its element.

Open up the Advanced Editor, and use the font-size property and scale() function to set a minimum and maximum label size:

element {
    font-size: scale("Field", 10, 50)
}

Change the 10 and the 50 while observing the visual changes on your map. Through trial and error, you should be able to find a minimum and maximum value that makes the scale work well for all elements.

Tip: Find the largest scaled element on the map. Tweak the maximum font-size until the largest element's label looks good. Then, find the smallest scaled element, and adjust the minimum font-size until the label looks good. From there, make slight tweaks to the minimum and maximum until all elements on the map look good.

To make sure your labels always maintains a constant size, even while the circles scale up and down, you can tweak your size decoration in the .

If you don't want this setting to apply to all elements, replace element with any valid .

selector
scale the size of elements
Advanced Editor
font size example
scaled label