fluid typography - SOLVED

  • @rstoenescu said in fluid typography - SOLVED:

    Giving a hint on what’s to come, since we’re on the subject of design. We are planning to launch a Quasar themes website and also teach people how easy it is to create custom Quasar v1.0 themes.

    That’s excellent news … really looking forward to it.

    I really love everything that you’re doing with Quasar (hence why I became a Patreon) and I’m highly impressed by what you’ve achieved so far, and the awesome App Extensions that have started appearing … and the responsiveness of the team is simply amazing.

    The future looks very bright for Quasar …

    I just wish more Quasar users would help support the team … or at least write a nice comment over on your Medium article …


  • @rstoenescu said in fluid typography - SOLVED:

    … Quasar is looking into the future and sets its own high and modern standards. And yes, in order to make progress in web development you need to break the current establishment. Otherwise we’d all be continuing to write websites in cgi-bin / perl today too, because maaany years ago that’s what developers were accustomed to. And what most developers are accustomed to at one point in time doesn’t actually mean it’s the best solution or the “definite” solution, and Quasar will never bend into choosing what we believe is not the optimal path to high quality work, not even over money.

    We now have limited resources, but if you take a look at what has been achieved here then imagine what we can do with proper resources. What I want to achieve with Quasar is to raise the bar for web development as a whole. Make it go forward, evolve. Change minds. Point out when there’s a better alternative.

    Please, please put above words somewhere on the main page. This is so strong, power and emotional narrative. Pure energy which leads and shows the new way to people. I’m in awe of those words, you used so many emotional and strong terms in such a short content. Almost like a poetry, but for developers 🙂 Please, use those words not only on this forum but for rest of the world to hear. They deserve it.

  • @rstoenescu 👏
    that’s great to hear and I’m happy to had decided using Quasar. I’m using it in a project which I’ve started with some guys. The more I use Quasar and feel more and more familiar with it, the more I love it.
    Although we yet don’t earn any penny with our project, I’ve decided to become a patreon. Just startet with the $10 monthly plan but surely will upgrade if we make the first turnover.

    The only reason I post this here, is the hope that other developers will think about spending $10 a month too. I’m convinced that’s totally worth it and only fair. Developers using Quasar should not risk that one day the Quasar-team might loose motivation. Being a little bit grateful is not the worst…

  • I just discovered that there are plans afoot for a comprehensive overhaul of Quasar’s responsiveness … and the team are looking for feedback about their plans …

    Head across to the Github page and leave your comments about their plans …


    It certainly sounds as though the team are giving this matter very serious consideration and trying to provide us with the best possible solution …

    Others more knowledgeable than me should pitch in a give their feedback to assist the team on finalizing their plans …

  • Thank you all for your helpful posts, especially @qyloxe for detailded explanation. I personally like tachyons harmonious font scale. With rfs & https://type-scale.com/ it’s really easy to create any scale you want (and rest sure that rfs will make it responsive).

  • @kosirm That https://type-scale.com/ looks very interesting … thanks for posting that link.

  • On my box rfs is not working with q-markdown (quasar ext add @quasar/qmarkdown), which is fantactic extension. I’m totally new user (5 days of Quasar experience). Any idea, how can I make rfs to work with my markdown text?

  • For my curiosity, what is a “box rfs”?


  • sorry i thought on my computer (win10, quasar 1.05, etc ) and rfs is https://github.com/twbs/rfs

  • @kosirm that RFS package looks very interesting

  • @kosirm - Got it. Thanks for the clarification.


  • @digiproduct well I found it here on this page on @qyloxe explanation. But on the end of the day for me works better stylus function (thanks!!! @qyloxe). Forget about q-markdown, it was my mistake… I just needed to overwrite stuff in markdown.styl. Consider this solved 🙂

  • This is similar as @qyloxe code, just extended to other properties, so it can be used for padding, margin, etc.

    fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value)
      for $property in $properties
        {$property} $min-value
      @media screen and (min-width: $min-vw)
        for $property in $properties
          {$property} "calc(%s + %s * ((100vw - %s) / %s)) !important" % ($min-value (remove-unit($max-value - $min-value)) $min-vw (remove-unit($max-vw - $min-vw)))
      @media screen and (min-width: $max-vw)
        for $property in $properties
          {$property} $max-value
    // Single property example
      fluid-type(font-size, 320px, 1920px, 16px, 24px)
    // Multiple property example
      fluid-type(padding-left padding-right, 320px, 1920px, 10px, 30px)

    Works for me… Props to Fredrik Beckius! There are also more sophisticated versions, for example to make different scales for different breakpoints

  • Since finding this post I’ve been fiddling round with dynamic fonts specifically on form fields.
    So sharing a bit what I have set up so far.

    First though for some reason if rfs-base-font-size is not explicitly set (even if to default) then the fonts don’t resize. Note I use a “factor” so I know it’s bigger which according to docs should enable the resizing.

    Secondly like @kosirm noted although useful it doesn’t adjust the related class properties (height, padding etc). That’s ok I suppose but the smaller font on smaller devices could have a smaller field box height saving precious vertical space and not look so wonky. Too classes like q-field__label need more bottom padding at smaller font size in order to keep the field content from running into the label.

    Too looks like instead of using padding the field box height is controlled by the height parameter of .q-field__control. So would have to be able to grab the computed font size in order to scale that number I suppose.

    Bottom line is that quasar at this point is agnostic to the dynamic font size. So if the framework wants to support dynamic font size then just need easy ways to scale all the related classes/properties when the font size changes. One idea would be that the framework has variables for font-size of various components/elements (e.g. q-field). Then you set that dynamically or manually (with defaults) instead of messing with classes directly. Guess those variables can be part of the component rather than in the core. Then all related can be changed accordingly. Nothing in the core variables like that except $input-font-size which gets ignored when wrapped in a field.

    @import "../../node_modules/rfs/stylus"
    // rfs settable variables - commented are defaults
    $rfs-base-font-size = 1.25rem
    // $rfs-font-size-unit = rem
    $rfs-breakpoint = 1400px
    // $rfs-breakpoint-unit = px
    // $rfs-factor = 10
    // $rfs-rem-value = 16
    $rfs-two-dimensional = true
    // $rfs-class = false
    $field-font-factor = 1.3
    $field-label-font-factor = 1
      rfs($rfs-base-font-size * $field-font-factor)
         rfs($rfs-base-font-size * $field-font-factor)
       rfs($rfs-base-font-size * $field-label-font-factor)
       padding-bottom .3em // needs to be dynamic based on font size
       // height ??px // needs to be computed based on font size.  

  • Thanks for your elaborative interrogation @dgk. It’s true what you said, I noticed that I need quite a lot of tweaking to get visual style that I want with Quasar. Hopefully Quasar theming will get some love from dev team … for now “theme builder” (https://quasar.dev/style/theme-builder) is pretty basic… But overall quality and flexibility of whole framework is a few light years ahead of the competition, so I’m not complaining 🙂

  • The Typography in Quasar is an issue. It is a problem that it is hardcoded so it can’t be changed. What compounds the issue is it was hardcoded with no modern standards. No fluid formula, no REM, no Percentage. The typography limiting harms internationalization, Viewport issues with small devices etc. To load a presentable mobile page you are forced to use h4 which severely harms SEO.

    I was going to dance around to be politically correct but this single issue has forced me reassess Quasars ability to Serve my front end. I am so disenchanted I feel like I am forced to look at other front ends… Specifically Vuetify. I don’t know why there is reluctance but this issue has and will continue to drive prospective development companies away from the product. The ramifications of this single development decision will continue to grow exponentially.

    Other than this single issue developing in Quasar has been top notch.

  • @Chinook-Digital - What do you mean by hardcoded? There are a number of css variables for the typography.


  • @s-molinari I am going to eat some crow here but that is fine. I was trying to make some css modifications to the typography and they didn’t take. I read the accompanying documents on typography and read a post inferring the Typography was coming in via a cdn … and Now I can see that I am wrong. So I will eat some crow … well a bat 🦇

Log in to reply