[{"data":1,"prerenderedAt":314},["ShallowReactive",2],{"project-35150345":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":29,"sentiment":30,"stance_mix":31,"scored_comments":36,"aspects":37,"strip":45,"post_text":47,"what":48,"said":79,"maker_in_thread":171,"shape":179,"grid":183,"attempts":275,"same_week":276,"maker_shows":41,"maker_hidden":306,"reader_version":307,"card":308},"35150345","Modern Font Stacks","New system font stack CSS for modern OSs","title","Show HN: Modern Font Stacks – New system font stack CSS for modern OSs","https:\u002F\u002Fmodernfontstacks.com\u002F","modernfontstacks.com","danklammer",1678796688,2023,335,142,118,3109,4,"legend","dev_tools","css font stacks","web_app",[24,25,26,27,28],"system font stack","css font-family","system-ui","web fonts alternative","font fallback","curious",-0.111,{"positive":32,"neutral":33,"mixed":34,"critical":35},3,13,2,7,25,{"docs":38,"idea":40,"design":42,"execution":43,"performance":44},{"positive":39,"critical":39},0,{"positive":41,"critical":41},1,{"positive":41,"critical":18},{"positive":39,"critical":34},{"positive":41,"critical":39},[32,32,39,39,46,46,39,32,32,39,41,41,32,41,46,32,32,41,39,32,41,32,39,41,32,32,39,39,32,32,39,41,32,32,39],5,null,{"problem":49,"audience":61,"pricing":47,"motivation":47,"time_to_build":47,"stack":68,"openness":76,"stage":77,"team_size":78},{"value":50,"source":51,"evidence":52},"Choosing fallback font stacks for websites without webfonts, with stacks that look nearly the same across operating systems","inferred",[53,57],{"id":54,"by":55,"text":56},"35172480","nielsbot","I think these are fonts that are generally available on common OSes, so no webfonts needed, in order of preference\u002Fspecificity. You often (for me, an amateur, anyway) don't know…",{"id":58,"by":59,"text":60},"35177695","doodlesdev","I'm a big proponent of doing exactly what you say, however, for some companies the text rendering is an essential part of their branding (take Discord as an example). In those…",{"value":62,"source":51,"evidence":63},"Web developers who want to avoid webfonts",[64,65],{"id":54,"by":55,"text":56},{"id":66,"by":59,"text":67},"35177536","I would love to see more websites that do this: ``` font-family: system-ui, sans-serif; ``` Instead of trying to download fonts from Google Fonts (which I block though uBlock…",[69],{"value":70,"source":51,"evidence":71},"CSS",[72],{"id":73,"by":74,"text":75},"35172807","cantSpellSober","I've never had a designer tell me \"if x typeface isn't available, fallback to y.\" Simply fall back to the generic name unless specified. Why does \"Monospace Code\" begin with a…","open_source","launched","unknown",{"praise":80,"objections":101,"requests":127,"questions":146,"alternatives":158},[81,90],{"value":82,"source":83,"evidence":84},"Useful way to avoid webfonts and speed up pages","commenter",[85,86],{"id":66,"by":59,"text":67},{"id":87,"by":88,"text":89},"35221759","kamilm","Well done tool, thanks! I used the system fonts at https:\u002F\u002Fscrabble-solver.org and got a small performance improvement (from ~70% to ~80%) in PageSpeed Insights on mobile.…",{"value":91,"source":83,"evidence":92},"Nice tool and good font choices",[93,97],{"id":94,"by":95,"text":96},"35178006","kimburgess","This is really nice! I've been hardlining the minimalist\u002Futilitarian approach for https:\u002F\u002Fsimple.industries with an intentionally basic system font stack, but this gives a few…",{"id":98,"by":99,"text":100},"35175037","Narushia","These look all very solid! There’s one thing that bugs me, though: I would imagine that a “system font stack” would support characters for multiple scripts, since operating…",[102,106,113,120],{"value":103,"source":83,"evidence":104},"Stacks use fonts missing on many systems, such as CJK support absent",[105],{"id":98,"by":99,"text":100},{"value":107,"source":83,"evidence":108},"Rendering looks fuzzy or antialiased poorly on macOS",[109],{"id":110,"by":111,"text":112},"35183091","seanhunter","These fonts render very poorly on my mac. Every one of them has antialiasing artifacts and so look like old school windows fuzzy fonts. It's particularly noticable on the…",{"value":114,"source":83,"evidence":115},"Generic families like serif and sans-serif would be simpler",[116],{"id":117,"by":118,"text":119},"35173708","FooBarWidget","I don't get it. Why not just use \"serif\", \"sans-serif\" and \"monospace\"? What's the value of specifying specific fonts such as \"Charter\" or \"Dejavu Sans\"?",{"value":121,"source":83,"evidence":122},"Dot background causes strobing when scrolling",[123],{"id":124,"by":125,"text":126},"35172416","aimor","That dot background causes a distracting strobing effect when I scroll.",[128,135],{"value":129,"source":83,"evidence":130},"Show all fonts on the site for testing",[131],{"id":132,"by":133,"text":134},"35180184","laserbeam","Is it possible to include all the fonts on the site? I know this kind of goes against the point ('cause it's supposed to showcase that offline fonts are cool!), but this is one…",{"value":136,"source":83,"evidence":137},"Fix minimum font size range in the tester",[138,142],{"id":139,"by":140,"text":141},"35172513","azatom","Why is the smallest font size is the largest of what I actually would like to test? The range 0.7-1.5em is what needs tests, above that all looks good.",{"id":143,"by":144,"text":145},"35180521","kevincox","It seems to min out at 0.75rem. I don't see where 12px comes in. Unless you are hard coding the root don't size to 16px.",[147,151],{"value":148,"source":83,"evidence":149},"Why ui-monospace is first rather than a generic name last",[150],{"id":73,"by":74,"text":75},{"value":152,"source":83,"evidence":153},"Which font is closest to Inter",[154],{"id":155,"by":156,"text":157},"35182017","lloydatkinson","Which of these fonts is closest to Inter, a very popular font?",[159,166],{"value":160,"source":83,"evidence":161},"systemfontstack.com",[162],{"id":163,"by":164,"text":165},"35161575","partyguy","Similar: https:\u002F\u002Fsystemfontstack.com Either way, it's the best way to go these days if you don't need any fancy external fonts on your website.",{"value":167,"source":83,"evidence":168},"system-ui and generic serif\u002Fsans-serif\u002Fmonospace",[169,170],{"id":66,"by":59,"text":67},{"id":117,"by":118,"text":119},{"comments":34,"answered":34,"key":172},[173,176],{"id":174,"text":175},"35175487","`ui-monospace` is an extended system font property [1] similar to `system-ui` that is currently only supported in Safari. This will render SF Mono on macOS and iOS [2]. [1]…",{"id":177,"text":178},"35176988","Good callout. I updated the tool to allow for min of .75rem or 12px.",{"commenters":180,"max_depth":18,"maker_replies":34,"first_comment_mins":181,"lifespan_hours":182},26,702,126,[184,188,190,193,196,198,200,203,205,207,209,212,215,216,219,222,224,228,231,233,236,237,240,242,244,249,252,254,257,261,263,265,266,268,271],[185,39,32,186,187,39],"35172253","project\u002Fneutral\u002Fdocs","prewett",[54,39,32,189,55,39],"project\u002Fneutral\u002Fidea",[191,41,39,192,156,39],"35182012","other\u002Fneutral\u002Fnone",[194,41,39,192,195,39],"35187551","punyearthling",[94,34,46,197,95,39],"project\u002Fpositive\u002Fdesign",[66,32,46,199,59,39],"project\u002Fpositive\u002Fidea",[201,32,39,202,144,39],"35180471","commenter\u002Fneutral\u002Fnone",[98,18,32,204,99,39],"project\u002Fmixed\u002Fexecution",[73,46,32,206,74,39],"project\u002Fneutral\u002Fdesign",[174,46,39,208,11,41],"maker\u002Fneutral\u002Fdocs",[210,46,41,211,74,39],"35177886","project\u002Fcritical\u002Fdesign",[117,213,41,214,118,39],6,"project\u002Fcritical\u002Fidea",[58,213,32,189,59,39],[217,35,41,211,218,39],"35171828","toastal",[87,220,46,221,88,39],8,"project\u002Fpositive\u002Fperformance",[132,223,32,206,133,39],9,[225,226,32,206,227,39],"35173544",10,"DyslexicAtheist",[110,229,41,230,111,39],11,"project\u002Fcritical\u002Fexecution",[163,232,39,192,164,39],12,[234,232,32,235,59,39],"35177640","project\u002Fmixed\u002Fdesign",[124,33,41,211,125,39],[238,33,32,206,239,39],"35176218","riidom",[241,33,39,202,59,39],"35177655",[243,33,41,211,125,39],"35198334",[245,246,32,247,248,39],"35175062",14,"project\u002Fneutral\u002Fexecution","airstrike",[250,246,32,186,251,39],"35175294","joe5150",[253,246,39,202,248,39],"35175619",[255,246,39,202,256,39],"35177496","altano",[258,246,32,259,260,39],"35175859","project\u002Fneutral\u002Fnone","hLineVsLineH",[139,262,32,206,140,39],15,[177,262,39,264,11,41],"maker\u002Fneutral\u002Fexecution",[143,262,41,230,144,39],[155,267,32,206,156,39],16,[269,267,32,206,270,39],"35182075","leodriesch",[272,273,39,192,274,39],"35174758",17,"aakash_test",[],[277,282,287,291,296,301],{"id":278,"name":279,"points":280,"category":281},"35090054","lunar-lander-autopilot",277,"games",{"id":283,"name":284,"points":285,"category":286},"35161916","whatdoesthiscodedo.com",186,"ai",{"id":288,"name":289,"points":290,"category":20},"35084108","APIRank.dev",176,{"id":292,"name":293,"points":294,"category":295},"35166874","MCIWB",171,"languages",{"id":297,"name":298,"points":299,"category":300},"35143052","Counter",169,"data",{"id":302,"name":303,"points":304,"category":305},"35119681","Terminal Based Wikipedia",165,"productivity",false,"v2",{"id":309,"name":5,"line":6,"ai":306,"cat":20,"year":13,"points":14,"comments":15,"rec":29,"s":310,"top":18,"kw":311,"maker":11,"domain":10,"tier":19,"attempts":39,"strip":312,"url":9,"mix":313,"praise":82,"objection":103,"sub":21},35150345,-0.11,[24,25,26,27,28],"33005503301131533103130133003301330",[32,33,34,35],1794036632579]