DOCSLIB.ORG

Web Font Basics

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Web Font Basics Web Font Basics The following fonts are installed on both Windows XP and Mac OS X Panther by Default • Arial • Times New Roman • Arial Italic • Times New Roman Italic • Arial Bold • Times New Roman Bold • Arial Bold Italic • Times New Roman Bold Italic • Arial Black • Trebuchet MS • Comic Sans MS • Trebuchet MS Italic • Comic Sans MS Bold • Trebuchet MS Bold • Courier New • Trebuchet MS Bold Italic • Courier New Italic • Verdana • Courier New Bold • Verdana Italic • Courier New Bold Italic • Verdana Bold • Georgia • Verdana Bold Italic • Georgia Italic • Webdings • Georgia Bold • Georgia Bold Italic Font Stack Make sure than fonts are similar in appearance so that design appearance won't be impacted. Generic Declarations serif sans-serif monospace cursive fantasy PC Times New Tahoma Courier New Comic Sans Impact Roman Arial Lucida Console Mistral Haettenschweiler Georgia Verdana Monaco Bradley Hand Papyrus Palatino Mac Times Helvetica Monaco Apple Chancery Impact Georgia Lucida Grand Courier Comic Sans Copperplate Baskerville Geneva Andale Mono Zapfino Papyrus Font-family: <ideal>, <alternative>, <common>, <generic> Font-family: Georgia, "Times New Roman", Times, serif; Note that when a font name is constructed from several words – like "Times New Roman" or "Tebuchet MS", it must be enclosed in quotes or it could be ignored. Developing a Font Stack http://www.codestyle.org/servlets/FontStack http://media.24ways.org/2007/17/fontmatrix.html Current Workarounds Use images instead of text 1. Search engines can't index 2. Inaccessible to screen readers 3. If user browsing with images turned off – only ALT tags (if used) would be visible. slFR (Scalable Inman Flash Replacement) 2004 1. Uses flash player to serve up desired fonts 2. Uses javaScript - if flash player installed, loads flash in place of font 3. If user don't have flash – will just display as default Cufón 1. JavaScript-based solution 2. Cufón is uploaded to your server. 3. Use the generator to create a font.js file 4. Reference the file when you want to use it. 5. Text is no selectable 6. Not as effective with body copy 7. Won't work with many font licenses Background Image Replacement h1 { text-indent: -1000em; width:200px; height:75px; background: url(images/diavlo.png); no-repeat; } The @font-face Rule W3C Fonts Module Level3 http://www.w3.org/TR/css3-webfonts/ Web Fonts Support Chrome Explorer Firefox Opera Safari @font-face 4+ 4+ 3.5+ 10+ 3.1+* True Type (ttf) 4+ 3.5+ 10+ 3.1+* Open Type (otf) 4+ 3.5+ 10+ 3.1+* SVG fonts (svg) 4+ 10+ 3.1+* SVGz fonts (eot) 10+ 3.1+* embedded Open Type (eot) 4+ Web Open Font Format (woff) 6+ 9 3.6+ iPhone/iPad supports SVG with added support for TTF as of iOS 4.2 Scalable Vector Graphics (SVG) • Xml language used to create vector graphics • SVG Fonts are included in the standard • SVG Fonts are small in size and look consistent across browsers • SVG Fonts cannot contain hinting and are not universally supported • SVGz is a compressed format of SVG Fonts Embedded Open Type (EOT) • Proprietary font format developed by Microsoft • EOT is a wrapper that subsets and compressed True Type fonts • Additional format properties allow fonts to be bound to a specific page • Microsoft submitted eOT to the W3C in 2008, never formally adopted Web Open Font Format (WOFF) • Developed in 2009 by Mozilla and several font foundries • Adopted by the W3C as a standard in 2010 • WOFF is a wrapper that can contain TT, OTF, or OFF fonts • Fonts are compressed and can be accompanied by xml-based metadata • Browsers have been quick to adopt support for WOFF Font Rendering – Platform Specific Font Rendering on the Mac • Macs use the Core Type rendering engine which used subpixel rendering • Core Type engine ignores font hinting • Smaller text tends to look bolder and more blurry than on other systems Microsoft Rendering Variables • Window systems can be set to use one of three rendering methods • Different versions of Windows use different versions of ClearType, Windows' subpixel rendering engine • The newer version, DirectWrite, anti-aliases along two axis, much like the Mac Core Type rendering engine Microsoft Font Rendering • Text rasterization gives more weight to the pixel grid • Small details may be lost, and the weight of the font is often affected • ClearType tends to render body copy better, but headlines can be jagged • DirectWrite produces better results, but is relatively new Windows Version Rendering Defaults Windows XP Windows Vista Windows 7 ClearType disabled enabled enabled DirectWrite N/A Available* Available Non-IE & IE 6 GDI** ClearType** ClearType** IE 7 ClearType ClearType ClearType IE 8+ ClearType ClearType ClearType IE 9 DirectWrite DirectWrite DirectWrite In all versions, settings can be changed by the user to any rendering method available, including no anti-alias and grayscale anti-alias *Available with update ** uses the system's current rendering, like to be what is listed. GDI performs grayscale anti-aliasing for Windows + overwrites the system setting to ClearWrite, which will then be used by all other browsers until changed Options for Controlling Font Rendering • Choose fonts carefully and look for fonts designed for the screen • The font's size and usage matters in rendering • Test fonts in multiple browsers and platforms before using them Adobe Browser Lab: https://browserlab.adobe.com Typekit Browser Samples http://typekit.com/libraries/full We'll work with two options: Linking to a font service http://code.google.com/webfonts Choose the font you'd like to use. Google web fonts show you both specimen and character views and some basic information about the font. ADD Link REF to your head tag (just below title) <link href='http://fonts.googleapis.com/css?family=Radley' rel='stylesheet' type='text/css'> Add font-family where appropriate in style type. h1 { font-family: Radley, arial, serif; } Downloading a font The League of Moveable Type http://www.theleagueofmoveabletype.com/ Create missing versions to meet our browser and platform needs Choose your font and click on it to download. We'll need to create the other versions (woff, eot, etc.) before we can create our @font-face declaration. Be sure to read the Open Font License to be sure your use will be in compliance! Font Squirrel http://www.fontsquirrel.com Font Squirrel is a great resource for both @face-fonts kits and generating @face-fonts. You'll need to make sure that css is optimized for cross browser compliance. (Font Squirrel will do this for you!) Font Squirrel can also build a @font-face kit (@font-face generator) ADD THE TTF VERSION OF YOUR FONT. My Generated Kit You can also look through Font Squirrel's set of pre-made kits and download. (Downloaded kit shown on right) Now that you have your font kits, you'll need to add them to your web page. I'll show you two different methods. Note: In both cases I've moved my fonts to a folder named "_fonts". You can copy the @font-face code from the generated CCS file (stylesheet.css) You will need to ADD to FOLDER name in order for the fonts to work. @font-face { font-family: 'BenthamRegular'; src: url('_fonts/Bentham-webfont.eot'); src: local('☺'), url('_fonts/Bentham-webfont.woff') format('woff'), url('_fonts/Bentham-webfont.ttf') format('truetype'), url('_fonts/Bentham- webfont.svg#webfontR8SKAqug') format('svg'); font-weight: normal; font-style: normal; } In the second method, you'll link your page to the eXTeRNAL css file. Note: You will need to add the font folder name as well. Linking the CSS. ADD TO THe HeAD TAG (under title) <link href="stylesheet.css" rel="stylesheet" type="text/css"> Make sure that the following are all in the same folder or have the same configuration: _fonts (folder) stylesheet.css yourFile.html .
Load more

Recommended publications
  • Optimal Filtering for Patterned Displays John C
    IEEE SIGNAL PROCESSING LETTERS, VOL. 7, NO. 7, JULY 2000 179 Optimal Filtering for Patterned Displays John C. Platt Abstract—Displays with repeating patterns of colored subpixels the display. The optimal filtering chooses the to be “close” gain spatial resolution by setting individual subpixels rather than to the as measured by a perceptual error metric. by setting entire pixels. This paper describes optimal filtering The error between and is measured in a perceptu- that produces subpixel values from a high-resolution input image. The optimal filtering is based on an error metric inspired by ally relevant color space. There is evidence that the human vi- psychophysical experiments. Minimizing the error metric yields sual system separates image data into a brightness channel and a linear system of equations, which can be expressed as a set of two opponent color channels: red minus green and blue minus filters. These filters provide the same quality of font display as yellow [4]. The error in the opponent color space is standard anti-aliasing at a point size 25% smaller. This optimiza- tion forms the filter design framework for Microsoft’s ClearType. Index Terms—Anti-aliasing, ClearType, fonts, image processing, (1) liquid crystal displays, optimal filtering, patterned displays. where and are matrices that transform and into I. INTRODUCTION an opponent color space. The matrix encodes the spatial pattern of subpixel color. OR PATTERNED displays such as LCD’s, a pixel is a The error is then transformed into frequency space. The F concept, not a physical device. A patterned display con- quadratic norm of the error is measured independently at each sists of a repeating pattern of singly-colored subpixels, which frequency.
    [Show full text]
  • Increasing Image Resolution on Portable Displays by Subpixel Rendering – a Systematic Overview
    SIP (2012),vol.1,e1,page1of10©TheAuthors,2012. The online version of this article is published within an Open Access environment subject to the conditions of the Creative Commons Attribution-NonCommercial-ShareAlike license <http://creativecommons.org/licenses/by-nc-sa/3.0/>. The written permission of Cambridge University Press must be obtained for commercial re-use. doi:10.1017/ATSIP.2012.3 overview paper Increasing image resolution on portable displays by subpixel rendering – a systematic overview lu fang1,2,oscarc.au1,ketantang1 and xing wen1 Many of portable devices such as smart phones, portable multimedia players (PMP), and digital single-lens reflex (DSLR) cam- eras are capable of capturing high-resolution images (e.g. 10 mega-pixel in DSLR) or even video. The limited battery power supply in the portable devices often prevents these systems to use high-power large liquid crystal display (LCD). Instead, the portable devices often have a LCD screen with small physical size (e.g. 3cm× 2cmforSmartphoneorDSLR)andwithmuch lower pixel resolution (e.g. 0.15 mega-pixel for 480 × 320 display) than actual image/video resolution. Thus, the high-resolution image and video are down-sampled before being displayed. Unfortunately, the anti-aliasing filter often leads to rather severe blurring. Although the blurring may be minor when the viewing distance is large, it can be rather disturbing in portable appli- cations due to the short viewing distance. To cope with the blurring problem, one possible solution is to use an LCD screen with higher resolution. But such hardware solution tends to be expensive and often not welcomed by the consumer electronic compa- nies.Anotherpossiblesolutionistocontinuetousethelow-resolutionLCDscreen,butusesomesoftwaretechniquetoenhance the apparent image/video resolution.
    [Show full text]
  • Typographic Specimen Poster
    Typographic Specimen Poster Type specimen posters were historically released by foundries and printers as a means of introducing new typefaces to designers. The design aesthetic of the posters was mostly utilitarian (simple and functional) with the goal of displaying a typeface in different sizes for the designer to visualize how the typeface could be used. As technology progressed from the linotype to the digital press, the emphasis on posters as the primary means of showing off a new typeface diminished, however the type specimen poster grew into their own form of expressive design. While modern type specimen posters are not as common, they are often far more expressive than their historical counterparts. Akzidenz Grotesk, design by Gunter Gerhard Lange in 1898 Homework: Put a Typeface to a Name This is a project that focuses on research and utilizing your knowledge of typography and layout skills learned over the past semester. Using InDesign, the objective of your type poster is to highlight the different qualities or characteristics of your chosen typeface, introduce the typographer, as well as generate a design that compliments the aesthetics of the prominent design movement of the time. Part 1) Research and Sketchbook Exercise: Research online and find at least 5 examples of type specimen sheets that inspire you, even if their design is different from the approach you will be taking. From your assigned century, choose a typographer and typeface they designed. Research the prominent design movement associated with your typographerʼs region and time period (Example: Typographer: Eric Gill, Typeface: Gill Sans, Time Period: 1920s England, Prominent Design Movement: Art Deco).
    [Show full text]
  • Cloud Fonts in Microsoft Office
    APRIL 2019 Guide to Cloud Fonts in Microsoft® Office 365® Cloud fonts are available to Office 365 subscribers on all platforms and devices. Documents that use cloud fonts will render correctly in Office 2019. Embed cloud fonts for use with older versions of Office. Reference article from Microsoft: Cloud fonts in Office DESIGN TO PRESENT Terberg Design, LLC Index MICROSOFT OFFICE CLOUD FONTS A B C D E Legend: Good choice for theme body fonts F G H I J Okay choice for theme body fonts Includes serif typefaces, K L M N O non-lining figures, and those missing italic and/or bold styles P R S T U Present with most older versions of Office, embedding not required V W Symbol fonts Language-specific fonts MICROSOFT OFFICE CLOUD FONTS Abadi NEW ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Abadi Extra Light ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic or bold styles provided. Agency FB MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Agency FB Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Note: No italic style provided Algerian MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ 01234567890 Note: Uppercase only. No other styles provided. Arial MICROSOFT OFFICE CLOUD FONTS ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 01234567890 Arial Bold Italic ABCDEFGHIJKLMNOPQRSTUVWXYZ
    [Show full text]
  • I Hate Comic Sans!
    I HATE COMIC SANS! It’s Overused It’s Badly used It’s not serious typography Used Incorrectly by Hospitals, Businesses, and Banks, etc. ? “A Computer on Every Desk, In every Home, Running Microsoft Software” the Microsoft Mission statement c. 1980 Computers were expensive Marketed mostly to businesses Expensive Dial up internet Off peak use only on AOL (after 6pm-6am) Screen savers were products Microsoft Scenes After Dark (flying toasters) CD-ROM ‘multimedia’ software MS Beethoven, Schubert, Stravinsky, Strauss MS Ultimate Frank Lloyd Wright MS Wine Guide, MS Dogs, MS Complete Gardening Microsoft Home (1993 Consumer Division) •Goal: To create software for Mums, Dads, and kids Product titles: •Microsoft Flight Simulator* •Microsoft Encarta* •Microsoft Scenes* •Microsoft Creative Writer Wall Street Journal: Aug 24, 1995 • Home computers in US home electronic stores for about $1000 •First affordable computers available • with Windows 95 installed • MSN Online network released to compete with America Online (AOL), Compuserve, Genie etc. • First Generation Internet Explorer released in the Plus Pack for Windows 95 ‘Utopia’ Project Lead: Melinda French (future Mrs. BillG) UI used a simple method of Launching Applications Similar to Hypercard stacks of the late 1980s For children and novice users Release: to coincide with Win95 and 1995 Christmas Season Rover talks in Times New Roman 1994 Microsoft Bob DC Comics: DC Comics The Dark Knight Returns Watchmen DC COMICS: WATCHMEN 1986-87 ILLUSTRATOR/LETTERER : DAVE GIBBONS •
    [Show full text]
  • WWII Book Project Project Based Learning
    World History Semester 11 Causes of WWII Book Project Project Based Learning Overview: The students will create a children’s book or a comic book / graphic novel over one, many, or all of the causes of WWII. The students will use the internet to look up pictures to include in their book as well as conduct research over the causes of WWII. At the culmination of the project, each student will read his or her book to the class. The last page of the book needs to be 1 page explanation of the student’s opinion of what the main cause of WWII was and why they feel that way. 21 Century outcomes: Core Subject: History Learning and Innovation Skills Think Creatively Use Systems of Thinking Communicate Clearly Information, Media and Technology Skills Access and Evaluate Information Use and Manage Information Apply Technology Effectively Life and Career Skills Manage Goals and Time Work Independently Manage Projects Produce Results Social Studies, FHSD curriculum World History Content SS2. Knowledge of principles and processes of governance systems Content SS3b. Knowledge of continuity and change in the history of the world Causes of WWII Project: Causes of WWII Children’s book / comic book / graphic novel Requirements: 1. Front Cover/Introduction 2. at least 5 pages of content (not including the front / back cover, the timeline, or the 1 page answer) 3. Each page of the story must include words AND pictures 4. Timeline of the most important events leading up to WWII 5. The student’s opinion as to what the main cause of WWII was and why.
    [Show full text]
  • CSS Font Stacks by Classification
    CSS font stacks by classification Written by Frode Helland When Johann Gutenberg printed his famous Bible more than 600 years ago, the only typeface available was his own. Since the invention of moveable lead type, throughout most of the 20th century graphic designers and printers have been limited to one – or perhaps only a handful of typefaces – due to costs and availability. Since the birth of desktop publishing and the introduction of the worlds firstWYSIWYG layout program, MacPublisher (1985), the number of typefaces available – literary at our fingertips – has grown exponen- tially. Still, well into the 21st century, web designers find them selves limited to only a handful. Web browsers depend on the users own font files to display text, and since most people don’t have any reason to purchase a typeface, we’re stuck with a selected few. This issue force web designers to rethink their approach: letting go of control, letting the end user resize, restyle, and as the dynamic web evolves, rewrite and perhaps also one day rearrange text and data. As a graphic designer usually working with static printed items, CSS font stacks is very unfamiliar: A list of typefaces were one take over were the previous failed, in- stead of that single specified Stempel Garamond 9/12 pt. that reads so well on matte stock. Am I fighting the evolution? I don’t think so. Some design principles are universal, independent of me- dium. I believe good typography is one of them. The technology that will let us use typefaces online the same way we use them in print is on it’s way, although moving at slow speed.
    [Show full text]
  • Understanding the Attack Surface and Attack Resilience of Project Spartan’S (Edge) New Edgehtml Rendering Engine
    Understanding the Attack Surface and Attack Resilience of Project Spartan’s (Edge) New EdgeHTML Rendering Engine Mark Vincent Yason IBM X-Force Advanced Research yasonm[at]ph[dot]ibm[dot]com @MarkYason [v2] © 2015 IBM Corporation Agenda . Overview . Attack Surface . Exploit Mitigations . Conclusion © 2015 IBM Corporation 2 Notes . Detailed whitepaper is available . All information is based on Microsoft Edge running on 64-bit Windows 10 build 10240 (edgehtml.dll version 11.0.10240.16384) © 2015 IBM Corporation 3 Overview © 2015 IBM Corporation Overview > EdgeHTML Rendering Engine © 2015 IBM Corporation 5 Overview > EdgeHTML Attack Surface Map & Exploit Mitigations © 2015 IBM Corporation 6 Overview > Initial Recon: MSHTML and EdgeHTML . EdgeHTML is forked from Trident (MSHTML) . Problem: Quickly identify major code changes (features/functionalities) from MSHTML to EdgeHTML . One option: Diff class names and namespaces © 2015 IBM Corporation 7 Overview > Initial Recon: Diffing MSHTML and EdgeHTML (Method) © 2015 IBM Corporation 8 Overview > Initial Recon: Diffing MSHTML and EdgeHTML (Examples) . Suggests change in image support: . Suggests new DOM object types: © 2015 IBM Corporation 9 Overview > Initial Recon: Diffing MSHTML and EdgeHTML (Examples) . Suggests ported code from another rendering engine (Blink) for Web Audio support: © 2015 IBM Corporation 10 Overview > Initial Recon: Diffing MSHTML and EdgeHTML (Notes) . Further analysis needed –Renamed class/namespace results into a new namespace plus a deleted namespace . Requires availability
    [Show full text]
  • Advanced Windows SIG January 17, 2002 Disk Management Note: Material for Paragraphs 1, 2,And 3 Based on Microsoft Windows XP Inside/Out Chapter 26
    Advanced Windows SIG January 17, 2002 Disk Management Note: material for paragraphs 1, 2,and 3 based on Microsoft Windows XP Inside/Out Chapter 26 If you have mastered hard-disk setup utilities from Windows 98 and Me, prepare to unlearn everything you know. Windows XP offers new capabilities and a new set of tools. 1. Definitions • Disk or hard Disk Î physical disk drive installed on computer o First hard disk drive Î Disk 0 o Second hard disk drive Î Disk 1 o Third hard disk drive Î Disk 2 • Basic Disk Î Contains one or more partitions o A partition Î A portion of a disk that functions as if it were a separate disk o A primary partition Î used for starting Windows - can not be further subdivided o An extended partition Î can be further divided into one or more logical drives each of which can be formatted separately and assigned a drive letter • Volume Î When a partition or logical drive is formatted for a particular file system (FAT, FAT32, or NTFS) and assigned a drive letter, it is called a volume Disk Management rev 1.doc Page 1 of 5 1/16/2002 D R Wright 2. Windows XP Disk Management Utility • Provides tools to manage disks, partitions, volumes and logical drives • Go to Start Î Right click My Computer Î Manage Î Disk Management • Perform the following tasks: o Check size, file system, status o Create partitions, logical drives, and volumes o Assign drive letters to hard disk volumes, removable disk drives, and CD-ROM drives o Changes usually take effect immediately and without need to reboot 3.
    [Show full text]
  • Seven Tips & Tricks for Windows 7
    Seven Tips & Tricks For Windows 7 Tip 1: Put a “Pin Up” of the Folders You Use Most. Tip 2: Double-Up Your Windows. Tip 3: Clear, Crisp Display—It’s In Your Control. Tip 4: Order and Reason for Your Taskbar. Tip 5: Taskbar Traversing. Tip 6: BitLocker To Go Protection. Tip 7: Your Own Personal Help Desk: Windows Troubleshooting Platform. 1 Put a “Pin Up” of the Folders You Use Most . Windows® 7 allows you to “pin up” the folders you use most on your taskbar. Simply hold your mouse over the favorite folder, right click, and drag it onto the taskbar. Windows 7 automatically pins itself to the Explorer Jump List. To open the folder, right click on the Explorer icon and select the folder you want. My Favorite! Back To Top Double-Up Your Windows. When working within an application, sometimes 2 you just want more of a good thing. To open another window of the same application (assuming the app can run more than one instance), simply hold Shift and click the taskbar icon. You can also middle-click your third mouse button for the same result. Back To Top Clear, Crisp Display—It’s In Your Control. Windows 7 makes it easy for you to 3 adjust your display settings, making text and images easier to view in all the various locations where you work on your computer. Your laptop display may look fine at work but a little dark at home. Adjust the text and image settings easily with two snappy applets: ClearType Text Tuning and Display Color Calibra- tion.
    [Show full text]
  • Suggested Fonts List
    Suggested Fonts List This is a list of some fonts our designers have available to use when designing your book. This is only a sample of some of the most popular fonts; they have thousands of others to choose from as well. For your convenience, we have marked each font as being appropriate for body text or display text. Body Text fonts are meant for the main body text of your book—paragraphs, lists, etc. These fonts are designed to be easier on the eyes for smoother reading. Display Text fonts are meant for chapter titles, subtitles, etc. They are often “fancier” fonts, such as script or handwriting. We advise against using these as main body text, as they are intended for short strings of text and can become difficult to read in long paragraphs. Last updated 6/6/2014 B = Body Text: Fonts meant for the main body text of your book. D = Display Text: Fonts meant for chapter titles, etc. We advise against using these as main body text, as they are intended for short strings of text and can become difficult to read in long paragraphs. Font Name Font Styles Font Sample BD Abraham Lincoln Regular The quick brown fox jumps over the lazy dog. 1234567890 Adobe Caslon Pro Regular The quick brown fox jumps over the lazy dog. Italic 1234567890 Semibold Semibold Italic Bold Bold Italic Adobe Garamond Pro Regular The quick brown fox jumps over the lazy dog. Italic 1234567890 Semibold Semibold Italic Bold Bold Italic Adobe Jenson Pro Light The quick brown fox jumps over the lazy dog.
    [Show full text]
  • Choosing Fonts – Quick Tips
    Choosing Fonts – Quick Tips 1. Choose complementary fonts – choose a font that matches the mood of your design. For business cards, it is probably best to choose a classic font. *Note: These fonts are not available in Canva, but are in the Microsoft Office Suite. For some good Canva options, go to this link – https://www.canva.com/learn/canva-for-work-brand-fonts/ Examples: Serif Fonts: Sans Serif Fonts: Times New Roman Helvetica Cambria Arial Georgia Verdana Courier New Calibri Century Schoolbook 2. Establish a visual hierarchy – Use fonts to separate different types of information and guide the reader - Use different fonts, sizes, weights (boldness), and even color - Example: Heading (Helvetica, SZ 22, Bold) Sub-heading (Helvetica, SZ 16, Italics) Body Text (Garamond, SZ 12, Regular) Captions (Garamond, SZ 10, Regular 3. Mix Serifs and Sans Serifs – This is one of the best ways to add visual interest to type. See in the above example how I combined Helvetica, a sans serif font, with Garamond, a serif font. 4. Create Contrast, Not Conflict: Fonts that are too dissimilar may not pair well together. Contrast is good, but fonts need a connecting element. Conflict Contrast 5. Use Fonts from the Same Family: These fonts were created to work together. For example, the fonts in the Arial or Courier families. 6. Limit Your Number of Fonts: No more than 2 or 3 is a good rule – for business cards, choose 2. 7. Trust Your Eye: These are not concrete rules – you will know if a design element works or not! .
    [Show full text]