[HN Gopher] Continuous Typography
       ___________________________________________________________________
        
       Continuous Typography
        
       Author : csbartus
       Score  : 83 points
       Date   : 2021-03-20 14:44 UTC (8 hours ago)
        
 (HTM) web link (maxkoehler.com)
 (TXT) w3m dump (maxkoehler.com)
        
       | abelaer wrote:
       | Pretty ironic that the demo is totally unusable on mobile.
        
         | tfsh wrote:
         | Is it? I wouldn't say ironic, however I can see why you might
         | reach that conclusion.
         | 
         | The demo isn't a representation of a productionised end
         | product. It is a playground representating the findings of the
         | authors article for desktop users; it simulates a dynamic
         | window which you can resize using your mouse - so the demo not
         | functioning properly on mobile seems acceptable.
        
       | carapace wrote:
       | "Parametric" is the word not "continuous", as in "parametric
       | design": https://en.wikipedia.org/wiki/Parametric_design
       | 
       | https://www.danieldavis.com/a-history-of-parametric/
       | 
       | https://www.danieldavis.com/parametric-typography/
        
         | smitty1e wrote:
         | > The font size on paragraphs is equal to the width of the
         | reader's screen multiplied by 0.01. That's a continuous
         | function.
         | 
         | I was wondering how "discretely" to inform him of this.
        
           | wereHamster wrote:
           | `font-size: 16px` is also a continuous function. I've been
           | using <<Continuous Typography>> since I started web dev!
        
             | smitty1e wrote:
             | I'm after the point that continuous==analog, and therefore
             | impossible on a digital system.
        
         | vbernat wrote:
         | I think the author point is that the different parameters are
         | continuous with respect to the screen width, by opposition of
         | just using media queries to go from 16px to 18px for example.
         | And "continuous" is the right mathematical term for this.
        
         | thorel wrote:
         | I agree that "continuous" is a poor choice of word. Reading the
         | article, it is clear that the author does not care about
         | continuity in the mathematical sense of the term, but rather
         | about allowing the design parameters to vary as a function of
         | the user's environment parameters.
         | 
         | As mentioned in some other comment, a constant function is
         | continuous but is obviously not what the article is about.
        
       | mokash wrote:
       | I like the graphs on this page - I wonder how they were developed
        
       | adultSwim wrote:
       | Someone call Donald Knuth
        
       | emeraldd wrote:
       | Does this result in text that does not change size with zoom?
       | I've seen several sites where it is all but impossible to change
       | zoom levels because the whole site resizes itself. This "feature"
       | drives me nuts when I run into it ...
        
       | magicseth wrote:
       | A combination of vw and vh were ultimately how I decided to
       | tackle the problem. I'm very happy with the amount of control and
       | flexibility I ended up with on my slightly design heavy website.
       | 
       | Https://magicseth.com/
        
         | xwx wrote:
         | This doesn't seem to work with Firefox. A blue splash fills the
         | whole screen and stays there until I move my cursor outside the
         | window or right click.
        
           | magicseth wrote:
           | Thanks!! Apparently this: width: calc(100px / 100vw);
           | 
           | Is not valid in Firefox!
        
             | magicseth wrote:
             | Hopefully it's fixed now!
        
         | nanna wrote:
         | Have you seen Stump the Guesser by Guy Maddin? Your site
         | reminds me of it.
        
           | magicseth wrote:
           | I haven't! What aspect is similar?
        
       | csbartus wrote:
       | For those interested in the source code for the example:
       | https://github.com/awesomephant/continuous-typography
        
       | muglug wrote:
       | The demo given at the bottom helps you understand what this is
       | getting at (it's desktop-only):
       | 
       | https://awesomephant.github.io/continuous-typography/
        
         | allenu wrote:
         | The demo should be the first thing on the page! It really gets
         | to the point.
        
       | somishere wrote:
       | I've used a similar technique on sites for many, many years ..
       | specifically using the calc function to define body-level font
       | sizes (page dimensions ratios) for each breakpoint, which can
       | then be used to size everything else on the page (eg. img =
       | 16rem; margin = 2.4em). It works really well, and saves a lot of
       | time with responsive design as you only need to consider each
       | breakpoint / ratio change. I don't think it's a particularly
       | novel concept though.
        
       | skrebbel wrote:
       | Wow I think this is a fantastic idea that feels pretty
       | unexplored, still. I hope this might become so commonplace that
       | one day we'll have css shortcuts for them, not unlike "ease-in"
       | for transition timing and the likes. Combining the screen size
       | and the user font size seems like a pretty great idea,
       | especially!
        
         | andrepd wrote:
         | Knuth tried this with METAFONT.
        
       | l0b0 wrote:
       | CSS needs fewer font display options, not more. People have got
       | drunk on text customization ("branding"), resulting in a web
       | where no two sites read the same way. A few months ago I unticked
       | "Allow pages to choose their own fonts, instead of your
       | selections above" in Firefox, and I've not looked back.
        
       ___________________________________________________________________
       (page generated 2021-03-20 23:01 UTC)