Re:Show HN: Terminal CSS
by franky47 on Tuesday January 29, 2019 @03:09AM
(#19024642)
I like it, I was looking for a similar look for my blog/homepage, and I got into the issue of fallback fonts having different rendered sizes, do you have any pointers regarding how to get a consistent layout no matter which font is used ?
[ Parent
| on HN ]
Hm..not really. For Terminal CSS I decided to @font-face Fira Code for precisely that reason. Font rendering is a never-ending story when it comes to web design. Not only that browsers render fonts differently, but the operating system also influences it. Font rendering on Windows looks terrible IMO compared to Mac or Linux. So "no" I don't have a solution to that problem. My personal view is that a system font stack is an excellent choice regarding UX. As a user, I expect a certain kind of user experience from my device/OS and a website that respects that tends to offer a better experience than others. To conclude: I should remove Fira Code in favor of a system stack :)
[EDIT] Github is a great example. Uses a system font stack and looks great on all devices and operating systems:
"-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;"