INTRO TO MULTIMEDIA. MAT 103

Alejandra Jarabo

Multimedia Arts & Technologies. Santa Barbara City College

PREVIOUS page Typography 4

 

       
Font Formats. Printing Fonts
 


The use of digital fonts has changed dramatically in recent years with new font formats and new ways to use them.

   
 


The first fonts used in computers were designed to be installed and viewed on a desktop or laptop computer to may be get printed later. Those are called system fonts or desktop fonts. Today, system fonts are stored in a TrueType format.

Several desktop font formats have been used for print publishing and general personal computer use for the last 20 years. The major formats of this kind are:
Bitmap fonts. suitcase
First technology to produce highly legible fonts on screen. Those fonts were named after cities (New York, Chicago, Geneva). Where stored when not used in a "suitcase" inside the system. There were different files for each font-size. They worked through a technology called QuickDraw.

     

Adobe Type 1
(Mac postscript version )

 

 

True Type
(mac)

True Type
(PC)

 

 

Postscript (PC)

 

  ] Open type [  

 


PostScript

The first high quality fonts to be used in personal computers. Created by Adobe but adopted by Apple computers, made it possible to scale type to any size while preserving smooth curves and sharp edges. MORE

TrueType (name.ttf)
The most common format in use today. Created by Apple (to solve the problems of early bitmap fonts by outlining the shapes in vector graphics what allows perfect/easy scaling) licensed later by Microsoft. Both companies made this font format the standard for their operative System fonts.
They use simpler internal mathematics to describe their letter forms, relying on straight lines and less-advanced bezier curves. MORE
Uses one file -a suitcase- to contain all its output instructions for print and screen.
Fonts were still stored in the System file but could now be installed using drag-and-drop.

Current look of a TrueType suitcase
(without an extension)
 
Naming of a TrueType file (name.ttf)
Different members of the typeface family in different files.
.ttf extension

OpenType (name.otf)
Open standard, created by Adobe and Microsoft to include more sophisticated features.
Any OpenType font uses a single font file for all of its outline, metric, and bitmap data, making file management simpler.
It makes it possible to pack thousands of character variants or glyphs into a single typeface file. You can also use the same font file on Windows and MacOS X and it includes typographic capabilities like true small caps, better support for non English glyphs or better support for ligatures. MORE, and MORE


When you install Adobe Creative Cloud applications that support printing, a range of Adobe open Type fonts get installed along with the application.

       

 

   
Type formats in a PC    
Open Type icon
Open Type
Mac font types  
Icons for different Font Formats
  How OpenType if assimilating old formats

 

 

 

 

 

   
Type on the Web. Browser safe fonts versus Web fonts
 

Open type fonts are system fonts that are appropriate for print-projects but are not ideal for text on web pages.

 

 

 

 

When you install Adobe Creative Cloud applications that support printing, a range of Adobe open Type fonts get installed along with the application.

Classic use of type on the web
For a very long time html text was redrawn on a browser with one of the system fonts installed in the local computer of the web user.

Default system fonts
If you used a nice font available in your computer to design a page but that font was not available in the user's computer, the font would be replaced by one the user actually had installed.
This would drastically restrict the number of fonts that you could expect in any computer down to the default system fonts that, in the web context, will be called Browser safe or Web safe fonts.
To make matters even worse, Macs and PCs don't have the same default system fonts. To see a list of those fonts in Macs and PCs click HERE


Family font property
As an attempt to have better control of how the text would be displayed on most computers (taking into account browsers and operative systems)an added feature was added in CSS that could assign a pre-defined Family font (group of similar system fonts) as a property of the text.
If a text had a certain family font assigned to it but the first font was not supported by the user's browser or operative system, the browser would try the next font in the group (called a stack or fall back font).
See MORE about this CSS feature.


       
 
   
 
 
     
       
   
Web fonts
 

Web open font Format (WOFF)
WOFF is essentially a wrapper that contains sfnt-based fonts (TrueType, OpenType, or Open Font Format) that have been compressed using a WOFF encoding tool to enable them to be embedded in a web page.
The format uses zlib compression, typically resulting in a file size reduction from TTF of over 40%.

True Type and Open type fonts
Linking to industry-standard TrueType (TTF) and OpenType (TTF/OTF) fonts are supported by Mozilla Firefox 3.5+, Opera 10+,Safari 3.1+, Google Chrome 4.0+.
Internet Explorer 9+ supports only those fonts with embedding permissions set to installable.

Adobe Typekit
Font hosting. It requires creating an account and paying a monthly fee. More HERE

Google Fonts API
Free service of web font hosting. Thousands of fonts to choose from. SEE
Link to 25 outstanding Google web fonts HERE


Web fonts or downloadable fonts
Font downloading for displaying web text is included in CSS3 "fonts module".
B y using a specific CSS @font-face embedding technique it is possible to embed fonts such that they work with IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ and Chrome 4.0+.
Web fonts allow Web designers to use fonts that are not installed on the viewer's computer.
Some commercial foundries object to the redistribution of their fonts.

 

 

 

Font hosting services allow users to pay a subscription to host non-Web-safe fonts online. Most services host the font for the user and provide the necessary @font-face CSS declaration.

 

       
  Google Fonts    
 
 


When text is rendered by a program, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the program. When this occurs, small boxes are shown to represent the characters. We call those small boxes "tofu," and we want to remove tofu from the Web. This is how the Noto font families got their name.

Noto fonts are intended to be visually harmonious across multiple languages, with compatible heights and stroke thicknesses.

Google-font instructions for using their product MORE

  MORE on NOTO fonts. Display of NOTO fonts HERE

     
 
Different way of calling a googlefont into your CSS.   How the text with the Tangerine font would look on the web. TUTORIAL