Putting a logo on a grid
Matching a symbol to a wordmark by eye means the proportion drifts every time the size changes. Fixing one grid unit and deciding how many units each element occupies keeps those relationships intact as the logo scales, and keeps it aligned with the spacing system in the interface. Enter the dimensions and the unit counts, the ratios and anything off the grid are listed at once.
How it is calculated
Units for each element = dimension divided by the grid unit. Total width = symbol width + gap + wordmark width, and total height is the larger of the two heights. Units are shown to two decimals and judged whole at that precision; the snapped value is the unit count rounded and multiplied back by the unit size. Ratios are written with the symbol as 1.
Limits
As of October 2026 there is no official standard for the ratio between a symbol and a wordmark or for how many units either should occupy, so this tool proposes nothing and passes no judgment. Clear space, optical centring and the optical size differences of the letters themselves are not modeled, so check the final proportion by eye.
Frequently Asked Questions
There is no official standard. Using the spacing unit your design system already relies on makes the logo and the interface share one grid.
No. The clear space around a logo is handled by the logo safe zone guide. This tool only covers the proportions inside the logo and their grid multiples.
Not necessarily. But an element off the grid tends to look misaligned next to interface spacing, so use the adjustment figure to decide whether to change it.