article:
UI: Smooth Berry UI Components (PSD)
article:
Elements Design: Odin - Newsletter Email Template (PSD, HTML5, CSS3)

Elements Design: Octicons - GitHub WebFonts Pack Icons (TTF, WOFF, SVG, EOT, CSS)

Advertisement

A modern paradox is that it’s simpler to create complex interfaces because it’s so complex to simplify them. - Pär Almqvist

Fonts and typography are critical to good design, branding, and readability, plus they allow the text to be selectable, searchable, zoomable, and high-DPI friendly. In short, we need web fonts, and we need to optimize their delivery and use. In this session we'll survey the latest browser optimizations and APIs, plus share our experience of optimizing Google Web Fonts. - Making Web Fonts Fast(er) - Ilya Grigorik (Google)

Typography has always been an important part of good design, branding, and readability and web fonts offer many additional benefits: the text is selectable, searchable, zoomable, and high-DPI friendl.

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the settings of each Web browser. There was no mechanism for individual Web pages to control font display until Netscape introduced the <font> tag in 1995, which was then standardized in the HTML 2 specification. However, the font specified by the tag had to be installed on the user's computer or a fallback font, such as a browser's default sans-serif or monospace font, would be used. The first Cascading Style Sheets specification was published in 1996 and provided the same capabilities. - Web typography

Implementation webfonts


Adding fonts to your website is quick and easy.

You must upload your webfont kit to your website. They should be in or near the same directory as your CSS files.
A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.

@font-face{
    font-family: 'MyWebFont';
    src: url('WebFont.eot');
    src: url('WebFont.eot?#iefix') format('embedded-opentype'),
         url('WebFont.woff') format('woff'),
         url('WebFont.ttf') format('truetype'),
         url('WebFont.svg#webfont') format('svg');
}


link to the stylesheet in your HTML, like this:

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />

Add icons to html. For example:

<!-- for 16px icons -->
<span class="octicon octicon-alignment-align"></span>


<!-- for 32px icons -->
<span class="mega-octicon octicon-alignment-align"></span>


These icons are suitable for use on the web and print materials. They are also 100% vector and completely scalable to any size.

Preview


Elements Design: Octicons - GitHub WebFonts Pack Icons (TTF, WOFF, SVG, EOT, CSS)


Created by GitHub.

Enjoy this freebie and want to show support? Spread the word.

Download, share and enjoy!

We hope you enjoy this freebie and find it useful!

Advertisement
Tags: github, webfonts, icons, typography, web typography, html, stylesheet, css

Leave a Comment

No Comment

© Creative3x Ltd.