So I have these two texts that I'm trying to align at the same pixel basically, but it seems that one is more offset than the other. Like so, the one on the bottom seems to be further left than the other.
Here is the code:
VStack(alignment: .leading) {
Text("Enter your phone number")
.padding(15)
.frame(alignment: .leading)
.foregroundColor(Color.white)
.font(Font.custom("URWDIN-Thin", size: 30))
//Subtitle
Text("You will be sent a code for verification")
.padding(15)
.frame(alignment: .leading)
.foregroundColor(Color.white)
.font(Font.custom("URWDIN-Thin", size: 16))
Any idea as to why this may be?
CodePudding user response:
You have chosen a font in which capital ‘E’ has a noticeable left side bearing.
Notice how, in both URW DIN Thin and in the system font (SF Pro), the capital ‘Y’ has a left side bearing of essentially zero: both glyphs touch the left edge of the frame.
The left side bearing of SF Pro's capital ‘E’ is not zero but it's small: a fraction of the vertical stroke width.
But the left side bearing of the capital ‘E’ in DRW UDM Thin is significant. It's about twice the vertical stroke width. That makes it quite noticeable compared to the zero bearing of the capital ‘Y’.