DOCSLIB.ORG

What This Code Does Page/Text Formatting

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
What This Code Does Page/Text Formatting /* What this code does Page/text formatting - applies optimal length for desktop (approx. 70 characters) - applies optimal length for mobile (approx. 40 characters) Header Formatting - applies proportionate sizing for all headers across mobile devices Pullquote Formatting - applies responsive pullquote formatting Image Formatting - applies responsive image formatting How to implement the code (See CM Business Writing Blog) .page .image-left (left aligned image) .image-right (right aligned image) .pquote-left (left aligned pullquote) .pquote-right (right aligned pullquote) */ /* Page Formatting (line height, mobile responsive width, proportionate font sizing) */ html { font-size: 1em; } body { font-size: 100%; } body, h1, h2, h3, h4, h5, h6 { font-size-adjust: 0.5; } p { margin-bottom: 1.5em; } /* By changing margin-bottom of paragraphs (<p> elements), you change spacing after the paragraph */ .post { font-size: 1em; line-height: 1.5em; font-family: Helvetica; max-width: 40em; margin: auto; } /* By changing max-width of .post you change the maximum width (length) of each line of text. This helps avoid overly long lines. You can also change the alignment of the entire post by changing margin */ @media screen and (min-width: 43.75em) { .post { font-size: 1em; line-height: 1.5em; } } /* Heading Format (proportionate headers across mobile devices) */ /* Level 1 Headings*/ .post h1 { font-size: 2em; line-height: 1.25; } @media screen and (min-width: 43.75em) { h1 { font-size: 2.5em; line-height: 1.125; } } @media screen and (min-width: 56.25em) { h1 { font-size: 3em; line-height: 1.05; } } /* Level 2 Headings */ .post h2 { font-size: 1.625em; line-height: 1.15384615; } @media screen and (min-width: 43.75em) { h2 { font-size: 2em; line-height: 1.25; } } @media screen and (min-width: 56.25em) { h2 { font-size: 2.25em; line-height: 1.25; } } /* Level 3 Headings */ .post h3 { font-size: 1.375em; line-height: 1.13636364; } @media screen and (min-width: 43.75em) { h3 { font-size: 1.5em; line-height: 1.25; } } @media screen and (min-width: 56.25em) { h3 { font-size: 1.75em; line-height: 1.25; } } /* Level 4 Headings */ .post h4 { font-size: 1.125em; line-height: 1.11111111; } @media screen and (min-width: 43.75em) { h4 { line-height: 1.22222222; } } /* Pullquote Formatting */ .post blockquote, q { font-size: 1.25em; line-height: 1.25; margin: 0; } @media screen and (min-width: 43.75em) { blockquote, q { font-size: 1.5em; line-height: 1.45833333; } } .pquote-left { float: left; width: 12.5em; font-weight: bold; padding: .8125em; margin: 0 .8125em .8125em 0; } .pquote-right { float: right; width: 12.5em; font-weight: bold; padding: .8125em; margin: 0 .8125em .8125em 0; } /* By changing width of .pquote you change the width (length) of the pull quote. And you can toggle the bold formatting by deleting “font-weight:bold;” */ @media screen and (max-width:21em) { .pquote-right, .pquote-left { width: 100%; } } /* Image Formatting */ .image-right { float: right; width: 50%; margin: .9125em 0 .9125em .8125em; } .image-left { float: left; width: 50%; margin: .9125em .9125em .9125em 0; } /* Just like .pquote, you can change the width (length) of your images. @media screen and (max-width: 43.75em) { .image-right, .image-left { width: 100%; } } .
Load more

Recommended publications
  • Web Layout and Content Guide Table of Contents
    Web Layout and Content Guide Table of Contents Working with Pages ...................................................................................... 3 Adding Media ................................................................................................ 5 Creating Page Intros...................................................................................... 7 Using Text Modules ...................................................................................... 9 Using Additional Modules ............................................................................19 Designing a Page Layout .............................................................................24 Web Layout and Content Guide 2 Working with Pages All University Communications-created sites use Wordpress as their content management system. Content is entered and pages are created through a web browser. A web address will be provided to you, allowing you to access the Wordpress Dashboard for your site with your Unity ID via the “Wrap Account” option. Web Layout and Content Guide 3 Existing and New Pages Site Navigation/Links In the Wordpress Dashboard the “Pages” section — accessible in the left-hand menu — allows you to view all the pages Once a new page has been published it can be added to the appropriate place in the site’s navigation structure under that have been created for your site, and select the one you want to edit. You can also add a new page via the left-hand “Appearance” > “Menus” in the left-hand menu. The new page should appear in the “Most Recent” list on the left. It menu, or the large button in the “All Pages” view or “Tree View.” Once you have created a new page and you are in the can then be selected and put into the navigation by clicking the “Add to Menu” button. The page will be added to the “Edit Page” view, be sure to give the page a proper Title. bottom of the “Menu Structure” by default.
    [Show full text]
  • Glossary of Design Terms
    GLOSSARY OF TERMS Typography - The artistic arrangement of type in a readable and visually appealing way. Typography usually concerns the design and use of various typefaces in a way that helps to better visually communicate ideas. Vector images - Vector-based images (such as those created in Adobe Illustrator) are made up of points, each of which has a defined X and Y coordinate. These points join paths to form shapes, and inside these shapes you can add color fills. Because everything is generated based around this, vectors can be resized to any size without any loss of quality. Adobe Illustrator is a vector-based program. Raster images - (sometimes referred to as bitmap images) are made up of thousands of pixels which determine the color and form of the image. Photos are raster images. Because raster images are made up of a finite amount of pixels, resizing can be tricky. If you make a raster image larger dimensions in Photoshop, the software has to make up data in order to add the size. This results in loss of quality. Adobe Photoshop is a raster-based program. Body Copy - The main part of text in your design or publication – the written website content, the book contents, even this type you’re reading right now, it’s all body copy. Display Type - Type that is designed with the objective of attracting attention. Think of movie titles on posters, article titles in magazines, newspaper headlines, etc. Hierarchy - The visual arrangement of design elements in a way that signifies importance. For example, you might make a title big and bold to ensure it attracts more attention than a small, lightly colored image caption.
    [Show full text]
  • National Immunisation Programme Brand Guidelines
    National Immunisation Programme Brand Guidelines National Immunisation Programme Brand Guidelines National Immunisation Programme Brand Guidelines Welcome These brand guidelines are designed to help you work with the Immunise brand in a consistent way across all types of communications and marketing material. It is essential to follow these guidelines as they protect the integrity and equity of the brand, as well as ensuring brand and message recognition by our audiences. If there are any applications of the identity or the brand’s graphic elements that you require assistance with and which are not included in these guidelines, or if you have any questions regarding the application or use of the brand and its elements, please contact the Health Promotion Agency, phone 04 917 0060 or email: Daemon Coyle Senior Account Lead Health Promotion Agency [email protected] Last updated July 2014 National Immunisation Programme Brand Guidelines Contents Our logo 1.0 Introducing our logo 1.1 Logo versions – positive 1.2 Logo versions – inversed 1.3 Logo variations by audience 1.4 Clear space and minimum sizes 1.5 Incorrect usage 1.6 Colour 2.0 The colour system 2.1 The colour system – allocation 2.2 Typography 3.0 Font family – primary 3.1 Type styles 3.2 Font family – secondary 3.3 Supporting graphics 4.0 Circular motifs 4.1 Divider / container graphics 4.2 Imagery 5.0 Poster 5.1 A5 brochure 5.2 Examples 6.0 Schedule wall chart 6.1 Poster 6.2 A5 pamphlet front cover 6.3 A5 pamphlet back cover 6.4 DL leaflet front cover 6.5 DL leaflet back cover 6.6 Text pages 6.7 Misc.
    [Show full text]
  • Ag Brand Manual
    Ag Brand Manual 1 Ag Visual Identity A guideline for creative talent. “Too much flexibility results in complete chaos, too much structure results in lifeless communications. Balance is the Design Continuity goal.” These guidelines are not intended to provide every All permissions are denied unless detail regarding graphics expressly granted. applications, production processes and standards, but to Guideline Purpose provide general direction for Promote the Ag visual identity in maintaining consistency with the most convenient, consistent the Ag identity. and efficient way and make sure no mistakes are made. ©2011 DECAGON PRINTED IN USA v1.0 2 Heirarchy & Emphasis Typography and colors are palettes. They have a limited number of choices in a given range. They have shades or weight. Type on a page appears as a gray block to the eye. Weight is a degree of boldness or shade. Weight helps the viewer determine what is most important. It creates interest and attractive design. Varying type weights give the illusion of depth to a page. Darker type moves forwards and lighter type receeds. This helps emphasize what elements should be viewed and in what order. These direct the eye of the observer or reader. This is presentation strategy. If everything is emphasied equally, it creates visual noise. “Emphasizing everything equals emphasizing nothing.” —marketing adage. 3 Logo Application The Decagon logo is described as No scanning logo artwork! a stack logo. Word parts of the logotype are not all on the same Logo Placement line. The logo should appear only once on each printed spread (not each The logo sides are sloped (italic).
    [Show full text]
  • DTP Design Features
    DTP Design Features 1.03 Demonstrate desktop publishing. Special Features of Publications • Art • Jumpline • Balloon • Pull Quote • Bleed • Rules • Caption • Sidebar • Dropped Cap • Text Box • Running • Watermark Headlines/Footers • End mark • Reverse text Art • Illustrations and photographs used to convey meaning and add appeal Balloon • A circle or bubble enclosing copy in an illustration • Often used in cartoons ??? Bleed • A print effect in which a color, object or image appears to run off the edge of a page. Caption • Brief descriptive text accompanying an image or chart. • Can be in the form of a textbox or balloon. Dropped Cap • An enlarged character at the beginning of a paragraph • Drops below the line of text • Grabs the reader’s attention Running Headlines/Footers • Running text at the top and/or bottom of a document. • Also called headers. • Used for organization, page numbers, date, author, running title, etc. Jumpline • Line which tells readers which page to refer to for the continuation of an article. Continued on B3 Pull Quote • Placement • Quotation taken − Between columns directly from with word wrap the body of the − Alone in a column article. surrounded by • Used to draw white space attention. − Right justified in the last column • Often made − Beneath the larger than headline as a body text. deck Rules • Horizontal or vertical lines that can be applied to paragraphs, text boxes, and objects in a publication. Sidebar • Square box filled with information related to the main story or to a completely separate article. Text Box • Container for text that can be placed and formatted independently of other text.
    [Show full text]
  • Responsive Typography Design for Meaning, Not for Screen Size
    Text (504) 229-6828 with #rwdtype 5 (comment) Responsive Typography Design for Meaning, Not for Screen Size CSS Dev Conf 13 October, 2014 hwdesignco.com | @jpamental | Responsive Typography What We’ll Cover + Lies & deceptions about art & science + Understanding the value of hats + What is Responsive Typography + Practicing the Four P’s hwdesignco.com | @jpamental | Responsive Typography Art & Science: A Historical Romance DaVinci? Vermeer: Tim Jenison That guy would code Master or Technician? Artist or Inventor? hwdesignco.com | @jpamental | Responsive Typography Is Tim an artist or is Tim an inventor? I think the problem is not trying to pick one of these things for Tim to be – the problem is that we have that distinction -Penn Jillette in ‘Tim’s Vermeer’ hwdesignco.com | @jpamental | Responsive Typography Art is inherently tied to the technology we use to create it No matter how much we try to ignore it hwdesignco.com | @jpamental | Responsive Typography Art+Science hwdesignco.com | @jpamental | Responsive Typography Design+Development hwdesignco.com | @jpamental | Responsive Typography hwdesignco.com | @jpamental | Responsive Typography When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | Responsive Typography We can’t. + (Insert Ginger Rogers analogy here) + Encompasses all of what you know about type & its use but + Typography on the web requires additional consideration (art & science) + Our canvas is fluid; constantly expanding & contracting + Reading on screens
    [Show full text]
  • Catching Attention with Automatic Pull Quote Selection
    Catching Attention with Automatic Pull Quote Selection Tanner Bohn Charles X. Ling Western University Western University London, ON, Canada London, ON, Canada [email protected] [email protected] Abstract To advance understanding on how to engage readers, we advocate the novel task of automatic pull quote selection. Pull quotes are a component of articles specifically designed to catch the at- tention of readers with spans of text selected from the article and given more salient presentation. This task differs from related tasks such as summarization and clickbait identification by several aspects. We establish a spectrum of baseline approaches to the task, ranging from handcrafted features to a neural mixture-of-experts to cross-task models. By examining the contributions of individual features and embedding dimensions from these models, we uncover unexpected properties of pull quotes to help answer the important question of what engages readers. Human evaluation also supports the uniqueness of this task and the suitability of our selection models. The benefits of exploring this problem further are clear: pull quotes increase enjoyment and read- ability, shape reader perceptions, and facilitate learning. Code to reproduce this work is available at https://github:com/tannerbohn/AutomaticPullQuoteSelection. 1 Introduction Discovering what keeps readers engaged is an important problem. We thus propose the novel task of automatic pull quote (PQ) selection accompanied with a new dataset and insightful analysis of several motivated baselines. PQs In a way, a PQ is like are graphical elements of articles with thought provoking spans of text pulled from an article by a writer or copy ed- clickbait, except that it itor and presented on the page in a more salient manner is not lying to people.
    [Show full text]
  • Magazine Research Assignment: National Geographic
    Magazine Research Assignment: National Geographic Purchase a well-designed magazine (ideally award winning) Post you’re your class website under link “Magazine Design” – “Research” 1. What does the magazine branding tell you about the magazine content and attitude e.g. humor, serious, intellectual etc. Intellectual, educational, accessible but serious For the cover: 1. What does the nameplate convey about the magazine branding? a. Formal and educational brand 2. Describe the font(s) and size(s) and style used for the nameplate a. 80pt, NatGeo SemiBold (similar to Times New Roman Condensed) 3. What kinds of images are used and why are they effective and how do they entice you to open and read the magazine? a. The cover photo is large and is the dominant element of the page. It ties directly into the feature article and grabs your attention with unity and contrast. 4. How the use of image and typography make the featured article apparent when looking at the cover? a. The image is of an apple and the next secondary element is “FOOD”, then the rest of the feature information offers context and makes the subject more enticing. 5. What fonts and sizes of typography? a. 80pt. Helvetica Bold, 42pt. Helvetica Light and Helvetica Bold, 20pt. Helvetica Light For the feature spread: 1. What type of images are used and why are they effective in illustrating the feature story? a. Large photos depicting different times, cultures, ages, and settings for eating food. It makes the story accessible and real. It brings emotion to the story. 2. How are large caps used – what font and size where do they appear? a.
    [Show full text]
  • Moving Your Theme Beyond the Cover Written by Becka Cremer
    Moving your theme beyond the cover Written by Becka Cremer There is no such thing as a perfect theme, but any theme can become a great theme. The trick is to develop the theme thoroughly and commit to it. But before you can commit to a theme, you must understand your school and your students. Allow the details of your school and of the year to drive your theme. Once you do that, then examine ways to express those details that make up your school. For example, choose a phrase your students identify with or use daily. You can then use the theme phrase to inspire content and design elements. Your theme’s verbal and visual elements can influence every choice your staff makes. Headline, caption and body copy fonts; folio graphics; sidebar content and format; even the questions your reporters ask sources can all relate back to your theme concept. The more your staff refers back to its theme phrase and concept and thematic design elements, the stronger your theme will be. When it is time for you to start working on the theme for your next yearbook, check out these spreads from four yearbooks across the country. Each staff chose a different theme and approached theme development in vastly different ways. What each of them has in common, however, is total commitment to the theme concept. Le Fleuve 2010 Our Lady of Lourdes Academy Miami, Fla. Theme: “Spoken” Adviser: Rebecca Retana Editor: Alexandra Garrigo Cover “Words bring life to our memories,” the editor of the 2010 Le Fleuve writes in the colophon.
    [Show full text]
  • Electronic 2000 Magazine
    AaBbCcDdEeFfGgHhliJjKkL1MmNnOo Pp I RrSsTtUuVvWwXxYyZz12345678908dECE$$0£.%!?00 UPPER AND LOWER CASE. THE INTERNATIONAL JOURNAL OF TYPE AND. GRAPHIC DESIGN WINTER 1992. $5.00 U.S. $9.90 AUD Age The Electronic 2000 Magazine THE ALPHABET ACCORDING TO PRECISION TYPE ET A is• ff or AARDVARK4,frn,m,,o,,„Bureau / I' 0 ThEFEIS HOKE DEED % B is for Boy t m r y ra The Complete Font Software Resourte 10',1 -71%i-- Reference Guide C is for Columbus Version 0 56.95 4;07c'rc i D is for Bill's,,Trations ""'"Pe from U Design Type found ,/ ■tita An thin E is for [111 at A F is for Flyer '\ Gis for Game Pi JA A H is for llotElllodErn( from Treacyfaces GuitELIKE It I is for 117LstroEt om inotyp THE PRECISION TYPE REFERENCE GUIDE VERSION 4.0 J is for JUNIPER N trom Adobe 0 K is for Ir5 r f P T-Lfrom ,,,,E,,,,,,e,‘ AMAZING! INUEDIBLE! L is for 1.4 no;i It's one of the largest and most . /10 togEs of fonts, 1p H, H A informative font resources ever M is for SBI Ivoun IFIF published! Thousands of fonts Nis for Normande from the Major Type Libraries hem 13,tstrearn (11-11011s, SoftworE Ois for Oz Brush plus Designer foundries and from A', Alphabets Inc Specialty (ollections. P is for Pelican The Precision Type Reference Tools 0 much more., ()is for 1). F TIIMA Guide also features (D-ROM Isom Fetraset Type Libraries, font Software R is for Meg [Hp yts Np Applications & Tools, font (4,'S All for onlg SOU (11111', Products for HP Printers, S is for 9 THE $6.95 COST OF THE REFERENCE GUIDE IS 5(01,0,r_ rye Typographic Reference Books FULLY REFUNDED WITH YOUR FIRST ORDER FROM PRECISION TYPE.
    [Show full text]
  • Use Today's Front Page of the Desert Sun To
    NewsU Typography & Chpt 10 quiz – 20 points Name: __________________Pd: ____ Use today’s front page of The Desert Sun to answer 1-11 1. This sample page does not have a a. flag b. pull quote c. sidebar d. jumpline 2. Which font style in “The Desert Sun” in? a. Oldstyle Roman b. Text c. Novelty d. Square Serif 3. Does this page follow modular format? a. Completely b. Mostly c. Not at all 4. The story copy blocks are what alignment? a. flush left b. flush right c. centered d. justified 5. Which element shows dominance on this page? a. rock picture b. READY TO ROCK headline c. Desert Sun title d. red color ad at bottom 6. Comparing the “Ready to Rock” vs. “Red Flag” headlines, which contrast is NOT used? a. size b. form c. weight d. direction 7. If “Ready to Rock” was a single line that ran into the “Fla. market” headline, it would be which common mistake? a. tombstoning b. orpan c. widow d. bad break 8. The ‘T’ ‘h’ ‘D’ and ‘S’ in “The Desert Sun” are called a. ascenders b. baseline c. small caps d. descenders 9. What does The BluePrint use that this paper does not? a. spot color b. gutters c. drop caps d. flag 10. The ad at the bottom of the page shows contrast of a. form b. grouping c. color d. direction 11. The same font used for three headlines shows a. contrast b. balance c. consistency d. unity -------------------------------------------------------------------------------- 12. There are ________ points in an pica.
    [Show full text]
  • Kk LI Mm Nn Oopp Qq Rr Sstt Uuvvwwxxyyzz :2345678908Tie4i$8(£%!?(
    Aa Bb Cc Dd EeFf Gg Fib li 0; Kk LI Mm Nn OoPp Qq Rr SsTt UuVvWwXxYyZz :2345678908tiE4I$8(£%!?( UPPER AND LOWER CASE. THE INTERNATIONAL JOURNAL. OF TYPE AND GRAPHIC DESIGN PUBLISHED BY INTERNATIONAL TYPEFACE CORPORATION. VOLUME 18. NUMBER 3. FALL 1991. $5.00 U.S $9.90 AUD 7 1922 The typographic community lost institutions bestowed upon Aaron speak one of its best friends on July 16, 1991, for their regard for his spirit, dedication when Aaron Burns died of an illness related and commitment to our craft. to AIDS contracted from an HIV-infected Aaron was also an educator of the blood transfusion received during open highest order. He taught at heart surgery nine years ago. Pratt Institute in New York, URNS Aaron was a graphic designer of impec- participated in countless lecture series, cable taste, a world renowned typographer, and conceived and organized several world and the inspirer and builder of International typographic seminars. Perhaps more than Typeface Corporation. any other person in the history of our craft, Aaron could be remembered for these Aaron constantly encouraged and nurtured and his many other accomplishments. He AARON newt ypeface designs. Many should be remembered for the vital role he type designers and hundreds of typefaces played in creating a rewarding and meaning- would not have the success they now enjoy ful environment for the practitioners of our were it not for Aaron Burns. craft. He loved type, respected its beauty, In many ways Aaron Burns was a understood its power, and was keenly aware dreamer. He dreamed of a rich and reward- of the investment of effort and talent that ing typographic world.
    [Show full text]