Written by Whemoon Jang.

Jang's Blog

국내외 인터넷 신문 본문 타이포그래피 스타일

June 22, 2020

학교 수업 과제를 위해 인터넷 신문의 본문 타이포그래피 스타일 활용을 조사하게 되었습니다. 그 결과를 공유합니다.

개요

서울대학교 디자인학부에서 열리는 ‘현대디자인론’ 과목을 수강하면서 인터넷 저널리즘과 접근성을 개인 프로젝트 주제로 잡았습니다. 언론의 공공성 측면을 테마로 현황조사를 했는데, 지방 농촌 고령층을 상대로 인터뷰를 진행해 보니 스마트폰으로 문자, 카톡은 못보내도 뉴스는 꼬박꼬박 챙겨 보는 사용자가 정말 많았습니다. 종이 신문를 더 많이 볼거라고 생각한 제 짐작과 완전히 달라서 흥미로웠던 경험입니다.

프로젝트 과정 중에 국내외 인터넷 언론 본문에서 사용되는 타이포그래피 스타일 현황을 조사했는데, 기껏 만들어놓은 자료니까 공유하려고 합니다. 국내 언론사 중 포털 사이트 메인에 올라가는 경향신문 등 40개소(네이버, 다음 인링크 포함)를 조사했고, 미국 9개소, 일본과 중국 각각 5개소, 4개소를 추가로 확인했습니다.

웹 폰트를 명시적으로 (과거 windows에 포함되어 있던) 돋움으로 설정한 곳이 두 군데나 있어서 눈에 띄었습니다. 돋움은 다소 가늘고 장평이 긴 데다가 모바일 환경에 맞지 않는 비트맵 글꼴이라 기본 폰트를 쓰는 것에 비해 별 장점이 없는 것 같은데, 아마 레거시를 남겨 둔 것이지 싶습니다.

방법

puppeteer로 본문 문단 1개에 내용이 동일한 텍스트를 삽입한 뒤 font-size, font-family, line-height, word-spacing, line-spacing, 이렇게 5개 스타일의 computed된 값을 구하고 문단을 스크린 샷으로 남겼습니다. 문단 간격, body의 padding 값 등 전체적인 레이아웃이 고려되어 있지 않아 스크린 샷만으로 가독성 등을 평가하는 것은 어렵습니다.

사용된 인터넷 기사와 코드는 부록에 첨부합니다.

인터넷 신문 본문 타이포그래피 - 국내

사실 타이포그래피보다도 눈에 띈 것은 거의 모든 언론사가 글자 크기 조절 버튼을 상단에 배치하는 등 비슷비슷한 독자적인 접근성 가이드라인을 따른 부분이었습니다. 외국에서는 WSJ 등을 제외하고는 글자 크기 조절 버튼 등의 도입 사례를 거의 찾아볼 수가 없어 확인해 보니, 웹와치라는 사단법인에서 제시한 가이드라인에 명시된 내용이었습니다. 스크린리더 중심으로 접근성을 평가하는 외국과 확연히 다른 기준입니다. 웹 개발 경험이 있는 제 입장에서는 글자 크기는 상대적으로 조절해놓고, 운영체제나 브라우저 단에서 조절해 놓은 폰트 크기 설정을 존중하는 게 더 맞는 방향같은데, 수용자 입장에서 뭐가 더 나은지 정책적인 조사가 있는지는 못찾았습니다.

인터넷 신문 상단에 배치된 다양한 글자 크기 조절 버튼
인터넷 신문 상단에 배치된 다양한 글자 크기 조절 버튼

모든 스크린샷은 2020년 6월 23일 기준입니다.

경향신문
font-size 16px
line-height 25.6px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.4px
국민일보
font-size 16px
line-height 24px
font-family "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Noto Sans Kr", "Apple SD Gothic Neo", "Malgun Gothic", dotum, 돋움, tahoma, sans-serif
노컷뉴스
font-size 18.72px
line-height 28.08px
font-family "맑은 고딕", "Malgun Gothic", 돋움, Dotum, 굴림, Gulim, Helvetica, sans-serif
letter-spacing -1px
뉴데일리
font-size 17px
line-height 28.9px
font-family "맑은 고딕", AppleSDGothicNeo-Regular, "맑은 고딕", "Malgun Gothic"
뉴스타파
font-size 16px
line-height 24.96px
font-family "Noto Sans KR", sans-serif
뉴시스
font-size 16.065px
line-height 25.704px
font-family 돋움, Dotum, 굴림, Gulim, Helvetica, sans-serif
letter-spacing -0.25px
word-spacing 3px
데일리안
font-size 22.3333px
line-height normal
font-family "Noto Sans KR regular", sans-serif
동아일보
font-size 17px
line-height 26.52px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif
letter-spacing -0.3px
디지털타임스
font-size 17px
line-height 25.5px
font-family HelveticaNeue, AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.288px
마이데일리
font-size 17px
line-height 26px
font-family "Nanum Gothic"
매일경제
font-size 19px
line-height 32px
font-family "Malgun Gothic", dotum, Gulim, Helvetica, Apple-Gothic, sans-serif
letter-spacing -0.95px
머니투데이
font-size 17px
line-height 27.999px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.28px
word-spacing 2px
문화일보
font-size 17px
line-height 23.8px
font-family "Malgun Gothic", "���� ����", dotum, ����, sans-serif
미디어오늘
font-size 18px
line-height 27px
font-family sans-serif
letter-spacing -0.9px
블로터
font-size 16px
line-height 28.8px
font-family "Nanum Barun Gothic Regular"
서울경제
font-size 17px
line-height 28.05px
font-family notokr-regular, Dotum, Arial, sans-serif
서울신문
font-size 18px
line-height 28.8px
font-family 돋움, dotum
세계일보
font-size 18px
line-height 28px
font-family MalgunGothic, "Malgun Gothic", HelveticaNeue, AppleSDGothicNeo, sans-serif
letter-spacing 0.2px
시사인
font-size 19.008px
line-height 30.888px
font-family "Noto Sans KR", "Malgun Gothic", 돋움, dotum, "Apple SD Gothic Neo", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif
letter-spacing -0.9504px
아시아경제
font-size 17px
line-height 29px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
아이뉴스24
font-size 18px
line-height 26px
font-family "Noto Sans CJK KR Regular", "Apple SD Gothic Neo", Sans-serif, sans-serif, serif, system-ui
연합뉴스
font-size 17px
line-height 27.54px
font-family sans-serif
오마이뉴스
font-size 16px
line-height 28.8px
font-family "Helvetica Neue", "Apple SD Gothic Neo", sans-serif, Helvetica-light, AppleSDGothicNeo-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움
letter-spacing -0.64px
이데일리
font-size 16px
line-height 25px
font-family Roboto, sans-serif
조선일보
font-size 17px
line-height 25.5px
font-family HelveticaNeue, AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.288px
중앙일보
font-size 18px
line-height 28.008px
font-family Helvetica-light, AppleSDGothicNeo-Light, "Noto Sans", Roboto-Light, "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.9px
코리아헤럴드
font-size 20px
line-height 30px
font-family "Noto Sans KR"
letter-spacing -0.3px
파이낸셜뉴스
font-size 17px
line-height 27.625px
font-family AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif
letter-spacing -0.68px
프레시안
font-size 16px
line-height 25.6px
font-family "Noto Sans KR", "Noto Sans", "맑은 고딕", "Malgun Gothic", "open sans", Arial, sans-serif
letter-spacing -0.8px
한겨레
font-size 16.32px
line-height 27.744px
font-family HelveticaNeue-Light, AppleSDGothicNeo-Light, sans-serif-light
한국경제
font-size 20px
line-height 29px
font-family "Helvetica Neue", "Apple SD Gothic Neo", AppleGothic, "Droid Sans fallback", sans-serif
한국일보
font-size 17px
line-height 29px
font-family "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "맑은 고딕", Helvetica, Arial, sans-serif
letter-spacing -0.5px
jtbc
font-size 18px
line-height 30.6px
font-family "Times New Roman"
letter-spacing -1px
kbs
font-size 16px
line-height 24px
font-family Helvetica-light, AppleSDGothicNeo-Medium, "Noto Sans CJK", "Noto Sans", "Malgun Gothic", "맑은 고딕", Dotum, 돋움, sans-serif
letter-spacing -0.5px
mbc
font-size 16.08px
line-height 24px
font-family "Noto Sans CJK KR", "Helvetica Neue", "Apple SD Gothic Neo", sans-serif
letter-spacing -0.804px
mbn
font-size 17px
line-height 26.52px
font-family "Malgun Gothic", dotum, Gulim, Helvetica, Apple-Gothic, sans-serif
letter-spacing -0.3px
sbs
font-size 16px
line-height 24.8px
font-family "Malgun Gothic", "맑은 고딕", dotum, 돋움, sans-serif
letter-spacing -1px
ytn
font-size 17px
line-height 26.35px
font-family "Helvetica Neue", "Apple SD Gothic Neo", 맑은고딕, "Malgun Gothic", Dotum, sans-serif
letter-spacing -1px
네이버
font-size 16px
line-height normal
font-family "Times New Roman"
다음
font-size 17px
line-height 27px
font-family AppleSDGothicNeo, "Malgun Gothic", "맑은 고딕", sans-serif

인터넷 신문 본문 타이포그래피 - 미국

굉장히 보편화된 paywall과 다양한 웹폰트가 인상적입니다. 알파벳 어권은 웹폰트 크기도 훨씬 작고 쉽게 사용할 수 있겠죠. 아름다운 세리프 폰트로 인터넷 뉴스를 볼 수 있는 것이 부럽습니다. ※정적 사이트에서 한국어 웹 폰트 최적화하기

usatoday
font-size 16.0909px
line-height 25.7455px
font-family "unify serif", Georgia, TimesNewRoman, "times new roman", Times, serif
wsj
font-size 17px
line-height 27px
font-family Exchange
nyt
font-size 20px
line-height 25px
font-family nyt-cheltenham, georgia, "times new roman", times, serif
lat
font-size 18px
line-height 31px
font-family Georgia, "times new roman", times, serif
nypost
font-size 18px
line-height 26px
font-family proxima-nova, sans-serif
nydaily
font-size 17px
line-height 28px
font-family "PT Serif", serif
wp
font-size 18px
line-height 31.5px
font-family georgia, "Times New Roman", serif
tribune
font-size 18px
line-height 28px
font-family Georgia, serif
azcentral
font-size 16.0909px
line-height 25.7455px
font-family "unify serif", Georgia, TimesNewRoman, "times new roman", Times, serif

인터넷 신문 본문 타이포그래피 - 일본, 중국

요미우리
font-size 16px
line-height 28.8px
font-family "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", メイリオ, Meiryo, "MS Pゴシック", "MS PGothic", "MS ゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif
아사히
font-size 18px
line-height 30.6px
font-family Helvetica, Arial, sans-serif
마이니치
font-size 17px
line-height 25.5px
font-family -apple-system, BlinkMacSystemFont, YuGothic, 游ゴシック, "Yu Gothic", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif
letter-spacing 0.32px
니케이
font-size 16px
line-height 28.8px
font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Helvetica, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
추니치
font-size 14px
line-height 29.96px
font-family "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif
참고소식
font-size 18px
line-height 28px
font-family "Microsoft YaHei", SimHei, arial
인민일보
font-size 18px
line-height 32.4px
font-family "Microsoft Yahei"
양쯔만보
font-size 19px
line-height 30px
font-family "Times New Roman"
광주일보
font-size 15.2972px
line-height 24.4756px
font-family "Helvetica Neue", Helvetica, Arial, sans-serif

부록

코드

https://github.com/palindrom615/journal-styles-crawler

위 리포지터리에 공개했습니다. 한 번 쓰고 버리려고 대충 짜서 민망하지만..

const puppeteer = require("puppeteer");
const filter = require("async/filter");
const map = require("async/map");
const fs = require("fs").promises;

const device = puppeteer.devices["Galaxy Note 3"];

const EXT = ".usa";

const prefix = new Date().toISOString() + EXT;

const takeScreenshot = async (page, articleTextNodes, journal) => {
  const pageScsh = await page.screenshot({
    path: `${prefix}/${journal}.png`,
    fullPage: true,
  });
  if (!articleTextNodes || !articleTextNodes[1]) {
    console.log(`${journal} no article TextNodes`);
    return;
  }
  const typeScsh = await articleTextNodes[1]
    .evaluateHandle((node) => {
      const p = node.parentNode;
      const pp = node.parentNode.parentNode;

      p.textContent =
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
      return p;
    })
    .then(async (handle) => {
      try {
        return await handle
          .asElement()
          .screenshot({ path: `${prefix}/${journal}-type.png` });
      } catch (e) {
        console.log(e, await handle.evaluate((node) => node.innerHTML));
      }
    });
  return;
};

const getInfo = async ([journal, url], browser) => {
  const page = await browser.newPage();
  await page.emulate(device);
  page.on("console", (msg) => {
    for (let i = 0; i < msg._args.length; ++i)
      console.log(`${journal}: ${msg._args[i]}`);
  });
  try {
    await page.goto(url, {
      waitUntil: "networkidle2",
      timeout: 0,
    });
  } catch (e) {
    console.log("19:page goto error: ", e, journal, url);
    return;
  }

  const textNodes = await page.$x(
    "//text()[not(parent::script|parent::style|parent::noscript) and string-length() > 80]"
  );

  const articleTextNodes = await filter(textNodes, async (elemHandle) => {
    return elemHandle.evaluate((elem) => {
      return (
        elem.wholeText.trim().split(" ").length > 40 &&
        getComputedStyle(elem.parentNode).getPropertyValue("display") !== "none"
      );
    });
  });

  const textStylePromises = map(articleTextNodes, async (elemHandle) => {
    return elemHandle.evaluate((elem) => {
      // find second paragraph over 30 words.
      try {
        style = getComputedStyle(elem.parentNode || elem);
      } catch (e) {
        console.log("36:getComputedStyle error: ", e, location.href);
        return;
      }
      return {
        txt: elem.wholeText,
        fontSize: style.getPropertyValue("font-size"),
        fontFamily: style.getPropertyValue("font-family"),
        lineHeight: style.getPropertyValue("line-height"),
        letterSpacing: style.getPropertyValue("letter-spacing"),
        wordSpacing: style.getPropertyValue("word-spacing"),
      };
    });
  });
  await takeScreenshot(page, articleTextNodes, journal);

  return textStylePromises;
};

(async () => {
  await fs.mkdir(prefix);

  const journals = (await fs.readFile(`./journals${EXT}`, "utf8"))
    .trim()
    .split("\n")
    .filter((str) => !str.startsWith("//"))
    .map((str) => str.split(","))
    .filter((arr) => arr.length === 2 && arr[1] !== "");

  const browser = await puppeteer.launch();

  const results = await map(journals, async (journal) =>
    getInfo(journal, browser)
  );
  const resultsJson = results.map((textStyle, journalIdx) => {
    return {
      journal: journals[journalIdx][0],
      site: journals[journalIdx][1],
      ...textStyle[1],
    };
  });
  await browser.close();

  await fs.writeFile(`${prefix}/result.json`, JSON.stringify(resultsJson));
  return;
})();

기사 목록


copyright(c) 2021 Whemoon Jang. All right reserved.
disclaimer