Logo tròn: cách thiết kế bố cục, chữ chạy vòng và 10 mẫu thật để học

Logo tròn: lưới vòng tròn đồng tâm với tỉ lệ thật, chữ chạy vòng dựng bằng SVG textPath kèm 3 lỗi và cách sửa, dấu tiếng Việt trên đường cong, các bước Illustrator và 10 mẫu logo tròn có ghi nguồn.

Trả lời nhanh: logo tròn (logo hình tròn) là logo đặt gọn trong một vòng tròn: thường có vòng viền, một dải chữ chạy vòng ở trên và dưới, và một biểu tượng ở giữa. Muốn logo tròn trông chắc tay, bạn cần ba thứ: một lưới vòng tròn đồng tâm có tỉ lệ rõ ràng, dòng chữ dưới đọc từ trái sang phải (không lộn ngược), và một bản rút gọn bỏ chữ để dùng ở cỡ nhỏ. Bảng dưới là bộ số mình dùng cho các logo demo trong bài, tính theo bán kính ngoài R.

Nếu bạn chỉ cần thử nhanh vài phương án theo tên trước khi dựng kỹ, ColorME có công cụ Tạo logo theo tên: theo mô tả trên trang, bạn gõ tên thương hiệu, chọn biểu tượng, kiểu chữ có tiếng Việt và màu, rồi tải PNG nền trong suốt hoặc SVG. Mình chưa thử công cụ này khi viết bài, nên bài không nói gì thêm về kết quả của nó.

Bài này viết cho chủ tiệm và người làm thiết kế muốn tự dựng một logo tròn cẩn thận. Phần dựng hình và các lỗi chữ chạy vòng là SVG do ColorME tự vẽ và trình duyệt dựng thật; phần mẫu tham khảo là logo thật của các nhà thiết kế, tìm qua Pinterest và ghi nguồn dưới từng ảnh. Nếu bạn đang phân vân logo tròn có hợp hay không so với logo chữ, logo biểu tượng hay logo huy hiệu, bài 7 loại logo design đã so sánh từng loại, mình không nhắc lại ở đây.

Khi nào nên chọn logo tròn

Logo tròn hợp nhất khi thương hiệu sẽ xuất hiện nhiều trên những bề mặt vốn tròn hoặc vuông nhỏ: ảnh đại diện mạng xã hội (khung tròn cắt sát), tem dán, nắp hộp, ly giấy, con dấu đóng lên túi giấy kraft, miếng vá thêu. Kiểu này cũng hợp với tiệm có tên ngắn và muốn thêm một dòng phụ như ngành nghề, năm thành lập hay khu vực.

Ngược lại, nếu tên dài trên 14 đến 16 ký tự, logo phải đứng ngang trên biển hiệu dài, hoặc thương hiệu cần cảm giác rất hiện đại và tối giản, một logo chữ nằm ngang thường dễ đọc hơn. Nhiều thương hiệu dùng cả hai: logo ngang cho biển hiệu và website, bản tròn cho tem, ly và ảnh đại diện. Dù chọn kiểu nào, các nguyên tắc trong bài 7 nguyên tắc thiết kế logo tối giản vẫn áp dụng: ít màu, ít chi tiết, thu nhỏ vẫn nhận ra.

Bố cục logo tròn: lưới vòng tròn đồng tâm

Mọi logo tròn đều đứng trên một bộ vòng tròn đồng tâm. Mình dựng lưới theo bán kính ngoài R rồi đặt từng phần vào đúng vòng của nó, thay vì kéo tay cho “vừa mắt”. Lợi ích là khi đổi chữ, đổi font, bạn chỉ cần tính lại hai bán kính chân chữ, phần còn lại giữ nguyên.

Lưới dựng logo tròn theo bán kính ngoài R: vòng ngoài, chân chữ trên và dưới, tâm dải chữ 79 %, vòng trong 66,7 %, vùng biểu tượng 50 %. Hình do ColorME dựng bằng SVG.

Ba điểm hay bị bỏ qua:

• Hai dòng chữ không đặt cùng một bán kính chân chữ. Dòng trên có chữ quay ra ngoài nên chân chữ nằm phía trong; dòng dưới có chữ quay vào tâm nên chân chữ nằm phía ngoài. Ở logo Lá Ửng, chữ hoa dòng trên cao 11,4 % R nên chân chữ ở 79 − 5,7 = 73,3 % R; dòng dưới cao 6,9 % R nên chân chữ ở khoảng 79 + 3,5 = 82,5 % R. Nhờ vậy hai dòng nằm chung một dải.
• Chừa chỗ cho dấu tiếng Việt. Khoảng từ đỉnh chữ hoa dòng trên tới vòng ngoài phải đủ cho dấu chồng như Ấ, Ổ (xem phần dấu bên dưới).
• Biểu tượng nhỏ hơn bạn nghĩ. Mình giữ biểu tượng trong vòng 50 % R, tức là còn 16,7 % R thở giữa biểu tượng và vòng trong. Biểu tượng to sát vòng làm logo ngột và khó đọc chữ.

Mấy vòng là đủ

Số vòng là quyết định phong cách hơn là kỹ thuật. Một vòng cho cảm giác gọn, hiện đại; hai vòng (ngoài và trong) là kiểu huy hiệu chuẩn; ba vòng cộng hàng chấm cho cảm giác tem, con dấu. Cái giá của nhiều vòng là nét mảnh: vòng 3/1000 và hàng chấm 4/1000 sẽ biến mất khi logo còn 32 px.

Cùng một logo demo với 1, 2 và 3 vòng. Hình do ColorME dựng bằng SVG, tên thương hiệu là tên giả định.

Chữ chạy theo vòng tròn: dựng thật bằng SVG <textPath>

Trên web, chữ chạy vòng là phần tử <textPath> của SVG. Theo MDN, “The <textPath> SVG element is used to render text along the shape of a <path> element.” (MDN: <textPath>, trang cập nhật 06/06/2025, đọc ngày 23/10/2026). Mấu chốt nằm ở chiều vẽ của đường dẫn:

• Dòng trên: cung đi từ 9 giờ, theo chiều kim đồng hồ, qua đỉnh, tới 3 giờ. Chữ đứng thẳng, quay ra ngoài.
• Dòng dưới: một cung riêng, cũng đi từ 9 giờ tới 3 giờ nhưng ngược chiều kim đồng hồ, qua đáy. Chữ vẫn đọc từ trái sang phải, đầu chữ quay vào tâm.
• Cả hai dùng startOffset="50%" và text-anchor="middle" để chữ tự căn giữa ở đỉnh và đáy, đổi chữ dài ngắn không phải căn lại.

<!-- R = 480, tâm (0,0); rt, rb tính như bảng ở đầu bài -->
<path id="tren" d="M-353 0 A353 353 0 0 1 353 0" fill="none"/>
<path id="duoi" d="M-395 0 A395 395 0 0 0 395 0" fill="none"/>
<text font-size="76" letter-spacing=".12em" text-anchor="middle">
  <textPath href="#tren" startOffset="50%">LÁ ỬNG</textPath></text>
<text font-size="46" letter-spacing=".18em" text-anchor="middle">
  <textPath href="#duoi" startOffset="50%">CÂY TRONG NHÀ</textPath></text>

Chỗ khác nhau duy nhất giữa hai cung là cờ chiều quét trong lệnh A: 1 cho dòng trên, 0 cho dòng dưới.

3 lỗi mình làm thật và cách sửa

Để bài không chỉ nói lý thuyết, mình cố tình dựng sai ba lỗi hay gặp nhất rồi sửa. Cả sáu hình dưới là trình duyệt dựng thật từ SVG, không chỉnh tay.

Ba lỗi chữ chạy vòng mình dựng thật bằng SVG textPath (trái) và bản sửa (phải): chữ dưới lộn ngược, chữ đâm nhau ở chỗ nối, giãn chữ không đều.

1. Chữ dưới lộn ngược. Khi đặt cả hai dòng lên cùng một vòng tròn chạy theo chiều kim đồng hồ, dòng dưới đọc từ phải sang trái và chân chữ quay ra ngoài. Cách sửa là vẽ một cung riêng ngược chiều cho dòng dưới như đoạn mã ở trên.
2. Chữ đâm nhau ở chỗ nối. Với tên “CHÉN SƯƠNG · QUÁN TRÀ” và dòng phụ bốn vế, đo thật thì dòng trên chiếm 158,7°, dòng dưới 184,9°, cộng lại 343,6° trên một vòng 360°. Hai đầu chữ chỉ còn cách nhau khoảng 8° và đè lên dấu chia ở 3 giờ, 9 giờ. Cách sửa là rút nội dung: dòng trên còn tên, dòng dưới còn hai vế, mỗi dòng nằm trong giới hạn góc của nó.
3. Giãn chữ không đều. Trên cung lồi, đỉnh chữ toả ra; trên cung lõm, đỉnh chữ chụm lại. Ở logo Chèo Lặng, khi dòng dưới cùng cỡ và đặt chân trên vòng 74,2 % R như dòng trên, khoảng cách ở đỉnh chữ dòng trên giãn ra 13 % còn dòng dưới bị nén 13 %, chênh nhau khoảng 30 %, và đầu chữ dưới đâm vào vòng trong. Bản sửa cho dòng dưới nhỏ hơn, giãn thêm (0,18 em so với 0,12 em) và đặt chân chữ ở 81,9 % R.

Dựng chữ chạy vòng cho ba bản đã sửa: cung trên chạy theo chiều kim đồng hồ, cung dưới ngược chiều, góc chữ đo từ độ dài chữ trình duyệt dựng.

Góc chữ chiếm trong hình trên đo từ độ dài chữ thật trình duyệt trả về (getComputedTextLength) chia cho bán kính. Ví dụ ở Mực Ấm, “MỰC ẤM” chiếm 61,3°, “XƯỞNG IN LỤA · IN RISO” chiếm 95,2°; ở Chèo Lặng, dòng dưới “THUÊ KAYAK · BUỔI SỚM” chiếm 99°, vẫn dưới giới hạn 110°. Khi một dòng vượt giới hạn, mình rút chữ trước, giảm cỡ sau, giảm giãn chữ là cách cuối cùng.

Dấu tiếng Việt trên đường cong: thử “Ấm, Ổ, Ửng”

Chữ Việt có dấu chồng (Ấ, Ổ, Ể) cao hơn chữ hoa thường rất nhiều. Mình đo trong Chrome bằng measureText ở cỡ 100 px: với Be Vietnam Pro, chữ H cao 74 px còn Ổ cao 116,8 px, tức dấu nhô thêm 58 % chiều cao chữ hoa; Bricolage Grotesque nhô 75 %, Playfair Display 65 %, Montserrat 44 %, Fraunces 40 %. Dấu nặng dưới chữ Ạ thì thò xuống 19 đến 26 % cỡ chữ.

Trên đường cong, chuyện này có hai hệ quả. Ở dòng trên, dấu quay về phía vòng ngoài, nên khoảng từ đỉnh chữ hoa tới vòng ngoài phải lớn hơn mức nhô của font. Ở dòng dưới, dấu quay vào tâm, nên vòng trong phải lùi vào đủ xa. Mình thử “ẤM · Ổ · ỬNG” ở cả hai dòng với 8 font:

Thử Ấm, Ổ, Ửng trên cung trên và cung dưới với 8 font Google Fonts: 6 font có bộ tiếng Việt, Sora và Outfit không có.

Sáu font Be Vietnam Pro, Montserrat, Lora, Josefin Sans, Barlow Condensed và Fraunces có bộ ký tự tiếng Việt trong metadata của Google Fonts (kiểm tra ngày 23/10/2026), dấu đứng đúng chỗ trên cả cung trên lẫn cung dưới. Sora và Outfit không có bộ tiếng Việt: trình duyệt lấy dấu từ font khác nên nét dấu lệch kiểu và độ đậm. Các font mình dùng cho logo demo (Space Grotesk, Playfair Display, Manrope, Bricolage Grotesque, JetBrains Mono, Nunito, Baloo 2 cùng sáu font trên) đều có bộ tiếng Việt theo cùng metadata đó.

Chữ chạy theo vòng tròn trong Illustrator

Phần này mình mô tả theo trang trợ giúp chính thức của Adobe, đọc ngày 23/10/2026; mình không mở Illustrator và không chụp màn hình ứng dụng, nên bạn sẽ không thấy ảnh giao diện ở đây. Các hình SVG trong bài là những gì ColorME tự dựng.

1. Vẽ vòng tròn. Trang Ellipse tool viết: “Click the Ellipse tool or press L.” Kéo một hình rồi nhập cùng một số cho chiều rộng và chiều cao trong bảng Properties để được hình tròn đúng (Adobe: Ellipse tool, cập nhật 24/05/2023). Vẽ thêm các vòng theo bảng tỉ lệ: nếu vòng ngoài 100 mm thì vòng trong 66,7 mm, vòng tâm dải chữ 79 mm.
2. Căn các vòng đồng tâm. “Select Window > Align to open the Align panel.” Chọn tất cả vòng, chọn Align to Selection, rồi căn giữa ngang và dọc (Adobe: Align and distribute objects, cập nhật 25/06/2026).
3. Gõ chữ lên vòng. Chọn công cụ Type on a Path, bấm vào vòng tròn ở chỗ muốn bắt đầu chữ. Adobe lưu ý: “If your path has Stroke or Fill attributes, Illustrator automatically removes them when you click the path with a type tool.” Vì vậy hãy dùng một bản sao của vòng, giữ vòng gốc để làm viền.
4. Dời và lật chữ. Theo Adobe, để dời chữ dọc đường: “Hold Ctrl (Windows) or Command (macOS) and drag the center bracket”; để lật sang phía bên kia đường, kéo dấu ngoặc giữa sang phía còn lại (Adobe: Create type on a path, cập nhật 04/03/2025).
5. Dòng dưới đọc từ trái sang phải. Gõ dòng dưới trên một bản sao khác của vòng, lật chữ vào trong để chữ đứng xuôi ở đáy, rồi dùng Baseline Shift để đẩy chữ ra đúng dải. Adobe viết: “To move text across a path without changing the direction of the type, use the Baseline Shift option in the Character panel.” Và về dấu của con số: “Positive values move the character’s baseline above the baseline of the rest of the line; negative values move it below the baseline.” (Adobe: Line and character spacing, cập nhật 17/07/2024). Với bảng tỉ lệ ở trên, khoảng cách giữa hai chân chữ là chỗ để bạn tính con số Baseline Shift.
6. Căn và giãn. Trong Type > Type on a Path > Type on a Path Options, mục Align to Path cho chọn Ascender, Descender, Center hoặc Baseline (mặc định là Baseline), mục Spacing chỉnh khoảng cách ký tự trên đường cong. Adobe cũng nói hiệu ứng Gravity trên một vòng tròn hoàn hảo trông như Rainbow mặc định: “Gravity effect on a perfectly circular path looks like the default Rainbow effect.”

Nếu bạn muốn học bài bản các thao tác này cùng Pen tool, Shape Builder và quy trình làm logo, khoá Illustrator của ColorME đi qua từng công cụ trên bài tập thật.

10 mẫu logo tròn thật để học

Các logo dưới đây là tác phẩm thật của các nhà thiết kế và studio, mình tìm qua Pinterest, ghi tên tác giả và nguồn dưới từng ảnh; bản quyền thuộc về tác giả. Ảnh chỉ được thu nhỏ và nén, không chỉnh sửa. Khi trang gốc trên Dribbble không đọc được, mình ghi tên tác giả theo phần mô tả của ghim và để kèm đường dẫn ghim; hai mẫu không xác định được tác giả thì ghi người ghim. Mình chỉ phân tích vì sao từng mẫu hiệu quả, không chấm điểm logo của người khác.

Logo: Ahmedcreatives · nguồn: Dribbble · ghim Pinterest

Bộ huy hiệu một màu xanh than trên nền kem. Mẫu cá Corientas Fishing làm đúng công thức hai dòng: tên chạy vòng phía trên, “CAUGHT & PACKED” đọc xuôi phía dưới, hai chấm ngăn ở 3 giờ và 9 giờ. Mẫu cú Owlplanet cho thấy kiểu một vòng mảnh với chữ dòng dưới nhỏ và giãn rộng.

Logo: 828 (eight2eight) · nguồn: Dribbble 828 · ghim Pinterest

Hill Country Nights dùng hai vòng và để tên dài chiếm gần hết dải chữ phía trên, dòng dưới chỉ còn hai từ ngắn. Biểu tượng giữa lặp lại hình tròn bằng các cung đồng tâm nên toàn bộ logo rất nhất quán.

Logo: Darren Brown · nguồn: Dribbble · ghim Pinterest

Sunset Badge không có chữ: cả logo là một khung tròn cắt cảnh hoàng hôn. Viền cam mảnh tách khỏi mép tranh một khoảng nhỏ, cách làm hợp với tem dán hoặc miếng vá.

Logo: Copperheart Creative · nguồn: copperheartcreative.com · ghim Pinterest

Benny & Ezra phá vòng tròn: nét chữ viết tay “be” cắt ngang và làm hở vòng, tên thương hiệu chỉ chạy ở cung dưới với khoảng giãn rất rộng. Một màu trắng trên nền hồng đất, gọn và nữ tính.

Logo: IIsixo_O · nguồn: Dribbble · ghim Pinterest

Logo tròn không cần viền: hình tròn ở đây được tạo bằng các lỗ tròn sắp theo bề mặt quả cầu. Một màu vàng ánh kim trên nền tím than đủ sang mà vẫn đơn giản.

Logo: Tanner Wayment · nguồn: Dribbble · ghim Pinterest

Circular Mountain Badge có viền dày, nên vẫn đọc được khi thu nhỏ. Các vòng trời nhạt dần là lưới đồng tâm được tô màu, còn đỉnh núi đè lên vòng trong tạo chiều sâu.

Logo: Hristijan Eftimov (Eftimov Design) · nguồn: Dribbble · ghim Pinterest

Circles & Arrows dùng chính các cung đồng tâm làm ý tưởng: vòng xám nhạt mở ra như sóng, ba nét mũi tên đậm đi lên. Hình tròn không khép kín nhưng mắt vẫn đọc là một logo tròn.

Logo: chưa xác định được tác giả (ghim của Wayne Lim) · nguồn: Pinterest

Một vòng nhẫn nhìn nghiêng với vài vạch đứt ở mép trên là đủ thành logo. Mẫu này cho thấy một vòng duy nhất, đúng độ dày và đúng góc nhìn, có thể gánh cả nhận diện.

Logo: chưa xác định được tác giả (ghim của phalenreed) · nguồn: Pinterest

Bộ nhận diện BYI có cả hai bản mà bài này khuyên làm: biểu tượng chữ BYI trong vòng chấm để dùng ở cỡ nhỏ, và bản huy hiệu có tên chạy vòng cùng năm thành lập cho tem, áo, cửa kính.

Logo: Rio Creativo · nguồn: riocreativo.pl · ghim Pinterest

Milarex đặt vòng tròn cạnh chữ thay vì nhét chữ vào vòng: vòng ghép từ các nét sóng vàng, con cá hiện ra ở khoảng trống. Kiểu khoá ngang này hợp với biển hiệu dài mà vẫn giữ được một biểu tượng tròn.

Nếu bạn định lấy cảm hứng từ các mẫu trên, hãy đọc thêm bài logo lấy trên mạng được dùng tới đâu: học bố cục và cách giải quyết thì được, chép hình hoặc biến tấu sát một logo có chủ là chuyện khác.

Thu nhỏ logo tròn: 128 px và 32 px

Mình thu nhỏ thật 5 logo demo dùng trong bài: xuất 512 px rồi dùng sips thu về 128 và 32 px. Ở 128 px, tên ở dòng trên của cả năm logo còn đọc được, còn dòng dưới nhỏ thì đã khó đọc. Ở 32 px, chữ chạy vòng của cả năm logo thành vệt mờ: đây là giới hạn chung của logo tròn có chữ, không phải lỗi riêng của một logo. Mình chấm hai logo viền mảnh (Men Gió, Lá Ửng) là trượt vì viền và biểu tượng nhạt hẳn đi, ba logo nền đặc là tạm vì vẫn nhận ra hình tròn và biểu tượng. Cách xử lý là làm sẵn bản rút gọn: bỏ hai dòng chữ, giữ vòng ngoài (trừ kiểu dải màu), phóng biểu tượng lên 1,32 lần.

5 logo demo thu nhỏ thật bằng sips từ 512 px về 128 và 32 px, cùng 3 bản rút gọn bỏ chữ.

Quy tắc mình rút ra: từ khoảng 64 px trở xuống (favicon, biểu tượng trong ứng dụng, ảnh đại diện trong danh sách bình luận) dùng bản rút gọn; từ 128 px trở lên dùng bản đầy đủ. Logo kiểu nền đặc hoặc dải màu đặc (Chén Sương, Mực Ấm, Chèo Lặng) giữ được hình tròn tốt hơn kiểu viền mảnh khi thu nhỏ. Trong ba bản rút gọn, Chén Sương và Chèo Lặng đạt ở 32 px; Mực Ấm mới tạm vì các chấm hồng gộp thành một mảng.

Màu và tương phản

Hướng dẫn WCAG 2.2 không đặt yêu cầu tương phản cho chữ thuộc logo: “Text that is part of a logo or brand name has no contrast requirement.” (W3C: Contrast (Minimum)). Tuy vậy, chữ trong logo tròn thường nhỏ và cong, nên mình vẫn giữ mức 4,5 : 1 cho chữ và 3 : 1 cho chi tiết hình, theo tinh thần “The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s)” của tiêu chí tương phản phi văn bản (W3C: Non-text Contrast).

Tỉ lệ tương phản WCAG của các cặp màu trong 5 logo demo, tính ngày 23/10/2026, kèm cặp màu bị trượt và màu thay thế.

Tất cả cặp màu chính (chữ trên nền) của 5 logo demo đều đạt, thấp nhất là 7,13 : 1. Cặp trượt duy nhất nằm ở chi tiết: hơi trà vàng nhạt #E9C46A trên nền kem chỉ 1,48 : 1, gần như biến mất khi in nhỏ. Mình đổi sang vàng đất #A16207, lên 4,37 : 1 mà vẫn giữ tông ấm.

Xuất file và bàn giao

Một bộ logo tròn đầy đủ nên có: bản đầy đủ màu, bản một màu (cho dấu mộc, khắc, in lụa), bản trắng trên nền tối, và bản rút gọn cho cỡ nhỏ. Với chữ chạy vòng, hãy chuyển chữ thành nét (outline) trong file bàn giao để máy khác không thiếu font và lệch dấu. Chi tiết định dạng và cách đặt tên file có trong bài xuất file logo bàn giao khách. Nếu thương hiệu của bạn dựa vào một chữ cái hơn là một hình tròn, loạt bài logo chữ cái, ví dụ logo chữ S, đi theo hướng khác hẳn.

Câu hỏi thường gặp

Logo tròn có lỗi thời không?

Không. Hình tròn vẫn rất phổ biến vì hợp với ảnh đại diện tròn, tem và bao bì. Thứ dễ lỗi thời là cách trang trí: quá nhiều vòng, ngôi sao, ruy băng và hiệu ứng cũ. Một logo tròn ít vòng, một màu và một biểu tượng rõ vẫn rất hiện đại.

Chữ dòng dưới của logo tròn nên đọc theo chiều nào?

Từ trái sang phải, chữ đứng xuôi ở đáy, đầu chữ quay vào tâm. Muốn vậy, dòng dưới phải nằm trên một cung riêng vẽ ngược chiều kim đồng hồ (trong SVG) hoặc được lật vào trong rồi chỉnh Baseline Shift (trong Illustrator).

Làm chữ chạy theo vòng tròn trong Illustrator thế nào?

Vẽ vòng bằng Ellipse tool, chọn Type on a Path rồi bấm vào vòng để gõ. Giữ Ctrl hoặc Command và kéo dấu ngoặc giữa để dời chữ, kéo dấu ngoặc sang phía bên kia để lật, dùng Baseline Shift để đẩy chữ vào trong hoặc ra ngoài mà không đổi chiều.

Logo tròn có cần bản không chữ không?

Nên có. Ở 32 px, chữ chạy vòng không còn đọc được; bản chỉ có vòng và biểu tượng sẽ dùng cho favicon, biểu tượng ứng dụng và ảnh đại diện nhỏ.

Nên dùng font nào cho logo tròn tiếng Việt?

Chọn font có bộ tiếng Việt thật (kiểm tra metadata của Google Fonts), nét đủ dày và chữ hoa không quá hẹp. Be Vietnam Pro, Montserrat, Lora, Josefin Sans, Barlow Condensed và Fraunces đều đặt dấu đúng chỗ trên đường cong trong thử nghiệm của mình.