[{"data":1,"prerenderedAt":256},["ShallowReactive",2],{"project-17538770":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":28,"sentiment":29,"stance_mix":30,"scored_comments":18,"aspects":34,"strip":43,"post_text":45,"what":46,"said":60,"maker_in_thread":146,"shape":157,"grid":161,"attempts":216,"same_week":221,"maker_shows":44,"maker_hidden":248,"reader_version":249,"card":250},"17538770","Font Playground","Play with variable fonts","title","Show HN: Font Playground – Play with variable fonts","https:\u002F\u002Fplay.typedetail.com\u002F","play.typedetail.com","wentin",1531715130,2018,131,23,321,2155,15,"notable","creative","font design tool","web_app",[24,25,26,27],"variable fonts","font-variation-settings","css fonts","typography","debated",-0.036,{"positive":31,"neutral":32,"mixed":33,"critical":31},4,6,1,{"execution":35,"performance":38,"design":39,"idea":41,"docs":42},{"positive":36,"critical":37},0,3,{"positive":36,"critical":36},{"positive":40,"critical":33},2,{"positive":40,"critical":36},{"positive":36,"critical":36},[37,36,36,37,36,36,44,37,36,44,36,33,36,33,37,44,37,37,36,44,33,33,37],5,null,{"problem":47,"audience":45,"pricing":45,"motivation":45,"time_to_build":45,"stack":57,"openness":58,"stage":59,"team_size":58},{"value":48,"source":49,"evidence":50},"Lets people explore how variable font axes change text appearance","inferred",[51,53],{"id":52},"post",{"id":54,"by":55,"text":56},"17539683","kowdermeister","This uses font-variation-settings CSS property https:\u002F\u002Fcaniuse.com\u002F#search=font-variation-settings",[],"unknown","launched",{"praise":61,"objections":82,"requests":108,"questions":120,"alternatives":132},[62,74],{"value":63,"source":64,"evidence":65},"Sliders and variable font demos make the concept tangible","commenter",[66,70],{"id":67,"by":68,"text":69},"17542482","ggm","This one finally made some things about how fonts play in the web more tangible to me. the bounding box and three choices of rescaling\u002Fsizing made this much more clear to me,…",{"id":71,"by":72,"text":73},"17540070","DonHopkins","I love how \"Cheee\" has the descriptive dimensions of puffy \"Yeast\" and droopy \"Gravity\"! The last one in the list, \"ZinZin\", has \"Swash\" that makes discrete changes to different…",{"value":75,"source":64,"evidence":76},"Interesting x-height axis and parameter examples",[77,81],{"id":78,"by":79,"text":80},"17541916","kenbellows","I love the idea of an x-height axis as demonstrated in Dunbar. Different x-heights can be used for really interesting effects in different design contexts.",{"id":71,"by":72,"text":73},[83,90,101],{"value":84,"source":64,"evidence":85},"Sliders are cut off on smaller screens due to panel overflow",[86],{"id":87,"by":88,"text":89},"17539689","chrismorgan","The .panel on the right doesn’t do overflow, so on not-enormous screens, some of the sliders are hidden from view. Decovar with fifteen sliders is the easiest to see this on—if…",{"value":91,"source":64,"evidence":92},"Does not work on Firefox or mobile Safari",[93,97],{"id":94,"by":95,"text":96},"17539514","pepijndevos","Does not seem to work for me on Firefox\u002FLinux",{"id":98,"by":99,"text":100},"17539521","tobyhinloopen","Doesn’t seem to do much on mobile Safari",{"value":102,"source":64,"evidence":103},"Rendering artifacts such as white horizontal lines",[104],{"id":105,"by":106,"text":107},"17540874","amelius","I'm getting some rendering artifacts, i.e. white horizontal lines.",[109,116],{"value":110,"source":64,"evidence":111},"Support for adding custom fonts to the font menu",[112,113],{"id":67,"by":68,"text":69},{"id":114,"by":11,"text":115},"17542517","I will support adding your own fonts to font menu soon! Stay tuned and thanks for the suggestion!",{"value":117,"source":64,"evidence":118},"Background info on the font catalog and how to add fonts",[119],{"id":67,"by":68,"text":69},[121],{"value":122,"source":64,"evidence":123},"Why slant axis appears on only some fonts",[124,128],{"id":125,"by":126,"text":127},"17539621","chime","Thanks! That worked for me. This is such a great feature. Once standard, it would reduce the need for have multiple variants of the same font-family. I noticed only a few fonts…",{"id":129,"by":130,"text":131},"17540855","ygra","The axes are defined by the font. Slant implemented that way usually leads to an oblique font, while many fonts (even sans-serif ones) have distinctly-designed italic variants.…",[133,140],{"value":134,"source":64,"evidence":135},"Fonty playground by dizoo",[136],{"id":137,"by":138,"text":139},"17539055","dziungles","Cool, this one is also great: https:\u002F\u002Ffonty.dizoo.bg\u002F",{"value":141,"source":64,"evidence":142},"Merit Badge font preview",[143],{"id":144,"by":88,"text":145},"17539663","The Merit Badge sidebar preview gets extremely colourful with subpixel rendering: https:\u002F\u002Ftemp.chrismorgan.info\u002Fmerit-badge-subpixel-rendering.png. It looks quite fascinating!",{"comments":31,"answered":33,"key":147},[148,151,154],{"id":149,"text":150},"17542422","I love how you go directly to the source code to dig it out! Actually the answer if also hidden in the code tab of the app. It you switch to Code, you can get the code snippets…",{"id":152,"text":153},"17542465","Thanks for your review! I passed along the goods words to the designer of Cheee, I am sure he is delighted. Interesting story on Adobe Type history! The good old days!",{"id":155,"text":156},"17542400","I add a temporary fix to this overflow issue. it is caused by a flexbox issue on firefox. On firefox the behavior is a little different from chrome\u002Fsafari, but at least the axis…",{"commenters":158,"max_depth":31,"maker_replies":31,"first_comment_mins":159,"lifespan_hours":160},16,90,12,[162,164,168,170,173,177,179,181,184,186,187,189,191,193,195,198,200,202,205,207,209,211,213],[54,36,37,163,55,36],"project\u002Fneutral\u002Fexecution",[165,36,36,166,167,36],"17541712","commenter\u002Fneutral\u002Fnone","Kagerjay",[149,36,36,169,11,33],"maker\u002Fneutral\u002Fdocs",[171,33,37,172,130,36],"17540036","project\u002Fneutral\u002Fperformance",[174,33,36,175,176,36],"17540746","commenter\u002Fneutral\u002Fperformance","systoll",[178,33,36,175,130,36],"17540808",[144,40,44,180,88,36],"project\u002Fpositive\u002Fdesign",[182,40,37,172,183,36],"17540861","kalleboo",[137,37,36,185,138,36],"other\u002Fneutral\u002Fnone",[71,31,44,180,72,36],[152,31,36,188,11,33],"maker\u002Fpositive\u002Fnone",[87,44,33,190,88,36],"project\u002Fcritical\u002Fdesign",[155,44,36,192,11,33],"maker\u002Fpositive\u002Fexecution",[94,32,33,194,95,36],"project\u002Fcritical\u002Fexecution",[196,32,37,172,197,36],"17539545","jfk13",[125,32,44,199,126,36],"project\u002Fpositive\u002Fidea",[129,32,37,201,130,36],"project\u002Fneutral\u002Fdesign",[67,203,37,204,68,36],7,"project\u002Fmixed\u002Fdocs",[114,203,36,206,11,33],"maker\u002Fpositive\u002Fidea",[78,208,44,199,79,36],8,[105,210,33,194,106,36],9,[98,212,33,194,99,36],10,[214,212,37,215,176,36],"17540729","project\u002Fneutral\u002Fnone",[217,218],{"id":4,"t":12,"points":14,"comments":15},{"id":219,"t":220,"points":33,"comments":36},"17648832",1532990526,[222,227,231,235,240,244],{"id":223,"name":224,"points":225,"category":226},"17530086","Router7",461,"infrastructure",{"id":228,"name":229,"points":230,"category":226},"17540263","Hasura",382,{"id":232,"name":233,"points":234,"category":226},"17551796","CloudForecast.io",125,{"id":236,"name":237,"points":238,"category":239},"17559213","Ansible Kernel",123,"dev_tools",{"id":241,"name":242,"points":243,"category":239},"17557384","Bo",104,{"id":245,"name":246,"points":247,"category":239},"17556805","Pinpointer",91,false,"v2",{"id":251,"name":5,"line":6,"ai":248,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":252,"top":18,"kw":253,"maker":11,"domain":10,"tier":19,"attempts":40,"strip":254,"url":9,"mix":255,"praise":63,"objection":84,"sub":21},17538770,-0.04,[24,25,26,27],"30030053050101353305113",[31,32,33,31],1794036567805]