The typography assignment is similar to the logo design, in that you should consider the product, brand, service, or concept it represents and how your typographic design portrays that. What does your font choice say about your client? Who is the audience or user group, and what will appeal to them? Include a rationale for your design choices with your submission.
Render both a B &W and color version of your type design (max. width for upload to your is documentation is 720 px). Your final render can be either .png or .svg format. When your documentation has been updated, email the URL to uidev@cs.stonybrook.edu with Type Design in the subject line.
Simplicity and clarity are paramount. Here is an article that discusses good typographic design:
https://designshack.net/articles/graphics/8-rules-for-creating-effective-typography/
You should also consider how your type design will affect other choices in a screen layout, like headers, subheads, captions, and body copy. What complimentary fonts work well with the choices you made for your type design? It's a standard practice in industry to create a type sampler, which shows how typography will be used throughout a document. Legibility is the primary consideration. Here is the corporate identity program for SBU, which gives an example:
http://www.stonybrook.edu/brand/design-visual-identity/typography/
You can use raster graphics tools like Photoshop or GIMP, or vector tools such as Illustrator or Inkscape to render your type design. You might also consider leveraging the type capabilities of Comic Life, which you can download a free trial version of at http://plasq.com/apps/comiclife/macwin/
A good place to review web fonts is at https://fonts.google.com/
The Adobe Font Folio can be reviewed at https://wwwimages2.adobe.com/content/dam/acom/en/fontfolio/pdfs/fontfolio11.1_font_list.pdf
Another good source for reviewing display fonts is http://www.dafont.com
You can review examples of student work at https://www3.cs.stonybrook.edu/~tony/ui/Type_examples/
Rubric
1. Followed the instructions:
• A B&W and color version of the logotype was uploaded to the student’s web site, and the URL was sent to the course email
• Logotype is approximately 800 pixels wide
• A type sampler is included to show how various fonts will be used in the web app, such as headlines and body copy
2. Met the design criteria:
• Appropriate font employed for logotype (Sans Serif for modern or high tech, Serif for traditional or elegant, etc)
• Appropriate color employed (blue/black for authority, red for impact, orange/yellow for optimism, green/brown for wholistic)
• Simple bold design that is read easily and is scalable (no fine lines, excessive detail, subtle gradients).
* Aligned with client’s product or service
• Appropriate for target audience
• Good technical execution (crisp edges, clean shapes)
• Good choice of complimentary fonts for text in web app, such as headlines and body copy
That’s 10 criteria, or approximately 1 point each.