How to make text properly aligned with padding in SwiftUI? - swift

Question

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?

Answer 1

You have chosen a font in which capital ‘E’ has a noticeable left side bearing. Left side bearing is the distance from the “pen position” to the left edge of the tight bounding box of the glyph.
That's why your lines of text look misaligned. Here's my test:
PlaygroundPage.current.setLiveView(
VStack(alignment: .leading) {
Text("Enter your phone number")
.border(Color.red, width: 1)
.font(Font.custom("URWDIN-Thin", size: 30))
Text("You will be sent a code for verification")
.border(Color.red, width: 1)
.font(Font.custom("URWDIN-Thin", size: 16))
Text("Enter your phone number")
.border(Color.red, width: 1)
.font(Font.system(size: 30))
Text("You will be sent a code for verification")
.border(Color.red, width: 1)
.font(Font.system(size: 16))
}
)
Output:
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’.