Since I posted my article about minimum font sizes for different Power BI canvas sizes, I have been thinking about all the other UI elements on the screen.
Surely they would behave similarly to font sizes?
If font sizes need to scale proportionally to the canvas size to preserve readability and accessibility… then spacing, padding, margins, buttons, containers, and layout structure should behave the same way too. That idea led me to explore a more proportional approach to dashboard design.
The Case for Proportional UI Scaling
Instead of treating UI values as fixed numbers, we can scale them proportionally relative to the canvas height to preserve visual balance and hierarchy across different layouts. The method is based on a simple proportional scaling formula:
Scaled Value = Base Value × (Canvas Height ÷ 720)
Where:
- 720 represents the reference canvas height
- Base Value is the original UI value designed for that canvas
- Canvas Height is the height of the new report page
For example, if a padding value was originally 16px on a 720px canvas, scaling it to a 1080px canvas becomes:
16 × (1080 ÷ 720) = 24
This means UI elements grow proportionally with the canvas instead of remaining fixed while everything around them changes.
See the images below: using the same fixed margin across different canvas sizes creates visual imbalance. The layout feels tighter on smaller canvases and too loose on larger ones.
How Other Design Systems Handle Scaling
This proportional‑scaling approach is not new, it’s used across many established design systems. Responsive web design uses viewport‑based scaling, mobile platforms like iOS and Android scale UI elements relative to baseline densities, and game engines such as Unity and Unreal scale UI based on a reference resolution. The principle is the same: maintain visual hierarchy by scaling UI values proportionally. PBIX A11y adapts this proven method to Power BI, where it has never been applied before.
Base Values Across Different Grid Systems
Below is an example of how base values can be structured across different layout systems:
| UI Element | Default Grid | 8‑pt Grid | 10‑pt Grid |
|---|---|---|---|
| Margin | 30px | 32px | 30px |
| Padding | 12px | 16px | 10px |
| Icon Size | 16px | 16px | 20px |
| Border Radius | 6px | 4px | 5px |
When the canvas size changes, all these values scale proportionally using the same formula. See the images below, showing proportional margins scale with the canvas, creating a more balanced layout across all sizes compared to fixed margins.
Two Valid Approaches to Grid Alignment
One interesting side effect of proportional scaling is that values will not always stay perfectly aligned to traditional grid systems such as 8‑pt or 10‑pt grids.
And that is completely expected.
Because the scale factor is rarely a perfect multiple of 8 or 10, proportional values naturally drift away from strict grid increments. In many cases, preserving proportional relationships across the interface is more important than forcing every value back onto the grid.
That said, there are still two valid approaches:
• Choose canvas dimensions that naturally align with your grid system
• Or apply grid snapping after scaling to bring values back to the nearest grid increment
For example:
- 8‑pt grids align naturally when the scale factor is a multiple of 0.25
- 10‑pt grids align naturally when the scale factor is a multiple of 0.2
Which means some canvas heights produce cleaner scaling behaviour than others.
Wrap-Up
This method isn’t meant to be followed with absolute precision. It’s a practical guideline to help you create dashboards that feel visually intentional, scalable, readable, and more accessible across different layouts and devices. The goal is to give creators a consistent starting point, not to enforce strict numerical rules, but to support better design decisions as canvas sizes change.
To simplify the maths, I have implemented a new tool on PBIX A11y called the UI Layout Calculator, which helps scale UI values proportionally and optionally snap them back to 8‑pt or 10‑pt grids.
You can test it here:
PBIX A11y UI Layout Calculator
Thank you for joining me on this journey. Until next time, let’s keep crafting accessible and ethical insights that make a difference!
