Skip to content
Submitted 11 months ago

NextJS, Tailwind, React Hook Forms, react-map-gl

Thomas TS•810
@ttsoares
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Arch Studio multi-page website
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

In the Figma file, there are texts using 120px and 48px. Those font sizes are not part of the typography specifications. My approach was to use custom values to those cases, like the classes text-[7.5rem] and text-[3rem]. The problem is that this result in a line height that do not match that seen in the Figma designs...

What is the recommendation in this situation ?

Community feedback

  • Luan Barcaça•500
    @barcacaPosted 11 months ago

    I have two feedback option:

    Option 1:

    <div class="text-[7.5rem]/[110px]">
 Your text here.
</div>

    This option seems to attempt setting both the font size and line height directly.

    Option 2:

    <div class="text-[7.5rem] leading-[3rem]">
  Your text here.
</div>

    This option is more aligned with Tailwind CSS conventions. It separates the font size .text-[7.5rem] and line height .leading-[3rem]

    I would suggest referring to the official Tailwind CSS documentation on Font Size and Line Height. This will ensure a consistent and well-supported implementation.

    I hope you found this helpful

    0
    Thomas TS•810
    @ttsoaresPosted 11 months ago

    @Barcaca Thank you for your comments. I'm aware of those syntaxes to define the line height. My doubt was more about how to handle situations where the designer's work is not 100%. We, devs, should choose what to do, or we report the issue and wait the fix from the designer...

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord