Font creation tools?

Discuss anything and everything. Keep it clean (or else).
Post Reply
spillerrec
Posts: 358
Joined: 01 Oct 2010, 06:37
Location: Denmark
Contact:

Font creation tools?

Post by spillerrec »

I have been trying to design a website for RICcreator:
screenshot.gif
I wanted to imitate the raw feeling of a 2 color bitmap, so only black and white is used. (I'm not good at creating color themes anyway...) To really spot the pixels, everything (other than text) is 2x the actual size.
(The mouse pointer hovers over the "Download" link, when clicked links invert in color, becoming black with white text.)


Well, typography is still to be done. (I'm not good at this either! ; ) )
I would like text to look pixelated like on the NXT screen, so I want like to convert my RIC font to a normal font so I can embed it to the website. I only want to format the title and headlines like this though, I'm not going to ruin the readability of the main body, don't worry.

I do not know any software to create fonts in though. And in this case I would properly have to convert a raster font into a vector font too for browser compatibility. Any suggestions? (And no, I do not want to replace each headline with an image.)
My blog: http://spillerrec.dk/category/lego/
RICcreator, an alternative to nxtRICeditV2: http://riccreator.sourceforge.net/
nxtboyiii
Posts: 366
Joined: 02 Oct 2010, 07:08
Location: Everywhere

Re: Font creation tools?

Post by nxtboyiii »

Wow! That would be neat to see a NXT Screen-looking website. Just download a font from a website.

Go to dafont.com. It has tons of fonts.
Thanks, and have a nice day,
nxtboy III

programnxt.com
muntoo
Posts: 834
Joined: 01 Oct 2010, 02:54
Location: Your Worst Nightmare
Contact:

Re: Font creation tools?

Post by muntoo »

Colorschemes: http://colorschemedesigner.com/

I recommend NOT using a custom font. I think everyone will have to have it on their machine to see the custom font...? Use the standard fonts. Your headers/etc can be statically rendered as PNGs after posting, though that might be a bit difficult to implement.

P.S. Is the site up? I'm assuming it will be at riccreator.sf.net
Image

Commit to LEGO Mindstorms Robotics Stack Exchange:
bit.ly/MindstormsSE


Commit to LEGO Stack Exchange: bit.ly/Area51LEGOcommit
spillerrec
Posts: 358
Joined: 01 Oct 2010, 06:37
Location: Denmark
Contact:

Re: Font creation tools?

Post by spillerrec »

muntoo,
You can embed fonts in CSS nowadays, so I can place the font file on the server and it is made available for all people. Works in all browsers. Old browsers will simply use the fall-back font in a normal CSS manner.

The site is not up yet, however the url is indeed correct. Just the default SF page there right now.
My blog: http://spillerrec.dk/category/lego/
RICcreator, an alternative to nxtRICeditV2: http://riccreator.sourceforge.net/
muntoo
Posts: 834
Joined: 01 Oct 2010, 02:54
Location: Your Worst Nightmare
Contact:

Re: Font creation tools?

Post by muntoo »

Google "pixelated font".

http://www.dafont.com/pixelated.font
Image

Commit to LEGO Mindstorms Robotics Stack Exchange:
bit.ly/MindstormsSE


Commit to LEGO Stack Exchange: bit.ly/Area51LEGOcommit
spillerrec
Posts: 358
Joined: 01 Oct 2010, 06:37
Location: Denmark
Contact:

Re: Font creation tools?

Post by spillerrec »

Using someone else's font is also a possibility, but I just rarely find something that I like.
However I found out that the font you linked to was created on a site called "fontstruct" which has made a flash application for this which allows you to create fonts by using building blocks. Free (requires registration) and licenses it under a Creative Commons license of your choice. Link to my font: http://fontstruct.com/fontstructions/show/nxt_ancii_8px

I just need to create my all-caps 5px font now and make sure it works properly in all the browsers. The font didn't look too good in Opera but I think that is an Opera issue though, looks fine everywhere else. EDIT: Opera made the font bold, looks fine after I fixed my CSS.

I actually wanted to use it for more than the website.
z10.jpg
Here it is used for the display in my Z-10 speakers. Japanese/Chinese characters will not work, but I have almost twice the space compared to the old font.


EDIT: website is up! http://riccreator.sourceforge.net/
My blog: http://spillerrec.dk/category/lego/
RICcreator, an alternative to nxtRICeditV2: http://riccreator.sourceforge.net/
timpattinson
Posts: 224
Joined: 30 Oct 2010, 04:10
Location: 127.0.0.1
Contact:

Re: Font creation tools?

Post by timpattinson »

muntoo wrote: I recommend NOT using a custom font. I think everyone will have to have it on their machine to see the custom font...?
True, it's not worth the worry

EDIT: it looks really nice ;)
Commit to Lego Mindstorms StackExchange Q&A http://area51.stackexchange.com/proposals/4105
Minboards IRC Channel #mindboards on Freenode
My blog: http://timpattinson.wordpress.com/
bungeshea
Posts: 207
Joined: 14 Aug 2011, 08:45
Location: Australia
Contact:

Re: Font creation tools?

Post by bungeshea »

Nice! I like the HTML5 & CSS3 code. ;)
EDIT: That's strange... at school using Chromium the URLs in signatures appeared clickable, but now in Google Chrome they are normal...
Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests