Mobile app version of vmapp.org
Login or Join
Connie430

: Rectangle and circle shapes alignment/sizing I am having a hard to figure out what are the right proportions between a rectangular and a circular shapes and how to horizontally align them. These

@Connie430

Posted in: #Alignment #PageLayout #Shapes

I am having a hard to figure out what are the right proportions between a rectangular and a circular shapes and how to horizontally align them. These two shapes are two icons but they always look wrong to me. I wonder if there is a clear rule to avoid perception influence and align and size them right.

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Connie430

1 Comments

Sorted by latest first Latest Oldest Best

 

@LarsenBagley460

I think you are asking about the graphical implementation of an overshoot, commonly used in typography. In short, overshoot is added to letters like A and O (pointy or round—like circle in your example) to visually make them look the same height as f.ex. H and X ("flat", rectangle-like).

The sources of the Wikipedia article suggest overshoot of 1–3 % or 5 % for O. Keep in mind these are suggestions for typefaces and differ from font to font. You're better of trying different ratios and choosing one that is the most æsthetically pleasing in your opinion. Of course you could use the given percents as a starting point.

In practice:


Align your rectangle and circle by their centers
Choose a ratio—say, 5 %
Resize the circle by its center using double the value you've chosen (ie. 10 % in this example) as in typography the 5 % is added only vertically with the baseline as pivot point.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme