pokemon-font

GAME BOY Pokemon font from the 90's, extended.

get it

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Roman Pramberger@talkb1nary · Dev
where is the emoji support? But really cool project to learn about SVG & Fonts. Kudos
Pascal PixelMaker@pascalpixel · UX Design, Full-stack Development
@talkb1nary I was actually thinking of adding all the pixel-glyphs of Pokemon as 'emoji', at least for the animal emoji. But if I wasn't violating copyright yet, actual images will totally do it.
Keywon@keywonc · Design founder, Hello Money
Upvoted! Could you explain how you created this, for the uninitiated? When I inspect the font-face says "pokemon-font." But you also say you learned to generate SVGs from code. What was this generated from? I also wonder what it takes to make it look more crisp, esp on non-Retina screen. Is it a matter of anti-aliasing?
Pascal PixelMaker@pascalpixel · UX Design, Full-stack Development
@keywonc Thank you! I'll detail how I learned/what I learned in a blogpost later on, I also created a few tools to transform pixels into svg outlines, to store it as JavaScript arrays and to render an SVG font on-the-fly in React (for no reason at all). I've added some notes on how to make it render properly as a webfont to 1.7.0 'Rendering Rhydon', copy-paste: Rendering This is a 'pixel' font, but modern font formats are actually vector based, so the font uses vector calculations to create little squares. This brings all the same issues as old-fashioned pixel fonts in terms of rendering it properly. The font is 10px high (10px = 1em), so to properly render it you'll need to use increments of 10px You'll also need to turn off anti-aliasing for fonts if the browser supports it to avoid blurry fonts below 20px of size. body { font-size: 10px; font-smooth: never; -webkit-font-smoothing: none; font-family: 'pokemon-font', monospace; } h1 { font-size: 30px; } h2, h3, h4 { font-size: 20px; } h4, h5, h6 { font-size: 10px; }
Pascal PixelMaker@pascalpixel · UX Design, Full-stack Development
This is really just me learning about SVG paths, fonts, ligatures, font formats, but in a way I enjoy.