Show HN: Terminal CSS

17 points by Gioni06 7 years ago | 4 comments

franky47 7 years ago |

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 ?

Gioni06 7 years ago | |

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;"

Jowsey 7 years ago |

Huh, this looks pretty cool! Seems a little niche though, I personally couldnt see anyone using this aside from a personal blog or something - great work, however!

Gioni06 7 years ago | |

Thanks! You are right, and it's not for everyone. I created that framework for my website because I was unhappy with other solutions out there. Besides the bare bone, monospace style, I added a "sans serif" variant to make it a bit more "mainstream". My vision for 1.0 is to have a markdown friendly, no fuzz CSS boilerplate for text-content creators.