Typography

From BC$ MobileTV Wiki
Jump to: navigation, search

Typography is the art and technique of arranging type, type design, and modifying type glyphs.[1]


Specifications

Web Open Font Format

An attempt by the W3C to create a single unified, open font-format for the web (designed in particular to work well in web browsers on desktops and mobile devices, via the CSS @font-face rule.

.woff file

OpenType

.otf file

TrueType

.ttf file


WebFonts

[15]

@font-face

A major new advancement of CSS3, the @font-face rule has allowed for the dynamic rendering of fonts outside of the "web-safe" category of free and open fonts which are available by default on most device's Operating Systems. While this tag has informally been around since browser versions as early as IE4 (using EOT format[16]), it has only now found a formal place in the CSS specification, with instructions on how to load multiple font formats.

@font-face is meant to be used with a font in one of the formats listed in the #Specification section above (or another new format).

[17] [18]

With the introduction of @font-face in particular, it has become possible for the first time to host new fonts (i.e. in .ttf format) directly on one's server, then render the font on one's server and display the output in users' browsers; thereby removing the need for users to have specific fonts installed on their own device or OS.

Embedded OpenType

.eot file

SVG

SVG

Ligatures

[19] [20] [21]


Services

Many companies have taken advantage of the new typesetting features and have begun to setup services around fonts and typography delivered via a SaaS model and/or in the cloud. A few of the most prominent are listed below.

Google Webfonts

[22] [23] [24]

FontSquirrel

TypeKit

WebType

The Font Bureau, Inc.


Stores

In addition to using a service with the new @font-face CSS rule pointing to remote font files, one may also purchase a font (or create their own) and load them from one's own server directly, provided they have the appropriate licenses to do so. (Some typographic fonts may be copyrighted and may not allow re-distribution, and thus, would require special encryption or other security/protection measures).

Fonts.com

MyFonts



EXAMPLE

How to embed a font called "MyFont":

 @font-face {
    font-family: 'MyFont';
    src: url('fonts/MyFont.eot');
    src: url('fonts/MyFont.eot?#iefix') format('embedded-opentype'),
	 url('fonts/MyFont.woff2') format('woff2'),
         url('fonts/MyFont.woff') format('woff'),
         url('fonts/MyFont.ttf') format('truetype'),
	 url('fonts/MyFont.svg#my-font') format('svg');
 }

[26]

Tools


Resources


Tutorials


External Links


References

  1. wikipedia: Typography
  2. Web safe CSS font stacks: https://www.cssfontstack.com/
  3. W3C approved font families: https://www.w3.org/Style/Examples/007/fonts.en.html
  4. Web-safe Fonts: https://web.archive.org/web/20081109082130/http://www.speaking-in-styles.com:80/web-typography/Web-Safe-Fonts/
  5. The safest of the WebSafe fonts as rendered on Mac/Windows: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
  6. CSS Web Safe Font Combinations tutorial: https://www.w3schools.com/cssref/css_websafe_fonts.asp
  7. Web Safe Fonts: https://www.thoughtco.com/web-safe-fonts-3467430
  8. Fonts on the Web: Web-safe Fonts: https://www.fonts.com/content/learning/fyti/using-type-tools/fonts-on-the-web
  9. Default List Of All Web-Safe-Fonts With There CSS: http://www.exeideas.com/2015/05/list-of-all-web-safe-fonts-css.html
  10. Linux Websafe Fonts: https://web.archive.org/web/20120424094741/http://andrew.triumf.ca:80/fonts/fonts.html
  11. Safe web fonts: http://web.mit.edu/jmorzins/www/fonts.html
  12. CSS Web-safe Fonts: http://www.w3schools.com/cssref/css_websafe_fonts.asp
  13. CSS font-family Property: http://www.w3schools.com/cssref/pr_font_font-family.asp
  14. 16 Gorgeous Web Safe Fonts To Use With CSS: http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css
  15. Switching to variable fonts (for better responsiveness): https://matthewstrom.com/writing/variable-fonts.html
  16. About Font Embedding for IE: http://msdn.microsoft.com/en-us/library/ms530303(v=vs.85).aspx
  17. Bulletproof @font-face Syntax: https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
  18. Are eot, ttf, and svg still necessary in the font-face declaration?: https://stackoverflow.com/questions/36105194/are-eot-ttf-and-svg-still-necessary-in-the-font-face-declaration/36110385#36110385
  19. Typographic Myth Busting: What’s a Ligature, Anyway?: https://typography.guru/journal/whats-a-ligature/
  20. Ligature Definition: https://www.lifewire.com/ligature-in-typography-1078102
  21. Learn how to use ligatures properly: https://www.scribendi.com/advice/a_guide_to_the_proper_and_improper_use_of_ligatures.en.html
  22. How & Why I Host Google Fonts Locally (October 2020): https://www.wpmediamastery.com/host-google-fonts-locally/
  23. Use Google Fonts Locally: https://victorfont.com/use-google-fonts-locally/
  24. How to Self-Host Google Fonts on Your Own Server: https://webdesign.tutsplus.com/tutorials/how-to-self-host-google-fonts--cms-34775
  25. Font example -- Vonness (of Macromedia logo fame): http://www.fontbureau.com/fonts/Vonness/
  26. @font-face not displaying correctly in IE: https://stackoverflow.com/questions/15744026/font-face-not-displaying-correctly-in-ie
  27. Windows/IE Recommended fonts : http://www.microsoft.com/typography/web/fonts/
  28. "system" generic font name: https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html
  29. System shock: https://medium.design/system-shock-6b1dc6d6596f


See Also

Text | CSS/CSS3 | Design | Graphics | Visualization | Newspaper | Magazine | E-Learning | Content