pokemon-font

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

2 followers

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

2 followers

Visit website

Launch tags:Web App•Design Tools•Typography

Launch Team

Customer.ioAutomate Messaging Everywhere — Startups Get 12 Months Free

Promoted

Hello Money, Goodbye Gun Stocks

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?

Report

10yr ago

Horse Browser

Maker

@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; }

Report

10yr ago

Horse Browser

Maker

This is really just me learning about SVG paths, fonts, ligatures, font formats, but in a way I enjoy.

Report

10yr ago

Cowsay ASCII Generator

where is the emoji support? But really cool project to learn about SVG & Fonts. Kudos

Report

10yr ago

Horse Browser

Maker

@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.

Report

10yr ago

Reviews

Hello Money, Goodbye Gun Stocks

Report

10yr ago

Horse Browser

Maker

Report

10yr ago

Horse Browser

Maker

This is really just me learning about SVG paths, fonts, ligatures, font formats, but in a way I enjoy.

Report

10yr ago

Cowsay ASCII Generator

where is the emoji support? But really cool project to learn about SVG & Fonts. Kudos

Report

10yr ago

Horse Browser

Maker

@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.

Report

10yr ago