Scroll any news account or brand feed and most posts share a shape: a photo, a bold headline, a thin accent bar, a date and a handle in the corner. These are photo cards. They look designed because they are built from a fixed layout where only the words and the image change, which is also why a team can publish dozens a week without each one looking different.
This guide covers what makes a card readable at feed size, how text sizes shrink on a phone, which colors pass contrast guidelines, why cards should be exported as PNG, how to adapt a square card for other platforms, and where the privacy edges are. The Photo Card Generator is used for the step-by-step parts, and every setting described below is one the tool offers.
TL;DR: A photo card is a social graphic made from a template: your image, a headline and supporting text placed into a fixed layout. The Photo Card Generator has eight templates (Classic Newspaper, Modern Bold, Breaking News, Quote Card, Minimalist, Feature Card, Gradient News and Vertical Quote), 50 Google Fonts, accent, background and text color pickers, image scale and position controls, and an optional logo. Every card exports as a 1080 x 1080 PNG, rendered in your browser. Your image is read locally and not uploaded, though fonts load from Google Fonts. It is free, no signup.
What is a photo card?
A photo card is a square or rectangular social media image that combines a photograph with overlaid or adjacent text, laid out from a reusable template. News outlets use them to share headlines, brands use them for announcements, and creators use them for quotes. The template fixes the typography, spacing and positions; the author supplies the content.
That split is the whole point. A template settles the design decisions once: how big the headline is relative to the image, where the date goes, how much space surrounds the text. Changing the words cannot break those relationships, so a feed of cards made from the same template reads as one consistent publication.
Which template should you pick?
Choose by what the card has to carry. Each template exposes only the text fields its layout uses, so the content panel changes when you switch.
| Template | Layout | Text fields | Best for |
|---|---|---|---|
| Classic Newspaper | Large image, text area below | Heading, subheading, date, domain | General news and blog posts |
| Modern Bold | Image top half, headline and summary below, fixed "Read More" button | Heading, subheading, date | Announcements |
| Breaking News | Red header strip, image, headline, scrolling-style ticker bar | Heading, subheading, date | Time-sensitive updates |
| Quote Card | Quote over a darkened background photo | Heading (the quote), subheading (the attribution), date | Pull quotes you have permission to share |
| Minimalist | Framed image with plenty of white space | Heading, subheading, date | Simple statements, event dates |
| Feature Card | Image, overlapping round logo, footer strip | Heading, subheading, date, domain | Long-form articles |
| Gradient News | Full-bleed image, accent gradient, footer bar | Heading, category, date, domain | Image-led stories |
| Vertical Quote | Quote panel left, portrait image right | Content (the quote), author, designation, date, domain | Quotes with a photo of the speaker |
Most templates have a date line, and several add a domain or handle field; any field can be cleared. Some labels are fixed in the layout, such as "BREAKING NEWS" on the Breaking News strip and "Read More" on Modern Bold. The logo slot appears only when you add a logo; without one, the template hides the logo area rather than showing an empty frame.
How big should text be on a social card?
Bigger than it looks on your monitor. A card is designed at 1080 pixels wide but viewed in a phone feed at roughly the width of the screen, and a typical phone is around 390 CSS pixels wide. That means everything on the card is shown at about 390 / 1080 = 36% of its designed size.
Here is what that does to text at sizes the templates use:
| Size on the 1080 px card | Approximate size in a 390 px wide feed | Readability |
|---|---|---|
| 64 px headline | 23 px | Very clear |
| 48 px headline | 17 px | Clear |
| 32 px subheading or footer | 12 px | Readable |
| 24 px detail text | 9 px | Small, needs attention |
| 20 px metadata | 7 px | Hard to read |
The arithmetic is simply size × 390 / 1080. For a 48-pixel headline, 48 × 0.361 = 17.3 pixels, comparable to comfortable body text on a phone. At 20 pixels the result is about 7, which is why dates and handles on cards are decorative rather than essential. Put anything a reader must see in the headline, not the footer.
This also sets a practical limit on length. A headline that wraps to five lines at 48 pixels forces the template to squeeze the image or overflow. Aim for a headline of about 6 to 12 words.
What colors should a photo card use?
Pick colors that keep the text readable against what sits behind it. The Web Content Accessibility Guidelines set a useful benchmark: WCAG 2.2 Success Criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, which WCAG defines as at least 18 points, or 14 points bold. A social image is not a web page, but the same thresholds describe what people with low vision or a dim screen can read.
The generator gives you three colors:
- Accent colors bars, pills, gradients and highlight shapes. It carries the brand.
- Background colors the areas not covered by the image.
- Text colors the main copy on templates that use it; some templates set white text over their accent panels.
| Combination | Contrast ratio | Normal text (4.5:1) | Large text (3:1) |
|---|---|---|---|
Near-black #111827 on white #ffffff |
About 17.7:1 | Pass | Pass |
White on the default red accent #D9232D |
About 5.0:1 | Pass | Pass |
White on a mid gray #999999 |
About 2.8:1 | Fail | Fail |
White on a light yellow #facc15 |
About 1.5:1 | Fail | Fail |
The first two rows are the generator's defaults. You can check any pair of your own brand colors with the color contrast checker, and the color contrast guide explains how the ratio is calculated.
Text placed directly over a photograph has no single contrast ratio, because the photo varies. Templates such as Gradient News handle that with a gradient under the text and a text shadow. When you pick a photo for those templates, choose one with a darker or calmer area where the headline sits.
How to make a photo card, step by step
- Open the photo card maker and choose a template from the Template dropdown. Its sample text loads into the content fields.
- Replace the text in each field. Press Enter inside a heading or content box to force a line break where you want one.
- Add your main image: click the upload area to choose a file, or paste an image URL into the field below it.
- Adjust the image with the Scale slider (0.5x to 2.0x) and the X and Y position sliders (each -200 to 200 pixels) until the subject sits where the template frames it.
- Optionally add a logo the same way. A square logo image fits the circular and square logo slots best.
- Open the Font dropdown, search or filter by category (sans serif, serif, display, handwriting or monospace), and pick a font.
- Set the accent, background and text colors with the color pickers.
- Click Download PNG. The file is saved as
photocard-<template>-<timestamp>.png, so repeated exports never overwrite each other.
Your settings, text and image are saved in the browser as you work, so reloading the page brings the card back. Reset clears them and restores the Classic template.
Why do the cards download as PNG?
Because cards are mostly large text and flat color, and that content compresses better and looks cleaner as PNG than as JPEG. JPEG's lossy compression works in 8 x 8 pixel blocks and discards fine detail, which around sharp letter edges shows up as faint halos and speckles, often called ringing. PNG stores every pixel exactly using the lossless compression defined in the W3C PNG specification, so a headline stays crisp.
| Format | Compression | Sharp text | Flat color areas | Photographs |
|---|---|---|---|---|
| PNG | Lossless | Crisp | Small and exact | Large files |
| JPEG | Lossy | Halos around edges | Can show banding and speckles | Small files |
Most platforms re-encode uploads anyway. Starting from a clean PNG gives their encoder the best possible input. If a PNG with a large photo is too big for an upload limit, the image compression guide covers how to shrink it.
How do you use a square card on other platforms?
Every template exports at 1080 x 1080, a 1:1 square. That is the standard square feed size on Instagram and Facebook, and it displays without cropping on most feeds. Other placements want different shapes.
| Destination | Wanted size | From a 1080 square |
|---|---|---|
| Instagram or Facebook feed | 1080 x 1080 | Use as is |
| Instagram portrait feed | 1080 x 1350 | Add space above and below with a matte |
| LinkedIn or X link-style image | 1200 x 627 or 1600 x 900 | Crop to a wide strip or place on a wide matte |
| YouTube thumbnail | 1280 x 720 | Crop to 16:9, then enlarge slightly |
| Instagram story | 1080 x 1920 | Place on a tall matte |
Cropping loses part of the card; a matte keeps all of it. For a YouTube thumbnail, cropping a 1080 square to 16:9 keeps a 1080 x 608 strip and removes 236 pixels from the top and the bottom. Enlarging that strip to 1280 x 720 is a scale of 1280 / 1080 = 1.19, a mild enlargement. Keep the headline near the vertical center of the card if you plan this, so the crop does not cut through it. The social media image cropper does the crop with platform presets, and the image resize guide explains what enlargement does to quality.
To keep the whole square card on a taller or wider canvas instead, put it on a background with the Matte Generator.
Are your photos uploaded?
Your photo is not uploaded to Toolz. When you choose a file, the browser reads it into memory as a data URL, the card is laid out in the page, and the download is rendered locally by the html2canvas library, which redraws the page's HTML onto a canvas. There are three network and storage details worth knowing, though:
- Fonts come from Google Fonts. The font list is loaded from
fonts.googleapis.com, so your browser makes requests to Google for the font files, which Google describes in its Google Fonts privacy FAQ. The text and image you add are not part of those requests. Offline, fonts that were not already loaded fall back to a default typeface. - Image URLs are fetched from their host. If you paste an image URL instead of uploading a file, your browser loads the image from that address, as it would for any web page.
- Work is saved in your browser. Your text, colors and image are saved in the browser's local storage so they survive a reload. On a shared computer, press Reset when you are done to clear them.
Common problems and how to fix them
The downloaded card shows a different font from the preview. The font had not finished loading when you clicked Download PNG, so the export fell back to a default typeface. Wait a second or two after choosing a font, then export again.
An image pasted as a URL is missing from the download. Rendering a remote image into a downloadable canvas requires the image host to allow cross-origin use with CORS headers, a limitation the html2canvas documentation notes. Many sites do not send them. Download the image and upload it as a file instead.
The image is cut off or has empty space. Use the Scale slider and the X and Y position sliders. Scaling below 1.0x can reveal the template background around the photo; scaling above it crops tighter.
Text overflows its area. The headline is too long for the template. Shorten it, or switch to a template that gives text more of the card.
The card resets after a reload, or large images do not persist. Browsers limit local storage to a few megabytes per site, and a large photo stored as a data URL can exceed it. The card still exports; it just may not survive a reload. Resize very large photos before adding them.
Angle brackets in text look wrong. Text is inserted into the template as markup so line breaks work, which means characters such as < can be read as the start of a tag. Avoid angle brackets in card text.
Tips for cards people read
- Lead with one idea per card. If it needs two headlines, it needs two cards.
- Crop the photo so its subject does not sit under the headline area of your template.
- Keep your brand constant: the same template, font and accent color across a series.
- Add alt text when you post. The image is a picture of words to a screen reader, so write the headline and key details into the platform's alt text field.
- Only post quotes and photos you have the right to use, and attribute quotes accurately.
Alternatives to a template card generator
- General design tools such as Canva, Figma or Adobe Express offer far more templates, free positioning and team libraries, usually with an account.
- Newsroom and social scheduling platforms sometimes include branded card templates tied to a publishing workflow.
- Code-based generators that render HTML to images on a server suit sites that produce a card for every article automatically.
A browser template tool fits the middle ground: fast, no account, consistent output, and your images stay on your machine. For related steps before posting, the Image Watermarker adds a logo or credit to a photo, and the social media tools hub lists the full set.
