Merge pull request #142 from emmamarichal/assets-specs

Assets specs

gf-guide/marketing.md

@@ -2,19 +2,21 @@
 
 <a href="./index"><button class="button button-i">&larr; GF Guide Index</button></a>
 
-# Promo / Marketing
+# Promoting your font
 {:.no_toc}
 
 <div class="callout">
 
-🦕 When a font is released for the first time on Google Fonts, or if it benefited from a major upgrade, we will tweet to promote it from <a href="https://twitter.com/googlefonts">@googlefonts</a>.
+🦕 Fonts are carefully designed and offer a visual aid in communication, so the best way to display your project's advantages and subtle or powerful features is through images. That's why we now include images on every font's Specimen page on Google Fonts. 
 <br><br>
-In order to tweet about a new release, Google Fonts requires 2-3 expressive images different from the ones used in the <a href="./readmefile">README file</a>, which usually correspond to a sample image with a different size. If the Family is variable, an animation is welcome. See <a href="https://twitter.com/googlefonts/status/1487038395918565377" target="_blank">this tweet</a> as an example.
+This guide provides specifications for the required images for your typographic project published on Google Fonts. They will be added to the <a href="https://fonts.google.com/specimen/Ojuju/about">'About'</a> section of the specimen page, and, when a font is released for the first time on Google Fonts or if it benefited from a major upgrade, we can use them to promote the font on social media platforms (Mastodon, LinkedIn, Twitter, Instagram).
 
 </div>
 
 <div class="context-reading">
     Background reading:<br>
+    <mark class="brown">team&nbsp;</mark> <a href="./description">Description file</a>
+    <br>
     <mark class="green"><b>must&rarr;</b></mark> <a href="./upstream" style="font-weight:bold">Upstream repository structure</a>
 </div>
 
@@ -23,25 +25,107 @@ In order to tweet about a new release, Google Fonts requires 2-3 expressive imag
 * TOC goes here
 {:toc}
 
-## What the designer should provide
+## Overall recommendations
 
--   Both the images and the source files of the images should be included in the promo folder under the documentation dir.
--   The promotional images should be following the [Google Assets Figma template](https://www.figma.com/file/RwEesMz0S2xXBp0uGi62ft/GF-Asset-template-for-external-partners?node-id=0%3A1). If the project is commissioned by Google Fonts, this is mandatory. Otherwise, it is a kind request for our preference.
--   If the font was designed for a particular script or language, some localized text should be added addressing the respective script or language.
--   Authors’ names will be included, preferable by tagging them. Person tags can be provided in the README.md or a .txt file in documentation dir.
--   Please provide a compilation image plus one for each family when a project includes many sibling families. According to the project's complexity, we would decide on the strategy to promote them either as a set or independently.
+- We encourage you to use these images to showcase your font's main characteristics, design particularities, and any special features it might include. Don't hesitate to use compelling shapes and colors that could help users see its potential in different designs.
+- When a project includes many sibling families, please provide a compilation image plus one for each family. Based on the project's complexity, we would decide on the strategy to promote them either as a set or independently.
+- If the font was designed for a particular script or language, some localized text should be added addressing the respective script or language.
+- Do not include images that could be considered sensitive or offensive for social or political reasons (nothing that could be related to violence of any kind).
+- 1 up to 8 images would be great.
+
+### Credits/content:
+
+- Please be sure that you have all the credits for the images.
+- Do not include images you don't own 100% of the rights to.
+- Do not add credits of any kind, not for third parties or yourself (the credits will already be included in the Designers section).
+- These images will be licensed under the [CC BY-SA 4.0](https://creativecommons.org/licenses/by-sa/4.0). 
+
+### Repository structure and the documentation folder
+
+- Feel free to add these images to your repo's README.md section (from the /documentation folder).
+- Both the images and the source files of the images should be included in the promo folder under the documentation dir.
+- An image-license.txt file must be included in the documentation directory. See the <a href="https://github.com/googlefonts/googlefonts-project-template/tree/main/documentation"> repository template</a>.
+
+<br><br>
+
+# IMAGES FOR THE ABOUT SECTION
+
+The 'About' section in the specimen of your typeface on Google Fonts will give a more detailed presentation of the project, its origins, inspirations, and uses. Please look at the [Description File](./description.md) section of this Guide for more details.
+
+Max resolution allowed:
+Height: 1024 pixels
+Width: 2048 pixels
+
+Feel free to choose the ratio you want!
+
+Allowed formats and file size limits for images:
+- `MP4` and `svg` max size: 1,75 MB
+- `GIF` max size: 800 kb (`MP4` videos are preferred; generally fewer bytes)
+- `JPG` max size: 800 kb
+- `PNG` max size: 800 kb
+
+Another possibility is to add a YouTube link. 
+
+<br><br>
+
+## SOCIAL MEDIA SPECIFICATIONS
+
+Here are formatting guidelines for different social media platforms. These are guides; it is not necessary to create image formats for each platform (however, square versions are especially welcome for Instagram).
+Please visit Google Fonts profiles if you want some examples:
+
+<a href="https://www.instagram.com/googlefonts/"> Instagram</a>  |  <a href="https://x.com/googlefonts"> X</a>  |  <a href="https://typo.social/@googlefonts"> Mastodon</a>  |  <a href="https://www.linkedin.com/company/google-fonts/"> LinkedIn</a>  |  <a href="https://www.threads.net/@googlefonts"> Thread</a>
+
+- 4 up to 10 images would be great
+- 1,600 x 900 px (recommended) + some square versions for Instagram
+- Minimum Size: 600 x 335 px
+- Recommended Ratio: between 2:1 and 1:1
+- Supported Formats: GIF, MP4, JPG, and PNG
+- Max Image Size: Up to 1.75 MB for videos and svg; 800 kb for photos and GIFs. 
+
+### Post text					
+We write the social media post according to the font description in the repo's README file. Sometimes, we must reduce it to fit the social media specifications. If you prefer to provide us with one, please follow this guide:				
+- Describe the font, the design space, the language support, etc. 
+- Please provide us with your social media profile if you have some so we can tag you. Person tags can be provided in the README.md or a .txt file in documentation dir.
+
+#### Text length limits
+- Twitter: 500 characters max.
+- Mastodon and Thread: 500 characters max.
+- Instagram: 2200 characters max.
+
+<br>
+
+### Images formats and specifications per social media
+(These are some indications; all the formats are not mandatory)
+
+***Twitter***
+- 1 to 4 colorful images
+- Supported format: JPG, PNG, GIF
+- Recommended ratio: Ideally, the images have a square 1:1 or 16:9 ratio of 600 x 335px that can be clicked and expanded to 1200 x 675px.
+
+***Mastodon (Typo.Social)***
+- 1 to 4 colorful images
+- Supported formats: PNG, JPG, HEIF, WEBP
+- Recommended ratio: Ideally, the images have either a square 1:1 or 16:9 ratio 3840 x 2160 px
+
+***Instagram***
+- 1 to 10 colorful images
+- Landscape: 1080 x 566 pixels / Portrait: 1080 x 1350 pixels / 
+- Square: 1080 x 1080 pixels. Recommended: Square
+images: jpeg, png / video: MOV, GIF, MP4 
+
+***LinkedIn***
+- 1 to 20 colorful images
+- Use a 1.91:1 ratio (1200 x 627 pixels). The image must be more than 200 pixels wide.
+- Images: jpeg, png / video: MOV, GIF, MP4 
+
+***Thread***
+- 1 to 10 colorful images
+- The maximum image height on Threads is 1424 pixels. Images taller than a 3:4 aspect ratio will be reduced in width to fit this image height. Threads's maximum image display size is 1070 pixels wide by 1424 pixels tall. This 3:4 aspect ratio will give you the most visual impact because it has the greatest number of pixels. 
 
-## How the tweet will be written
 
--   Type of release: New font (”New font!”) / Upgraded Font (“Good News!”).
--   Font Name and tag to author.
--   Key aspects of the font (axes and ranges included or special features).
--   Link to family on Google Fonts.
--   Link to a mini website if available.
 
-The person onboarding the project will collect images from the documentation directory, include them in a drive folder, write a little tweet according to a simple template, and then it will be reviewed and published when the font is released on the live server.
 
 <div class="next-reading">
     Further reading:<br>
     <mark class="grey">templ</mark> <a href="./profile">Designer profile</a>
-</div>
+</div>