@habitualshaker
I am trying to perfectly match the link text in a Source Nav Bar with the text in a Nav Bar CTA Button so that they look identical.
The use case is that the CTA button is a Contact Us button that doesn’t go to a Contact Page, but scrolls down to the footer using an anchor link. The client wants it to look exactly the same - as if it were part of the navigation.
However, the font in the button seems to have slightly more letter spacing than the font in the Nav bar.
I am using the same Custom Font for both, and in Source Custom Fonts there is a setting to adjust Line, Letter or Word spacing. However, I can’t get it to do anything. Any tips?
Demo link: difference is very minimal I know but with some fonts it shows rather more.
Hi @manofdogz Have you tried creating and applying a CSS class with defined letter-spacing (in rem or another unit) to both the button and the menu? Something like:
.cta-button, .nav-link {
letter-spacing: 0.05em; /* Adjust the value */
}
No. I could give it a go but, given the custom fonts stack has letter spacing baked, in I should be able to apply it in there (I’m using 2 custom font stacks - one for the nav and one for the button). I can’t get it to adjust at all.
Hi @manofdogz - can you email me your demo project and i will check it? stuart at shakingthehabitual dot com
A better alternative might be to use a little code to append your contact us link as an additional link in the nav bar. i can show that option in the demo file when i reply.
