Search Icon A magnifying glass icon.
Search Icon A magnifying glass icon.
Subject
Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Graphic Design Degree Courses
Discover Sessions Graphic Design Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Graphic Design Career Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Web Design Degree Courses
Discover Sessions Web Design Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Web Design Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub

Professional Certificates

Explore Digital Media Career Courses

DEGREES

Next Start:
January 6, 2025
Explore Digital Media Degree Courses
Discover Sessions Digital Media Hub
You can deepen your software skills and keep up with the latest Adobe CC updates in our online Digital Arts courses.
Contact Admissions

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Digital Photography Degree Courses
Discover Sessions Digital Photography Hub

DEGREES

Next Start:
December 1, 2024
Explore Fine Arts Degree Courses

DEGREES

Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Illustration Degree Courses
Discover Sessions Illustration Hub

Professional Certificates

Next Start:
December 1, 2024
Explore Illustration Career Courses

DEGREES

Explore Advertising & Marketing Degree Courses
Discover Sessions Advertising & Marketing Hub

Professional Certificates

Explore Advertising and Marketing Career Courses

CERTIFICATES

Next Start:
December 1, 2024
Next Start:
December 1, 2024
Next Start:
December 1, 2024
Explore Sessions Career Courses
Professional Cert PLUS
Next Start:
December 1, 2024
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Next Start:
January 6, 2025
Explore Sessions Bachelor's Degrees
Next Start:
January 6, 2025
Next Start:
January 6, 2025

WWW… Wednesday! CSS Made Simple with Type Nugget

by Taylor Slattery | June 26, 2019

WWW… Wednesday! CSS Made Simple with Type Nugget - Sessions College

Designing web typography can be tricky. It involves trial and error, and depending on the tools you’re using, maybe a LOT of trial and error. Thankfully, as our typographic needs evolve, so too do our tools.

Type Nugget is a browser based application for designing web typography. It offers a full suite of options to tailor your type to your site’s needs. The interface utilizes a live preview of your type so that you can visualize each variable in the context of the site as a whole.

type nugget user interface

The site uses the Google font library, with the option to upload fonts stored locally on users’ computers. Weights, colors, sizes, and families can be modified endlessly. Experiment with the looks of headings, paragraphs, links, and lists, and when you’ve landed on something you like, you can generate fully functional CSS to plug into your site.

 

type nugget google font library

As mentioned before, designing type involves a lot of trial and error. You may try any number of typographical combinations before finding something that speaks to you. To get there faster, use Type Nugget to explore different directions and save out different style sheets for each one. With the CSS already made, it becomes easy to quickly audition them in the context of your site.

type nugget style sheet

Type Nugget is free to use and can be found here.

 

Taylor is the Managing Editor of Notes on Design. Taylor is a graphic designer, illustrator, and Design Lead at Weirdsleep.

 

If you are interested in learning to use typography, Sessions College offers Basic Typography and Advanced Typography courses as well as a course in Web Typography.  Contact Admissions for more information.

This blog is powered by Sessions College, the leading online school of visual arts.

[Modal-Window id=”1″]

©2024 Sessions College for Professional Design  All rights reserved

Terms & Conditions       Privacy Policy