deathshadow
Veteran Member
- Joined
- Jan 4, 2011
- Messages
- 1,378
I'm working on a redesign of my website and been playing with the idea of recreating the CGA font. There are existing ones like "Ultimate Oldschool PC Font Pack":
http://int10h.org/oldschool-pc-fonts/fontlist/
But, well.. in the case of CGA fonts I think that the mentality of it may be all wrong. It concentrates VERY hard on hammering the fonts into pixel boundaries, which would make sense you want the glyphs perfectly formed -- EXCEPT that if you have ever sat in front of a real RGBI display, you know damned well that's NOT what happens! No matter how much you play with the adjustments the majority of RGBI displays -- even the highly vaunted 5153 or my personal favorite, the Tandy CM-5 -- the pixels never line up with the colour mask no matter how much you play with it.
To that end, something like cleartype's subpixel hinting or even just greyscale rendering could aid in making it feel more authentic BECAUSE it is less accurate and causes horizontal blurring. Same goes for sizing the font to the screen pixels -- why bother, it's not like CGA ever came CLOSE to lining up with the colour mask. Remember how mind-blowingly sharp EGA seemed when it came out? Yeah, that. You want to make it look like the older systems, you don't want it that sharp with the perfect alignment!
But even with that, what could be done to make it feel more realistic? First thing that came to mind was actually implementing the colour mask using generated content over the page elements. It's not precise and requires a bit of 'trickery' to make it so we don't break anchors, but a simple transparent .png could work wonders on that front.
Another thing to consider is the barely perceptible flicker of the scan/retrace missing on modern displays. If we're going to have a colour mask, maybe requestAnimationFrame could be used to swap a class then have CSS do the heavy lifting?
So to this end, I've made my own CGA font -- It's by no means codepage complete but since 99.99% of my content is restricted to the bottom 7 bits of ASCII, I really could give a flying purple fish about extended characters.... which has the nice side effect that my font ends up not even breaking the 12k mark as EOT. I went with a mostly CGA-like font more akin to the tandy one, but with a taller line-height.
Whilst I want the retro feel, I don't want to sacrifice usability or accessibility, and that means larger padding instead of hammering everything into pixel boundaries. It means font sizes that obey the system metric, not dipshitting pixel font sizes into the CSS.
Been playing with this on and off for a couple months -- got put on the back burner with a full time job that turned out to be a full time scam -- but this is what I have so far:
http://www.cutcodedown.com/prototype/prototype.periodAccurate.html
Thoughts, Ideas?
http://int10h.org/oldschool-pc-fonts/fontlist/
But, well.. in the case of CGA fonts I think that the mentality of it may be all wrong. It concentrates VERY hard on hammering the fonts into pixel boundaries, which would make sense you want the glyphs perfectly formed -- EXCEPT that if you have ever sat in front of a real RGBI display, you know damned well that's NOT what happens! No matter how much you play with the adjustments the majority of RGBI displays -- even the highly vaunted 5153 or my personal favorite, the Tandy CM-5 -- the pixels never line up with the colour mask no matter how much you play with it.
To that end, something like cleartype's subpixel hinting or even just greyscale rendering could aid in making it feel more authentic BECAUSE it is less accurate and causes horizontal blurring. Same goes for sizing the font to the screen pixels -- why bother, it's not like CGA ever came CLOSE to lining up with the colour mask. Remember how mind-blowingly sharp EGA seemed when it came out? Yeah, that. You want to make it look like the older systems, you don't want it that sharp with the perfect alignment!
But even with that, what could be done to make it feel more realistic? First thing that came to mind was actually implementing the colour mask using generated content over the page elements. It's not precise and requires a bit of 'trickery' to make it so we don't break anchors, but a simple transparent .png could work wonders on that front.
Another thing to consider is the barely perceptible flicker of the scan/retrace missing on modern displays. If we're going to have a colour mask, maybe requestAnimationFrame could be used to swap a class then have CSS do the heavy lifting?
So to this end, I've made my own CGA font -- It's by no means codepage complete but since 99.99% of my content is restricted to the bottom 7 bits of ASCII, I really could give a flying purple fish about extended characters.... which has the nice side effect that my font ends up not even breaking the 12k mark as EOT. I went with a mostly CGA-like font more akin to the tandy one, but with a taller line-height.
Whilst I want the retro feel, I don't want to sacrifice usability or accessibility, and that means larger padding instead of hammering everything into pixel boundaries. It means font sizes that obey the system metric, not dipshitting pixel font sizes into the CSS.
Been playing with this on and off for a couple months -- got put on the back burner with a full time job that turned out to be a full time scam -- but this is what I have so far:
http://www.cutcodedown.com/prototype/prototype.periodAccurate.html
Thoughts, Ideas?
Last edited: