WebAppers

/ best free open source web resources /

Shopify

Type.js – Take Finer Typographic Control on the Web

Posted · Category: Fonts, License Free

Type.js is a typography tools for better web type. It allows you to write new CSS properties to take finer typographic control of type styles on the web. Set up is simple. Upload type.js to your site, and link it in your HTML, just before the end of the body.

Next, add a style tag before the script, and write these new CSS properties just like you would any other styles. You can also manually adjust the space between two specific glyphs with a simple syntax. You can also set rules for where lines will to break in a paragraph.

Screen Shot 2015-03-19 at 12.31.05 am

Requirements: JavaScript Framework
Demo: http://typejs.org/
License: License Free

How to Create Animated Text Fills and Strokes

Posted · Category: Fonts, License Free

Codrops has shared a tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG. In the article: How to Create (Animated) Text Fills, there are five ways to create patterned filled text.

In three out of these five cases we will retain the ability to select the text. For each of the techniques it shows the browser support, the ability to select text and, most importantly, the possibility to animate the fill (highly experimental).

text-animation

Requirements: –
Demo: http://tympanus.net/Tutorials/AnimatedTextFills/
License: License Free

Type Connection – A Typographic Dating Game

Posted · Category: Fonts, Tools

Type Connection is a game that helps you learn how to pair typefaces. Start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character—without the misleading profile photos and commitment-phobes.

The game features well-known, workhorse typefaces and portrays each as a character searching for love. You are the matchmaker. You decide what kind of match to look for by choosing among several strategies for combining typefaces. Along the way, you explore typographic terminology, type history, and more. By playing Type Connection, you deepen your own connection with type.

type-connection

Requirements: –
Demo: http://www.typeconnection.com/
License: License Free

Typography Boilerplate for Minimal Website

Posted · Category: Fonts, License Free

Tpesettings.css is the typography boilerplate for your minimal website or blog project. All typographic styles are inspired by traditional graphic design fundamentals—the boring stuff that you learn in Typography 101. Simple include typesettings.css in the head section after your main stylesheet, and then add class="typesettings" to your article element.

type-settings

Requirements: CSS
Demo: http://mikemai.net/typesettings/
License: License Free

Typecast – A Gift of Web Design & Better Web Typography

Posted · Category: Fonts, License Free

Typecast™ is now a free web design tool. It’s a good news for everyone who cares about web typography and wants to work with web fonts, everyone who wants to design pages instead of pictures, every designer who wants to test rendering and responsive behaviors for themselves before handover, not late into production.

You’ll still be able to work with over 100,000 web fonts from the Fonts.com, MyFonts, Typekit, Google, Webtype, Fontdeck and Monotype libraries all under one roof—setting and styling type, comparing fonts, and fine-tuning your type systems. You’ll still be able to prototype detailed pages using our simple visual controls.

All about the RWD? You’ll still be able to add media queries, refine your designs for various breakpoints, and test those behaviors in the browser and on devices. And you’ll still be able to output your designs as CSS & HTML in order to hand your developers an itemized spec for build. All of the features will be available for free, and every font in the collection will be at your fingertips and free to use for design purposes.

typecast-free

Requirements: –
Demo: http://typecast.com/blog/typecast-becomes-free-web-design-tool
License: License Free

Dropcap.js Makes Beautiful Drop Caps Easy for the Web

Posted · Category: Fonts

Decorative initials, also known as drop capitals or “drop caps”, should be positioned on a baseline of the adjoining text; they should also be tall enough to reach the cap height of the first line of text.

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough. Dropcap.js makes beautiful drop caps easy for the web. We tested dropcap.js on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).

dropcap-javascript

Requirements: JavaScript Framework
Demo: http://webplatform.adobe.com/dropcap.js/
License: Apache 2.0 License

Find the Name of a Font with Fontface Ninja

Posted · Category: Fonts, License Free

You’re browsing a website and you want to find the name of a font? Here comes the Fontface Ninja. You can easily hide all pictures and commercials. You can now enjoy fonts on a blank background. You can also try or download a font with Fontface Ninja.

fontface-ninja

Requirements: –
Demo: http://fontface.ninja/
License: License Free

Google Released Noto Free Font for All Languages

Posted · Category: Fonts

Noto is Google’s font family that aims to support all the world’s languages. Its design goal is to achieve visual harmonization across languages. With multiple styles and weights. Freely available to all. Noto fonts are under Apache License 2.0.

Currently, Noto covers all major languages of the world and many others, including European, African, Middle Eastern, Indic, South and Southeast Asian, Central Asian, American, and East Asian languages. Several minority and historical languages are also supported. Support for Simplified Chinese, Traditional Chinese, Japanese, and Korean has been added in July 2014.

google-noto-font

Requirements: –
Demo: http://www.google.com/get/noto/
License: Apache 2.0 License

The Best Typefaces from Google Web Fonts Directory

Posted · Category: Fonts, License Free

Beautiful Web Type is a showcase of the best typefaces from the Google web fonts directory. There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look. Check out the examples to get the typeface from the Google web fonts directory.

google-web-fonts

Requirements: Google Web Fonts
Demo: http://hellohappy.org/beautiful-web-type/
License: License Free

Shine.js – A Library for Pretty Shadows

Posted · Category: Fonts, MIT License

Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows. And there is no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.

shine-js

Requirements: JavaScript Framework
Demo: http://bigspaceship.github.io/shine.js/
License: MIT License

Page 1 of 71234567»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons