Welcome to Type Nugget! Ever thought, I want a way to easily design all of the text on my webpage, but didn’t know exactly how to go about it? Well, now you don’t have to!
When you go to http://www.typenugget.com/ this is the first thing that you see. The design is catching and inviting. It’s called Type Nugget because they refer to the CSS code that gets generated as little golden nuggets, and since it’s about the type of a web page, the name Type Nugget was born.
After clicking on TRY IT NOW! This is the page that you see. The text on the left side of the screen is pretty bland, right? Well, not for long thanks to Type Nugget.
So this is the GLOBAL tab. As the name suggests, the controls for this tab edits every piece of text on your page. Pretty useful if you just want everything to look nice and uniform. Each of the dropdown boxes offers different ways to edit your font.
Want to change the font? Of course, you do, that’s why you’re looking at this tipsheet. So, do change the font you click on the FONT FAMILY dropdown box and then click on SELECT THEME FONTS.
After clicking, you’ll see a huge assortment of fonts. Literally any font you could think of is probably here. To add fonts to you font family, you just have to click on it. To make your collection accessible, after you click on the font it is shaded purple and then because available in the dropdown font family menu.
So you’ve picked all of the fonts that you want to use. Great! What’s next? To customize each of the sections of your web page, there are different tabs to choose from. Global, Headings, Paragraph, Links, List. Let’s take a look at Headings.
As the name suggests, Headings is going to edit your heading (H1-H6) text. The BASE tab edits all of your headings collectively. Which is great to keep everything nice and uniform.
What if I want to change the different headings individually? Good question. Just click the H1-H6 tabs to the right of Base and you can individually edit the headings. See?
You can get creative and play with the headings, like adding their own backgrounds to help them to stand out on your web page.
To continue making your text fun and creative on your web page, you continue to click and edit in the Paragraph, Links, and Links tabs. They all work similarly to the Headings tab. Each of the individual tabs has submenus like the Headings tab. It’s a matter of repetition to customize everything because it’s all designed similarly.
Ok, so you’ve done all of the edits and changes and you have a beautifully designed text layout. What’s next, you ask? Time to generate the code. Just click on the button and Type Nugget will generate your code.
Once you click that, you’ll have to make an account to access the code. Luckily it’s free and you can connect it to your Facebook.
It’ll take a moment or two for your code to generate. You’ll get to enjoy a nice fullscreen graphic while you wait.
Here’s the moment you’ve been waiting for. You’re fully designed code with your text designs.
Now, all you have to do is copy and paste the code into your web page. If you want to download the CSS style sheet itself, you can follow the indicated link. What’s really cool about Type Nugget, is that’s it’s a living document; therefore, you can come back to your account and edit the text layout, and once you click generate, it’ll update your web page. Super cool, right?
Enjoy! I hope you have as much fun styling your text as I did while making this tipsheet.
Q: Oh no, I messed up while I was designing my text. How do I fix it?
A: Have no fear. Type Nugget has the tools to help you out. Undo, Redo and Reset are all options you have to fix up any editing mistakes you might have.
Q: The generated text is great and all, but I want to use my own to see how it will look before I drop in the code. How can I do this?
A: That’s simple. All you have to do is edit the text that’s on the preview screen.
Q: I see that you can select colors with the color palette tool, but I like hex codes because I like my colors precise. How can I edit my colors with hex codes?
A: Great question. To use hex codes instead of the palette, all you have to do it click in the space under color and type in a hex code.