DOCSLIB.ORG

Floats, Grids, and Fonts

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Floats, Grids, and Fonts Floats, Grids, and Fonts Computer Science and Engineering n College of Engineering n The Ohio State University Lecture 14 Recall: Blocks, Inline, and Flow Computer Science and Engineering n The Ohio State University flow body inline paragraph heading horz rule blocks Floating: Remove From Flow Computer Science and Engineering n The Ohio State University width Floating: Overlays Block Computer Science and Engineering n The Ohio State University .fancy { float: left } codepen.io/cse3901/pen/bLYdLz Problem: Blocks Below Computer Science and Engineering n The Ohio State University o Floating element may be taller than containing element o May be undesirable, eg for footer that should be below everything including floats problem Solution: clear Computer Science and Engineering n The Ohio State University o Styling for block element after float #footer { clear: left; } o Requires that side to be clear of floats id="footer" CSS: Grid Layout Computer Science and Engineering n The Ohio State University o Display property for arranging elements in a 2D grid o Parent element is the grid container n Style with CSS property (display: grid) n Set number/size of rows/columns n Set gap between rows/columns o Direct children are the grid items n Set alignment, justification, placement n One item can be sized/placed to a grid area (ie a rectangular subgrid) Grid Layout: Example Computer Science and Engineering n The Ohio State University Grid Layout: Example Computer Science and Engineering n The Ohio State University .wrapper { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-rows: repeat(4,20px); grid-gap: 20px; } <div class="wrapper"> <div>1</div> <div>2</div> … </div> codepen.io/cse3901/pen/aqVNJN Grid Areas: Example Computer Science and Engineering n The Ohio State University Grid Areas Computer Science and Engineering n The Ohio State University .top { grid-area: tp; } .sidebar { grid-area: sd; } #footer { grid-area: ft; } .wrapper { display: grid; grid-template-columns: 1fr 2fr 2fr; grid-template-areas: "tp tp tp" "sd . ." "sd . ." "sd ft ft"; } codepen.io/cse3901/pen/oEoKXV CSS Units for Size Computer Science and Engineering n The Ohio State University o “Absolute” units (but browsers cheat) n in, cm, mm n pt (point) = 1/72 inch, pc (pica) = 12 pts o Absolute (for a given resolution) n px (pixels) o Relative to current element’s font n em = width of 'm' in element’s font n ex = height of 'x' in element’s font o Relative to parent (or ancestor) size n %, rem (like em, but with root’s font) o Standard advice for fonts: n Prefer relative units Aside: The Problem with Pixels Computer Science and Engineering n The Ohio State University o Historically, pixel size determined by hardware (ie screen resolution) n ppi: “pixels per inch” o Problems using px unit: n Different resolutions = different size of px n Different devices = different view distances o Solution: W3C's “reference pixel” (optics) 0.0213 degrees Fonts: Concepts Computer Science and Engineering n The Ohio State University o Fonts are a key part of visual design n Serious, technical, whimsical, friendly… o Font family (should be “typeface”) n Arial, Helvetica, Times, Courier, Palatino, Garamond, Verdana, Tahoma, Lucida,… o Font = typeface + weight, slant, etc n Normal, bold, light (CSS: font-style) n Normal, oblique, italic (CSS: font-weight) Properties and Metrics Computer Science and Engineering n The Ohio State University o Serif vs sans-serif o Kerning: proportional vs monospace o Size = ascent + descent (usually) o m-width, x-height Whitespace Computer Science and Engineering n The Ohio State University o Critical for aesthetics, readability o Margins around body text, headings o Leading n Space from baseline to baseline n CSS property: line-height o Larger x-height = easier to read n But larger x-height also requires more line spacing o “Music is the silence between the notes” Font Families Computer Science and Engineering n The Ohio State University o De gustibus non est disputandum o Nevertheless, some common opinions o Less is more: Use fewer fonts/sizes n Cohesive appearance o Helvetica/Arial: clean but ubiquitous n They are identical / completely different o Times is hard to read (on a monitor) n Better for print o Comic Sans is for 12-year-olds and owners of NBA basketball teams Identical & Completely Different Computer Science and Engineering n The Ohio State University Fallback Fonts Computer Science and Engineering n The Ohio State University o Not sure what fonts host OS will have o CSS font-family: List alternatives in decreasing order of preference font-family: Helvetica, Arial, "Liberation Sans", sans-serif; o Always end with one of 5 generic fonts: n sans-serif (Arial?) example n serif (Times New Roman?) example n monospace (Courier New?) example n cursive (Comic Sans?) example n fantasy (Impact?) example o OS (and browser) determine which font family each generic actually maps to CSS3: Web Fonts @font-face Computer Science and Engineering n The Ohio State University o Looks like a selector, but is a “directive” @font-face { font-family: HandWriting; src: url('PAGSCapture.ttf'); } o Font family then available in rest of CSS p { font-family: HandWriting; … } o User agent dynamically downloads font o Different syntaxes for font files n .ttf, .otf, .eot, .woff, .svg, … o Beware: copyright issues! n See fonts.google.com Summary Computer Science and Engineering n The Ohio State University o Images n Formats jpeg, png, gif, svg n Tradeoffs of size, quality, features o Floating elements n Removed from flow, layered on top o Fonts n Fallback fonts to account for uncertainty n Web fonts for dynamic loading.
Load more

Recommended publications
  • Supreme Court of the State of New York Appellate Division: Second Judicial Department
    Supreme Court of the State of New York Appellate Division: Second Judicial Department A GLOSSARY OF TERMS FOR FORMATTING COMPUTER-GENERATED BRIEFS, WITH EXAMPLES The rules concerning the formatting of briefs are contained in CPLR 5529 and in § 1250.8 of the Practice Rules of the Appellate Division. Those rules cover technical matters and therefore use certain technical terms which may be unfamiliar to attorneys and litigants. The following glossary is offered as an aid to the understanding of the rules. Typeface: A typeface is a complete set of characters of a particular and consistent design for the composition of text, and is also called a font. Typefaces often come in sets which usually include a bold and an italic version in addition to the basic design. Proportionally Spaced Typeface: Proportionally spaced type is designed so that the amount of horizontal space each letter occupies on a line of text is proportional to the design of each letter, the letter i, for example, being narrower than the letter w. More text of the same type size fits on a horizontal line of proportionally spaced type than a horizontal line of the same length of monospaced type. This sentence is set in Times New Roman, which is a proportionally spaced typeface. Monospaced Typeface: In a monospaced typeface, each letter occupies the same amount of space on a horizontal line of text. This sentence is set in Courier, which is a monospaced typeface. Point Size: A point is a unit of measurement used by printers equal to approximately 1/72 of an inch.
    [Show full text]
  • Avid Marquee Title Tool User's Guide
    Avid® Marquee® Title Tool User’s Guide ™ make manage move | media Avid ® Copyright and Disclaimer Product specifications are subject to change without notice and do not represent a commitment on the part of Avid Technology, Inc. The software described in this document is furnished under a license agreement. You can obtain a copy of that license by visiting Avid's Web site at www.avid.com. The terms of that license are also available in the product in the same directory as the software. The software may not be reverse assembled and may be used or copied only in accordance with the terms of the license agreement. It is against the law to copy the software on any medium except as specifically allowed in the license agreement. Avid products or portions thereof are protected by one or more of the following United States Patents: 4,746,994; 4,970,663; 5,045,940; 5,267,351; 5,309,528; 5,355,450; 5,396,594; 5,440,348; 5,452,378; 5,467,288; 5,513,375; 5,528,310; 5,557,423; 5,577,190; 5,583,496; 5,584,006; 5,627,765; 5,634,020; 5,640,601; 5,644,364; 5,654,737; 5,719,570; 5,724,605; 5,726,717; 5,729,673; 5,745,637; 5,752,029; 5,754,180; 5,754,851; 5,799,150; 5,812,216; 5,828,678; 5,842,014; 5,852,435; 5,995,115; 6,016,152; 6,061,758; 6,130,676; 6,532,043; 6,546,190; 6,636,869; 6,747,705; 6,813,622; D352,278; D392,267; D392,268; D392,269; D395,291; D396,853; D398,912.
    [Show full text]
  • Basic Styles of Lettering for Monuments and Markers.Indd
    BASIC STYLES OF LETTERING FOR MONUMENTS AND MARKERS Monument Builders of North America, Inc. AA GuideGuide ToTo TheThe SelectionSelection ofof LETTERINGLETTERING From primitive times, man has sought to crude or garish or awkward letters, but in communicate with his fellow men through letters of harmonized alphabets which have symbols and graphics which conveyed dignity, balance and legibility. At the same meaning. Slowly he evolved signs and time, they are letters which are designed to hieroglyphics which became the visual engrave or incise cleanly and clearly into expression of his language. monumental stone, and to resist change or obliteration through year after year of Ultimately, this process evolved into the exposure. writing and the alphabets of the various tongues and civilizations. The early scribes The purpose of this book is to illustrate the and artists refi ned these alphabets, and the basic styles or types of alphabets which have development of printing led to the design been proved in memorial art, and which are of alphabets of related character and ready both appropriate and practical in the lettering readability. of monuments and markers. Memorial art--one of the oldest of the arts- Lettering or engraving of family memorials -was among the fi rst to use symbols and or individual markers is done today with “letters” to inscribe lasting records and history superb fi delity through the use of lasers or the into stone. The sculptors and carvers of each sandblast process, which employs a powerful generation infl uenced the form of letters and stream or jet of abrasive “sand” to cut into the numerals and used them to add both meaning granite or marble.
    [Show full text]
  • HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, Javascript and Web Storage
    Androidfp_19.fm Page 1 Friday, May 18, 2012 10:32 AM 19 HTML5 Favorite Twitter Searches App Browser-Based Mobile Apps with HTML5, CSS3, JavaScript and Web Storage Objectives In this chapter you’ll: ■ Implement a web-based version of the Favorite Twitter Searches app from Chapter 5. ■ Use HTML5 and CSS3 to implement the interface of a web app. ■ Use JavaScript to implement the logic of a web app. ■ Use HTML5’s Web Storage APIs to store key-value pairs of data that persist between executions of a web app. ■ Use a CSS reset to remove all browser specific HTML- element formatting before styling an HTML document’s elements. ■ Save a shortcut for a web app to your device’s home screen so you can easily launch a web app. = DRAFT: © Copyright 1992–2012 by Deitel & Associates, Inc. All Rights Reserved. Androidfp_19.fm Page 2 Friday, May 18, 2012 10:32 AM 2 Chapter 19 HTML5 Favorite Twitter Searches App 19.1 Introduction 19.5 Building the App 19.2 Test-Driving the Favorite Twitter 19.5.1 HTML5 Document Searches App 19.5.2 CSS 19.5.3 JavaScript 19.3 Technologies Overview Outline 19.6 Wrap-Up 19.1 Introduction The Favorite Twitter Searches app from Chapter 5 allowed users to save their favorite Twit- ter search strings with easy-to-remember, user-chosen, short tag names. Users could then conveniently follow tweets on their favorite topics. In this chapter, we reimplement the Fa- vorite Twitter Searches app as a web app, using HTML5, CSS3 and JavaScript.
    [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]
  • Background a Short Introduction to Font Characteristics
    fonts: background A short introduction to font characteristics Maarten Gelderman Hardly anyone will dispute the statement that proporion- ally spaced fonts are more beautiful and legible than mono- abstract spaced designs. In a monospaced design the letter i takes as Almost anyone who develops an interest in fonts is bound to much space as a letter m or W. Consequently, some char- be overwelmed by the bewildering variety of letterforms acters look simply too compressed, whereas around oth- available. The number of fonts available from commercial ers too much white space is found. Monospaced fonts are suppliers like Adobe, URW, LinoType and others runs into the simply not suited for body text. Only in situations where it thousands. A recent catalog issued by FontShop [Truong et al., is important that all characters are of equal width, e.g., in 1998] alone lists over 25.000 different varieties.1 And listings of computer programs, where it may be important somehow, although the differences of the individual letters are that each individual character can be discerned and where hardly noticable, each font has its own character, its own the layout of the program may depend on using mono- personality. Even the atmosphere elucided by a text set from spaced fonts, can the usage of a monospaced font be de- Adobe Garamond is noticably different from the atmosphere of the same text set from Stempel Garamond. Although fended. In most other situations, they should simply be decisions about the usage of fonts, will always remain in the avoided. realm of esthetics, some knowledge about font characteristics may nevertheless help to create some order and to find out Romans, italics and slant A second typeface character- why certain design decisions just do not work.
    [Show full text]
  • Vision Performance Institute
    Vision Performance Institute Technical Report Individual character legibility James E. Sheedy, OD, PhD Yu-Chi Tai, PhD John Hayes, PhD The purpose of this study was to investigate the factors that influence the legibility of individual characters. Previous work in our lab [2], including the first study in this sequence, has studied the relative legibility of fonts with different anti- aliasing techniques or other presentation medias, such as paper. These studies have tested the relative legibility of a set of characters configured with the tested conditions. However the relative legibility of individual characters within the character set has not been studied. While many factors seem to affect the legibility of a character (e.g., character typeface, character size, image contrast, character rendering, the type of presentation media, the amount of text presented, viewing distance, etc.), it is not clear what makes a character more legible when presenting in one way than in another. In addition, the importance of those different factors to the legibility of one character may not be held when the same set of factors was presented in another character. Some characters may be more legible in one typeface and others more legible in another typeface. What are the character features that affect legibility? For example, some characters have wider openings (e.g., the opening of “c” in Calibri is wider than the character “c” in Helvetica); some letter g’s have double bowls while some have single (e.g., “g” in Batang vs. “g” in Verdana); some have longer ascenders or descenders (e.g., “b” in Constantia vs.
    [Show full text]
  • Typographers'
    TUGboat, Volume 39 (2018), No. 3 171 Typographers’ Inn Table 1: Widths of set for some related serif, sans-serif, and monospace fonts Peter Flynn CMR abcdefghijlkmnopqrstuvwxyz O0|I1l Font tables CMSS abcdefghijlkmnopqrstuvwxyz O0|I1l CMTT abcdefghijlkmnopqrstuvwxyz O0|I1l Peter Wilson has rightly called me to account for PT Serif abcdefghijlkmnopqrstuvwxyz O0|I1l missing out the fonttable (two t’s) package in the de- PT Sans abcdefghijlkmnopqrstuvwxyz O0|I1l scription of my experimental fontable (one t) package PT Mono abcdefghijlkmnopqrstuvwxyz O0|I1l [4, p 17]. Libertine abcdefghijlkmnopqrstuvwxyz O0|I1l The fonttable package is much more powerful Biolinum abcdefghijlkmnopqrstuvwxyz O0|I1l than the one I am [still] working on, and I was so Lib. Mono abcdefghijlkmnopqrstuvwxyz O0|I1l intent on reimplementing the specific requirements Plex Serif abcdefghijlkmnopqrstuvwxyz O0|I1l abcdefghijlkmnopqrstuvwxyz O0|I1l A Plex Sans of the allfnt8.tex file in X LE TEX to the exclusion Plex Mono abcdefghijlkmnopqrstuvwxyz O0|I1l of pretty much everything else that I didn’t do any Nimbus Serif abcdefghijlkmnopqrstuvwxyz O0|I1l justice to fonttable (and a number of other test and do. Sans abcdefghijlkmnopqrstuvwxyz O0|I1l display tools). do. Mono abcdefghijlkmnopqrstuvwxyz O0|I1l I am expecting shortly to have more time at my do. Mono N abcdefghijlkmnopqrstuvwxyz O0|I1l disposal to remedy this and other neglected projects. Times abcdefghijlkmnopqrstuvwxyz O0|I1l Helvetica abcdefghijlkmnopqrstuvwxyz O0|I1l Monospace that fits Courier abcdefghijlkmnopqrstuvwxyz O0|I1l Luxi Mono * abcdefghijlkmnopqrstuvwxyz O0|I1l One of the recurrent problems in documentation is finding a suitable monospace font for program listings Times, Helvetica, and Courier (unrelated) are included for or other examples of code.
    [Show full text]
  • Chapter 10 Document Object Model and Dynamic HTML
    Chapter 10 Document Object Model and Dynamic HTML The term Dynamic HTML, often abbreviated as DHTML, refers to the technique of making Web pages dynamic by client-side scripting to manipulate the document content and presen- tation. Web pages can be made more lively, dynamic, or interactive by DHTML techniques. With DHTML you can prescribe actions triggered by browser events to make the page more lively and responsive. Such actions may alter the content and appearance of any parts of the page. The changes are fast and e±cient because they are made by the browser without having to network with any servers. Typically the client-side scripting is written in Javascript which is being standardized. Chapter 9 already introduced Javascript and basic techniques for making Web pages dynamic. Contrary to what the name may suggest, DHTML is not a markup language or a software tool. It is a technique to make dynamic Web pages via client-side programming. In the past, DHTML relies on browser/vendor speci¯c features to work. Making such pages work for all browsers requires much e®ort, testing, and unnecessarily long programs. Standardization e®orts at W3C and elsewhere are making it possible to write standard- based DHTML that work for all compliant browsers. Standard-based DHTML involves three aspects: 447 448 CHAPTER 10. DOCUMENT OBJECT MODEL AND DYNAMIC HTML Figure 10.1: DOM Compliant Browser Browser Javascript DOM API XHTML Document 1. Javascript|for cross-browser scripting (Chapter 9) 2. Cascading Style Sheets (CSS)|for style and presentation control (Chapter 6) 3. Document Object Model (DOM)|for a uniform programming interface to access and manipulate the Web page as a document When these three aspects are combined, you get the ability to program changes in Web pages in reaction to user or browser generated events, and therefore to make HTML pages more dynamic.
    [Show full text]
  • The Selnolig Package: Selective Suppression of Typographic Ligatures*
    The selnolig package: Selective suppression of typographic ligatures* Mico Loretan† 2015/10/26 Abstract The selnolig package suppresses typographic ligatures selectively, i.e., based on predefined search patterns. The search patterns focus on ligatures deemed inappropriate because they span morpheme boundaries. For example, the word shelfful, which is mentioned in the TEXbook as a word for which the ff ligature might be inappropriate, is automatically typeset as shelfful rather than as shelfful. For English and German language documents, the selnolig package provides extensive rules for the selective suppression of so-called “common” ligatures. These comprise the ff, fi, fl, ffi, and ffl ligatures as well as the ft and fft ligatures. Other f-ligatures, such as fb, fh, fj and fk, are suppressed globally, while making exceptions for names and words of non-English/German origin, such as Kafka and fjord. For English language documents, the package further provides ligature suppression rules for a number of so-called “discretionary” or “rare” ligatures, such as ct, st, and sp. The selnolig package requires use of the LuaLATEX format provided by a recent TEX distribution, e.g., TEXLive 2013 and MiKTEX 2.9. Contents 1 Introduction ........................................... 1 2 I’m in a hurry! How do I start using this package? . 3 2.1 How do I load the selnolig package? . 3 2.2 Any hints on how to get started with LuaLATEX?...................... 4 2.3 Anything else I need to do or know? . 5 3 The selnolig package’s approach to breaking up ligatures . 6 3.1 Free, derivational, and inflectional morphemes .
    [Show full text]
  • Brand Manual the NEW BRAND DESIGN GUIDELINES for “LIPSUS”, a PRODUCT by SHAHAK-TEC LTD
    AppleBay Media [email protected] Uziya Street 15/10 www.applebaymedia.com Jerusalem 9314315 Company Representative +972 50 990 2285 David Metzler Brand Manual THE NEW BRAND DESIGN GUIDELINES FOR “LIPSUS”, A PRODUCT BY SHAHAK-TEC LTD. March 2019 BRAND DESIGN MANUAL V1 PREPARED FOR LIPSUS Address Phone & Fax Online Shahak-Tec Ltd. Email 1: [email protected] 1 Avshalom Road, P.O. Box 166 Phone: +972 4 624 4444 Email 2: [email protected] Zikhron Yaaqov 3095101 Israel Fax: +972 4 635 0999 Website: www.shahaktec.com Brand Identity? Have a Look when Image meets Design. Lipsus Corporate Brand Guidelines Version: v1 // 2019 Table of content Brand Design Manual SECTION 1 | INTRODUCTION .........................................................................PAGE 04 SECTION 2 | BRAND LOGO ............................................................................PAGE 06 SECTION 3 | BRAND TYPOGRAPHY ..................................................................PAGE 10 SECTION 4 | BRAND COLOR SYSTEM ...............................................................PAGE 14 These guidelines describe the visual and verbal elements that represent Lipsus´ brand identity. welcome4 // 16 1. INTRODUCTION // Introduction THE DESIGN GUIDELINES These guidelines describe the visual and verbal elements that represent the corporate identity of Lipsus. This includes our name, logo and other elements such as color, type and graphics. Sending a consistent and controlled message of who you are is essential to presenting a strong, unified image of your company. These guidelines should reflect Lipsus’ commitment to quality, consitency and style. The Lipsus brand, including the logo, name, colors and identifying elements, are valuable company assets. Each of you is responsible for protecting the company’s interests by preventing unauthorized or incorrect use of the Lipsus name and marks. DAVID METZLER AppleBay Media welcome5 // 16 The Logo • Introduction • Elements • Versions • Dimensions • Applications 6 // 16 2.
    [Show full text]
  • CVAA Support Within the Kaltura Player Toolkit Last Modified on 06/21/2020 4:25 Pm IDT
    CVAA Support within the Kaltura Player Toolkit Last Modified on 06/21/2020 4:25 pm IDT The Twenty-First Century Communications and Video Accessibility Act of 2010 (CVAA) focuses on ensuring that communications and media services, content, equipment, emerging technologies, and new modes of transmission are accessible to users with disabilities. All Kaltura players that use the Kaltura Player Toolkit are now CVAA compliant by default and are based on on Twenty-First Century Communications and Video Accessibility Act of 2010 (CVAA). The player includes capabilities for editing the style and display of captions and can be modified by the end user. The closed captions styling editor includes easy to use markup and testing controls. The Kaltura Player v2 delivers a great keyboard input experience for users and a seamless browser-managed experience for better integration with web accessibility tools. This is in addition to including the capability of turning closed captions on or off. Features The Kaltura Player v2 CVAA features include: Studio support - Enable options menu Captions types: XML, SRT/DFXP, VTT(outband) Displaying and changing fonts in 64 color combinations using eight standard caption colors currently required for television sets. Adjusting character opacity Ability to adjust caption background in eight specified colors. Copyright ©️ 2019 Kaltura Inc. All Rights Reserved. Designated trademarks and brands are the property of their respective owners. Use of this document constitutes acceptance of the Kaltura Terms of Use and Privacy Policy. 1 Ability to adjust character edge (i.e., non, raised, depressed, uniform or drop shadow). Ability to adjust caption window color and opacity.
    [Show full text]